JS复习

JavaScript

一. 概念：

是一门运行在客户端浏览器的脚本语言，可以被现在的任何浏览器所解析，因为它们都自带JavaScript解析引擎。
脚本语言：不需要编译，可以直接被解析运行的。
功能：可以控制html元素，增强用户和页面的交互，让页面产生动态效果在，增强用户体验。

• JavaScript发展史（了解）：

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

• JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

二. ECMAScript：客户端脚本语言的标准

1. 基本语法：

1. 与html的结合：

   2. 内部JS：
   	* 定义<script>，标签体内容就是js代码
   3. 外部JS：
   	* 定义<script>，通过src属性引入外部的js文件
   * 注意：
   	1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
   	2. <script>可以定义多个。
   

2. 注释

   5. 单行注释：//注释内容
   6. 多行注释：/*注释内容*/
   

3. 数据类型

   1. 原始数据类型(5种基本数据类型)：面试问题

      1. number：数字，可以是整数，小数，和NaN（not a number 不是一个数字的数字类型）
      2. string:字符/字符串 ‘a’ “avs” “s”
      3. boolean:true or false
      4. null:一个对象为空 的占位符
      5. undefined:未定义，如果没有给一个变量初始化，则默认会给这个变量undefined类型

      <script>
      //number
          var num1 = 1.0;
          var num2 = 4;
          var num3 = NaN;
          document.write(num1+":"+typeof(num1)+"<br>");//1.0
          document.write(num2+ ":"+typeof(num2)+"<br>");//4
          document.write(num3+":"+typeof(num3)+"<br>");//NaN
      
      //string
          var str1 = "a";
          var str3 = "abc";
          var str2 = 'd';
          document.write(str1+":"+typeof(str1)+"<br>");//a
          document.write(str2+":"+typeof(str2)+ "<br>");//abc
          document.write(str3+":"+typeof(str3)+"<br>");//d
      
      //boolean
          var flag = true;
          document.write(flag+":"+typeof(flag)+"<br>");//true
      
      
      //null
          var nill = null;
          document.write(nill+":"+typeof(nill)+"<br>");//null
      
      //null
          var uf;
          document.write(uf+":"+typeof(uf)+"<br>");  //undefined
      
      </script>
      
      

      null
      在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。不幸的是，在 JavaScript 中，null 的数据类型是对象。 您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。 您可以通过设置值为 null 清空对象：

      问题：Undefined 与 null 的区别
      Undefined 与 null 的值相等，但类型不相等：

      typeof undefined              // undefined
      typeof null                   // object
      null === undefined            // false
      null == undefined             // true
      

   2. 引用数据类型：对象

4. 变量
   * 变量：<mark>一小块存储数据的内存空间</mark>

   • Java语言是强类型语言，而JavaScript是弱类型语言。

     • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
     • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

   • 语法：

     • var 变量名 = 初始化值;

   • typeof运算符：获取变量的类型。

     • 注：null运算后得到的是object

5. 运算符

   1. 一元运算符

   <script>
       /**
        * 自增和自减
        * @type {number}
        */
       var x = 3;
       var y = 5;
       var b = x--;  //x先赋值给b,然后x再减一
       var c = ++y;  //y先加一赋值给c,然后y再加一
       document.write(x +"----------"+y); //2--------6
       document.write("<hr>");
       /**
        * 其他数据类型转number
        */
       //字面值是number的string直接转成number
       var str = +"123"; //+number的运算符
       document.write("str==>" + typeof (str)+"："+str+"<br>"); //str==>number：123
       //字面值是string直接转成NaN(不是number的数字类型)
       var str2 = +"ab123";
       document.write("str2==>" + typeof (str2)+"："+str2); //str==>number：123
      //布尔类型转number 1:true 0:false
       var flag = +true;
       var unflag = +false;
       document.write("flag==>" + typeof (flag)+"："+flag+"<br>"); //flag==>boolean：1
       document.write("unflag==>" + typeof (unflag)+"："+unflag+"<br>"); //flag==>boolean：0
       document.write("<hr>");
   </script>
   

   2. 算术运算符

   + - * / % ...
   

   3. 赋值运算符

   = += -+....
   

   4. 比较运算符

   比较运算符： > < >= <= == ===(全等于)
   document.write(4 > 3);
   document.write(+"123" >= 120);//true
   document.write(+"123" === 123);//true
   document.write(+"123" === "123");//true
   document.write(+"123" >= 125); //false
   document.write(+"123a" >= 125); //false
   

   5. 逻辑运算符

   /**
        * 逻辑运算符     && || !：
            && (短路：左边如果能判断出结果，就不会运行右边的)
            ||(短路：左边如果能判断出结果，就不会运行右边的)
            !：
                * 其他类型转boolean：
                1. number：0或NaN为假，其他为真
                2. string：除了空字符串("")，其他都是true
                3. null&undefined:都是false
                4. 对象：所有对象都为true
        */
       //1. number ---> boolean
       var num1 = 0;
       var num2 = NaN;
       var num3 = 3;
       document.write(!num1 +"<br>");  //true
       document.write(!num2 +"<br>");   //true
       document.write(!num3 +"<br>");  //false
   
       //2. string--->boolean
       var s = "";
       var s2 = "123";
       document.write(!s +"<br>");  //true
       document.write(!s2 +"<br>");   //false
   
       //3. null&undefined:都是false --->boolean
       var n = null;
       var n2;
       document.write(!n +"<br>");  //true
       document.write(!n2 +"<br>");   //true
   
       //4. 对象：所有对象都为true--->boolean
       var obj = "";
       var data = new Date();
       document.write(!n +"<br>");  //true
       document.write(!data +"<br>");   //false
       document.write("<hr>");
   
   

   6. 三目运算符：条件运算符

       /**
        * 三元运算符
        ? : 表达式
        */
       var t = 3, k =4;
       document.write( t >= k ? false : true);  //true
   

