第一章 ECMAScript

1、HTML中嵌入JS代码的第一种方式

  1. <!--
  2.    1、要实现的功能：
  3.     用户点击以下按钮，弹出消息框。
  5.    2、JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
  6.    在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何
  7.    事件都会对应一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：
  8.    事件句柄是在事件单词前添加一个on。】，而事件句柄是以HTML标签的属性存在
  9.    的。
  11.    3、onclick="js代码"，执行原理是什么？
  12.     页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
  13.     等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
  15.    4、怎么使用JS代码弹出消息框？
  16.     在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
  17.     window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。
  19.    5、JS中的字符串可以使用双引号，也可以使用单引号。
  21.    6、JS中的一条语句结束之后可以使用分号“;”，也可以不用。
  22.   -->
  23. <!-- 可以将js代码编写到标签的onclick属性中，当我们点击按钮时，js代码才会执行；
  24.   虽然可以写在标签的属性里，但是他们属于结合与行为耦合，不方便维护，不推荐使用 -->
  25. <input type="button" value="hello" onclick="window.alert('hello js')"/>
  27. <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
  29. <input type="button" value="hello" onclick="window.alert('hello zhangsan')
  30.                                             window.alert('hello lis')
  31.                                             window.alert('hello wangwu')"/>
  32. <!-- window. 可以省略。-->
  33. <!-- js代码每一条语句以分号（；）结尾，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，
  34.   而且有些时候，浏览器会加措分号，所以在开发中分号必须写,js中会忽略多个空格和换行，
  35.   所以我们可以利用空格和换行对代码进行格式化 -->
  36. <input type="button" value="hello" onclick="alert('hello zhangsan')
  37.                                             alert('hello lis')
  38.                                             alert('hello wangwu')"/>
  40. <input type="button" value="hello" onclick="alert('hello zhangsan');
  41.                                             alert('hello lis');
  42.                                             alert('hello wangwu');"/>
  43. <!-- 可以将js代码写在超链接的href属性中，这样当点击链接时，会执行js代码 -->
  44. <a href="javascript:alert('1');">测试</a>

2、HTML中嵌入JavaScript代码的第二种方式

  1. <!--
  2.     javascript的脚本块在一个页面当中可以出现多次。没有要求。
  3.     javascript的脚本块出现位置也没有要求，随意。
  4. -->
  5. <script type="text/javascript">
  6. // alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
  7. window.alert("first.......");
  8. </script>
  10. <!doctype html>
  11. <html>
  12.     <head>
  13.         <title>HTML中嵌入JS代码的第二种方式</title>
  15.         <!--样式块-->
  16.         <style type="text/css">
  17.             /*
  18.                 css代码
  19.             */
  20.         </style>
  22.         <script type="text/javascript">
  23.             window.alert("head............");
  24.         </script>
  26.     </head>
  27.     <body>
  29.         <input type="button" value="我是一个按钮对象1" />
  31.         <!--第二种方式：脚本块的方式-->
  32.         <script type="text/javascript">
  34.             /*
  35.                 暴露在脚本块当中的程序，在页面打开的时候执行，
  36.                 并且遵守自上而下的顺序依次逐行执行。（这个代
  37.                 码的执行不需要事件）
  38.             */
  39.             window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
  41.             // JS代码的注释，这是单行注释。
  42.             /*
  43.                 JS代码的多行注释。和java一样。
  44.             */
  45.             window.alert("Hello JavaScript!");
  47.         </script>
  49.         <input type="button" value="我是一个按钮对象" />
  51.     </body>
  52. </html>
  54. <script type="text/javascript">
  55. window.alert("last.......");
  56. </script>
  58. <!--
  59. /**
  60. *
  61. * javadoc注释，这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。
  62. */
  63. -->

3、HTML中嵌入JS代码的第三种方式：引入外部独立的js文件

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>
  5.   </head>
  6.   <body>
  8.     <!--在需要的位置引入js脚本文件-->
  9.     <!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
  10.    通过script标签引入，写到外部文件中可以在不同的页面同时引用，也可以利用到浏览器的缓存机制，
  11.     推荐使用的方式
  12.    -->
  13.     <!--
  14.   <script type="text/javascript" src="js/1.js"></script>
  15.   -->
  17.     <!--同一个js文件可以被引入多次。但实际开发中这种需求很少。-->
  18.     <!--
  19.   <script type="text/javascript" src="js/1.js"></script>
  20.   -->
  22.     <!--这种方式不行，结束的script标签必须有。-->
  23.     <!--
  24.   <script type="text/javascript" src="js/1.js" />
  25.   -->
  26.     <!--
  27.   <script type="text/javascript" src="js/1.js"></script>
  28.   -->
  30.     <script type="text/javascript" src="js/1.js">
  31.       // 这里写的代码不会执行。--script标签一旦引入外部文件，就不能编写代码了，即使编写了浏览器也会忽略
  32.       //如果需要则应该在创建一个新的script标签用于编写内部代码
  33.       // window.alert("Test");
  34.     </script>
  36.     <script type="text/javascript">
  37.       alert("hello jack!");
  38.     </script>
  41.   </body>
  42. </html>

4、关于JS中的变量

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>关于JS中的变量</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 回顾java中的变量：
  11.                     1、java中怎么定义/声明变量？
  12.                         数据类型 变量名;
  13.                         例如：
  14.                             int i;
  15.                             double d;
  16.                             boolean flag;
  17.                     2、java中的变量怎么赋值？
  18.                         使用“=”运算符进行赋值运算。（"="运算符右边先执行，将右边执行的结果赋值给左边的变量。）
  19.                         变量名 = 值;
  20.                         例如：
  21.                             i = 10;
  22.                             d = 3.14;
  23.                             flag = false;
  24.                     3、java语言是一种强类型语言，强类型怎么理解？
  25.                         java语言存在编译阶段，假设有代码：int i;
  26.                         那么在Java中有一个特点是：java程序编译阶段就已经确定了
  27.                         i变量的数据类型，该i变量的数据类型在编译阶段是int类型，
  28.                         那么这个变量到最终内存释放，一直都是int类型，不可能变成
  29.                         其他类型。
  30.                             int i = 10;
  31.                             double d = i; 
  32.                             这行代码是说声明一个新的变量d，double类型，把i变量中保存的值传给d。
  33.                             i还是int类型。
  35.                             i = "abc"; 这行代码编译的时候会报错，因为i变量的数据类型是int类型，不能将字符串赋给i。
  37.                             java中要求变量声明的时候是什么类型，以后永远都是这种类型，不可变。编译期强行固定变量的数据类型。
  38.                             称为强类型语言。
  40.                             public void sum(int a, int b){}
  41.                             sum(?,?);
  43.                 javascript当中的变量？
  44.                     怎么声明变量？
  45.                         var 变量名;
  46.                     怎么给变量赋值？
  47.                         变量名 = 值;
  48.                     javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行。
  49.                         var i = 100;
  50.                         i = false;
  51.                         i = "abc";
  52.                         i = new Object();
  53.                         i = 3.14;
  55.                     重点：javascript是一种弱类型编程语言。
  57.             */
  58.            // 在JS当中,当一个变量没有手动赋值的时候,系统默认赋值undefined
  59.            var i;
  60.            // undefined 在JS中是一个具体存在值.
  61.            alert("i = " + i); // i = undefined
  63.            alert(undefined);
  64.            var k = undefined;
  65.            alert("k = " + k);
  67.            // 一个变量没有声明/定义,直接访问?
  68.            // alert(age); //语法错误：age is not defined (变量age不存在。不能这样写。)
  70.            var a, b, c = 200;
  71.            alert("a = " + a);
  72.            alert("b = " + b);
  73.            alert("c = " + c);
  75.            a = false;
  76.            alert(a);
  78.            a = "abc";
  79.            alert(a);
  81.            a = 1.2;
  82.            alert(a);
  84.         </script>
  85.     </body>
  86. </html>

5、JS函数初步1

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JS函数初步</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、JS中的函数：
  11.                     等同于java语言中的方法，函数也是一段可以被重复利用的代码片段。
  12.                     函数一般都是可以完成某个特定功能的。
  14.                 2、回顾java中的方法？
  15.                     [修饰符列表] 返回值类型 方法名(形式参数列表){
  16.                         方法体;
  17.                     }
  18.                     例如：
  19.                     public static boolean login(String username,String password){
  20.                         ...
  21.                         return true;
  22.                     }
  23.                     boolean loginSuccess = login("admin","123");
  25.                 3、JS中的变量是一种弱类型的，那么函数应该怎么定义呢？
  26.                     语法格式：
  27.                         第一种方式：
  28.                             function 函数名(形式参数列表){
  29.                                 函数体;
  30.                             }
  31.                         第二种方式：
  32.                             函数名 = function(形式参数列表){
  33.                                 函数体;
  34.                             }
  36.                         JS中的函数不需要指定返回值类型，返回什么类型都行。
  37.             */
  38.            function sum(a, b){
  39.                // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
  40.                alert(a + b);
  41.            }
  43.            // 函数必须调用才能执行的.
  44.            //sum(10, 20);
  46.            // 定义函数sayHello
  47.            sayHello = function(username){
  48.                alert("hello " + username);
  49.            }
  51.            // 调用函数
  52.            //sayHello("zhangsan");
  54.         </script>
  56.         <input type="button" value="hello" onclick="sayHello('jack');" /> 
  57.         <input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
  59.     </body>
  60. </html>

