ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript(2)

2022-07-18 09:35:49  阅读:134  来源: 互联网

标签:function 结点 console log JavaScript var document


JavaScript(2)

函数

定义与调用函数

 

类型1:

function abs(x){
    if(x>0){
       return x;
    }
    else{
       return -x;
    }
}

>abs(10)
10
>abs(-10)
10
>abs()
NaN

//一旦执行return,函数结束,如果没有执行return,函数也有返回值,结果是undefined

 

类型2:

var abs=function (x){
   if(typeof x !=="number"){
         throw "it's not a number";  //手动抛出异常
    }
   if(x>0){
        return x;
    }
    else{
        return -x;
    }
}

>abs("")
Uncaught it's not a number //报错
>abs(-12)
12

function(...){}是一个匿名函数,但可以把值赋给前面的变量

JavaScript可以传递多个参数,也可以不传递参数

=== arguments ===

arguments相当于是一个数组,会接收到全部参数,如果要获取其他参数,需把定义的参数去除

var abs=function (x){
   if(arguments.length>1){
       var a=arguments[1];
       return a;
  }
}

//传入的参数是多个时,可以通过arguments捕获到传入的其他参数

=== rest ===

获取除了已经定义的参数之外的参数

//以前:
function abs(x,...rest){
   if(arguments.length>1){
       for(var i=1;i<arguments.length;i++){
           console.log(arguments[i]);
      }
  }
}

//现在,使用rest
function abs(x,...rest){
   return rest;
}
>(4) [3, 2, 1, -12]

变量的作用域

在函数体内声明,在函数体外不能使用,可以使用闭包

function abs(x,...rest){
   var a=1;
   return rest;
}
a+=1;

>Uncaught ReferenceError: a is not defined

 

两个方法的变量名可以相等

function bs(x,){
   var a=1;
}
function cs(x){
   var a=1;
}

>不会报错

 

内部方法可访问外部函数的变量,外部函数不能访问内部函数的变量

function abs(){
   var a=2;
   function a(){
       var b=a+2;
       return b;
  }
   var z=b+1;
   return z;
}

>报错

 

当函数内外命名了同一个变量,调用时由内向外查找变量

function abs(){
   var a=2;
   function ab(){
       var a=3;
       console.log(a);   //调用ab()中的a
  }
   ab();
   console.log(a);    //调用abs()中的a
}
abs();

>3
>2

 

提升变量的作用域,js执行引擎自动将定义提在最前面,赋值不变。所以可以把所需的变量统一提至开头集中定义,便于代码维护。

function abs(){
   var a='2'+b;
   console.log(a);
   var b='1';
}

>2undefined
//等同于
function abs(){
   var b;
   var a='2'+b;
   console.log(a);
   b='1';
}

 

全局变量

定义在函数外面,函数内部所有方法可以调用

var z=1;
function abs(){
   console.log(z);
}

>1

 

全局对象window

默认所有的全局变量都会自动绑定在window对象下面

var x="xxx";
function abs(){
   alert(x);   //alert本身也是绑定在window下的
   alert(window.x);
}

<script>
   var x="xxx";
   alert(x);  //弹出弹框
   window.alert(x); //弹出弹框

   var old=window.alert;
   old(x);
/*相当于Scanner in=new Scanner(System.in)
  in.next();
*/

   window.alert=function(){
  }
   alert(x);//未弹出弹框
//相当于Java中的重写

</script>

JavaScript实际上只有一个全局作用域,任何变量(函数)假设没有在函数作用范围内找到,就会逐层向外查找,如果在全局作用域都没找到会爆出异常。

 

规范:

由于全局变量都会绑定在window上,为了避免冲突,我们要设置一个全局对象,将以后需要用的变量都绑定在这个对象上,需要使用的话,通过该对象调用。

var use={};

use.name='lerry';
use.add=function(a,b){
   return a+b;
}
console.log(use.name);
console.log(use.add(12,5));

>lerry
>17

 

局部作用域

使用let ,解决局部作用域问题

function a(){
   for(let i=1;i<=10;i++){
       console.log(i);
  }
   console.log(i+1);
}
a()
>输出1~10

 

常量

使用const关键字定义常量,将变量变成只读变量

const PI=3.14

方法

var person={
   //属性:person.name
   name:'lerry',
   age:18,
   //方法:person.birth()
   birth:function(){
       let birth=2022-this.age;
       return birth;
  }
}

console.log(person.birth());
>2004

apply:可以控制this的指向

function get(){
   var birth=2022-this.age;
   return birth;
}
var person={
   name:'lerry',
   age:18,
   birth:get
}

get()
//直接调用get()会报错

apply(指向对象,传参)
get.apply(person,[]);
>2004

判断对象类型,使用typeof,返回对象类型

Date

