• JavaScript——基于原型编程、多范式的动态脚本语言

    目录

    JavaScript

    01 关于JavaScript

    1.1 JS的发展历史

    1.2 JS的特性

    1.3 JS的组成

    1.4 JSP和JS的区别

    02 在HTML中嵌入JS代码的三种方式

    2.1 事件与事件句柄

    2.2 第一种方式（事件句柄式）：

    2.3 第二种方式（脚本块）：

    2.4 第三种方式（外部引入js文件）：

    03 变量

    3.1 变量的声明与赋值

    3.2 函数的定义与使用

    3.3 全局变量和局部变量

    04 数据类型

    4.1 undefined

    4.2 Number

    4.2.1 NaN

    4.2.2 关于Number的函数

    4.3 Boolean

    4.4 Null

    4.5 String

    4.5.1 常用函数

    4.5.2 substr和substring的区别

    4.6 Object

    4.7 null、NaN和undefined

    05 JS事件

    5.1 常用事件

    5.2 注册事件方式

    5.3 代码执行顺序

    5.4 设置节点的属性

    5.5 捕捉回车键

    5.6 JS运算符

    5.7 JS的控制语句

    5.7.1 for in结构

    5.7.2 with结构

    06 DOM

    6.1 文本框value

    6.2 inner HTML和innerText属性

    6.3 正则表达式

    6.3.1 常用正则表达式符号

    6.3.2 常用限定符符号

    6.3.3 常用的反义代码

    6.3.4 创建表达式对象以及调用方式

    6.3.5 验证邮箱格式

    6.3.6扩展字符串trim函数

    6.4 表单验证

    6.5 复选框的全选和取消全选

    6.6 获取下拉列表选项中的value

    6.7 内置支持类

    6.7.1 获取日期/日期Date

    6.7.2 数组内置类

    07 BOM

    7.1 open与close

    7.2 弹出确认框

    7.3 历史记录

    7.4 设置地址栏的url

    08 JSON

    8.1 代码比较

    8.2 JSON对象

    8.3 eval函数

    8.4 设置table的tbody

    8.5 面试题

    JavaScript

    01 关于JavaScript

    1.1 JS的发展历史

    • JavaScript是运行在浏览器上的脚本语言。简称JS。
    • JavaScript是网景公司（NetScape）的 布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript。
    • LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
    • 在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript。
    • JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似。他们运行的位置不同，Java运行在JVM当中，JavaScript运行在浏览器的内存当中。
    • 网景公司1998年被美国在线收购。网景公司最著名的就是领航者浏览器：Navigator浏览器。
    • LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。
    • 当Navigator浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，
      开始研发只支持IE浏览器的脚本语言，叫做JScript。
    • JavaScript和JScript并存的年代，程序员是很痛苦的，因为程序员要写两套程序。在这种情况下，有一个非营利性组织站出来了，叫做ECMA组织（欧洲计算机协会）ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。
    • 现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了。）

    1.2 JS的特性

    • JavaScript程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。

    • JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

    • Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。

    1.3 JS的组成

    完整的JavaScript由语言基础,BOM,DOM组成

    • ECMAScript：JS的核心语法（ES规范 / ECMA-262标准）

    • DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。

      var domObj = document.getElementById("id");

    • BOM：Browser Object Model（浏览器对象模型）
      关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程

    1.4 JSP和JS的区别

    • JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
    • JS : JavaScript（运行在浏览器上。）

    02 在HTML中嵌入JS代码的三种方式

    2.1 事件与事件句柄

    • 事件：JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click
    • 事件句柄：并且任何事件都会对应一个事件句柄叫做：onclick
    • 事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on。而事件句柄是以HTML标签的属性存在的。
    • οnclick= “js代码” 的执行原理
      页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
    • 怎么使用JS代码弹出消息框？
      在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。
      window对象有一个函数叫做:alert，用法是：window.alert(“消息”);这样就可以弹窗了。

    应用案例

    script标签javascript代码必须放在script标签中，用户点击以下按钮，弹出消息框

    2.2 第一种方式（事件句柄式）：

    • 事件句柄=“js代码”，把这段代码注册到onclick之后，有操作后，js代码会在浏览器被自动调用
    • 弹窗消息的用法是：window.alert(“消息”)
    • JS中的一条语句结束之后可以使用分号“;”，也可以不用
    • JS中的字符串可以使用双引号，也可以使用单引号，内双外单或者内单外双。
    1. <input type="button" value="hello" onclick="window.alert('hello js')"/>
    2. <input type="button" value="hello" onclick='window.alert("hello jscode")'/>

    alert弹窗中window可以省略

    <input type="button" value="hello" onclick='alert("hello jscode")'/>

    完整示列代码：

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>HTML中嵌入JS代码的第一种方式title>
    5. 	head>
    6. 	<body>
    7.  
    8. 	<input type="button" value="hello" onclick="window.alert('hello js')"/>
    9.  
    10. 	<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
    11.  
    12. 	<input type="button" value="hello" onclick="window.alert('hello zhangsan')
    13. 												window.alert('hello lis')
    14. 												window.alert('hello wangwu')"/>
    15.  
    16. 	
    17. 	<input type="button" value="hello" onclick="alert('hello zhangsan')
    18. 												alert('hello lis')
    19. 												alert('hello wangwu')"/>
    20.  
    21. 	body>
    22. html>

    2.3 第二种方式（脚本块）：

    通过脚本块的方式，页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）。（CSS为样式块）

    • javascript的脚本块在一个页面当中可以出现多次。
    • javascript的脚本块出现位置也没有要求，
    • alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）

    脚本块的格式为script

    1. <script type="text/javascript">
    2. 	window.alert("first.......");
    3. script>

    完整代码如下

    1. <script type="text/javascript">
    2. 	window.alert("first.......");
    3. script>
    4. html>
    5. <html>
    6. 	<head>
    7. 		<title>HTML中嵌入JS代码的第二种方式title>
    8. 		<script type="text/javascript">
    9. 			window.alert("head............");
    10. 		script>
    11. 	head>
    12. 	<body>
    13.         <input type="button" value="我是一个按钮对象1" />
    14.  
    15.             
    16.             <script type="text/javascript">
    17.  
    18.                 window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。
    19.             script>
    20.  
    21.             <input type="button" value="我是一个按钮对象" />
    22.  
    23. 	body>
    24. html>

    2.4 第三种方式（外部引入js文件）：

    • 同一个js文件可以被引入多次，但实际开发中这种需求很少
    • 引入js文件的同时再写代码，文件会被执行，但代码块不会被执行。

    完整代码如下

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。title>
    5. 	head>
    6. 	<body>	
    7. 	<script type="text/javascript" src="js/1.js">
    8. 		// 这里写的代码不会执行。
    9. 		// window.alert("Test");
    10. 	script>
    11.  
    12. 	<script type="text/javascript">
    13. 		alert("hello jack!");
    14. 	script>
    15. 	body>
    16. html>

    js文件

    1. window.alert("hello js!");
    2. window.alert("hello js!");
    3. window.alert("hello js!");

    03 变量

    3.1 变量的声明与赋值

    • java中要求变量声明的时候是什么类型，不可变。编译期强行固定变量的数据类型称为强类型语言。数据类型 变量名;
    • 对比javascript，javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行，var 变量名;
    1. var i = 100;
    2. i = false;
    3. i = "abc";
    • 当系统没有赋值的时候，会默认给undefined，undefined是系统的一个存在值
    • 当系统直接没声明直接调用一个值，会报错
    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>关于JS中的变量title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 		var a, b, c = 200;
    10. 		   alert("a = " + a);
    11. 		   alert("b = " + b);
    12. 		   alert("c = " + c);
    13. 	   a = false;
    14. 	   alert(a);
    15. 	   
    16. 	   a = "abc";
    17. 	   alert(a);
    18. 	   
    19. 	   a = 1.2;
    20. 	   alert(a);
    21. 	   
    22. 	script>
    23. body>
    24. html>

    3.2 函数的定义与使用

    JS函数类似Java中的方法

    Java中定义方法的格式是

    [修饰符列表] 返回值类型 方法名(形式参数列表){
    方法体;
    }

    1. public static boolean login(String username,String password){
    2. 	...
    3. 	return true;
    4. }
    5.  
    6. boolean loginSuccess = login("admin","123");

    JS是一种弱类型，JS中的函数不需要指定返回值类型，返回什么类型都行

    函数的定义格式是

    1. //第一种方式：
    2. function 函数名(形式参数列表){
    3. 	函数体;
    4. }
    5. //第二种方式：
    6. 函数名 = function(形式参数列表){
    7. 	函数体;
    8. }

    例如函数

    1. function sum(a, b){
    2.     // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
    3.     alert(a + b);
    4. }
    5.  
    6. sum(10,20);//函数必须调用才能执行
    7.  
    8. //或者第二个格式
    9. // 定义函数sayHello
    10. sayHello = function(username){
    11. 	alert("hello " + username);
    12. }
    13. 		   
    14. // 调用函数
    15. sayHello("zhangsan");

    配合单击按钮框的逻辑完整代码如下

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>JS函数初步title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 		function sum(a, b){
    10. 		   // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
    11. 		   alert(a + b);
    12. 	   }
    13.  
    14. 	   sayHello = function(username){
    15. 		   alert("hello " + username);
    16. 	   }
    17. 	   
    18. 	   // 调用函数
    19. 	   sayHello("zhangsan");
    20. 	   
    21. 	script>
    22. 	
    23. 	<input type="button" value="hello" onclick="sayHello('jack');" /> 
    24. 	<input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />
    25. 	
    26. body>
    27. html>

    重载的含义是：方法名或者函数名一样，形参不同（个数、类型、顺序）

    • JS当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，js本身自带重载。（弱类型）
    • 在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖

    完整代码如下:

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>JS函数初步title>
    6. 	head>
    7. 	<body>
    8. 		<script type="text/javascript">
    9. 		   function sum(a, b){
    10. 			   return a + b;
    11. 		   }
    12. 	   // 调用函数sum
    13. 	   var retValue = sum(1, 2);
    14. 	   alert(retValue);
    15. 	   
    16. 	   var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined
    17. 	   alert(retValue2); // jackundefined
    18. 	   
    19. 	   var retValue3 = sum();
    20. 	   alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)
    21. 	   
    22. 	   var retValue4 = sum(1, 2, 3);
    23. 	   alert("结果=" + retValue4); // 结果=3
    24. 	   
    25. 	   function test1(username){
    26. 		   alert("test1");
    27. 	   }
    28. 	   
    29. 	   /*
    30. 	   在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。
    31. 	   */
    32. 	   function test1(){
    33. 		   alert("test1 test1");
    34. 	   }
    35. 	   
    36. 	   test1("lisi"); // 这个调用的是第二个test1()函数.
    37. 	   
    38. 	script>
    39. body>
    40. html>

    3.3 全局变量和局部变量

    • 在函数体之外声明的变量属于全局变量；在函数体当中声明的变量，包括一个函数的形参都属于局部变量
    • 全局变量的生命周期是浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间
    • 局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放，局部变量生命周期较短

    演示代码

    1. // 全局变量
    2. var username = "jack";
    3. function accessUsername(){
    4. // 局部变量
    5.  var username = "lisi";
    6. // 就近原则:访问局部变量
    7.  alert("username = " + username);
    8.  }
    9.  // 调用函数
    10.  accessUsername();
    11. // 访问全局变量
    12.  alert("username = " + username);

    先输出lisi后输出jack
    因为局部变量结束后便释放了，所以局部变量没有值
    而如果单纯没有定义全局变量，全在全局中输出局部变量那会报错

    1. function accessAge(){
    2. var age = 20;
    3. alert("年龄 = " + age);
    4. }
    5. 		   
    6. accessAge();
    7. 		   
    8. // 报错(语法不对)
    9.  alert("age = " + age);

    如果一个变量在声明的时候没有定义var，默认是全局变量（即使在局部变量中声明）

    1. // 以下语法是很奇怪的.
    2. function myfun(){
    3. // 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.
    4. myname = "dujubin";
    5.  }
    6. 		   
    7. // 访问函数
    8. myfun();
    9. 		   
    10. alert("myname = " + myname); // myname = dujubin

    04 数据类型

    • 原始类型：Undefined、Number、String、Boolean、Null
    • 引用类型：Object以及Object的子类
    1. var i;
    2. alert(typeof i); // "undefined"
    3.  
    4. var k = 10;
    5. alert(typeof k); // "number"
    6.  
    7. var f = "abc";
    8. alert(typeof f); // "string"
    9.  
    10. var d = null;
    11. alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"
    12.  
    13. var flag = false;
    14. alert(typeof flag); // "boolean"
    15.  
    16. var obj = new Object();
    17. alert(typeof obj); // "object"
    18.  
    19. // sayHello是一个函数.
    20. function sayHello(){
    21.  
    22. }
    23. alert(typeof sayHello); // "function"

    注意区分

    1. var d = null;
    2. alert(typeof d); // "object"  null属于Null类型,但是typeof运算符的结果是"object"
    • typeof：这个运算符可以在程序的运行阶段动态的获取变量的数据类型
    • typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写。“undefined”、“number”、“string”、“boolean”、“object”、“function”

    在JS当中比较字符串是否相等使用“==”完成。没有equals

    typeof运算符的语法格式：
    typeof 变量名

    1. function sum(a, b){
    2.    if(typeof a == "number" && typeof b == "number"){
    3. 	   return a + b;
    4.    }
    5.    alert(a + "," + b + "必须都为数字！");
    6. }

    4.1 undefined

    当一个变量没有手动赋值，系统默认赋值undefined或者也可以给一个变量手动赋值undefined

    1. var i; // undefined
    2. var k = undefined; // undefined
    3.  
    4. alert(i == k); // true
    5.  
    6. var y = "undefined"; // "undefined"是一个字符串类型
    7. alert(y == k); // false

    4.2 Number

    Number类型包括整数、小数、正数、负数、不是数字、无穷大等
    -1 0 1 2 2.3 3.14 100 … NaN Infinity等都属于Number

    1. // Infinity (当除数为0的时候，结果为无穷大)
    2. alert(10 / 0);

    4.2.1 NaN

    表示Not a Number，不是一个数字，但属于Number类型。运算结果本来应该是一个数字,最后算完不是一个数字的时候,结果是NaN

    1. var a = 100;
    2. var b = "中国人";
    3. alert(a / b); // 除号显然最后结果应该是一个数字,但是运算的过程中导致最后不是一个数字,那么最后的结果是NaN
    4.  
    5. var e = "abc";
    6. var f = 10;
    7. alert(e + f); // "abc10"，但此处的加号不是应该数字，而是字符串的拼接

    4.2.2 关于Number的函数

    isNaN()函数

    • is Not a Number
    • isNaN(数据) ,结果是true表示不是一个数字, 结果是false表示是一个数字
    1. function sum(a, b){
    2.    if(isNaN(a) || isNaN(b)){
    3. 	   alert("参与运算的必须是数字！");
    4. 	   return;
    5.    }
    6.    return a + b;
    7. }
    8. sum(100, "abc");
    9. alert(sum(100, 200));

    parseInt()或者parseFloat()，

    • 可以将字符串自动转换成数字
    • 并且取整数位
    1. alert(parseInt("3.9999")); // 3
    2. alert(parseInt(3.9999)); // 3
    3.  
    4. // parseFloat():可以将字符串自动转换成数字.
    5. alert(parseFloat("3.14") + 1); // 4.14
    6. alert(parseFloat("3.2") + 1); // 4.2

    Math.ceil()

    • 向上取整
    1. // Math.ceil()
    2. alert(Math.ceil("2.1")); // 3

    4.3 Boolean

    对应true和false

    1. // 规律:“有"就转换成true,"没有"就转换成false.
    2. alert(Boolean(1)); // true
    3. alert(Boolean(0)); // false
    4. alert(Boolean("")); // false
    5. alert(Boolean("abc")); // true
    6. alert(Boolean(null)); // false
    7. alert(Boolean(NaN)); // false
    8. alert(Boolean(undefined)); // false
    9. alert(Boolean(Infinity)); // true

    Boolean()，Boolean()函数的作用是将非布尔类型转换成布尔类型

    语法格式：
    Boolean(数据)

    4.4 Null

    null就一个值，区别要与typedf区分开来

    1. // Null类型只有一个值,null
    2. alert(typeof null); // "object"

    4.5 String

    String是一个内置的类，可以直接用，String的父类是Object

    在JS当中字符串可以使用单引号，也可以使用双引号

    1. //两种创建对象的方式，但创建的对象的类型有所不同
    2. //第一种：
    3. var s = "abc";
    4. //第二种（使用JS内置的支持类String）： 
    5. var s2 = new String("abc");
    6.  
    7. // 小string(属于原始类型String)
    8. var x = "king";
    9. alert(typeof x); // "string"
    10.  
    11. // 大String(属于Object类型)
    12. var y = new String("abc");
    13. alert(typeof y); // "object"

    4.5.1 常用函数

    函数名功能
    indexOf获取指定字符串在当前字符串中第一次出现处的索引
    lastIndexOf获取指定字符串在当前字符串中最后一次出现处的索引
    replace替换(只替换了第一个)
    substr截取子字符串
    substring截取子字符串
    toLowerCase转换小写
    toUpperCase转换大写
    split拆分字符串
    1. alert("http://www.baidu.com".indexOf("http")); // 0
    2. alert("http://www.baidu.com".indexOf("https")); // -1
    3.  
    4. // 判断一个字符串中是否包含某个子字符串？
    5. alert("http://www.baidu.com".indexOf("https") >= 0 ? "包含" : "不包含"); // 不包含
    6.  
    7. // replace (注意：只替换了第一个)
    8. alert("name=value%name=value%name=value".replace("%","&")); // name=value&name=value%name=value
    9.  
    10. // 继续调用replace方法,就会替换第“二”个.
    11. // 想全部替换需要使用正则表达式.
    12. alert("name=value%name=value%name=value".replace("%","&").replace("%", "&")); // name=value&name=value&name=value

    4.5.2 substr和substring的区别

    JS的下标从0开始

    1. // substr(startIndex, length)
    2. alert("abcdefxyz".substr(2,4)); //cdef，（下标，长度）
    3. // substring(startIndex, endIndex) 注意:不包含endIndex
    4. alert("abcdefxyz".substring(2,4)); //cd，（开始下标，结束下标）

    4.6 Object

    Object类型是所有类型的超类，自定义的任何类型，默认继承Object

    JS定义类的语法：

    1. 第一种方式：
    2.     function 类名(形参){
    3.  
    4.     }
    5. 第二种方式：
    6.     类名 = function(形参){
    7.  
    8.     }

    创建对象的语法：

    new 构造方法名(实参); // 构造方法名和类名一致。

    js的类定义以及探讨

    1. // 定义一个学生类
    2. function Student(){
    3.    alert("Student.....");
    4. }
    5.  
    6. // 当做普通函数调用
    7. Student();
    8.  
    9. // 当做类来创建对象
    10. var stu = new Student();
    11. alert(stu); // [object Object]
    • JS中的类的定义,同时又是一个构造函数的定义
    • 在JS中类的定义和构造函数的定义是放在一起来完成的
    • js的函数形参调用可以有一个或者多个都可以执行，因为是弱类型
    1. function User(a, b, c){ // a b c是形参,属于局部变量.
    2.    // 声明属性 (this表示当前对象)
    3.    // User类中有三个属性:sno/sname/sage
    4.    this.sno = a;
    5.    this.sname = b;
    6.    this.sage = c;
    7. }
    8.  
    9. // 创建对象
    10. var u1 = new User(111, "zhangsan", 30);
    11. // 访问对象的属性
    12. alert(u1.sno);
    13. alert(u1.sname);
    14. alert(u1.sage);
    15.  
    16. var u2 = new User(222, "jackson", 55);
    17. alert(u2.sno);
    18. alert(u2.sname);
    19. alert(u2.sage);
    20.  
    21. // 访问一个对象的属性,还可以使用这种语法
    22. alert(u2["sno"]);
    23. alert(u2["sname"]);
    24. alert(u2["sage"]);

    也可以换种方式定义类

    1. Product = function(pno,pname,price){
    2.    // 属性
    3.    this.pno = pno;
    4.    this.pname = pname;
    5.    this.price = price;
    6.    // 函数
    7.    this.getPrice = function(){
    8. 	   return this.price;
    9.    }
    10. }
    11.  
    12. var xigua = new Product(111, "西瓜", 4.0);
    13. var pri = xigua.getPrice();
    14. alert(pri); // 4.0

    属性有：prototype属性（常用的，主要是这个）：作用是给类动态的扩展属性和函数。

    1. // 可以通过prototype这个属性来给类动态扩展属性以及函数
    2. Product.prototype.getPname = function(){
    3.    return this.pname;
    4. }
    5.  
    6. // 调用后期扩展的getPname()函数
    7. var pname = xigua.getPname();
    8. alert(pname)
    9.  
    10. // 给String扩展一个函数
    11. String.prototype.suiyi = function(){
    12.    alert("这是给String类型扩展的一个函数，叫做suiyi");
    13. }
    14.  
    15. "abc".suiyi();

    4.7 null、NaN和undefined

    • 数据类型不一致
    • ==(等同运算符：只判断值是否相等)
      ===(全等运算符：既判断值是否相等，又判断数据类型是否相等)
    • null和undefined可以等同
    1. // null NaN undefined 数据类型不一致.
    2. alert(typeof null); // "object"
    3. alert(typeof NaN); // "number"
    4. alert(typeof undefined); // "undefined"
    5.  
    6. // null和undefined可以等同.
    7. alert(null == NaN); // false
    8. alert(null == undefined); // true
    9. alert(undefined == NaN); // false
    10.  
    11. // 在JS当中有两个比较特殊的运算符
    12. alert(null === NaN); // false
    13. alert(null === undefined); // false
    14. alert(undefined === NaN); // false

    05 JS事件

    • 任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
    • onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

    5.1 常用事件

    焦点是光标的获得与失去

    • blur失去焦点
    • focus获得焦点

    鼠标点击事件

    • click鼠标单击
    • dblclick鼠标双击

    键盘事件

    • keydown键盘按下
    • keyup键盘弹起

    鼠标事件

    • mousedown鼠标按下
    • mouseover鼠标经过
    • mousemove鼠标移动
    • mouseout鼠标离开
    • mouseup鼠标弹起

    表单事件

    • reset表单重置
    • submit表单提交

    其他事件

    • change下拉列表选中项改变，或文本框内容改变
    • select文本被选定
    • load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

    5.2 注册事件方式

    回调函数的特点:由其他程序负责调用该函数

    第一种方式，直接在标签中使用事件句柄

    1. <script>
    2.     function sayHello(){
    3.        alert("hello js!");
    4.     }
    5. script>
    7. <input type="button" value="hello" onclick="sayHello()"/>

    第二种方式，使用js代码完成事件注册

    1. <input type="button" value="hello4" id="mybtn2" />
    2. <script type="text/javascript">
    3. 	function doSome(){
    4. 		alert("do some!");
    5. 	}
    6. // 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
    7. var btnObj = document.getElementById("mybtn");
    8. // 第二步:给按钮对象的onclick属性赋值
    9. btnObj.onclick = doSome; 
    10. // 注意:别加小括号. btnObj.onclick = doSome();这是错误的写法.
    11. // 这行代码的含义是,将回调函数doSome注册到click事件上.
    12. script>

    第三种注册方式，使用匿名函数

    1. var mybtn1 = document.getElementById("mybtn");
    2. mybtn1.onclick = function(){ // 匿名函数,这个匿名函数也是一个回调函数.
    3.     alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
    4. }

    将其合并

    1. document.getElementById("mybtn").onclick = function(){
    2.    alert("test22222222.........");
    3. }

    5.3 代码执行顺序

    1. <script type="text/javascript">
    2.     // 第一步:根据id获取节点对象
    3.     var btn = document.getElementById("btn");
    4. 	// 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
    5.  
    6.     // 第二步:给节点对象绑定事件
    7.     btn.onclick = function(){
    8.         alert("hello js");
    9.     }
    10. script>
    11.  
    12. <input type="button" value="hello" id="btn" />

    执行错误，返回了null，因为还未获取到id元素，
    所以我们添加上面的一个函数load()，页面加载完的时候才会发生

    2. <body onload="ready()">
    3.     <script type="text/javascript">
    4.     function ready(){
    5.        var btn = document.getElementById("btn");
    6.        btn.onclick = function(){
    7.         alert("hello js");
    8.        }
    9.     }
    10.     script>
    11.     <input type="button" value="hello" id="btn" />
    12. body>
    1. "ready()">
    2. //等同于
    3. //需要写在script内
    4. window.onload=ready;
    5. //如下
    6. <body>
    7.     <script type="text/javascript">
    8.     function ready(){
    9.         window.onload=ready;
    10.        var btn = document.getElementById("btn");
    11.        btn.onclick = function(){
    12.         alert("hello js");
    13.        }
    14.     }
    15.     script>
    16.     <input type="button" value="hello" id="btn" />
    17. body>

    总结

    1. <script type="text/javascript">
    2. 	// 页面加载的过程中,将a函数注册给了load事件
    3. 	// 页面加载完毕之后,load事件发生了,此时执行回调函数a
    4. 	// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
    5. 	// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
    6. 	window.onload = function(){ // 这个回调函数叫做a
    7. 		document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
    8. 			alert("hello js..........");
    9. 		}
    10. 	}
    11. script>
    12.  
    13. <input type="button" value="hello" id="btn" />

    总结模板

    1. <script>
    2.     window.onload = function(){
    3.         document.getElementById("id属性").onclick = function(){
    4.             //获得属性后 利用属性执行函数
    5.         }
    6.     }
    7. script>
    8.  
    9. <input type="button" value="框中的值" id="id属性" />

    5.4 设置节点的属性

    通过点击一个按钮狂，将其变为复选框

    1. <script type="text/javascript">
    2. 	window.onload = function(){
    3. 		document.getElementById("btn").onclick = function(){
    4. 			var mytext = document.getElementById("mytext");
    5. 			// 一个节点对象中只要有的属性都可以"."
    6. 			mytext.type = "checkbox";
    7. 		}
    8. 	}
    9. script>
    10.  
    11. <input type="text" id="mytext"/>
    12. <input type="button" value="将文本框修改为复选框" id="btn"/>

    5.5 捕捉回车键

    • 回车键的键值是13

    • ESC键的键值是27

    • 按钮键是onclick

    • 而回车键onkeydown

      回调函数的参数可以有，有与没有都会调用回调函数

    1. usernameElt.onkeydown = function(a, b, c){
    2. 	// 获取键值
    3. 	 alert(a); // [object KeyboardEvent]
    4. 	// alert(b);
    5. 	// alert(c);
    6. }

    回车键摁下，浏览器会new一个对象，用函数接收当前发生的事件，用当前事件调用属性获取值

    1. usernameElt.onkeydown = function(event){
    2.     // 获取键值
    3.     // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
    4.     alert(event.keyCode);
    5. }

    如果捕获回车键，需要在事件函数中判断是否为键值

    1. usernameElt.onkeydown = function(event){
    2.   if(event.keyCode === 13){
    3. 	  alert("正在进行验证....");
    4.   }
    5. }

    5.6 JS运算符

    执行表达式，但不返回任何结果

    javascript:void(0)其中javascript:作用是告诉浏览器后面是一段JS代码。

    以下程序的javascript:是不能省略的

    1. <a href="javascript:void(0)" onclick="window.alert('test code')">
    2. 	既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
    3. a>

    void()这个小括号当中必须有表达式，且是数字几都可以

    • href=" " 默认空字符串或者是null或者false都是会跳转的，需要前面加个js标识

    5.7 JS的控制语句

    java数组的定义与使用

    1. int[] arr = {1,2,3,4,5,6};
    2. int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
    3. String[] arr3 = {"a","b","c"};
    4. String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};

    javascript中是定义为var，且类型可以不一致，可以不定义范围有多大，可自扩容

    1. // 创建JS数组
    2. var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
    3. // 遍历数组
    4. for(var i = 0; i < arr.length; i++){
    5.    alert(arr[i]);
    6. }

    对比以上代码的不同，可以增加一个与java不同的结构for in

    5.7.1 for in结构

    区分java中的for each结构，for each结构中是数组元素，for in是数组下标

    1. // for..in
    2. for(var i in arr){
    3.    //alert(i);
    4.    alert(arr[i]);
    5. }

    for in结构还可以遍历对象属性

    1. // for..in语句可以遍历对象的属性
    2. User = function(username,password){
    3.    this.username = username;
    4.    this.password = password;
    5. }
    6. var u = new User("张三", "444");
    7. alert(u.username + "," + u.password);
    8. alert(u["username"] + "," + u["password"]); // 另一种调用方式
    9.  
    10. for(var shuXingMing in u){
    11.    //alert(shuXingMing) 输出的是username和password
    12.    //alert(typeof shuXingMing) // shuXingMing是一个字符串
    13.    alert(u[shuXingMing]);//不用加双引号
    14. }

    5.7.2 with结构

    with语句的调用先放在()内，在里面调用属性即可

    1. with(u){
    2.    alert(username + "," + password);
    3. }

    06 DOM

    DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML文档被当做一棵DOM树来看待。

    var domObj = document.getElementById("id");

    DOM和BOM的区别：

    • BOM的顶级对象是：window
    • DOM的顶级对象是：document
    • 实际上BOM是包括DOM的！

    函数模板
    通过点击按钮框绑定一个事件
    获取事件id的事件，在这个事件中获取单机按钮框的事件

    1. window.onload = function(){
    2. 	var xx = document.getElementById("id属性值");
    3.     xx.onclick = function(){
    4.     }
    5. }

    而且document.write(“输出语句”);
    相当于java的system.out.println();

    6.1 文本框value

    1. 页面加载执行回调函数
    2. 回调函数获取id事件
    3. 通过id事件绑定单击按钮执行函数

    1.通过点击按钮框获取value值

    1. <script type="text/javascript">
    2. window.onload = function(){
    3.   var btnElt = document.getElementById("btn");
    4.   btnElt.onclick = function(){
    5. 	  /*
    6. 	  // 获取username节点
    7. 	  var usernameElt = document.getElementById("username");
    8. 	  var username = usernameElt.value;
    9. 	  alert(username);
    10. 	  */
    11. 	 // alert(document.getElementById("username").value);
    12.  
    13.  // 可以修改它的value
    14.  document.getElementById("username").value = "zhangsan";
    15.   }
    16. }
    17. script>
    18.  
    19. <input type="text" id="username" />
    20. <input type="button" value="获取文本框的value" id="btn"/>

    2.将第一个文本框中的value赋值到第二个文本框上

    1. <script type="text/javascript">
    2. 	window.onload = function(){
    3. 		document.getElementById("setBtn").onclick = function(){
    4. 			document.getElementById("username2").value = document.getElementById("username1").value;
    5. 		}
    6. 	}
    7. script>
    8.  
    9.  
    10. <input type="text" id="username1" />
    11. <br>
    12. <input type="text" id="username2" />
    13. <br>
    14. <input type="button" value="将第一个文本框中的value赋值到第二个文本框上" id="setBtn" />

    3.失去焦点对象获取value值，通过this指针

    3. <input type="text" onblur="alert(this.value)" />

    6.2 inner HTML和innerText属性

    inner HTML和innerText是属性不是方法

    相同点：

    • 都是设置元素内部的内容。

    不同点：

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

    6.3 正则表达式

    正则表达式（Regular Expression）：主要用在字符串格式匹配方面

    6.3.1 常用正则表达式符号

    符号功能
    .匹配除换行符以外的任意字符
    \w匹配字母或数字或下划线或汉字
    \s匹配任意的空白符
    \d匹配数字
    \b匹配单词的开始或结束
    ^匹配字符串的开始
    $匹配字符串的结束

    6.3.2 常用限定符符号

    符号功能
    *重复零次或更多次
    +重复一次或更多次
    ?重复零次或一次
    {n}重复n次
    {n,}重复n次或更多次
    {n,m}重复n到m次

    6.3.3 常用的反义代码

    符号功能
    \W匹配任意不是字母，数字，下划线，汉字的字符
    \S匹配任意不是空白符的字符
    \D匹配任意非数字的字符
    \B匹配不是单词开头或结束的位置
    [^x]匹配除了x以外的任意字符
    [^aeiou]匹配除了aeiou这几个字母以外的任意字符

    • 正则表达式当中的小括号()优先级较高。

      • [1-9] 表示1到9的任意1个数字（次数是1次。）
      • [A-Za-z0-9] 表示A-Z、a-z、0-9中的任意1个字符
      • [A-Za-z0-9-] 表示A-Z、a-z、0-9、- ，以上所有字符中的任意1个字符

    • 简单的正则表达式要会写

      • QQ号的正则表达式：

        1. ^ [1-9][0-9]{4,}$

      • email正则：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$

    6.3.4 创建表达式对象以及调用方式

    创建方式：

    • 第一种创建方式：
      var regExp = /正则表达式/flags;
    • 第二种创建方式:使用内置支持类RegExp
      var regExp = new RegExp(“正则表达式”,“flags”);

    关于flag后面的参数：

    • g：全局匹配
    • i：忽略大小写
    • m：多行搜索（ES规范制定之后才支持m）
      • 当前面是正则表达式的时候，m不能用
      • 只有前面是普通字符串的时候，m才可以使用

    调用方式：

    正则表达式对象的test()方法

    true / false = 正则表达式对象.test(用户填写的字符串);
    • true : 字符串格式匹配成功
    • false: 字符串格式匹配失败

    6.3.5 验证邮箱格式

    1.代码示例验证邮箱是否正确
    光标如果回去需要将验证正确与否剔除

    1. <body>
    2.  
    3. <script type="text/javascript">
    4. window.onload = function(){
    5. 	   // 给按钮绑定click
    6. 	   document.getElementById("btn").onclick = function(){
    7. 		   var email = document.getElementById("email").value;
    8. 		   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    9. 		   var ok = emailRegExp.test(email);
    10. 		   if(ok){
    11. 				//合法
    12. 				document.getElementById("emailError").innerText = "邮箱地址合法";
    13. 		   }else{
    14. 			   // 不合法
    15. 			   document.getElementById("emailError").innerText = "邮箱地址不合法";
    16. 		   }
    17. 	   }
    18. 	   // 给文本框绑定focus
    19. 	   document.getElementById("email").onfocus = function(){
    20. 		   document.getElementById("emailError").innerText = "";
    21. 	   }
    22.    }
    23.  
    24.  
    25. script>
    26.  
    27. <input type="text" id="email" />
    28. 	<span id="emailError" style="color: red; font-size: 12px;">span>
    29. 	<br>
    30. <input type="button" value="验证邮箱" id="btn" />
    31.  
    32. body>

    输入邮箱验证成功

    如果光标回去文本框 需要清除右边那个提示，则需要绑定其他

    1. // 给文本框绑定focus
    2. document.getElementById("email").onfocus = function(){
    3. 	document.getElementById("emailError").innerText = "";
    4. }

    6.3.6扩展字符串trim函数

    去除字符串的前后空白trim

    1. <body>
    2. 	<script type="text/javascript">	
    3. 		window.onload = function(){
    4. 			document.getElementById("btn").onclick = function(){
    5. 				// 获取用户名
    6. 				var username = document.getElementById("username").value;
    7. 				// 去除前后空白
    8. 				username = username.trim();
    9. 				// 测试
    10. 				alert("--->" + username + "<----");
    11. 			}
    12. 		}
    13. 	script>
    14. 	<input type="text" id="username" />
    15. 	<input type="button" value="获取用户名" id="btn" />
    16. body>
    • 低版本的IE浏览器不支持字符串的trim()函数,
    • 解决办法：对String类扩展一个全新的trim()函数，重写覆盖新的tim函数，在trim函数中写正则表达式
    1. String.prototype.trim = function(){
    2. 	// 去除当前字符串的前后空白
    3. 	// 在当前的方法中的this代表的就是当前字符串.
    4. 	//return this.replace(/^\s+/, "").replace(/\s+$/, "");
    5. 	return this.replace(/^\s+|\s+$/g, "");
    6. }
    return this.replace(/^\s+/, "").replace(/\s+$/, "");

    这行代码第一个replace是前空格字符串，后一个replace是后空格字符串，
    / 字符串/ ，^是开头，$是结尾，\s是空白字符串，+1个到多个字符串。

    prototype可以扩展属性

    6.4 表单验证

    需求：
    （1）用户名不能为空
    （2）用户名必须在6-14位之间
    （3）用户名只能有数字和字母组成，不能含有其它符号（正则表达式）
    （4）密码和确认密码一致，邮箱地址合法。
    （5）统一失去焦点验证
    （6）错误提示信息统一在span标签中提示（不能用div，div会换行）并且要求字体12号，红色。
    （7）文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
    （8）最终表单中所有项均合法方可提交

    书写的页面表单的html：

    3. <form id="userForm" method="get">
    4. 	用户名<input type="text" name="username" id="username"/>
    5.     	<span id="usernameError">span><br>
    6. 	密码<input type="text" name="userpwd" id="userpwd"/><br>
    7. 	确认密码<input type="text" id="userpwd2" />
    8.     	<span id="pwdError">span><br>
    9. 	邮箱<input type="text" name="email" id="email" />
    10.     	<span id="emailError">span><br>
    11. 	
    12. 	<input type="button" value="注册" id="submitBtn"/>
    13. 	<input type="reset" value="重置" />
    14. form>

    写后面表单的错误显示，加一个css样式

    1. <style type="text/css">
    2. 	span {
    3. 		color: red;
    4. 		font-size: 12px;
    5. 	}
    6. style>

    书写一个js表单事件判断

    其中的代码注意事项

    • 判断username是否为空，可以在if语句中用username，或者是长度，或者直接与空字符串进行比较
    • 获得焦点事件onfocus，如果显示错误，光标回去的时候要自动清除错误字体

    判断是否密码一致

    • 用确认密码的句柄，去判断获取对象之后在内容中也获取密码的框，两者进行比较value。相同与否影响后面的span标签提示
    1. // 获取密码错误提示的span标签
    2. var pwdErrorSpan = document.getElementById("pwdError");
    3. // 获取确认密码框对象
    4. var userpwd2Elt = document.getElementById("userpwd2");
    5. // 绑定blur事件
    6. userpwd2Elt.onblur = function(){
    7.    // 获取密码和确认密码
    8.    var userpwdElt = document.getElementById("userpwd");
    9.    var userpwd = userpwdElt.value;
    10.    var userpwd2 = userpwd2Elt.value;
    11.    if(userpwd != userpwd2){
    12. 	   // 密码不一致
    13. 	   pwdErrorSpan.innerText = "密码不一致";
    14.    }else{
    15. 	   // 密码一致
    16.    }
    17. }

    绑定focus也相同，不合法之后回去要清除显示的错误

    1. // 绑定focus事件
    2. userpwd2Elt.onfocus = function(){
    3.    if(pwdErrorSpan.innerText != ""){
    4. 	   userpwd2Elt.value = "";
    5.    }
    6.    pwdErrorSpan.innerText = "";
    7. }

    邮箱同理

    逻辑判断：
    在提交按钮的情况中，如果都不合法，点击提交还是会提交过去没有审核。所以此处用button的类型按钮，在该按钮中书写js代码

    获取表单，通过submit函数提交

    2. <input type="button" value="注册" id="submitBtn"/>

    通过普通按钮提交表单，并且完善表单的功能

    2. <form id="userForm" method="get">

    在提交表单的js代码中可以这样书写，后面都没有错误的时候提交

    1. // 当所有表单项都是合法的时候,提交表单
    2. if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
    3.        // 获取表单对象
    4.        var userFormElt = document.getElementById("userForm");
    5.        // 可以在这里设置action,也可以不在这里.
    6.        userFormElt.action = "http://localhost:8080/jd/save";
    7.        // 提交表单
    8.        userFormElt.submit();
    9. 	}

    但是如果都不填写后面也没有错误，会自动成功提交空的，所以要在前面添加代码
    此处前面不用加on，是代码自动执行，先获得焦点focus，在blur失去焦点的判断

    1. // 触发username的blur userpwd2的blur email的blur
    2. // 不需要人工操作,使用纯JS代码触发事件.
    3. usernameElt.focus();
    4. usernameElt.blur();
    5.  
    6. userpwd2Elt.focus();
    7. userpwd2Elt.blur();
    8.  
    9. emailElt.focus();
    10. emailElt.blur();

    完整代码演示：

    1. <script type="text/javascript">
    2. window.onload = function(){
    3. 	   // 获取username的span标签
    4. 	   var usernameErrorSpan = document.getElementById("usernameError");
    5. 	   // 给用户名文本框绑定blur事件
    6. 	   var usernameElt = document.getElementById("username");
    7. 	   usernameElt.onblur = function(){
    8. 		   // 获取用户名
    9. 		   var username = usernameElt.value;
    10. 		   // 去除前后空白
    11. 		   username = username.trim();
    12. 		   // 判断用户名是否为空
    13. 		   /*
    14. 		   if(username){
    15. 			   // 代表username不是空字符串
    16. 			   alert("username = " + username);
    17. 		   }else{
    18. 			   // 代表username是空字符串
    19. 			   alert("username是空字符串");
    20. 		   }
    21. 		   */
    22. 		   // if(username.length == 0){}
    23. 		   if(username === ""){
    24. 			   // 用户名为空
    25. 			   usernameErrorSpan.innerText = "用户名不能为空";
    26. 		   }else{
    27. 			   // 用户名不为空
    28. 			   // 继续判断长度[6-14]
    29. 			   if(username.length < 6 || username.length > 14){
    30. 				   // 用户名长度非法
    31. 				   usernameErrorSpan.innerText = "用户名长度必须在[6-14]之间";
    32. 			   }else{
    33. 				   // 用户名长度合法
    34. 				   // 继续判断是否含有特殊符号
    35. 				   var regExp = /^[A-Za-z0-9]+$/;
    36. 				   var ok = regExp.test(username);
    37. 				   if(ok){
    38. 					   // 用户名最终合法
    39. 				   }else{
    40. 					   // 用户名中含有特殊符号
    41. 					   usernameErrorSpan.innerText = "用户名只能由数字和字母组成";
    42. 				   }
    43. 			   }
    44. 		   }
    45. 	   }   
    46.    // 给username这个文本框绑定获得焦点事件
    47.    usernameElt.onfocus = function(){
    48. 	   // 清空非法的value
    49. 	   if(usernameErrorSpan.innerText != ""){
    50. 		   usernameElt.value = "";   
    51. 	   }
    52. 	   // 清空span
    53. 	   usernameErrorSpan.innerText = "";
    54.    }
    55.    
    56.    // 获取密码错误提示的span标签
    57.    var pwdErrorSpan = document.getElementById("pwdError");
    58.    // 获取确认密码框对象
    59.    var userpwd2Elt = document.getElementById("userpwd2");
    60.    // 绑定blur事件
    61.    userpwd2Elt.onblur = function(){
    62. 	   // 获取密码和确认密码
    63. 	   var userpwdElt = document.getElementById("userpwd");
    64. 	   var userpwd = userpwdElt.value;
    65. 	   var userpwd2 = userpwd2Elt.value;
    66. 	   if(userpwd != userpwd2){
    67. 		   // 密码不一致
    68. 		   pwdErrorSpan.innerText = "密码不一致";
    69. 	   }else{
    70. 		   // 密码一致
    71. 	   }
    72.    }
    73.    
    74.    // 绑定focus事件
    75.    userpwd2Elt.onfocus = function(){
    76. 	   if(pwdErrorSpan.innerText != ""){
    77. 		   userpwd2Elt.value = "";
    78. 	   }
    79. 	   pwdErrorSpan.innerText = "";
    80.    }
    81.    
    82.    // 获取email的span
    83.    var emailSpan = document.getElementById("emailError");
    84.    // 给email绑定blur事件
    85.    var emailElt = document.getElementById("email");
    86.    emailElt.onblur = function(){
    87. 	   // 获取email
    88. 	   var email = emailElt.value;
    89. 	   // 编写email的正则
    90. 	   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    91. 	   var ok = emailRegExp.test(email);
    92. 	   if(ok){
    93. 		   // 合法
    94. 	   }else{
    95. 		   // 不合法
    96. 		   emailSpan.innerText = "邮箱地址不合法";
    97. 	   }
    98.    }
    99.    
    100.    // 给emailElt绑定focus
    101.    emailElt.onfocus = function(){
    102. 	   if(emailSpan.innerText != ""){
    103. 		   emailElt.value = "";
    104. 	   }
    105. 	   emailSpan.innerText = "";
    106.    }
    107.    
    108.    // 给提交按钮绑定鼠标单击事件
    109.    var submitBtnElt = document.getElementById("submitBtn");
    110.    submitBtn.onclick = function(){
    111. 	   // 触发username的blur userpwd2的blur email的blur
    112. 	   // 不需要人工操作,使用纯JS代码触发事件.
    113. 	   usernameElt.focus();
    114. 	   usernameElt.blur();
    115. 	   
    116. 	   userpwd2Elt.focus();
    117. 	   userpwd2Elt.blur();
    118. 	   
    119. 	   emailElt.focus();
    120. 	   emailElt.blur();
    121. 	   
    122. 	   // 当所有表单项都是合法的时候,提交表单
    123. 	   if(usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailSpan.innerText == ""){
    124. 		   // 获取表单对象
    125. 		   var userFormElt = document.getElementById("userForm");
    126. 		   // 可以在这里设置action,也可以不在这里.
    127. 		   userFormElt.action = "http://localhost:8080/jd/save";
    128. 		   // 提交表单
    129. 		   userFormElt.submit();
    130. 	   }
    131.    }
    132. }
    133. script>

    6.5 复选框的全选和取消全选

    书写一个html的页面
    将所有的框都书写成相同的name属性值

    1. <input type="checkbox" id="firstChk"/>
    2. <input type="checkbox" name="aihao" value="smoke" />抽烟
    3. <input type="checkbox" name="aihao" value="drink" />喝酒
    4. <input type="checkbox" name="aihao" value="tt" />烫头

    在添加一个js的逻辑代码

    form表单中的checked属性是勾选则为true，如果没勾选则为false
    通过document.getElementsByName(“aihao”);获取按钮狂中相同的name属性存储在一个数组中
    通过判定，如果勾选复选框，将其一一弄为true，同理为false

    1. window.onload = function(){
    2. 	var firstChk = document.getElementById("firstChk");
    3. 	firstChk.onclick = function(){
    4. 		// 获取第一个复选框的选中状态(复选框对象checkbox对象)
    5. 		//alert(firstChk.checked);
    6. 		// 根据name获取所有元素
    7. 		var aihaos = document.getElementsByName("aihao");
    8. 		if(firstChk.checked){
    9. 			// 全选
    10. 			for(var i = 0; i < aihaos.length; i++){
    11. 				aihaos[i].checked = true;
    12. 			}
    13. 		}else{
    14. 			// 取消全选
    15. 			for(var i = 0; i < aihaos.length; i++){
    16. 				aihaos[i].checked = false;
    17. 			}
    18. 		}
    19. 	}
    20. }

    优化代码的格式，将其与复选框相同即可

    1. window.onload = function(){
    2.     var firstChk = document.getElementById("firstChk");
    3.     firstChk.onclick = function(){
    4.         var aihaos = document.getElementsByName("aihao");
    5.         for(var i = 0; i < aihaos.length; i++){
    6.             aihaos[i].checked = firstChk.checked;
    7.         }
    8. 	}
    9. }

    添加额外的功能：如果复选框的子框都选上了，则复选框都选上；

    代码逻辑：页面加载的时候，将其所有子框进行遍历绑定一个鼠标单机按钮，如果单机一个子框，在其功能中再将其遍历，判断是否为总数都单击了

    1.  window.onload = function(){	
    2.     var firstChk = document.getElementById("firstChk");
    3.         firstChk.onclick = function(){
    4.             var aihaos = document.getElementsByName("aihao");
    5.             for(var i = 0; i < aihaos.length; i++){
    6.                 aihaos[i].checked = firstChk.checked;
    7.             }
    8.         }
    9.      
    10.      
    11.     var all = aihaos.length;
    12.     for(var i = 0; i < aihaos.length; i++){
    13.         aihaos[i].onclick = function(){//绑定回调函数，并不是执行
    14.             var checkedCount = 0;
    15.             // 总数量和选中的数量相等的时候,第一个复选框选中.
    16.             for(var i = 0; i < aihaos.length; i++){
    17.                 if(aihaos[i].checked){
    18.                     checkedCount++;
    19.                 }
    20.             }
    21.             firstChk.checked = (all == checkedCount);
    22.             /*
    23.             if(all == checkedCount){
    24.                 firstChk.checked = true;
    25.             }else{
    26.                 firstChk.checked = false;
    27.             }
    28.             */
    29.         }
    30.     }
    31. }

    完整代码演示：

    1. 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. 			*/
    31. 		window.onload = function(){
    32. 			var aihaos = document.getElementsByName("aihao");
    33. 			var firstChk = document.getElementById("firstChk");
    34. 			firstChk.onclick = function(){
    35. 				for(var i = 0; i < aihaos.length; i++){
    36. 					aihaos[i].checked = firstChk.checked;
    37. 				}
    38. 			}
    39. 			// 对以上数组进行遍历
    40. 			var all = aihaos.length;
    41. 			for(var i = 0; i < aihaos.length; i++){
    42. 				aihaos[i].onclick = function(){
    43. 					var checkedCount = 0;
    44. 					// 总数量和选中的数量相等的时候,第一个复选框选中.
    45. 					for(var i = 0; i < aihaos.length; i++){
    46. 						if(aihaos[i].checked){
    47. 							checkedCount++;
    48. 						}
    49. 					}
    50. 					firstChk.checked = (all == checkedCount);
    51. 					/*
    52. 					if(all == checkedCount){
    53. 						firstChk.checked = true;
    54. 					}else{
    55. 						firstChk.checked = false;
    56. 					}
    57. 					*/
    58. 				}
    59. 			}
    60. 		}
    61. 	script>
    62. 	<input type="checkbox" id="firstChk"/><Br>
    63.     <input type="checkbox" name="aihao" value="smoke" />抽烟<Br>
    64.     <input type="checkbox" name="aihao" value="drink" />喝酒<Br>
    65.     <input type="checkbox" name="aihao" value="tt" />烫头<Br>	
    66. body>
    67. html>

    6.6 获取下拉列表选项中的value

    通过onchange的事件获取当前下拉列表的值，this代表当前

    1. <select onchange="alert(this.value)">
    2. 	<option value="">--请选择省份--option>
    3. 	<option value="001">河北省option>
    4. 	<option value="002">河南省option>
    5. 	<option value="003">山东省option>
    6. 	<option value="004">山西省option>
    7. select>

    可以通过书写js代码。换一种形式

    1. <script type="text/javascript">
    2. 	window.onload = function(){
    3. 		var provinceListElt = document.getElementById("provinceList");
    4. 		provinceListElt.onchange = function(){
    5. 			// 获取选中项的value
    6. 			alert(provinceListElt.value);
    7. 		}
    8. 	}
    9. script>
    10. <select id="provinceList">
    11. 	<option value="">--请选择省份--option>
    12. 	<option value="001">河北省option>
    13. 	<option value="002">河南省option>
    14. 	<option value="003">山东省option>
    15. 	<option value="004">山西省option>
    16. select>

    6.7 内置支持类

    6.7.1 获取日期/日期Date

    1. var nowTime = new Date();
    2. document.write(nowTime);

    不符合当前的日期格式视角
    转换成具有本地语言环境的日期格式

    nowTime = nowTime.toLocaleString();

    如果需要自已整合一个日期格式可以这样写

    • 获取年份信息getFullYear();
    • 获取月份日期getMonth();
    • 获取当日信息getDate();
    • 获取当前系统的毫秒数(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)getTime();
    1. // 当以上格式不是自己想要的,可以通过日期获取年月日等信息,自定制日期格式.
    2. var t = new Date();
    3. var year = t.getFullYear(); // 返回年信息,以全格式返回.
    4. var month = t.getMonth(); // 月份是:0-11
    5. // var dayOfWeek = t.getDay(); // 获取的一周的第几天(0-6)
    6. var day = t.getDate(); // 获取日信息.
    7. document.write(year + "年" + (month+1) + "月" + day + "日");

    通过结合按钮框，一点击就显示有系统时间

    系统开始时间setInterval(“函数名”, 间隔毫秒时间数)
    终止系统时间，通过传输开始执行的数据clearInterval(传输开始执行的数据)

    1. <script type="text/javascript">
    2. 	function displayTime(){
    3. 		var time = new Date(); //新建一个date对象
    4. 		var strTime = time.toLocaleString(); // 转换为字符串
    5. 		document.getElementById("timeDiv").innerHTML = strTime; //显示html格式
    6. 	}
    7.     // 每隔1秒调用displayTime()函数
    8.     function start(){
    9.         // 从这行代码执行结束开始,则会不间断的,每隔1000毫秒调用一次displayTime()函数.
    10.         v = window.setInterval("displayTime()", 1000);	
    11.     }
    12.     function stop(){
    13.         window.clearInterval(v);
    14.     }
    15. script>
    16.  
    17. <input type="button" value="显示系统时间" onclick="start();"/>
    18. <input type="button" value="系统时间停止" onclick="stop();" />
    19. <div id="timeDiv">div>

    6.7.2 数组内置类

    • 数组定义用中括号，而java的数组定义用{}
    • 数组类型随意
    • 数组可越界扩容
    1. // 创建长度为0的数组
    2. var arr = [];
    3. alert(arr.length);
    4.  
    5. // 数据类型随意
    6. var arr2 = [1,2,3,false,"abc",3.14];
    7. alert(arr2.length);
    8.  
    9. // 下标会越界吗
    10. arr2[7] = "test"; // 自动扩容.
    11.  
    12. document.write("
      "      );
    13.  
    14. // 遍历
    15. for(var i = 0; i < arr2.length; i++){
    16. 	document.write(arr2[i] + "
      "      );
    17. }

    另一种创建数组对象的方式

    1. var a = new Array();
    2. alert(a.length); // 0
    3.  
    4. var a2 = new Array(3); // 3表示长度.
    5. alert(a2.length);
    6.  
    7. var a3 = new Array(3,2);
    8. alert(a3.length); // 2

    数组的相关方法

    • 连接字符串join(“连接符”);
    • 数组末尾添加元素push(压栈);
    • 数组末尾弹出元素pop();
    • 反转数组reverse();
    1. var a = [1,2,3,9];
    2. var str = a.join("-");
    3. alert(str); // "1-2-3-9"
    4.  
    5. // 在数组的末尾添加一个元素(数组长度+1)
    6. a.push(10);
    7. alert(a.join("-"));
    8.  
    9. // 将数组末尾的元素弹出(数组长度-1)
    10. var endElt = a.pop();
    11. alert(endElt);
    12. alert(a.join("-"));
    13.  
    14. // 注意:JS中的数组可以自动模拟栈数据结构:后进先出,先进后出原则.
    15. // push压栈
    16. // pop弹栈
    17.  
    18. // 反转数组.
    19. a.reverse();
    20. alert(a.join("="));

    07 BOM

    BOM编程中，window对象是顶级对象，代表浏览器窗口

    7.1 open与close

    window有open和close方法，可以开启窗口和关闭窗口

    • 打开window.open();
    • 关闭window.close();只能关闭open打开的窗口
    1. <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" />
    2. <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" />
    3. <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" />
    4. <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" />
    5. <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
    6.  
    7. <input type="button" value="打开表单验证"  onclick="window.open('002-open.html')"/>

    当前窗口与顶级窗口

    覆盖整个页面的窗口只有一个可以理解为顶级窗口

    将当前窗口设置为顶级窗口 代码演示

    1. if(window.top != window.self){
    2. 	//window.top = window.self;
    3. 	window.top.location = window.self.location;
    4. }

    7.2 弹出确认框

    • 消息框window.alert(‘消息框!’)"
    • 确认框window.confirm(“确认框”);

    弹出消息框，之前都有用到

    <input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />

    删除消息的确认框

    1. <script type="text/javascript">
    2. 	function del(){
    3. 		/*
    4. 		var ok = window.confirm("亲，确认删除数据吗？");
    5. 		//alert(ok);
    6. 		if(ok){
    7. 			alert("delete data ....");
    8. 		}
    9. 		*/
    10. 		if(window.confirm("亲，确认删除数据吗？")){
    11. 			alert("delete data ....");
    12. 		}
    13. 	}
    14. script>
    15. <input type="button" value="弹出确认框(删除)" onclick="del();" />

    7.3 历史记录

    • 历史纪录的后退window.history.back()或者是window.history.go(-1)
    • 历史纪录的前进window.history.go(1)
    1. <input type="button" value="后退" onclick="window.history.back()" />
    2. <input type="button" value="后退" onclick="window.history.go(-1)" />

    7.4 设置地址栏的url

    1. var xx = window.location;
    2. xx.href = "http://网址";
    • 或者window.location.href = “http://网址”;
    • 或者window.location = “http://网址”;
    • 或者document.location.href = “http://网址”;同理href可以省略

    总结：有哪些方法可以通过浏览器往服务器发请求

    • 表单form的提交。
    • 超链接。
    1. <a href="http://localhost:8080/oa/save?username=zhangsan&password=123">
    2.     用户只能点击这个超链接
    3. a>
    • document.location
    • window.location
    • window.open(“url”)
    • 直接在浏览器地址栏上输入URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）
      以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的

    08 JSON

    • JavaScript Object Notation（JavaScript对象标记），简称JSON。(数据交换格式)。JSON是一种标准的轻量级的数据交换格式。特点是：体积小，易解析
    • JSON主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统A与系统B交换数据的话，都是采用JSON。）
    • 在实际的开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML。XML体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用XML。）

    8.1 代码比较

    两个数据要交换可以用json或者xml，通过与java交换
    对比一下数据的轻量级

    1. // 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)
    2. var studentObj = {
    3. 	"sno" : "110",
    4. 	"sname" : "张三",
    5. 	"sex" : "男"
    6. };
    7.  
    8. // 访问JSON对象的属性
    9. alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);

    也可以进行数组的遍历

    1. // JSON数组
    2. var students = [
    3. 	{"sno":"110","sname":"张三","sex":"男"},
    4. 	{"sno":"120","sname":"李四","sex":"男"},
    5. 	{"sno":"130","sname":"王五","sex":"男"}
    6. ];
    7.  
    8. // 遍历
    9. for(var i = 0; i < students.length; i++){
    10. 	var stuObj = students[i];
    11. 	alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);
    12. }

    所以json的代码格式是：

    1. var jsonObj = {
    2. 	"属性名" : 属性值,
    3. 	"属性名" : 属性值,
    4. 	"属性名" : 属性值,
    5. 	"属性名" : 属性值,
    6. 	....
    7. };

    对比：
    之前没有使用JSON的时候,定义类,创建对象,访问对象的属性.

    1. Student = function(sno,sname,sex){
    2. 	this.sno = sno;
    3. 	this.sname = sname;
    4. 	this.sex = sex;
    5. }
    6. var stu = new Student("111","李四","男");
    7. alert(stu.sno + "," + stu.sname + "," + stu.sex);

    8.2 JSON对象

    • 通过键值对进行一一书写
    • 可以json嵌套json数据
    1. var user = {
    2. 	"usercode" : 110,
    3. 	"username" : "张三",
    4. 	"sex" : true,
    5. 	"address" : {
    6. 		"city" : "北京",
    7. 		"street" : "大兴区",
    8. 		"zipcode" : "12212121",
    9. 	},
    10. 	"aihao" : ["smoke","drink","tt"]
    11. };
    12.  
    13. // 访问人名以及居住的城市
    14. alert(user.username + "居住在" + user.address.city);

    代码示列：
    请自行设计JSON格式的数据，这个JSON格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。

    1. var jsonData = {
    2. 	"total" : 3,
    3. 	"students" : [
    4. 		{"name":"zhangsan","birth":"1980-10-20"},
    5. 		{"name":"lisi","birth":"1981-10-20"},
    6. 		{"name":"wangwu","birth":"1982-10-20"}
    7. 	]
    8. };

    记住格式符号不要错乱，特别是;

    8.3 eval函数

    通过eval赖连接前后端的函数
    功能：将字符串当做一段JS代码解释并执行
    例如：window.eval(“var i = 100;”);

    主要在实战中

    • java连接数据库,查询数据之后,将数据在java程序中拼接成JSON格式的“字符串”,将json格式的字符串响应到浏览器
    • java响应到浏览器上的仅仅是一个"JSON格式的字符串",还不是一个json对象
    • 可以使用eval函数,将json格式的字符串转换成json对象
    1. var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"
    2. // 将以上的json格式的字符串转换成json对象
    3. window.eval("var jsonObj = " + fromJava);
    4. // 访问json对象
    5. alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据

    用java处理json发过来的字符串对象，\这是转义字符，将其转换成json的对象，在用对象调用属性
    js中访问对象属性还可以用这种代码格式

    1. // JS中访问json对象的属性
    2. alert(json.username);
    3.  
    4. // JS中访问json对象的属性
    5. alert(json["username"]);

    8.4 设置table的tbody

    将java中的数据展示到table中
    表格页面的html格式如下

    1. <input type="button" value="显示员工信息列表" id="displayBtn" />
    2. <h2>员工信息列表h2>
    3. <hr>
    4. <table border="1px" width="50%">
    5. 	<tr>
    6. 		<th>员工编号th>
    7. 		<th>员工名字th>
    8. 		<th>员工薪资th>
    9. 	tr>
    10. 	<tbody id="emptbody">
    11. 		
    12. 	tbody>
    13. table>
    14. 总共<span id="count">0span>条数

    本身tbody没有数据，通过点按钮，将json的数据显示到页面上
    json的数据如下

    1. // 有这些json数据
    2. var data = {
    3. 	"total" : 4,
    4. 	"emps" : [
    5. 		{"empno":7369,"ename":"SMITH","sal":800.0},
    6. 		{"empno":7361,"ename":"SMITH2","sal":1800.0},
    7. 		{"empno":7360,"ename":"SMITH3","sal":2800.0},
    8. 		{"empno":7362,"ename":"SMITH4","sal":3800.0}
    9. 	]
    10. };

    通过点击按钮框实现的代码逻辑如下
    每循环一次加一个html的页面以及json的数据
    数据都加载到tbody中

    1. document.getElementById("emptbody").innerHTML = html;
    2. document.getElementById("count").innerHTML = data.total;

    完整代码如图

    1. // 希望把数据展示到table当中.
    2. window.onload = function(){
    3. 	var displayBtnElt = document.getElementById("displayBtn");
    4. 	displayBtnElt.onclick = function(){
    5. 		var emps = data.emps;
    6. 		var html = "";
    7. 		for(var i = 0; i < emps.length; i++){
    8. 			var emp = emps[i];
    9. 			html += "";
    10. 			html += ""+emp.empno+"";
    11. 			html += ""+emp.ename+"";
    12. 			html += ""+emp.sal+"";
    13. 			html += "";
    14. 		}
    15. 		document.getElementById("emptbody").innerHTML = html;
    16. 		document.getElementById("count").innerHTML = data.total;
    17. 	}
    18. }

    8.5 面试题

    在JS当中：[]和{}有什么区别

    • [] 是数组
    • {} 是JSON

    java中的数组：int[] arr = {1,2,3,4,5};
    JS中的数组：var arr = [1,2,3,4,5];
    JSON：var jsonObj = {“email” : “zhangsan@123.com”,“age”:25};

  • 相关阅读:
    简单个人网页设计作业 静态HTML个人主题网页作业 DW个人网站模板下载 大学生简单个人网页作品代码 个人网页制作 学生个人网页Dreamweaver设计作业
    LINUX基础 第五次课 10月22日
    [springboot专栏]使用redisson实现分布式锁
    混合精子群优化和万有引力搜索算法 (HSSOGSA)（Matlab完整代码实现）
    【绝对干货】java面试笔试题及答案
    SaaSBase：微宏科技是什么？
    【Python 千题 —— 基础篇】输出列表平均值
    Jmeter系列(4) 线程属性详解
    VirtualBox配置Centos7双网卡固定IP
    【go入门】Go Module, GOPATH 与工作空间
  • 原文地址：https://blog.csdn.net/m0_61163395/article/details/126069324