6、JS函数初步2

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JS函数初步</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 java中的方法有重载机制，JS中的函数能重载吗？
  11.                     JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，JS就是这么随意。（弱类型）
  13.                 重载的含义：
  14.                     方法名或者函数名一样，形参不同（个数、类型、顺序）
  15.             */
  16.            function sum(a, b){
  17.                return a + b;
  18.            }
  20.            // 调用函数sum
  21.            var retValue = sum(1, 2);
  22.            alert(retValue);
  24.            var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
  25.            alert(retValue2); // jackundefined
  27.            var retValue3 = sum();
  28.            alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
  30.            var retValue4 = sum(1, 2, 3);
  31.            alert("结果=" + retValue4); // 结果=3
  33.            function test1(username){
  34.                alert("test1");
  35.            }
  37.            /*
  38.            在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
  39.            */
  40.            function test1(){
  41.                alert("test1 test1");
  42.            }
  44.            test1("lisi"); // 这个调用的是第二个test1()函数.
  46.         </script>
  47.     </body>
  48. </html>

6.1、JS的局部变量和全局变量

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JS的局部变量和全局变量</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 全局变量：
  11.                     在函数体之外声明的变量属于全局变量，全局变量的生命周期是：
  12.                         浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间。
  13.                         能使用局部变量尽量使用局部变量。
  14.                 局部变量：
  15.                     在函数体当中声明的变量，包括一个函数的形参都属于局部变量，
  16.                     局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放。
  17.                     局部变量生命周期较短。
  18.             */
  20.            // 全局变量
  21.            var i = 100;
  23.            function accessI(){
  24.                // 访问的是全局变量
  25.                alert("i = " + i);
  26.            }
  28.            accessI();
  30.            // 全局变量
  31.            var username = "jack";
  32.            function accessUsername(){
  33.                // 局部变量
  34.                var username = "lisi";
  35.                // 就近原则:访问局部变量
  36.                alert("username = " + username);
  37.            }
  38.            // 调用函数
  39.            accessUsername();
  40.            // 访问全局变量
  41.            alert("username = " + username);
  43.            function accessAge(){
  44.                var age = 20;
  45.                alert("年龄 = " + age);
  46.            }
  48.            accessAge();
  50.            // 报错(语法不对)
  51.            // alert("age = " + age);
  53.            // 以下语法是很奇怪的.
  54.            function myfun(){
  55.                // 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
  56.                myname = "dujubin";
  57.            }
  59.            // 访问函数
  60.            myfun();
  62.            alert("myname = " + myname); // myname = dujubin
  64.         </script>
  65.     </body>
  66. </html>

7、JS中的数据类型

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JS中的数据类型</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以
  11.                 这里也需要学习一下JS包括哪些数据类型？
  12.                     JS中数据类型有：原始类型、引用类型。
  13.                     原始类型：Undefined、Number、String、Boolean、Null
  14.                     引用类型：Object以及Object的子类
  16.                 2、ES规范(ECMAScript规范)，在ES6之后，又基于以上的6种类型之外添加了一种新的类型：Symbol
  18.                 3、JS中有一个运算符叫做typeof，该运算符的返回值为String类型，
  19.                 这个运算符可以在程序的运行阶段动态的获取变量的数据类型。
  20.                     typeof运算符的语法格式：
  21.                         typeof 变量名
  22.                     typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。
  23.                         "undefined"
  24.                         "number"
  25.                         "string"
  26.                         "boolean"
  27.                         "object"
  28.                         "function"
  30.                 4、在JS当中比较字符串是否相等使用“==”完成。没有equals。
  31.             */
  33.            /*
  34.            // 求和,要求a变量和b变量将来的数据类型必须是数字,不能是其他类型
  35.            // 因为以下定义的这个sum函数是为了完成两个数字的求和.
  36.            function sum(a, b){
  37.                if(typeof a == "number" && typeof b == "number"){
  38.                    return a + b;
  39.                }
  40.                alert(a + "," + b + "必须都为数字！");
  41.            }
  43.            // 别人去调用以上你写的sum函数.
  44.            var retValue = sum(false, "abc");
  45.            alert(retValue); // undefined
  47.            var retValue2 = sum(1, 2);
  48.            alert(retValue2); // 3
  49.            */
  51.           var i;
  52.           alert(typeof i); // "undefined"
  54.           var k = 10;
  55.           alert(typeof k); // "number"
  57.           var f = "abc";
  58.           alert(typeof f); // "string"
  60.           var d = null;
  61.           alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"
  63.           var flag = false;
  64.           alert(typeof flag); // "boolean"
  66.           var obj = new Object();
  67.           alert(typeof obj); // "object"
  69.           // sayHello是一个函数.
  70.           function sayHello(){
  72.           }
  73.           alert(typeof sayHello); // "function"
  76.         </script>
  77.     </body>
  78. </html>

7.1 Undefined类型

  1. <script type="text/javascript">
  2.   /*
  3.   Undefined类型只有一个值，这个值就是 undefined
  4.   当一个变量没有手动赋值，系统默认赋值undefined
  5.   或者也可以给一个变量手动赋值undefined。
  6.   */
  7.   var i; // undefined
  8. var k = undefined; // undefined
  10. alert(i == k); // true
  12. var y = "undefined"; // "undefined"
  13. alert(y == k); // false
  15. </script>

7.2 Number类型

  1. <script type="text/javascript">
  2.   /*
  3.   1、Number类型包括哪些值？
  4.   -1 0 1 2 2.3 3.14 100 .... NaN Infinity
  5.   整数、小数、正数、负数、不是数字、无穷大都属于Number类型。
  6.   2、isNaN() : 结果是true表示不是一个数字，结果是false表示是一个数字。
  7.   3、parseInt()函数
  8.   4、parseFloat()函数
  9.   5、Math.ceil() 函数（Math是数学类，数学类当中有一个函数叫做ceil()，作用是向上取整。）
  10.   */
  11.   var v1 = 1;
  12. var v2 = 3.14;
  13. var v3 = -100;
  14. var v4 = NaN;
  15. //Infinity 表示正无穷 -Infinity 表示负无穷 使用typeOf检查Infinity也会返回number
  16. //Number.MAX_VALUE(JS可表示的数字最大值，超过这个数则会返回Infinity)
  17. //Number.MIN_VALUE(大于0的最小值)
  18. var v5 = Infinity;
  20. // "number"
  21. alert(typeof v1);
  22. alert(typeof v2);
  23. alert(typeof v3);
  24. alert(typeof v4);
  25. alert(typeof v5);
  27. // 关于NaN (表示Not a Number，不是一个数字，但属于Number类型)
  28. // 什么情况下结果是一个NaN呢？
  29. // 运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN.
  30. var a = 100;
  31. var b = "中国人";
  32. alert(a / b); // 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
  34. var e = "abc";
  35. var f = 10;
  36. alert(e + f); // "abc10"
  38. // Infinity (当除数为0的时候，结果为无穷大)
  39. alert(10 / 0);
  41. // 思考:在JS中10 / 3 = ?
  42. alert(10 / 3); // 3.3333333333333335
  44. // 关于isNaN函数？
  45. // 用法：isNaN(数据) ,结果是true表示不是一个数字, 结果是false表示是一个数字.
  46. // isNaN : is Not a Number 
  47. function sum(a, b){
  48.   if(isNaN(a) || isNaN(b)){
  49.     alert("参与运算的必须是数字！");
  50.     return;
  51.   }
  52.   return a + b;
  53. }
  54. sum(100, "abc");
  55. alert(sum(100, 200));
  57. // parseInt():可以将字符串自动转换成数字,并且取整数位.
  58. alert(parseInt("3.9999")); // 3
  59. alert(parseInt(3.9999)); // 3
  61. // parseFloat():可以将字符串自动转换成数字.
  62. alert(parseFloat("3.14") + 1); // 4.14
  63. alert(parseFloat("3.2") + 1); // 4.2
  65. // Math.ceil()
  66. alert(Math.ceil("2.1")); // 3
  68. </script>

在JS中整数的运算基本可以保证精确 如果使用JS进行浮点运算可能得到一个不精确的值，所以不要使用JS进行对精确度要求比较高的运算