6. 流程控制语句

   1. if...else...
   2. switch:
   	* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
   		* switch(变量):
   			case 值:
   	* 在JS中,switch语句可以接受任意的原始数据类型
   3. while
   4. do...while
   5. for
   

7. Js特殊语法

   1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
   2. 变量的定义使用var关键字，也可以不使用
        		* 用： 定义的变量是局部变量
                * 不用：定义的变量是全局变量(不建议)
   

2. 基本对象

1. function

   1. 方法的定义：形参的类型可以不用写，函数的返回值也可以不用写
   2. 方法本身是一个对象，如果方法名重复会进行覆盖
   3. 如果实参传入函数后，会被一个js的内置对象arguments（数组）接收
   4. js函数调用只与函数名有关，和函数参数无关

   <script>
       //方法定义1
       function fun1(a,b) {
           return a+b;
       }
       var rst1 = fun1(1,2);
       //alert(rst1); 3
   
       //方法定义1
       var fun2 = function(c,d) {
           return  c+d;
       }
       var rst2 = fun2(3,4)
       //alert(rst2);  7
       //alert(fun2(3,4,5));  //7 其中一个参数被内置对象arguments接收
       /**
        * 传参
        */
       //alert(fun1(1,2,3));
       function fun1(a,b,c) {
           return a + b + c;
       }
       //alert(fun1(4,5,2));  //11  ：同名函数会覆盖
       //alert(fun1(1,23)); 1+23+NaN = NaN
   
       /**
        * 求任意几位数的和
        */
       function randonadd() {
           var sum = 0
           for(var i = 0; i < arguments.length; i++){
               sum += arguments[i];
           }
           return sum;
       }
       alert(randonadd(1,2,3,4,5,6)); //21
   
   </script>
   

2. Array对象

   <script>
       /**
        * Array对象
        *      1.创建
        *          var arr1 = new array(数组列表);
        *          var arr2 = new array(默认数组长度);
        *          var arr3 = [数组列表];
        *      2.方法
        *          join:分割符
        *          push :向数组尾部添加数据
        *      3.属性
        *           length:数组的长度
        *      4.特点:
        *          1.jS中数组的类型是可变的
        *          2.数组长度是可变的(自动增长)
        */
       //1.创建
       var arr1 = new Array(1,2,3);
       var arr2 = new Array(5);
       var arr3 = [4,5,6];
       document.write(arr1 + "<br>") //1,2,3
       document.write(arr2 + "<br>")//,,,,
       document.write(arr3 + "<br>")//4,5,6
   
       //4.jS中数组的类型是可变的
       var arr4 = [1,4,"haha",4.0,true];
       document.write(arr4 +"<br>") //1,4,"haha",4.0,true
       document.write(arr4[10] +"<br>") //undefined
       arr4[10] = "haha";
       document.write(arr4 +"<br>") //1,4,haha,4,true,,,,,,haha
   
       //2.方法 join ，push
       document.write(arr4.join("*")+"<br>");//以*分割：1*4*haha*4*true******haha
       document.write(arr4.join()+"<br>");//默认以，分割：1,4,haha,4,true,,,,,,haha
   
       arr4.push(4444);
       document.write(arr4.join()+"<br>");//默认以，分割：1,4,haha,4,true,,,,,,haha,4444
   
       //3.属性
       document.write(arr4.length+"<br>"); //12
   
   </script>
   

