JavaScript学习笔记

阅读数: 次 2020-05-08

JavaScript学习笔记

一、 JavaScript语法

1. 标识符

采用字母、数字、下划线、美元符号，且不能以数字开头。

不能使用关键字和保留字。

区别大小写。

长度没限制。

行业规范：望文生义。

2. 数据类型

javascript是弱类型的。

数字型型Number

布尔类型Boolean

字符串型String

Object型

未定义类型undefined

空值型null (没有对象的地址)

3. 变量

声明：

var 变量名;

赋值：

变量名=值;

<script>
        var  a;
        a=10;
        a="abcdefg";
        a=new  Object();
        a=null;
        a=undefined;
        alert(a);
</script>

4. 运算符

算数运算符

正负+  -
加减乘除取模  +  -  *   /   %
前后++
前后--
字符串拼接+

注意：没有整除！

赋值运算符

1 2	= += -= *= /= %=

比较运算符

1 2	== != > >= < <=

逻辑运算符

1
2
3

&&    &    
||    |
!

三目运算符

1	(boolean条件)? 语句1 : 语句2

5. 流程控制语句

（1）流程结构

默认，顺序结构。

选择结构。

循环结构。

（2）if语句

单分支：

1
2
3

if(boolean条件){
	条件为真的语句组；
}

双分支：

if(boolean条件){
条件为真的语句组；	
}else{
条件为假的语句组；
}

多分支：

if(条件1){
	语句组1
}else   if(条件2){
	语句组2；
}
。。。
else  if(条件n-1){
	语句组n-1；
}else{
	语句组n;
}

（3）switch语句

switch(表达式){

	case   常量1：语句组1；[break;]
	case   常量2：语句组1；[break;]
	....
	default:语句组n;
}

（4）for语句

for(初始化表达式;条件语句;迭代语句){
	//循环体
}

比如：
for(var   i=0;i<10;i++){
	alert(i);
}

（5）while循环

1
2
3

while(boolean条件){
	循环体
}

（6）do while条件

1
2
3

do{
	循环体
}while(boolean条件);

（7）流程跳转语句

break;

continue;

<script>
        var   y=2020,m=8,d=31;
        var   sum=0;
        for(var  i=1;i<m;i++){
              //第i月的总天数
              var  total=0;
              switch(i){
                  case 1:
                  case 3:
                  case 5:
                  case 7:
                  case 8:
                  case 10: 
                  case 12:total=31;break;
                  case 4:
                  case 6: 
                  case 9:
                  case 11:total = 30;break;    
                  case 2: 
                            if(y%400 == 0 || (y%4 == 0 && y % 100 != 0)){
                                   total = 29; 
                            }else{
                                total = 28;
                            }
              }           
              sum += total;
        }
        sum += d;
        alert(sum);

    </script>

6. 函数定义

函数也就是方法，一个有名字的语句组。

定义：

function   函数名(参数){
	方法体
}

参数：直接写名字即可。

调用：

方法名(实参);

方法必须调用才会执行！！！

return语句：

1
2
3

return  数据;    //方法体结束，返回一条数据。

return;              //方法体结束

<script>
     var  a=10;
     function  test1(){
         a++;
         alert(a);
     }
     function  test2(b){
          a+=b;
          alert(a);   
     }   
     test1();
     test2(30);        
     var   balance=200;
     function   quqian(money){
          if(money>balance){
                alert("余额不足");
                return; 
          }   
          balance-=money;
     }
     quqian(100);
     quqian(200);
     var  name="zhangsan";
     function   getName(){
         return  name;
     }
     alert(getName());
 </script>

二、事件绑定

1. 事件驱动

JavaScript是用于制作网页的语言。

JavaScript是一种事件驱动的脚本语言。

当页面上发生某件事情，调用我们的JavaScript代码来处理。

我们需要将这个事件和我们的JavaScript代码进行绑定。

2. html事件

https://www.runoob.com/tags/ref-eventattributes.html

（1）鼠标事件

click点击事件

dblclick双击事件

mouseover鼠标移入事件

mouseout鼠标移出事件

mousemove鼠标移动事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        function  danji(){
            alert("单击了一次");
        }

        function   shuangji(){
            alert("双击了一次");
        }

        function   over(){
            alert("鼠标移入div上");
        }

        function   out(){
            alert("鼠标移出div");
        }

        function   move(){
            alert(2);
        }

    </script>
</head>
<body>

    <p  onclick="danji();" > 单击事件</p>
    <p  ondblclick="shuangji();"> 双击事件</p>

    <div  style="width: 200px;height: 200px;background-color: red;"
          onmouseover="over();"   onmouseout="out();"
    >

    </div>


    <div  style="width: 200px;height: 200px;background-color: green;"
          onmousemove="move();"
    >

    </div>
    
</body>
</html>

（2）键盘事件

keydown键盘按下事件

keyup键盘弹起事件

keypress键盘按下弹起事件

当前元素必须先获得焦点，才能触发键盘事件！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        function down(){
               //alert(1);
               //alert(event.keyCode); 
               document.getElementById("ii").innerHTML=event.keyCode;
        }
    </script>

    <input  type="text"   onkeydown="down();">

    <div  id="ii">

    </div>
    
</body>
</html>

（3）表单事件

submit表单提交事件

focus获得焦点事件

blur失去焦点事件

change内容改变事件

（4）加载事件

load加载完毕事件，主要用于页面和图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function   ready(){
            alert("页面加载完了");
        }
    </script>
</head>
<body  onload="ready();">


    <p>
        1111
    </p>
    <p>
        2222
    </p>
    
</body>
</html>

3. 事件绑定

（1）第一种：静态绑定

<html标签 onXXX=”JavaScript代码”>。。。。

（2）第二种：动态绑定

元素对象.onXXX=方法;