7.3 Boolean类型

  1. <script type="text/javascript">
  2.   /*
  3.   1、 JS中的布尔类型永远都只有两个值：true和false （这一点和java相同。）
  4.   2、在Boolean类型中有一个函数叫做：Boolean()。
  5.   语法格式：
  6.   Boolean(数据) 
  7.   Boolean()函数的作用是将非布尔类型转换成布尔类型。
  8.   */
  9.   // var username = "lucy";
  10.   var username = "";
  12. /*
  13. if(Boolean(username)){
  14. alert("欢迎你" + username);
  15. }else{
  16. alert("用户名不能为空！");
  17. }
  18. */
  20. /*
  21. if(username){
  22. alert("欢迎你" + username);
  23. }else{
  24. alert("用户名不能为空！");
  25. }
  26. */
  28. // 规律:“有"就转换成true,"没有"就转换成false.
  29. alert(Boolean(1)); // true
  30. alert(Boolean(0)); // false
  31. alert(Boolean("")); // false
  32. alert(Boolean("abc")); // true
  33. alert(Boolean(null)); // false
  34. alert(Boolean(NaN)); // false
  35. alert(Boolean(undefined)); // false
  36. alert(Boolean(Infinity)); // true
  38. /*
  39. while(10 / 3){
  40. alert("hehe");
  41. }
  42. */
  44. for(var i = 0; i < 10; i++){
  45.   alert("i = " + i);
  46. }
  48. // Null类型只有一个值,null
  49. alert(typeof null); // "object"
  51. </script>

7.4 String类型

1、在JS当中字符串可以使用单引号，也可以使用双引号
var s1 = ‘abcdef’;
var s2 = “test”;

2、在JS当中，怎么创建字符串对象呢？
两种方式：
第一种：var s = “abc”;
第二种（使用JS内置的支持类String）： var s2 = new String(“abc”);
需要注意的是：String是一个内置的类，可以直接用，String的父类是Object

3、无论小string还是大String，他们的属性和函数都是通用的

4、关于String类型的常用属性和函数？
常用属性：
length 获取字符串长度
常用函数：
indexOf 获取指定字符串在当前字符串中第一次出现处的索引
lastIndexOf 获取指定字符串在当前字符串中最后一次出现处的索引
replace 替换
substr 截取子字符串
substring 截取子字符串
toLowerCase 转换小写
toUpperCase 转换大写
split 拆分字符串

  1. <script type="text/javascript">        
  2.   // 小string(属于原始类型String)
  3.   var x = "king";
  4. alert(typeof x); // "string"
  6. // 大String(属于Object类型)
  7. var y = new String("abc");
  8. alert(typeof y); // "object"
  10. // 获取字符串的长度
  11. alert(x.length); // 4
  12. alert(y.length); // 3
  14. alert("http://www.baidu.com".indexOf("http")); // 0
  15. alert("http://www.baidu.com".indexOf("https")); // -1
  17. // 判断一个字符串中是否包含某个子字符串？
  18. alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
  20. // replace (注意：只替换了第一个)
  21. alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
  23. // 继续调用replace方法,就会替换第“二”个.
  24. // 想全部替换需要使用正则表达式.
  25. alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value
  27. // 考点:经常问 substr和substring的区别？
  28. // substr(startIndex, length)
  29. alert("abcdefxyz".substr(2,4)); //cdef
  30. // substring(startIndex, endIndex) 注意:不包含endIndex
  31. alert("abcdefxyz".substring(2,4)); //cd
  32. </script>

转义字符

在字符串中我们可以使用\作为转义字符，党表示一些特殊符号时可以使用 \ 进行转义
\” 表示 “
\n 表示换行

7.5 Object类型

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Object类型</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       /*
  10.       Object类型：
  11.       1、Object类型是所有类型的超类，自定义的任何类型，默认继承Object。
  12.       2、Object类包括哪些属性？
  13.       prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。
  14.       constructor属性
  15.       3、Object类包括哪些函数？
  16.       toString()
  17.       valueOf()
  18.       toLocaleString()
  19.       4、在JS当中定义的类默认继承Object，会继承Object类中所有的属性以及函数。
  20.       换句话说，自己定义的类中也有prototype属性。
  22.       5、在JS当中怎么定义类？怎么new对象？
  23.       定义类的语法：
  24.       第一种方式：
  25.       function 类名(形参){
  27.       }
  28.       第二种方式：
  29.       类名 = function(形参){
  31.       }
  32.       创建对象的语法：
  33.       new 构造方法名(实参); // 构造方法名和类名一致。
  34.       */
  35.       function sayHello(){
  37.       }
  39.       // 把sayHello当做一个普通的函数来调用.
  40.       sayHello();
  42.       // 这种方式就表示把sayHello当做一个类来创建对象.
  43.       var obj = new sayHello(); // obj是一个引用,保存内存地址指向堆中的对象.
  45.       // 定义一个学生类
  46.       function Student(){
  47.         alert("Student.....");
  48.       }
  50.       // 当做普通函数调用
  51.       Student();
  53.       // 当做类来创建对象
  54.       var stu = new Student();
  55.       alert(stu); // [object Object]
  57.       // JS中的类的定义,同时又是一个构造函数的定义
  58.       // 在JS中类的定义和构造函数的定义是放在一起来完成的.
  59.       function User(a, b, c){ // a b c是形参,属于局部变量.
  60.         // 声明属性 (this表示当前对象)
  61.         // User类中有三个属性:sno/sname/sage
  62.         this.sno = a;
  63.         this.sname = b;
  64.         this.sage = c;
  65.       }
  67.       // 创建对象
  68.       var u1 = new User(111, "zhangsan", 30);
  69.       // 访问对象的属性
  70.       alert(u1.sno);
  71.       alert(u1.sname);
  72.       alert(u1.sage);
  74.       var u2 = new User(222, "jackson", 55);
  75.       alert(u2.sno);
  76.       alert(u2.sname);
  77.       alert(u2.sage);
  79.       // 访问一个对象的属性,还可以使用这种语法
  80.       alert(u2["sno"]);
  81.       alert(u2["sname"]);
  82.       alert(u2["sage"]);
  84.       // 定义类的另一种语法
  85.       /*
  86.       Emp = function(a, b){
  87.       this.ename = a;
  88.       this.sal = b;
  89.       }
  90.       */
  92.       Emp = function(ename,sal){
  93.         // 属性
  94.         this.ename = ename;
  95.         this.sal = sal;
  96.       }
  98.       var e1 = new Emp("SMITH", 800);
  99.       alert(e1["ename"] + "," + e1.sal);
  101.       Product = function(pno,pname,price){
  102.         // 属性
  103.         this.pno = pno;
  104.         this.pname = pname;
  105.         this.price = price;
  106.         // 函数
  107.         this.getPrice = function(){
  108.           return this.price;
  109.         }
  110.       }
  112.       var xigua = new Product(111, "西瓜", 4.0);
  113.       var pri = xigua.getPrice();
  114.       alert(pri); // 4.0
  116.       // 可以通过prototype这个属性来给类动态扩展属性以及函数
  117.       Product.prototype.getPname = function(){
  118.         return this.pname;
  119.       }
  121.       // 调用后期扩展的getPname()函数
  122.       var pname = xigua.getPname();
  123.       alert(pname)
  125.       // 给String扩展一个函数
  126.       String.prototype.suiyi = function(){
  127.         alert("这是给String类型扩展的一个函数，叫做suiyi");
  128.       }
  130.       "abc".suiyi();
  132.     </script>
  133.   </body>
  134. </html>
  135. <!--
  136.  java语言怎么定义类，怎么创建对象？（强类型）
  137.   public class User{
  138.    private String username;
  139.    private String password;
  140.    public User(){
  142.    }
  143.    public User(String username,String password){
  144.     this.username = username;
  145.     this.password = password;
  146.    }
  147.   }
  148.   User user = new User();
  149.   User user = new User("lisi","123");
  151.  JS语言怎么定义类，怎么创建对象？（弱类型）
  152.   User = function(username,password){
  153.    this.username = username;
  154.    this.password = password;
  155.   }
  156.   var u = new User();
  157.   var u = new User("zhangsan");
  158.   var u = new User("zhangsan","123");
  159. -->

7.6 null NaN undefined这三个值有什么区别

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>null NaN undefined这三个值有什么区别</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       // == 是等同运算符
  10.       alert(1 == true); // true
  11.       alert(1 === true); // false
  13.       // null NaN undefined 数据类型不一致.
  14.       alert(typeof null); // "object"
  15.       alert(typeof NaN); // "number"
  16.       alert(typeof undefined); // "undefined"
  18.       // null和undefined可以等同.
  19.       alert(null == NaN); // false
  20.       alert(null == undefined); // true
  21.       alert(undefined == NaN); // false
  23.       // 在JS当中有两个比较特殊的运算符
  24.       // ==(等同运算符：只判断值是否相等)
  25.       // ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
  26.       alert(null === NaN); // false
  27.       alert(null === undefined); // false
  28.       alert(undefined === NaN); // false
  29.     </script>
  30.   </body>
  31. </html>