3. Date对象

   <script>
       /**
        * Date对象
        *      1.创建
        *          var date = new Date();
        *      2.方法
        *      3.属性
        *           1.getLocalString:获取本地系统的时间格式
        *           2.getTime():获取1970-1-1年至今的毫秒值
        *      4.特点:与Java的Date很类似
        */
       var date = new Date();
       document.write(date+"<br>");
       var time = date.toLocaleDateString(); //2020/3/30
       document.write(time);
       document.write(date.toLocaleTimeString()); //2020/3/30下午8:20:01
   
       document.write(date.getTime());
   
   </script>
   

4. Math

   <script>
       /**
        * Math对象
        *      1.创建(直接使用Math.方法名())
        *      2.方法
        *
        *      3.属性：PI
        *      4.特点:与Java的Date很类似
        */
   
       document.write(Math.PI+"<br>"); //获取PI的值
       //获取[0,9)之家的随机数
       document.write(Math.random()+"<br>");
       //需求：获取1-100之间的随机数[1，100)
       var number = (Math.random() * 100 );
       var floor = Math.floor(number);  //向上取整，向下取整Math.cell()
       document.write(floor);
   
   
   </script>
   

5. Number

6. String
   查看w3cshool的官方文档

7. RegExp

   <script>
       /**
        * RegExp对象
        * 正则表达式对象：定义字符串的组成规则
        *      1.单个字符
        *          [a] [ab] [a-zA-Z0-9]
        *          a   a或b   a-z或A-Z或0-9
        *          特殊符号代表特殊字符的单个字符：
        *          1.\w：表示单个单词字符[a-zA-Z0-9]
        *          2.\d：表示单个数字[0-9]
        *      2.量词符号
        *          ?:一次或多次
        *          *：0次或多次
        *          +：至少出现一次
        *          {m,n}：出现>=m次，<=n次
        *              {m,}：至少出现m次
        *              {,n}：至多出现n次
        *      3.开始结束符号
        *          ^:开始符号
        *          $:结束符号
        *      3.创建正则对象
        *          var reg = new RegExp("正则表达式")
        *          var reg = /正则表达式/；（常用）
        *
        *          方法：test(测试)
        *
        */
       /**
        * 需求1：字符至少出现6-12次
        *
        */
   
       var reg = /^\w{6,12}$/;  //以字母开头，以字母结尾。出现6-12次
       var username = "zhangsan";
       var flag = reg.test(username);  //true
       alert(flag);
   
       username = "zhangsan32423";
       flag = reg.test(username); //false
       alert(flag);
   </script>
   

8. Global

   <script>
   
       /**
        * Global对象
        *      1.特点：全局对象，封装的方法不需要对象就可以直接调用
        *      2.方法：
        *          encodeURI():uri编码
        *          decodeURI():uri解码
        *
        *          encodeURIComponent():uri编码:字符更多
        *          decodeURIComponent():uri解码
        *
        *          parseInt():将字符串转为数字
        *              逐一匹配，如果遇到非数字即停止，截取前面的数字转为number
        *
        *          isNaN():判断一个类型是否是NaN
        *              有这个方法是因为，如果一个对象是NaN，他是无法通过if(obj == NaN)来判断的
        *              任何对象和NaN比较结果都是false
        *          eval():将js字符串转换为js脚本执行
        *
        *
        *     3. URL编码
                   传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        *
        *
        *
        */
   
        //encodeURI():uri编码
   
       var decode = decodeURI("%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2"); //传智播客
       document.write(decode +"<br>");
   
      //decodeURI():uri解码
       var encode = encodeURI(decode);
       document.write(encode +"<br>"); //%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
   
       //decodeURIComponent():uri解码
       var decode1 = decodeURIComponent("http://localhost?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2"); http://localhost?wd=传智播客
       document.write(decode1 +"<br>");
       //encodeURIComponent():uri编码:字符更多
       var encode1 = encodeURIComponent(decode1);
       document.write(encode1 +"<br>"); // http://localhost?wd=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
   
       //parseInt():将字符串转为数字
       var num = "asd123";
       //alert(parseInt(num)+1); //NaN
       num = "123asd";
       //alert(parseInt(num)+1); //124
   
       //isNaN()
       var isN = NaN;
       //alert(isN == NaN);
       //alert(isNaN(isN));
   
       //eval()
       var dd = "alert(123)";
       //alert(dd); //alert(123)
       eval(dd);  //123
   
   </script>
   

三. Dom