var now=new Date();
console.log(now.getFullYear());//年
console.log(now.getMonth()); //月 0~11月
console.log(now.getDate()); //日
console.log(now.getDay());  //星期
console.log(now.getHours() );//时
console.log(now.getMinutes()); //分
console.log(now.getSeconds());  //秒
var a=now.getTime();
console.log(now.getTime()); //时间戳 全球统一,从1970~现在的毫秒数
console.log(new Date(a));  //时间戳转为具体时间
console.log(now.toLocaleString());  //获取本地时间

JSON

JSON

是一种轻量级的数据交换格式,简洁和清晰的层次结构,有效地提升网络传输效率.

javascript中一切皆为对象,任何js支持的类型都可以用JSON转换

格式:

  • 对象和map用{}

  • 数组和list用[]

  • 所有键值对用key:value

1.使用stringify()转换为json对象

var person={
   name:"lerry",
   age:18,
   sex:"women"
}
console.log(person);
var jsonUser=JSON.stringify(person);
console.log(jsonUser);

>{name: 'lerry', age: 18, sex: 'women'}  person对象
   age: 18
   name: "lerry"
   sex: "women"
  [[Prototype]]: Object
>{"name":"lerry","age":18,"sex":"women"}  json对象

2.使用parse()将字符串转化成json对象

var User=JSON.parse('{"name":"lerry","age":"18"}')
console.log(User);

>{name: 'lerry', age: '18'}
   age: "18"
   name: "lerry"
  [[Prototype]]: Object

JSON是一个字符串,JS对象是一个对象

var person={
   name:'linda',
   age:19
}
console.log(person);
var jsonuser=JSON.stringify(person);
console.log(jsonuser);

>{name: 'linda', age: 19}
age: 19
name: "linda"
[[Prototype]]: Object
>{"name":"linda","age":19}

typeof(jsonuser)
'string'
typeof(person)
'object'

面向对象编程

面向对象编程的两大重点是类和对象,但是在Javascript中,有一些区别

原型对象

使用class继承

1).定义一个类

//定义一个类
class student{
   //构造器
   constructor(name){
       this.name=name;
  }
   
   //方法
   hello(){
       alert("Hello");
  }

}
//实例化
var lerry=new student(lerry);
lerry.hello();

2)使用class继承

class student extends person{
   constructor(name,grade){
       super(name);
       this.grade=grade;
  }
   hello(){
       alert("Hello js");
  }
}
var xixi=new student(xixi);
xixi.hello();

原型链:

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

image-20220715163331787

原型链就是蓝色的这条线

操作BOM对象

BOM:浏览器对象模型

window:代表窗口

//获取窗口的高度宽度
>window.innerHeight
399
>window.innerWidth
718
>window.outerHeight
918
>window.outerWidth
732
//当页面框发生变化后,innerHeight也会发生变化

navigator:封装了浏览器的信息

>navigator.appVersion
获取版本号
>navigator.appName
'Netscape'

navigator对象可以被人为修改,不建议用它的属性来编写代码

screen:获取屏幕信息

//获取屏幕的尺寸
>creen.height
960
>screen.width
1440

location:代表当前页面的URL信息

>location.host    //主机
'www.baidu.com'
>location.href     //当前跳转网页
'https://www.baidu.com/?tn=02003390_64_hao_pg'
>location.protocol   //协议
'https:'
>location.reload()   //重新加载
>location.assign(“待跳转页面href”)   //实现页面跳转

Document:代表当前页面信息,HTML DOM文档树

>document.title   //获取当前页面title
>document.title="xxx"   //修改title

获取具体的文档树节点

<ul id="subject">
   <li>java</li>
<li>python</li>
<li>javascript</li>
<li>c++</li>
</ul>
<script>
   var ti=document.getElementById('subject');
</script>

>console.log(ti);
<ul id=•"subject">
   <li>•…•</li>•
   <li>•…•</li>•
   <li>•…•</li>•
   <li>•…•</li>•
</ul>•

document可以获取网页的cookie

服务器端可以设置cookie:httpOnly保证安全

history:代表浏览器的历史记录

>history.back()   //前进
>history.forward()   //回退上一次打开的网页

操作DOM对象

 

获取DOM结点

//对应选择器
document.getElementsByTagName('ul');  //通过标签名获取结点
document.getElementById(); //通过ID获取结点
document.getElementsByClassName();   //通过class获取结点
document.getElementsByName();   //通过名称获取结点

更新DOM结点

  1. a1.innerText='xxx' //加入文本

  2. a1.innerHTML='<><>' //添加一段HTML代码,可以解析一段HTML代码

    <div id="id1"> </div>
    <script>
       var a1=document.getElementById("id1");
    </script>

    >a1.innerText='I love Java'   //页面显示文本
    >a1.innerHTML='<ol><li>java</li><li>python</li>'  //页面显示有序列表
       1.java
       2.python
  1. a1.style. //修改元素样式

    属性使用字符串包裹,-用驼峰命名替换

    >a1.style.fontSize='50px'   //字体大小
    >a1.style.color='blue'     //颜色
    >a1.style.fontFamily='楷体'   //字体样式
    >a1.style.padding='2em'  