7.7 将其它数据类型转换为String

方法一：
调用被转换数据类型的toString()方法，该方法不会影响到原变量，它会将转换的结果返回，但是注意：null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错
方式二:
调用String()函数，并将被转换的数据作为参数传递给函数，使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法,它会将null直接转换为”null”，将undefined直接转换为”undefined”

7.8 将其它数据类型转换为Number

转换方式一：
使用Number（）函数

  1.      - 字符串 --> 数字
  2.         1. 如果是纯数字的字符串，则直接将其转换为数字
  3.         1. 如果字符串中有非数字的内容，则转换为NAN
  4.         1. 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
  5.      - 布尔 --> 数字
  6.         - true 转为 1
  7.         - false 转为 0
  8.      - null  --> 数字 0
  9.      - undefined --> 数字NaN

转换方式二：

  1.      - parseInt() **把一个字符串转换为一个整数**（有效的整数内容作为返回值拿出来）
  2.         - 只要不是数字就不读了

var a = 123w345; //只读到123

  1.         - 当第一个就不是数字，那么就返回NaN

var b = b123; //返回NaN

  1.      - parseFloat() 把一个字符串转换为一个浮点数
  2.      - 如果对一个**非String使用parseInt()或者parseFloat()，他会先转为String然后在操作**

var a = true;
a = parseInt(a); —> NaN

7.9 其他进制的数

十六进制表示
var t = 0x10;
八进制表示
var f = 010;
二进制表示
var c = 0b10;

var a = ‘070’;
a = parseInt(a); —>浏览器解析可能是70也可能是56，像”070”这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
解决方案：
a = parseInt(a,10);通过第二参数值，指定要返回值的进制类型

7.10 其他类型转为boolean

使用Boolean()函数

  1.      - 数字 --> 布尔
  2.         - 除了0和NaN，其余都为true
  3.      - 字符串 --> 布尔
  4.         - 除了空串（有一个空格都不算），其余都为true
  5.      - null和undefined都会转为false
  6.      - 对象也会转换为true

8、JS的常用事件

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS的常用事件</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       /*
  10.       JS中的事件：
  12.       blur失去焦点    
  13.       focus获得焦点
  15.       click鼠标单击
  16.       dblclick鼠标双击
  18.       keydown键盘按下
  19.       keyup键盘弹起
  21.       mousedown鼠标按下
  22.       mouseover鼠标经过
  23.       mousemove鼠标移动
  24.       mouseout鼠标离开
  25.       mouseup鼠标弹起
  27.       reset表单重置
  28.       submit表单提交
  30.       change下拉列表选中项改变，或文本框内容改变
  31.       select文本被选定
  32.       load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）
  34.       任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
  35.       onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
  36.       */
  37.       // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
  38.       // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
  39.       function sayHello(){
  40.         alert("hello js!");
  41.       }
  42.     </script>
  44.     <!--注册事件的第一种方式，直接在标签中使用事件句柄-->
  45.     <!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
  46.     <input type="button" value="hello" onclick="sayHello()"/>
  49.     <input type="button" value="hello2" id="mybtn" />
  50.     <input type="button" value="hello3" id="mybtn1" />
  51.     <input type="button" value="hello4" id="mybtn2" />
  52.     <script type="text/javascript">
  53.       function doSome(){
  54.         alert("do some!");
  55.       }
  56.       /*
  57.       第二种注册事件的方式，是使用纯JS代码完成事件的注册。
  58.       */
  59.       // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
  60.       var btnObj = document.getElementById("mybtn");
  61.       // 第二步:给按钮对象的onclick属性赋值
  62.       btnObj.onclick = doSome; // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
  63.       // 这行代码的含义是,将回调函数doSome注册到click事件上.
  65.       var mybtn1 = document.getElementById("mybtn1");
  66.       mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
  67.         alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
  68.       }
  70.       document.getElementById("mybtn2").onclick = function(){
  71.         alert("test22222222.........");
  72.       }
  73.     </script>
  75.   </body>
  76. </html>
  78. <!--
  79.  java中也有回调函数机制：
  80.   public class MyClass{
  82.    public static void main(String[] args){
  83.     // 主动调用run()方法，站在这个角度看run()方法叫做正向调用。
  84.     run();
  85.    }
  87.    // 站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
  88.    public static void run(){
  89.     System.out.println("run...");
  90.    }
  91.   }
  92. -->

9、JS代码的执行顺序（1）

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS代码的执行顺序</title>
  6.   </head>
  7.   <!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
  8.   <body onload="ready()">
  10.     <script type="text/javascript">
  12.       /*
  13.       // 第一步:根据id获取节点对象
  14.       var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
  16.       // 第二步:给节点对象绑定事件
  17.       btn.onclick = function(){
  18.       alert("hello js");
  19.       }
  20.       */
  22.       function ready(){
  23.         var btn = document.getElementById("btn");
  24.         btn.onclick = function(){
  25.           alert("hello js");
  26.         }
  27.       }
  29.     </script>
  31.     <input type="button" value="hello" id="btn" />
  33.   </body>
  34. </html>

9、JS代码的执行顺序（2）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JS代码的执行顺序</title>
  6.     </head>
  7.     <body>
  9.         <script type="text/javascript">
  10.             // 页面加载的过程中,将a函数注册给了load事件
  11.             // 页面加载完毕之后,load事件发生了,此时执行回调函数a
  12.             // 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
  13.             // 当id="btn"的节点发生click事件之后,b函数被调用并执行.
  14.             window.onload = function(){ // 这个回调函数叫做a
  15.                 document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
  16.                     alert("hello js..........");
  17.                 }
  18.             }
  20.         </script>
  22.         <input type="button" value="hello" id="btn" />
  24.     </body>
  25. </html>

10、JS代码设置节点的属性

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS代码设置节点的属性</title>
  6.   </head>
  7.   <body>
  9.     <script type="text/javascript">
  10.       window.onload = function(){
  11.         document.getElementById("btn").onclick = function(){
  12.           var mytext = document.getElementById("mytext");
  13.           // 一个节点对象中只要有的属性都可以"."
  14.           mytext.type = "checkbox";
  15.         }
  16.       }
  17.     </script>
  19.     <input type="text" id="mytext"/>
  21.     <input type="button" value="将文本框修改为复选框" id="btn"/>
  23.   </body>
  24. </html>

11、JS代码捕捉回车键

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS代码捕捉回车键</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       window.onload = function(){
  10.         var usernameElt = document.getElementById("username");
  11.         // 回车键的键值是13
  12.         // ESC键的键值是27
  13.         /*
  14.         usernameElt.onkeydown = function(a, b, c){
  15.         // 获取键值
  16.         // alert(a); // [object KeyboardEvent]
  17.         // alert(b);
  18.         // alert(c);
  19.         }
  20.         */
  21.         /*
  22.         usernameElt.onkeydown = function(event){
  23.         // 获取键值
  24.         // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
  25.         alert(event.keyCode);
  26.         }
  27.         */
  28.         usernameElt.onkeydown = function(event){
  29.           if(event.keyCode === 13){
  30.             alert("正在进行验证....");
  31.           }
  32.         }
  34.       }
  36.       // 张三程序员写了这样一个函数
  37.       /*
  38.       function sum(){
  39.       alert("sum execute......!");
  40.       }
  41.       */
  43.       /*
  44.       function sum(a){
  45.       // alert("sum execute......!");
  46.       alert(a);
  47.       }
  49.       // 李四程序员调用sum函数
  50.       // sum();
  51.       sum("hello world!");
  52.       */
  53.     </script>
  55.     <input type="text" id="username"/>
  57.   </body>
  58. </html>

12、JS的void运算符

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS的void运算符</title>
  6.   </head>
  7.   <body>
  8.     页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  9.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  10.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  11.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  12.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  13.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  14.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  15.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  16.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  17.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  18.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  19.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  20.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  21.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  22.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  23.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  24.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  25.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  26.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  27.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  28.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  29.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  30.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  31.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  32.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  33.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  34.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  35.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  36.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  37.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  38.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  39.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  40.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  41.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  42.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  43.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  44.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  45.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  46.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  47.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  48.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  50.     <!--
  51.    void运算符的语法：void(表达式)
  52.    运算原理：执行表达式，但不返回任何结果。
  53.     javascript:void(0)
  54.     其中javascript:作用是告诉浏览器后面是一段JS代码。
  55.     以下程序的javascript:是不能省略的。
  56.   -->
  57.     <a href="javascript:void(0)" onclick="window.alert('test code')">
  58.       既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
  59.     </a>
  61.     <br>
  63.     <a href="javascript:void(100)" onclick="window.alert('test code')">
  64.       既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
  65.     </a>
  67.     <br>
  69.     <!--void() 这个小括号当中必须有表达式-->
  70.     <!--
  71.   <a href="javascript:void()" onclick="window.alert('test code')">
  72.    既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
  73.   </a>
  74.   -->
  76.     <br><br><br>
  77.   </body>
  78. </html>

