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>
    
    1. 算术运算符
    + - * / % ...
    
    1. 赋值运算符
    = += -+....
    
    1. 比较运算符
    比较运算符: > < >= <= == ===(全等于)
    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
    
    1. 逻辑运算符
    /**
         * 逻辑运算符     && || !:
             && (短路:左边如果能判断出结果,就不会运行右边的)
             ||(短路:左边如果能判断出结果,就不会运行右边的)
             !:
                 * 其他类型转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>");
    
    
    1. 三目运算符:条件运算符
        /**
         * 三元运算符
         ? : 表达式
         */
        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>
    
    
    1. 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>
    
    1. 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>
    
页面下部广告