1. 绑定Dom事件的一个小案例（灯泡开关）

   <body>
   <img id="light" src="img/off.gif">
   <!--//绑定事件方式1: 添加属性：onclick="on()"-->
   
   <script>
       var light = document.getElementById("light");
       var flag = false;
       light.onclick =function on() {  //绑定事件方式2
           if(flag){
               light.src="img/off.gif";
               flag = false;
           }else{
               light.src="img/on.gif";
               flag = true;
           }
   
       }
       //light.onclick =on;  //绑定事件方式3
   
   </script>
   </body>
   

四. Bom

1. 概念：浏览器对象模型，将浏览器的各个对象封装成对象

2. 组成：
   Window：窗口对象
   Location：地址栏对象
   History：浏览器i历史记录（不可见），后退返回键会调用
   Screen：屏幕对象
   Navigator：浏览器对象

3. 详解对象

   1. window

   <script>
       /**windows窗口对象
        *      1.创建
        *      2.方法
        *          1.与弹出框有关的方法
        *              window.alert("xxx"); //alert()
        *              window.confirm("你开心吗？") //点击确定返回true,否则返回false
        *              window.prompt("你输入了啊")//返回用户输入内容
        *
        *          2.与打开关闭有关的方法：
        *               window.close();  //谁调用我我就执行谁;关闭窗口
        *               window.open("http://www.baidu.com")//打开新的标签页然后打开IP地址
        *
        *          3.与定时器有关的方法
        *          一次性定时器：
        *              setTimeout()  执行毫秒数后调用函数
        *                  1.参数1：js代码或方法对象
        *                  2.参数2：毫秒值
        *              clearTimeout:取消setTimeout的定时器效果，用到setTimeout的返回值来标志这个定时器
        *
        *          循环定时器
        *              setInterval()按照周期，以毫秒值来执行函数，也会返回一个唯一标志定时器的id
        *              clearInterval:取消setInterval的定时器效果，用到setInterval的返回值来标志这个定时器
        *
        *      3.属性
   		        1. 获取其他BOM对象：
   		            history
   		            location
   		            Navigator
   		            Screen:
   		        2. 获取DOM对象
   		            document
   			4. 特点
   		        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
   		        * window引用可以省略。  方法名();
        *
        */
       //1.与弹出框有关的方法
           //window.alert("哈哈哈哈");
           //window.confirm("你开心吗？");
           //document.write(window.confirm("你开心吗？"));
           //document.write(window.prompt("你输入了啊"));
       //2.与打开关闭有关的方法：
           //window.close();  //打开
           //window.open("http://www.baidu.com");
   
       //3.与定时器有关的方式
       function time() {
           alert("123");
       }
   //    var timeout = window.setTimeout(time(),4000);
   //    clearTimeout(timeout);
   
       var interval = window.setInterval(time,2000);
       clearInterval(interval);  //取消
   
   </script>
   
   

   小案例：轮播图

   <body>
   
   <div>
       <img id="img" src="img/banner_1.jpg" alt="">
   </div>
   
   <script>
       var num = 1;
       function change() {
           if(num == 4){
               num = 1;
           }
           var iamge = document.getElementById("img");
           iamge.src="img/banner_"+num+".jpg"
           num ++;
       }
       var interval = setInterval(change,3000);
   </script>
   
   </body>
   
   

   2. Location对象

   <body>
   <input type="button" value="刷新界面" onclick="reflash()">
   <input type="button" value="去百度" onclick="baidu()">
   
   <script>
       //location.reload(); 刷新界面
   function reflash() {
       location.reload();
   }
       //location.href; 链接到其它网址
   function baidu() {
       location.href="http://www.baidu.com";
   }
   </script>
   
   </body>
   

   定时器自动跳转小案例

   <body>
   
   <p>
       <span id="second">5</span>秒后自动跳转...
   </p>
   
   <script>
       var time = 5;
       function div() {
           var s = document.getElementById("second");
           s.innerHTML = --time;
           if(time == 0){
               location.href="http://www.baidu.com";
           }
       }
       function href() {
           setInterval(div,1000);
       }
   
   
       href();
   
   
   </script>
   

   3. History对象

   <body>
   
   <input type="button" value="前进" onclick="forward()">
   <a href="5.%20页面自动跳转.html" onclick="back()">页面自动跳转</a>
   <input type="button" value="后退">
   
   <script>
       document.write(history.length);  //表示从当前页面开始的访问历史记录
   
       //相当于浏览器的   ——> 按钮
       function forward() {
           history.forward();
       }
       //相当于浏览器的   <—— 按钮
       function back() {
           history.back();
       }
   
   </script>