13、JS的控制语句

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>JS的控制语句</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       /*
  10.       1、if
  11.       2、switch
  13.       3、while
  14.       4、do .. while..
  15.       5、for循环
  17.       6、break
  18.       7、continue
  20.       8、for..in语句（了解）
  21.       9、with语句（了解）
  22.       */
  23.       // 创建JS数组
  24.       var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
  25.       // 遍历数组
  26.       for(var i = 0; i < arr.length; i++){
  27.         alert(arr[i]);
  28.       }
  30.       // for..in
  31.       for(var i in arr){
  32.         //alert(i);
  33.         alert(arr[i]);
  34.       }
  36.       // for..in语句可以遍历对象的属性
  37.       User = function(username,password){
  38.         this.username = username;
  39.         this.password = password;
  40.       }
  42.       var u = new User("张三", "444");
  43.       alert(u.username + "," + u.password);
  44.       alert(u["username"] + "," + u["password"]);
  46.       for(var shuXingMing in u){
  47.         //alert(shuXingMing)
  48.         //alert(typeof shuXingMing) // shuXingMing是一个字符串
  49.         alert(u[shuXingMing]);
  50.       }
  52.       alert(u.username);
  53.       alert(u.password);
  55.       with(u){
  56.         alert(username + "," + password);
  57.       }
  59.     </script>
  60.   </body>
  61. </html>
  63. <!--
  64.  public class Test{
  65.   public static void main(String[] args){
  66.    int[] arr = {1,2,3,4,5,6};
  67.    int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
  68.    String[] arr3 = {"a","b","c"};
  69.    String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};
  70.   }
  71.  }
  72. -->

第二章 DOM

image.png

1、DOM编程-获取文本框的value

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>DOM编程-获取文本框的value</title>
  6.   </head>
  7.   <body>
  8.     <script type="text/javascript">
  9.       /*
  10.       1、JavaScript包括三大块：
  11.       ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）
  12.       DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。
  13.       var domObj = document.getElementById("id");
  14.       BOM：Browser Object Model（浏览器对象模型）
  15.       关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
  16.       2、DOM和BOM的区别和联系？
  17.       BOM的顶级对象是：window
  18.       DOM的顶级对象是：document
  19.       实际上BOM是包括DOM的！
  20.       */
  21.       /*
  22.       window.onload = function(){
  23.       //var btnElt = window.document.getElementById("btn");
  24.       var btnElt = document.getElementById("btn");
  25.       alert(btnElt); // object HTMLInputElement
  26.       }
  27.       */
  29.       window.onload = function(){
  30.         var btnElt = document.getElementById("btn");
  31.         btnElt.onclick = function(){
  32.           /*
  33.           // 获取username节点
  34.           var usernameElt = document.getElementById("username");
  35.           var username = usernameElt.value;
  36.           alert(username);
  37.           */
  38.           // alert(document.getElementById("username").value);
  40.           // 可以修改它的value
  41.           document.getElementById("username").value = "zhangsan";
  42.         }
  43.       }
  44.     </script>
  46.     <!--
  47.   <input type="button" id="btn" value="hello" />
  48.   -->
  50.     <input type="text" id="username" />
  51.     <input type="button" value="获取文本框的value" id="btn"/>
  53.     <hr>
  55.     <script type="text/javascript">
  56.       window.onload = function(){
  57.         document.getElementById("setBtn").onclick = function(){
  58.           document.getElementById("username2").value = document.getElementById("username1").value;
  59.         }
  60.       }
  61.     </script>
  63.     <input type="text" id="username1" />
  64.     <br>
  65.     <input type="text" id="username2" />
  66.     <br>
  67.     <input type="button" value="将第一个文本框中的value赋值到第二个文本框上" id="setBtn" />
  69.     <!--blur事件：失去焦点事件-->
  70.     <!--以下代码中的this代表的是当前input节点对象,this.value就是这个节点对象的value属性。-->
  71.     <input type="text" onblur="alert(this.value)" />
  73.   </body>
  74. </html>

2、DOM编程-innerHTML和innerText操作div和span

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>DOM编程-innerHTML和innerText操作div和span</title>
  6.         <style type="text/css">
  7.             #div1{
  8.                 background-color: aquamarine;
  9.                 width: 300px;
  10.                 height: 300px;
  11.                 border: 1px black solid;
  12.                 position: absolute;
  13.                 top: 100px;
  14.                 left: 100px;
  15.             }
  16.         </style>
  17.     </head>
  18.     <body>
  20.         <!--
  21.             innerText和innerHTML属性有什么区别？
  22.                 相同点：都是设置元素内部的内容。
  23.                 不同点：
  24.                     innerHTML会把后面的“字符串”当做一段HTML代码解释并执行。
  25.                     innerText，即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。
  26.         -->
  27.         <script type="text/javascript">
  28.             window.onload = function(){
  29.                 var btn = document.getElementById("btn");
  30.                 btn.onclick = function(){
  31.                     // 设置div的内容
  32.                     // 第一步:获取div对象
  33.                     var divElt = document.getElementById("div1");
  34.                     // 第二步:使用innerHTML属性来设置元素内部的内容
  35.                     // divElt.innerHTML = "fjdkslajfkdlsajkfldsjaklfds";
  36.                     // divElt.innerHTML = "<font color='red'>用户名不能为空！</font>";
  37.                     divElt.innerText = "<font color='red'>用户名不能为空！</font>";
  38.                 }
  39.             }
  40.         </script>
  42.         <input type="button" value="设置div中的内容" id="btn"/>
  44.         <div id="div1"></div>
  46.     </body>
  47. </html>

3、DOM编程-关于正则表达式

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>DOM编程-关于正则表达式</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、什么是正则表达式，有什么用？
  11.                     正则表达式：Regular Expression
  12.                     正则表达式主要用在字符串格式匹配方面。
  14.                 2、正则表达式实际上是一门独立的学科，在Java语言中支持，C语言中也支持，javascript中也支持。
  15.                 大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多
  16.                 的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
  18.                 3、正则表达式，对于我们javascript编程来说，掌握哪些内容呢？
  19.                     第一：常见的正则表达式符号要认识。
  20.                     第二：简单的正则表达式要会写。
  21.                     第三: 他人编写的正则表达式要能看懂。
  22.                     第四：在javascript当中，怎么创建正则表达式对象！（new对象）
  23.                     第五：在javascript当中，正则表达式对象有哪些方法！（调方法）
  24.                     第六：要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
  26.                 4、常见的正则表达式符号？
  27.                     . 匹配除换行符以外的任意字符 
  28.                     \w 匹配字母或数字或下划线或汉字 
  29.                     \s 匹配任意的空白符 
  30.                     \d 匹配数字 
  31.                     \b 匹配单词的开始或结束 
  32.                     ^ 匹配字符串的开始 
  33.                     $ 匹配字符串的结束
  35.                     * 重复零次或更多次 
  36.                     + 重复一次或更多次 
  37.                     ? 重复零次或一次 
  38.                     {n} 重复n次 
  39.                     {n,} 重复n次或更多次 
  40.                     {n,m} 重复n到m次
  42.                     \W 匹配任意不是字母，数字，下划线，汉字的字符 
  43.                     \S 匹配任意不是空白符的字符 
  44.                     \D 匹配任意非数字的字符 
  45.                     \B 匹配不是单词开头或结束的位置 
  46.                     [^x] 匹配除了x以外的任意字符 
  47.                     [^aeiou] 匹配除了aeiou这几个字母以外的任意字符 
  49.                     正则表达式当中的小括号()优先级较高。
  50.                     [1-9] 表示1到9的任意1个数字（次数是1次。）
  51.                     [A-Za-z0-9] 表示A-Za-z0-9中的任意1个字符
  52.                     [A-Za-z0-9-] 表示A-Z、a-z、0-9、- ，以上所有字符中的任意1个字符。
  54.                     | 表示或者
  56.                 5、简单的正则表达式要会写
  57.                     QQ号的正则表达式：^[1-9][0-9]{4,}$
  59.                 6、他人编写的正则表达式要能看懂？
  60.                     email正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
  62.                 7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法？
  63.                     第一种创建方式：
  64.                         var regExp = /正则表达式/flags;
  65.                     第二种创建方式:使用内置支持类RegExp
  66.                         var regExp = new RegExp("正则表达式","flags");
  68.                     关于flags：
  69.                         g：全局匹配
  70.                         i：忽略大小写
  71.                         m：多行搜索（ES规范制定之后才支持m。）当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。
  73.                     正则表达式对象的test()方法？
  74.                         true / false = 正则表达式对象.test(用户填写的字符串);
  75.                         true : 字符串格式匹配成功
  76.                         false: 字符串格式匹配失败
  77.             */
  78.            window.onload = function(){
  79.                // 给按钮绑定click
  80.                document.getElementById("btn").onclick = function(){
  81.                    var email = document.getElementById("email").value;
  82.                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  83.                    var ok = emailRegExp.test(email);
  84.                    if(ok){
  85.                         //合法
  86.                         document.getElementById("emailError").innerText = "邮箱地址合法";
  87.                    }else{
  88.                        // 不合法
  89.                        document.getElementById("emailError").innerText = "邮箱地址不合法";
  90.                    }
  91.                }
  92.                // 给文本框绑定focus
  93.                document.getElementById("email").onfocus = function(){
  94.                    document.getElementById("emailError").innerText = "";
  95.                }
  96.            }
  98.         </script>
  100.         <input type="text" id="email" />
  101.         <span id="emailError" style="color: red; font-size: 12px;"></span>
  102.         <br>
  103.         <input type="button" value="验证邮箱" id="btn" />
  104.     </body>
  105. </html>

