JS基础知识总结

一.核心

1.1 ECMAScript+DOM+BOM=JS（组成部分）

ECM:浏览器内置对象 js核心 语法规范
BOM：浏览器对象模型 操作API集合
DOM：文档对象模型 操作页面元素API集合
1.2 特点：
交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）

二.书写位置

2.1 内嵌式：

<script>
alert("内嵌式")
</script>

2.2 外链式：
建一个文件类型为.js的文件，在该文件中写js语句，通过script标签对引入到html页面中。

<script src="js文件路径地址">这里不能写js语句</script>

5.3 行内式：
直接写在标签身上

<input type="button" value="点我呀!" οnclick="alert('点我干啥!^6^');">
<button οnclick="alert('恭喜你,中 500 万.');">点我呀!</button>

三.注释

单行注释：		//	注释语句		快捷键ctrl+/
多行注释：		/* 注释语句 */    快捷键ctrl+shift+/   
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释

四.数据类型

简单 数据
数值（number）：整数和小数（比如1和3.14）
字符串（string）：文本（比如Hello World）。
布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）
undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值
null：表示空值，即此处的值为空。
对象（object）：各种值组成的集合。
未定义型：undefined
复杂数据类型：Object
获取变量类型：typeOf
转换：toString() String()等

数值型：var i = 1;	var d = 2.35;
字符串：var str = "用心学习";
布尔型：var b = true;

五.变量

声明

var 变量名称 = 存储的数据;   	(variable 变量)

命名规范

1.	只能由字母、数字、_（下划线）、$（美元符号）组成。
2.	不能以数字开头。
3.	命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。

六、检测数据类型

typeof(value)

返回这个变量的类型.
说明 : 同一个变量, 可以进行不同类型的数据赋值

<script type="text/javascript">
    
    var a;
    alert(typeof a);  // undefined
 
    a = 998;
    alert(typeof a); // number
 
    a = "用心学习";
    alert(typeof a); // string

七、算数运算符

• • • / % ++ –

1.	由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
2.	字符串和其他的数据使用+号运算，会连接成一个新的字符串。
3.	字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number

<script>
 
    alert(1234 / 1000 * 1000); // 1234
  
    var s = "12";
     s -= 10;
    alert(s);  // 2
 
    var s = "aa";
    s -= 10;
    alert(s);  // NaN       Not a Number 不是一个数字
 
    var s = "12";
    s += 10;
    alert(s);       // 1210 
 
</script>

八.逻辑运算符

>		>=		<		<=  	!=		
==	等于（只比较内容）	===	恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false

<script>
 
    // 请问1 : 3 > 5, 结果为 ?
    alert(3 > 5);   // false
 
    // 请问2 : “22” == 22  结果为 ?
    alert("22" == 22); // true  (仅仅判断数值)
 
    // 请问3 : “22” === 22  结果为 ?
    alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
    
</script>

九、逻辑运算符

&&	 	与		true&&false		====>false
|| 		或		true||false			====>true
！ 		非		!true				====>false
false（理解）：false,  0,  null,  undefined 
true（理解）：true, 非0,  非null,  非undefined
 
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)

十、if语句

<script>
 
      var score = 59;
 
      if (score >= 90) {
          alert("优秀");
      } else if (score >= 80) {
          alert("良好");
      } else if (score >= 60) {
          alert("及格");
      } else {
          alert("不及格");
      }

十一、switch语句

<script>
 
      var score = 59;
 
      // 需求 : 将需要一个整型数值, 不想要小数点.
      // window 对象的 parseInt 方法.
      score = window.parseInt(score / 10 + "");
      // alert(score);
 
      switch (score) {
          case 10:
          case 9:
              alert("优秀!");
              break;
          case 8:
              alert("良好!");
              break;
          case 7:
          case 6:
              alert("及格!");
              break;
          default:
              alert("不及格!");
              break;
      }
 
  </script>

十二、循环结构 while、do-while. for;

<script>
 
    // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
 
    var count = 0;
 
    // 1. 遍历 1~100 之间的所有整型数值
    for (var i = 1; i <= 100; i++) {
 
        // 2. 判断
        if (i % 3 == 0 && i % 7 == 0) {
            // alert(i);
            console.log(i);
            // 3. 累加个数
            count++;
        }
    }
 
    // 4. 查看结果
    // alert(count);
    console.log(count);

十三、函数

是一种数据类型的函数都是Function的实例对象

13.1自定义函数
格式：

function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
1、函数只有被调用后才会执行
2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
3.js中出现二个重名的函数名、后者会把前面的覆盖掉

script type="text/javascript">
 
    // 定义一个函数 : function
    function demo2() {
        return 666;
    }
 
    // 调用函数 :
    alert(demo2());
 
</script>

<script type="text/javascript">
 
    // 定义一个函数 : function
    function demo3(a, b) {
        return a + b;
    }
 
    // 调用函数 :
    alert(demo3(10, 20));//显示30
 
</script>

十四、匿名函数

没有名字的函数

function(形式参数){函数体}
调用方式：将匿名函数赋值给一个变量，通过变量名调用函数
定义函数并赋值给变量：var fn = function(形式参数){函数体}
调用函数：fn(实际参数);

<script type="text/javascript">
 
    // 匿名函数 : 没有名称的函数
    var func = function(i, u) {
        alert(i + " love " + u);
    }
 
    // 调用函数 :
   func("柳岩", "小白");//显示柳岩love小白
 
</script>

十五、js事件

事件三要素：

1. 事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
2. 事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
3. 执行指令：事件触发后需要执行的代码，一般使用函数进行封装 语法格式：事件源.事件类型=执行指令

十六.作用域

全局变量：不使用var声明的变量 尽量不用
局部变量：固定的代码块中可访问的变量 如函数内部
块级作用域：ES6之前没有
闭包： 有权访问另一个函数作用域中变量的函数 一个作用域可以访问另外一个函数内部的局部变量
作用：延申变量的作用域
递归：函数本身调用自己 很容易产生“栈溢出” 必须加退出条件return

<script type="text/javascript"> 
            function f(num){ 
                if(num<1){ 
                    return 1; 
                }else{ 
                    return f(num-1)*num; 
                } 
            } 
        </script> 
    </head> 
    <body> 
        <script type="text/javascript"> 
            alert("10!的结果为："+f(10)); 
        </script> 

十七.作用域链

只有函数可以制造此结构

十八.自定义对象

无序属性集合 特征–属性 行为–方法

十九.关键字

new：返回新对象 内部创建的一个空对象 使用this指向这个新对象

unction Animal(name){
        this.name = name;
    }
    Animal.color = "black";
    Animal.prototype.say = function(){
        console.log("I'm " + this.name);
    };
    var cat = new Animal("cat");

    console.log(
       cat.name,  //cat
       cat.height //undefined
    );
    cat.say(); //I'm cat

    console.log(
       Animal.name, //Animal
       Animal.color //back
    );
    Animal.say(); //Animal.say is not a function

this：它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用