==可以使用js操作页面==

 

删除结点

删除结点的步骤:1.获取父节点

2.删除自己

类似于单链表删除一个元素

<div id="id1">
   <p id='p1'>Java</p>
<p id="p2">我很想你</p>
</div>
<script>
   var a=document.getElementById("p1");
var father=document.getElementById("id1");
</script>

>a.parentElement    //获取父节点
>father.removeChild(p1)  //删除p1
>father.children[2];    //获取父元素的第3个子结点

**注意:

father.removeChild(father.children[0])

father.removeChild(father.children[1])

father.removeChild(father.children[2])

执行以上代码并不能将第1,2,3个子元素删除,因为删除是一个动态的过程,删除第一个子元素后,原来的第二个子元素就变成了第一个了。

插入结点

使用a.innerText=''可以插入结点,但是如果这个结点已经存在一个结点时,会覆盖掉原来的结点。

==append追加已存在的结点==

<body>
   <h1 id="h1">今天天气真好</h1>
   <div id="id1">
       <p id='p1'>javase</p>
       <p id="p2">javaee</p>
       <p id="p3">javame</p>
   </div>
   <script>
       var a=document.getElementById("h1");
   var father=document.getElementById("id1");
father.appendChild(a);   //此时h1就变成了father的子元素
   </script>
</body>

==创建一个新的结点==

var h2=document.createElement('h2');   //创建一个新的结点
h2.id='new';   //给这个结点一个id
h2.innerText='Do you love java?';   //结点中的内容
father.appendChild(h2);   //追加结点

==给结点设置属性值==

st.setAttribute('属性名','属性值');
/*注意:只能通过getElementById()操作获取的元素才能直接使用setAttribute设置属性*/
var body1=document.getElementsByTagName('body');  
body1[0].setAttribute('style','color:pink');  //设置内容
/*此时获取到的是body数组形式,想要设置具体的属性,需要选择对应的具体元素*/

操作表单

表单:

文本框,隐藏域(hidden),下拉框,单选框,复选框,密码框……

==获取提交的信息==

var text_user=document.getElementById(' ')

  1. 获取结点的值: text_user.value;

修改结点的值: text_user.value='';

  1. 单选框,复选框获取结点的值

    <div id="form">
           <form id="getinfor" action="" method="get">
               <label for="user">用户名:</label>
               <input type="text" id='user' name="user"  placeholder="输入用户名" >
               <br>
               <label for="pwd">密码:</label>
               <input type="password" id="pwd" name="pwd" >
               <br>
               <select>
                   <option>中国</option>
                   <option>美国</option>
                   <option>英国</option>
                   <option>俄罗斯</option>
               </select>
               <br>
               <input type="radio" id='boy' name="sex" value="boy">男生
               <input type="radio"  id="girl" name="sex" value="girl">女生
               <br>
               <input type="checkbox"  name="language">中文
               <input type="checkbox"  name="language">英文
               <input type="checkbox"  name="language">法语
               <br>
               <input type="submit" value="提交" name="submit">
               <input type="reset" value="重置" name="reset">
           </form>
       </div>

       <script>
           var a=document.getElementById('user');
           var b=document.getElementById('pwd');
           var boy=document.getElementById('boy');
           var girl=document.getElementById('girl');
       </script>

    //获取的值是编写时value属性的值
    >boy.value
    'boy'
    >girl.value
    'girl'

    //检查网页中是否选中该选项
    >boy.checked
    false
    >girl.checked
    true

    //选择某个特定选项也可以赋值实现
    >boy.checked='true'
    >girl.checked='true'

    ==提交表单==

    1. 为button绑定触发事件,使用onclick='绑定函数()'

      为form绑定触发事件,使用onsubmit='return 绑定函数()'

    2. 编写函数

 <div id="form">
       <form id="getinfor" action="" method="get">
           <label for="user">用户名:</label>
           <input type="text" id='user' name="user"  placeholder="输入用户名" >
           <br>
           <label for="pwd">密码:</label>
           <input type="password" id="pwd" name="pwd" >
          <br>
           <button type="button" onclick="check()">提交</button>
       </form>
   </div>

   <script>
      function check(){
        var user=document.getElementById('user');
        var pwd=document.getElementById('pwd');
        console.log(user.value);
        console.log(pwd.value);
        if(user.value==='admin'){
           alert('管理员');
        }
        if(pwd.value==='123456'){
           alert('密码正确');
        }
      }
   </script>

加密数据可以使用RSA,MD5等许多方法



标签:function,结点,console,log,JavaScript,var,document
来源: https://www.cnblogs.com/lerrysee/p/16489253.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有