4、去除字符串的前后空白trim

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>去除字符串的前后空白trim</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             // 低版本的IE浏览器不支持字符串的trim()函数,怎么办？
  10.             // 可以自己对String类扩展一个全新的trim()函数!
  11.             String.prototype.trim = function(){
  12.                 // alert("扩展之后的trim方法");
  13.                 // 去除当前字符串的前后空白
  14.                 // 在当前的方法中的this代表的就是当前字符串.
  15.                 //return this.replace(/^\s+/, "").replace(/\s+$/, "");
  16.                 return this.replace(/^\s+|\s+$/g, "");
  17.             }
  19.             window.onload = function(){
  20.                 document.getElementById("btn").onclick = function(){
  21.                     // 获取用户名
  22.                     var username = document.getElementById("username").value;
  23.                     // 去除前后空白
  24.                     username = username.trim();
  25.                     // 测试
  26.                     alert("--->" + username + "<----");
  27.                 }
  28.             }
  29.         </script>
  30.         <input type="text" id="username" />
  31.         <input type="button" value="获取用户名" id="btn" />
  32.     </body>
  33. </html>

5、表单验证

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>表单验证</title>
  6.         <style type="text/css">
  7.             span {
  8.                 color: red;
  9.                 font-size: 12px;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <script type="text/javascript">
  15.             /*
  16.             （1）用户名不能为空
  17.             （2）用户名必须在6-14位之间
  18.             （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
  19.             （4）密码和确认密码一致，邮箱地址合法。
  20.             （5）统一失去焦点验证
  21.             （6）错误提示信息统一在span标签中提示，并且要求字体12号，红色。
  22.             （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
  23.             （8）最终表单中所有项均合法方可提交
  24.             */
  25.            window.onload = function(){
  26.                // 获取username的span标签
  27.                var usernameErrorSpan = document.getElementById("usernameError");
  28.                // 给用户名文本框绑定blur事件
  29.                var usernameElt = document.getElementById("username");
  30.                usernameElt.onblur = function(){
  31.                    // 获取用户名
  32.                    var username = usernameElt.value;
  33.                    // 去除前后空白
  34.                    username = username.trim();
  35.                    // 判断用户名是否为空
  36.                    /*
  37.                    if(username){
  38.                        // 代表username不是空字符串
  39.                        alert("username = " + username);
  40.                    }else{
  41.                        // 代表username是空字符串
  42.                        alert("username是空字符串");
  43.                    }
  44.                    */
  45.                    // if(username.length == 0){}
  46.                    if(username === ""){
  47.                        // 用户名为空
  48.                        usernameErrorSpan.innerText = "用户名不能为空";
  49.                    }else{
  50.                        // 用户名不为空
  51.                        // 继续判断长度[6-14]
  52.                        if(username.length < 6 || username.length > 14){
  53.                            // 用户名长度非法
  54.                            usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";
  55.                        }else{
  56.                            // 用户名长度合法
  57.                            // 继续判断是否含有特殊符号
  58.                            var regExp = /^[A-Za-z0-9]+$/;
  59.                            var ok = regExp.test(username);
  60.                            if(ok){
  61.                                // 用户名最终合法
  62.                            }else{
  63.                                // 用户名中含有特殊符号
  64.                                usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
  65.                            }
  66.                        }
  67.                    }
  68.                }
  70.                // 给username这个文本框绑定获得焦点事件
  71.                usernameElt.onfocus = function(){
  72.                    // 清空非法的value
  73.                    if(usernameErrorSpan.innerText != ""){
  74.                        usernameElt.value = "";   
  75.                    }
  76.                    // 清空span
  77.                    usernameErrorSpan.innerText = "";
  78.                }
  80.                // 获取密码错误提示的span标签
  81.                var pwdErrorSpan = document.getElementById("pwdError");
  82.                // 获取确认密码框对象
  83.                var userpwd2Elt = document.getElementById("userpwd2");
  84.                // 绑定blur事件
  85.                userpwd2Elt.onblur = function(){
  86.                    // 获取密码和确认密码
  87.                    var userpwdElt = document.getElementById("userpwd");
  88.                    var userpwd = userpwdElt.value;
  89.                    var userpwd2 = userpwd2Elt.value;
  90.                    if(userpwd != userpwd2){
  91.                        // 密码不一致
  92.                        pwdErrorSpan.innerText = "密码不一致";
  93.                    }else{
  94.                        // 密码一致
  95.                    }
  96.                }
  98.                // 绑定focus事件
  99.                userpwd2Elt.onfocus = function(){
  100.                    if(pwdErrorSpan.innerText != ""){
  101.                        userpwd2Elt.value = "";
  102.                    }
  103.                    pwdErrorSpan.innerText = "";
  104.                }
  106.                // 获取email的span
  107.                var emailSpan = document.getElementById("emailError");
  108.                // 给email绑定blur事件
  109.                var emailElt = document.getElementById("email");
  110.                emailElt.onblur = function(){
  111.                    // 获取email
  112.                    var email = emailElt.value;
  113.                    // 编写email的正则
  114.                    var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  115.                    var ok = emailRegExp.test(email);
  116.                    if(ok){
  117.                        // 合法
  118.                    }else{
  119.                        // 不合法
  120.                        emailSpan.innerText = "邮箱地址不合法";
  121.                    }
  122.                }
  124.                // 给emailElt绑定focus
  125.                emailElt.onfocus = function(){
  126.                    if(emailSpan.innerText != ""){
  127.                        emailElt.value = "";
  128.                    }
  129.                    emailSpan.innerText = "";
  130.                }
  132.                // 给提交按钮绑定鼠标单击事件
  133.                var submitBtnElt = document.getElementById("submitBtn");
  134.                submitBtn.onclick = function(){
  135.                    // 触发username的blur userpwd2的blur email的blur
  136.                    // 不需要人工操作,使用纯JS代码触发事件.
  137.                    usernameElt.focus();
  138.                    usernameElt.blur();
  140.                    userpwd2Elt.focus();
  141.                    userpwd2Elt.blur();
  143.                    emailElt.focus();
  144.                    emailElt.blur();
  146.                    // 当所有表单项都是合法的时候,提交表单
  147.                    if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
  148.                        // 获取表单对象
  149.                        var userFormElt = document.getElementById("userForm");
  150.                        // 可以在这里设置action,也可以不在这里.
  151.                        userFormElt.action = "http://localhost:8080/jd/save";
  152.                        // 提交表单
  153.                        userFormElt.submit();
  154.                    }
  155.                }
  156.            }
  157.         </script>
  159.         <!--这个表单提交应该使用post，这里为了检测，所以使用get。-->
  160.         <!-- <form id="userForm" action="http://localhost:8080/jd/save" method="get"> -->
  161.         <form id="userForm" method="get">
  162.             用户名<input type="text" name="username" id="username"/><span id="usernameError"></span><br>
  163.             密码<input type="text" name="userpwd" id="userpwd"/><br>
  164.             确认密码<input type="text" id="userpwd2" /><span id="pwdError"></span><br>
  165.             邮箱<input type="text" name="email" id="email" /><span id="emailError"></span><br>
  166.             <!-- <input type="submit" value="注册" /> -->
  167.             <input type="button" value="注册" id="submitBtn"/>
  168.             <input type="reset" value="重置" />
  169.         </form>
  171.     </body>
  172. </html>

6、复选框的全选和取消全选

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>复选框的全选和取消全选</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.             window.onload = function(){
  11.                 var firstChk = document.getElementById("firstChk");
  12.                 firstChk.onclick = function(){
  13.                     // 获取第一个复选框的选中状态(复选框对象checkbox对象)
  14.                     //alert(firstChk.checked);
  15.                     // 根据name获取所有元素
  16.                     var aihaos = document.getElementsByName("aihao");
  17.                     if(firstChk.checked){
  18.                         // 全选
  19.                         for(var i = 0; i < aihaos.length; i++){
  20.                             aihaos[i].checked = true;
  21.                         }
  22.                     }else{
  23.                         // 取消全选
  24.                         for(var i = 0; i < aihaos.length; i++){
  25.                             aihaos[i].checked = false;
  26.                         }
  27.                     }
  28.                 }
  29.             }
  30.             */
  32.             window.onload = function(){
  34.                 var aihaos = document.getElementsByName("aihao");
  35.                 var firstChk = document.getElementById("firstChk");
  36.                 firstChk.onclick = function(){
  37.                     for(var i = 0; i < aihaos.length; i++){
  38.                         aihaos[i].checked = firstChk.checked;
  39.                     }
  40.                 }
  42.                 // 对以上数组进行遍历
  43.                 var all = aihaos.length;
  44.                 for(var i = 0; i < aihaos.length; i++){
  45.                     aihaos[i].onclick = function(){
  46.                         var checkedCount = 0;
  47.                         // 总数量和选中的数量相等的时候,第一个复选框选中.
  48.                         for(var i = 0; i < aihaos.length; i++){
  49.                             if(aihaos[i].checked){
  50.                                 checkedCount++;
  51.                             }
  52.                         }
  53.                         firstChk.checked = (all == checkedCount);
  54.                         /*
  55.                         if(all == checkedCount){
  56.                             firstChk.checked = true;
  57.                         }else{
  58.                             firstChk.checked = false;
  59.                         }
  60.                         */
  61.                     }
  62.                 }
  63.             }
  64.         </script>
  65.         <input type="checkbox" id="firstChk"/><Br>
  66.         <input type="checkbox" name="aihao" value="smoke" />抽烟<Br>
  67.         <input type="checkbox" name="aihao" value="drink" />喝酒<Br>
  68.         <input type="checkbox" name="aihao" value="tt" />烫头<Br>
  69.     </body>
  70. </html>

7、获取下拉列表选中项的value

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>获取下拉列表选中项的value</title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.         <select onchange="alert(this.value)">
  10.             <option value="">--请选择省份--</option>
  11.             <option value="001">河北省</option>
  12.             <option value="002">河南省</option>
  13.             <option value="003">山东省</option>
  14.             <option value="004">山西省</option>
  15.         </select>
  16.         -->
  18.         <script type="text/javascript">
  19.             window.onload = function(){
  20.                 var provinceListElt = document.getElementById("provinceList");
  21.                 provinceListElt.onchange = function(){
  22.                     // 获取选中项的value
  23.                     alert(provinceListElt.value);
  24.                 }
  25.             }
  26.         </script>
  27.         <select id="provinceList">
  28.             <option value="">--请选择省份--</option>
  29.             <option value="001">河北省</option>
  30.             <option value="002">河南省</option>
  31.             <option value="003">山东省</option>
  32.             <option value="004">山西省</option>
  33.         </select>
  35.     </body>
  36. </html>
  38. <!--
  39. 省份和市区的关系是：1对多
  40. 省份表t_province
  41. id      pcode      pname
  42. ----------------------------
  43. 1       001        河北省
  44. 2       002        河南省
  45. 3       003        山东省
  46. 4       004        山西省
  48. 市区表t_city
  49. id      ccode      cname       pcode(fk)
  50. ----------------------------------------------
  51. 1       101        石家庄         001
  52. 2       102        保定         001
  53. 3       103        邢台         001
  54. 4       104        承德         001
  55. 5       105        张家口         001
  56. 6       106        邯郸         001
  57. 7       107        衡水         001
  59. 前端用户选择的假设是河北省，那么必须获取到河北省的pcode，获取到001
  60. 然后将001发送提交给服务器，服务器底层执行一条SQL语句：
  61.     select * from t_city where pcode = '001';
  63.     返回一个List集合，List<City> cityList;
  65.     cityList响应浏览器，浏览器在解析cityList集合转换成一个新的下拉列表。
  67. -->

8、显示网页时钟

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>显示网页时钟</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 关于JS中内置的支持类：Date，可以用来获取时间/日期。
  11.             */
  12.            // 获取系统当前时间
  13.            var nowTime = new Date();
  14.            // 输出
  15.            // document.write(nowTime);
  16.            // 转换成具有本地语言环境的日期格式.
  17.            nowTime = nowTime.toLocaleString();
  18.            document.write(nowTime);
  19.            document.write("<br>");
  20.            document.write("<br>");
  21.            // 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
  22.            var t = new Date();
  23.            var year = t.getFullYear(); // 返回年信息,以全格式返回.
  24.            var month = t.getMonth(); // 月份是:0-11
  25.            // var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
  26.            var day = t.getDate(); // 获取日信息.
  27.            document.write(year + "年" + (month+1) + "月" + day + "日");
  29.            document.write("<br>");
  30.            document.write("<br>");
  32.            // 重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
  33.            //var times = t.getTime();
  34.            //document.write(times); // 一般会使用毫秒数当做时间戳. (timestamp)
  36.            document.write(new Date().getTime());
  38.         </script>
  40.         <script type="text/javascript">
  41.             function displayTime(){
  42.                 var time = new Date();
  43.                 var strTime = time.toLocaleString();
  44.                 document.getElementById("timeDiv").innerHTML = strTime;
  45.             }
  47.             // 每隔1秒调用displayTime()函数
  48.             function start(){
  49.                 // 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
  50.                 v = window.setInterval("displayTime()", 1000);    
  51.             }
  53.             function stop(){
  54.                 window.clearInterval(v);
  55.             }
  56.         </script>
  57.         <br><br>
  58.         <input type="button" value="显示系统时间" onclick="start();"/>
  59.         <input type="button" value="系统时间停止" onclick="stop();" />
  60.         <div id="timeDiv"></div>
  61.     </body>
  62. </html>

9、内置支持类Array

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>内置支持类Array</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.             // 创建长度为0的数组
  11.             var arr = [];
  12.             alert(arr.length);
  14.             // 数据类型随意
  15.             var arr2 = [1,2,3,false,"abc",3.14];
  16.             alert(arr2.length);
  18.             // 下标会越界吗
  19.             arr2[7] = "test"; // 自动扩容.
  21.             document.write("<br>");
  23.             // 遍历
  24.             for(var i = 0; i < arr2.length; i++){
  25.                 document.write(arr2[i] + "<br>");
  26.             }
  28.             // 另一种创建数组的对象的方式
  29.             var a = new Array();
  30.             alert(a.length); // 0
  32.             var a2 = new Array(3); // 3表示长度.
  33.             alert(a2.length);
  35.             var a3 = new Array(3,2);
  36.             alert(a3.length); // 2
  37.             */
  39.            var a = [1,2,3,9];
  40.            var str = a.join("-");
  41.            alert(str); // "1-2-3-9"
  43.            // 在数组的末尾添加一个元素(数组长度+1)
  44.            a.push(10);
  45.            alert(a.join("-"));
  47.            // 将数组末尾的元素弹出(数组长度-1)
  48.            var endElt = a.pop();
  49.            alert(endElt);
  50.            alert(a.join("-"));
  52.            // 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
  53.            // push压栈
  54.            // pop弹栈
  56.            // 反转数组.
  57.            a.reverse();
  58.            alert(a.join("="));
  59.         </script>
  60.     </body>
  61. </html>

第三章 BOM

1、BOM编程-open和close

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>BOM编程-open和close</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、BOM编程中，window对象是顶级对象，代表浏览器窗口。
  11.                 2、window有open和close方法，可以开启窗口和关闭窗口。
  12.             */
  14.         </script>
  16.         <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
  17.         <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" />
  18.         <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" />
  19.         <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" />
  20.         <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
  22.         <input type="button" value="打开表单验证"  onclick="window.open('002-open.html')"/>
  23.     </body>
  24. </html>

2、关闭当前窗口

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>close</title>
  6.     </head>
  7.     <body>
  8.         <input type="button" value="关闭当前窗口" onclick="window.close();" />
  9.     </body>
  10. </html>

3、弹出消息框和确认框

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>弹出消息框和确认框</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             function del(){
  10.                 /*
  11.                 var ok = window.confirm("亲，确认删除数据吗？");
  12.                 //alert(ok);
  13.                 if(ok){
  14.                     alert("delete data ....");
  15.                 }
  16.                 */
  17.                 if(window.confirm("亲，确认删除数据吗？")){
  18.                     alert("delete data ....");
  19.                 }
  20.             }
  21.         </script>
  22.         <input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />
  24.         <!--删除操作的时候都要提前先得到用户的确认。-->
  25.         <input type="button" value="弹出确认框(删除)" onclick="del();" />
  26.     </body>
  27. </html>

4、当前窗口设置为顶级窗口

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>当前窗口设置为顶级窗口</title>
  6.         <!--窗体-->
  7.         <!-- <frameset cols="30%,*">
  8.             <frame src="http://www.baidu.com" />
  9.             <frame src="005-child-window.html" />
  10.         </frameset> -->
  11.     </head>
  12.     <body>
  14.         <!--在当前窗口中隐藏的内部窗体。-->
  15.         <!-- <iframe src="http://www.baidu.com"></iframe> -->
  17.         <iframe src="005-child-window.html"></iframe>
  19.     </body>
  20. </html>

5、child-window（将当前窗口设置为顶级窗口）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>child-window</title>
  6.     </head>
  7.     <body>
  8.         child window.
  9.         <script type="text/javascript">
  10.             window.onload = function(){
  11.                 var btn = document.getElementById("btn");
  12.                 btn.onclick = function(){
  13.                     if(window.top != window.self){
  14.                         //window.top = window.self;
  15.                         window.top.location = window.self.location;
  16.                     }
  17.                 }
  18.             }
  19.         </script>
  20.         <input type="button" value="将当前窗口设置为顶级窗口" id="btn" />
  21.     </body>
  22. </html>

6、history对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>history对象</title>
  6.     </head>
  7.     <body>
  8.         <a href="007.html">007页面</a>
  9.         <input type="button" value="前进" onclick="window.history.go(1)"/> 
  10.     </body>
  11. </html>

7、前进、后退

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>007</title>
  6.     </head>
  7.     <body>
  8.         007 page!
  9.         <input type="button" value="后退" onclick="window.history.back()" />
  10.         <input type="button" value="后退" onclick="window.history.go(-1)" />
  11.     </body>
  12. </html>

8、设置浏览器地址栏上的URL

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>设置浏览器地址栏上的URL</title>
  6.     </head>
  7.     <body>
  9.         <script type="text/javascript">
  10.             function goBaidu(){
  11.                 //var locationObj = window.location;
  12.                 //locationObj.href = "http://www.baidu.com";
  14.                 // window.location.href = "http://www.jd.com";
  15.                 // window.location = "http://www.126.com";
  17.                 //document.location.href = "http://www.sina.com.cn";
  18.                 document.location = "http://www.tmall.com";
  19.             }
  20.         </script>
  22.         <input type="button" value="新浪" onclick="goBaidu();"/>
  24.         <input type="button" value="baidu" onclick="window.open('http://www.baidu.com');" />
  26.     </body>
  27. </html>
  29. <!--
  30.     总结，有哪些方法可以通过浏览器往服务器发请求？
  31.         1、表单form的提交。
  32.         2、超链接。<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
  33.         3、document.location
  34.         4、window.location
  35.         5、window.open("url")
  36.         6、直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
  38.         以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
  39. -->

第四章 JSON

1、JSON概述

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>JSON</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             /*
  10.                 1、什么是JSON，有什么用？
  11.                     JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)
  12.                     JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
  13.                 2、JSON是一种标准的轻量级的数据交换格式。特点是：
  14.                     体积小，易解析。
  15.                 3、在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。
  16.                     XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）
  17.                 4、JSON的语法格式：
  18.                     var jsonObj = {
  19.                         "属性名" : 属性值,
  20.                         "属性名" : 属性值,
  21.                         "属性名" : 属性值,
  22.                         "属性名" : 属性值,
  23.                         ....
  24.                     };
  25.             */
  26.            // 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
  27.             var studentObj = {
  28.                 "sno" : "110",
  29.                 "sname" : "张三",
  30.                 "sex" : "男"
  31.             };
  33.             // 访问JSON对象的属性
  34.             alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
  37.             // 之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.
  38.             Student = function(sno,sname,sex){
  39.                 this.sno = sno;
  40.                 this.sname = sname;
  41.                 this.sex = sex;
  42.             }
  43.             var stu = new Student("111","李四","男");
  44.             alert(stu.sno + "," + stu.sname + "," + stu.sex);
  46.             // JSON数组
  47.             var students = [
  48.                 {"sno":"110","sname":"张三","sex":"男"},
  49.                 {"sno":"120","sname":"李四","sex":"男"},
  50.                 {"sno":"130","sname":"王五","sex":"男"}
  51.             ];
  53.             // 遍历
  54.             for(var i = 0; i < students.length; i++){
  55.                 var stuObj = students[i];
  56.                 alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
  57.             }
  58.         </script>
  59.     </body>
  60. </html>

2、复杂一些的JSON对象

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>复杂一些的JSON对象。</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             var user = {
  10.                 "usercode" : 110,
  11.                 "username" : "张三",
  12.                 "sex" : true,
  13.                 "address" : {
  14.                     "city" : "北京",
  15.                     "street" : "大兴区",
  16.                     "zipcode" : "12212121",
  17.                 },
  18.                 "aihao" : ["smoke","drink","tt"]
  19.             };
  21.             // 访问人名以及居住的城市
  22.             alert(user.username + "居住在" + user.address.city);
  24.             /*
  25.                 请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
  26.             */
  27.             var jsonData = {
  28.                 "total" : 3,
  29.                 "students" : [
  30.                     {"name":"zhangsan","birth":"1980-10-20"},
  31.                     {"name":"lisi","birth":"1981-10-20"},
  32.                     {"name":"wangwu","birth":"1982-10-20"}
  33.                 ]
  34.             };
  36.         </script>
  37.     </body>
  38. </html>

3、eval函数

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>eval函数</title>
  6.     </head>
  7.     <body>
  8.         <!--
  9.             JSON是一种行业内的数据交换格式标准。
  10.             JSON在JS中以JS对象的形式存在。
  11.         -->
  12.         <script type="text/javascript">
  13.             /*
  14.                 eval函数的作用是：
  15.                     将字符串当做一段JS代码解释并执行。
  16.             */
  17.            /*
  18.            window.eval("var i = 100;");
  19.            alert("i = " + i); // i = 100
  20.            */
  22.            // java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
  23.            // 也就是说java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象.
  24.            // 可以使用eval函数,将json格式的字符串转换成json对象.
  25.            var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
  26.            // 将以上的json格式的字符串转换成json对象
  27.            window.eval("var jsonObj = " + fromJava);
  28.            // 访问json对象
  29.            alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据.
  31.            /*
  32.             面试题：
  33.                 在JS当中：[]和{}有什么区别？
  34.                     [] 是数组。
  35.                     {} 是JSON。
  37.                 java中的数组：int[] arr = {1,2,3,4,5};
  38.                 JS中的数组：var arr = [1,2,3,4,5];
  39.                 JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
  40.            */
  42.            var json = {
  43.                "username" : "zhangsan"
  44.            };
  45.            // JS中访问json对象的属性
  46.            alert(json.username);
  48.            // JS中访问json对象的属性
  49.            alert(json["username"]);
  51.         </script>
  52.     </body>
  53. </html>

4、设置table的tbody

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>设置table的tbody</title>
  6.     </head>
  7.     <body>
  8.         <script type="text/javascript">
  9.             // 有这些json数据
  10.             var data = {
  11.                 "total" : 4,
  12.                 "emps" : [
  13.                     {"empno":7369,"ename":"SMITH","sal":800.0},
  14.                     {"empno":7361,"ename":"SMITH2","sal":1800.0},
  15.                     {"empno":7360,"ename":"SMITH3","sal":2800.0},
  16.                     {"empno":7362,"ename":"SMITH4","sal":3800.0}
  17.                 ]
  18.             };
  20.             // 希望把数据展示到table当中.
  21.             window.onload = function(){
  22.                 var displayBtnElt = document.getElementById("displayBtn");
  23.                 displayBtnElt.onclick = function(){
  24.                     var emps = data.emps;
  25.                     var html = "";
  26.                     for(var i = 0; i < emps.length; i++){
  27.                         var emp = emps[i];
  28.                         html += "<tr>";
  29.                         html += "<td>"+emp.empno+"</td>";
  30.                         html += "<td>"+emp.ename+"</td>";
  31.                         html += "<td>"+emp.sal+"</td>";
  32.                         html += "</tr>";
  33.                     }
  34.                     document.getElementById("emptbody").innerHTML = html;
  35.                     document.getElementById("count").innerHTML = data.total;
  36.                 }
  37.             }
  38.         </script>
  39.         <input type="button" value="显示员工信息列表" id="displayBtn" />
  40.         <h2>员工信息列表</h2>
  41.         <hr>
  42.         <table border="1px" width="50%">
  43.             <tr>
  44.                 <th>员工编号</th>
  45.                 <th>员工名字</th>
  46.                 <th>员工薪资</th>
  47.             </tr>
  48.             <tbody id="emptbody">
  49.                 <!--
  50.                 <tr>
  51.                     <td>7369</td>
  52.                     <td>SMITH</td>
  53.                     <td>800</td>
  54.                 </tr>
  55.                 <tr>
  56.                     <td>7369</td>
  57.                     <td>SMITH</td>
  58.                     <td>800</td>
  59.                 </tr>
  60.                 <tr>
  61.                     <td>7369</td>
  62.                     <td>SMITH</td>
  63.                     <td>800</td>
  64.                 </tr>
  65.                 -->
  66.             </tbody>
  67.         </table>
  68.         总共<span id="count">0</span>条数
  69.     </body>
  70. </html>