JavaScript基础

山月见光

已于 2023-09-12 19:42:27 修改

阅读量472

点赞数

文章标签： javascript 开发语言

于 2023-09-09 17:05:40 首次发布

本文链接：https://blog.csdn.net/qq_58216564/article/details/132744020

版权

1 JavaScript概述

1.1 什么是JavaScript

1.1.1 概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.1.2 作用

客户端脚本语言：JavaScript 是一种在客户端（即用户的浏览器）运行的脚本语言，可以直接嵌入到 HTML 页面中，并由浏览器解析和执行。
动态性：JavaScript 允许对网页内容进行动态处理和修改。通过使用 DOM（文档对象模型）和 BOM（浏览器对象模型），JavaScript 可以添加、删除、修改网页元素，实现动态效果和交互行为。
事件驱动：JavaScript 可以对用户的交互作出响应。例如，可以通过监听鼠标点击、键盘输入和页面加载等事件来执行相应的代码。
表单验证：JavaScript 可以用于对用户输入的表单数据进行验证。通过编写验证函数，可以在提交表单之前对输入的数据进行检查，确保其符合预期的格式和要求。
数据交互：JavaScript 可以通过 AJAX（Asynchronous JavaScript and XML）技术与服务器进行异步通信，实现数据的动态加载和更新，不需要刷新整个页面。
库和框架：JavaScript 生态系统丰富，有许多优秀的第三方库和框架可供使用。比如 React、Vue、jQuery 等，它们提供了丰富的功能和便捷的开发方式，加速了网页开发的进程。

1.2 JavaScript历史

它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

1.3 JavaScript的用法

JavaScript通常简称为js,或者js脚本。

在 HTML 页面中，可以使用 <script> 标签将 JavaScript 代码嵌入到页面中。

1.3.1 HTML页面中的JavaScript

在html页面中的脚本必须位于script围堵标签之间，script标签放在head中可以，body中也可以，放在最后也可以，对位置要求不严格。

我们可以在 HTML 文档中放入不限数量的script标签，通常的做法是把内容统一放入head或者页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

PS:有些案例中可能会在 script 标签中出现type=“text/javascript”。现在完全可以省略了，JavaScript已经是所有现代浏览器以及 HTML5 中的默认脚本语言。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JavaScript的用法</title>		
		<script>
			alert("hello JavaScript1-1");
		</script>
		<script>
			alert("hello JavaScript1-2");
		</script>
	</head>
	<body>
		<script>
			alert("hello JavaScript2-1");
		</script>
		<script>
			alert("hello JavaScript2-2");
		</script>
	</body>
</html>
<script>
	alert("hello JavaScript3-1");
</script>
<script>
	alert("hello JavaScript3-2");
</script>

1.3.2 外部的JavaScript

可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。

当我们使用外部文件时，在HTML页面的script 标签的 “src” 属性中设置该 .js 文件

/*
myScript.js文件  //外部js文件中不能有script标签，直接编写JavaScript脚本代码即可
*/
function fun1(){
	alert("hello JavaScript");
}

<!DOCTYPE html>
    <html>
    	<head>
    		<script src="js/myScript.js"/>
    	</head>
        <body>
        	<script>
        		fun1();//调用脚本中的内容s
            </script>
        </body>
</html>
<!--
外部文件引入一次即可，在head或者body中都可以。
-->

PS:外部脚本不能包含 script 标签。

1.3.3 标签属性中的JavaScript

直接编写在HTML标签的一些属性中，用于简单的JavaScript代码的编写，用的偏少。

<a href="javascript:alert('ok')">登录</a>

1.4 JavaScript显示数据

1.4.1 window.alert()

window.alert() 是 JavaScript 中的一个方法，用于在浏览器中显示一个简单的弹出框，其中包含一条消息和一个确认按钮。它接受一个字符串参数作为要显示的消息。

<button onclick="showAlert()">点击我</button>

<script>
    function showAlert() {
        window.alert('这是一个弹出框！');
    }
</script>

PS：这里的window可以省略，等价于alert(“hello world”);

1.4.2 document.write()

document.write() 是 JavaScript 中的一个方法，用于将内容直接写入到 HTML 文档中。它可以在页面加载时或脚本执行过程中动态生成 HTML 内容。

<script>
    document.write('<h1>Hello, World!</h1>');
    document.write('<p>This is a paragraph.</p>');
</script>

1.4.3 innerHTML

innerHTML 是 JavaScript 中用于获取或设置 HTML 元素内容的属性。通过 innerHTML，可以获取元素的内部 HTML 内容，也可以将新的 HTML 内容插入到元素中。

<div id="myDiv">原始内容</div>

<script>
    // 获取元素的内部内容
    var originalContent = document.getElementById("myDiv").innerHTML;
    console.log(originalContent);

    // 设置元素的内部内容
    document.getElementById("myDiv").innerHTML = "<p>新的内容</p>";
</script>

1.4.4 console.log

console.log() 用于在浏览器的开发者工具（控制台）中输出信息，方便开发者进行调试和查看运行时的数据信息。

var name = 'Alice';
var age = 25;

console.log('姓名：', name);
console.log('年龄：', age);
console.log('年龄加1：', age + 1);

2 JavaScript的注释

JavaScript注释与java的单行和多行注释相同。

单行注释以 // 开头。

多行注释以 /* 开始，以 */ 结尾。

3 JavaScript基本语法

3.1 变量声明

var name = "Alice"; // 使用 var 关键字声明变量，并赋予初始值
let age = 25; // 使用 let 关键字声明块级作用域变量
const PI = 3.14; // 使用 const 关键字声明常量

// 注意：变量名区分大小写，且遵循标识符命名规则

变量的命名规则：

变量必须以字母开头
变量也能以 $ 和 _ 符号开头
变量名称对大小写敏感（y 和 Y 是不同的变量）
不能使用关键字保留字

变量的命名规范：

见名知意。例如：breadPirce,userService等，避免无意义的a,b,c等
推荐驼峰命名法，即第一个单词的首字母小写，以后每个单词的首字母大写。例如lastName

3.2 JavaScript的语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

JavaScript中也有分支结构和循环结构，语法与java类似，此处就不再深入讲解。细节上的内容等我们后面使用过的时候再给大家单独指出。

PS：一般一行只写一条语句，每句结尾编写分号结束。

3.3 JavaScript的数据类型

3.3.1 基本数据类型

数字（Number）：表示数字（整数或浮点数）。

let num = 10;

字符串（String）：表示文本。用单引号或双引号括起来。

let str = "Hello";

布尔值（Boolean）：表示逻辑值，即 true 或 false。

let bool = true;

3.3.2 复杂数据类型

数组（Array）：表示一个有序的数据集合。数组中可以存储不同类型的数据。

let arr = [1, "two", true];

对象（Object）：表示键值对的无序集合。对象中的每个键都关联着一个值。

let obj = { name: "Alice", age: 25 };

函数（Function）：是一段可重复执行的代码块。函数可以带有参数和返回值。

function greet(name) {
    console.log("Hello, " + name + "!");
}

空值（null）：表示没有值的特殊类型。

let n = null;

未定义（undefined）：表示变量尚未赋值的特殊类型。

let undef;

3.3.3 特殊数据类型

Symbol：表示唯一的、不可变的值。在对象属性的访问控制方面具有作用。

let sym = Symbol("description");

BigInt：表示任意精度的整数。在处理超出 JavaScript 数字限制的大数字时使用。

let bigNum = BigInt(123456789);

3.3.4 JavaScript拥有动态类型

JavaScript 是一种动态类型语言，变量的类型是根据值自动推断的，可以使用 typeof 运算符来确定变量的数据类型。

let num = 10;
console.log(typeof num); // 输出：number

3.4 JavaScript中的运算符

3.4.1 算术运算符

符号	描述	案例
+	加法运算符，用于相加两个值。	let sum = 2 + 3;
-	减法运算符，用于从一个值中减去另一个值。	let difference = 5 - 2;
*	乘法运算符，用于将两个值相乘。	let product = 4 * 6;
/	除法运算符，用于将一个值除以另一个值。	let quotient = 10 / 2;
%	取模运算符，用于计算一个值除以另一个值的余数。	let remainder = 7 % 3;

3.4.2 赋值运算符

符号	描述	案例
=	简单的赋值运算符。	let x = 5;
+=	将右侧的值添加到左侧的值，并将结果赋给左侧的变量。	x += 2; 相当于 x = x + 2;

3.4.3 比较运算符

符号	描述	案例
==	相等运算符，检查两个值是否相等。	let isEqual = 3 == 3; 结果为 true。
!=	不等运算符，检查两个值是否不相等。	let notEqual = 4 != 5; 结果为 true。
>	大于运算符，检查左侧的值是否大于右侧的值。	let greaterThan = 6 > 4; 结果为 true。
<	小于运算符，检查左侧的值是否小于右侧的值。	let lessThan = 2 < 5; 结果为 true。
>=	大于等于运算符，检查左侧的值是否大于或等于右侧的值。	let greaterOrEqual = 7 >= 7; 结果为 true。
<=	小于等于运算符，检查左侧的值是否小于或等于右侧的值。	let lessOrEqual = 3 <= 2; 结果为 false。

3.4.4 逻辑运算符

符号	描述	案例
&&	逻辑与运算符，如果所有操作数都为真，则返回真。	let result = true && false; 结果为 false。
\|\|	逻辑或运算符，如果任何一个操作数为真，则返回真。	let result = true
!	逻辑非运算符，用于对操作数进行取反操作。	let result = !true; 结果为 false。

4、JavaScript对象

4.1 String对象

String 对象表示文本字符串，它提供了许多用于操作和处理字符串的方法。

使用 String 构造函数创建一个字符串对象，也可以直接使用字符串字面量来创建字符串。

4.1.1 属性

length：获取字符串的长度。例如：let str = “Hello”; console.log(str.length); 的输出为 5。

4.1.2 方法

方法	描述
charAt()	返回在指定位置的字符。
charCodeAt()	返回在指定的位置的字符的 Unicode 编码。
concat()	连接两个或更多字符串，并返回新的字符串。
fromCharCode()	将 Unicode 编码转为字符。
indexOf()	返回某个指定的字符串值在字符串中首次出现的位置。
includes()	查找字符串中是否包含指定的子字符串。
lastIndexOf()	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
repeat()	复制字符串指定次数，并将它们连接在一起返回。
replace()	在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
search()	查找与正则表达式相匹配的值。
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分。
split()	把字符串分割为字符串数组。
startsWith()	查看字符串是否以指定的子字符串开头。
substr()	从起始索引号提取字符串中指定数目的字符。
substring()	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白
toLocaleLowerCase()	根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase()	根据本地主机的语言环境把字符串转换为大写。
valueOf()	返回某个字符串对象的原始值。
toString()	返回一个字符串。

4.2 Array对象

Array 对象是用于存储和操作一组值的有序列表。

4.2.1 声明

<!--
1. 使用数组字面量 []
-->
let arr = [];  // 声明一个空数组
let arr = [1, 2, 3];  // 声明一个包含元素的数组
<!--
2. 使用 new Array() 构造函数
-->
let arr = new Array();  // 声明一个空数组
let arr = new Array(1, 2, 3);  // 声明一个包含元素的数组
let arr = new Array(5);  // 声明一个长度为 5 的数组（包含 5 个 undefined 元素）

4.2.2 属性

length：返回数组中元素的个数。例如：let arr = [1, 2, 3]; console.log(arr.length); 的输出为 3。

4.2.3 方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries()	返回数组的可迭代对象。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
from()	通过给定的对象中创建一个数组。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
keys()	返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reduce()	将数组元素计算为一个值（从左到右）。
reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

4.3 Date对象

4.3.1 声明

var date1 = new Date();
var date2 = new Date(milliseconds);
var date3 = new Date(dateString);
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

4.3.2 常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。

4.4 Math对象

4.4.1 常用属性

Math.PI：圆周率常量，即圆的周长与直径的比值，约为 3.141592653589793。
Math.E：自然对数的底数，即 e 的值，约为 2.718281828459045。

4.4.2 常用方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

5 函数

5.1 常用全局函数

全局属性NaN,即非数值（Not a Number）

5.1.1 isNaN(param)

用于检查其参数是否是非数字值。

是数值的返回false，不是数值返回true。

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

5.1.2 parseFloat(String)

parseFloat(string) 用于将字符串转换为浮点数。

它接受一个参数 string，该参数是要被转换的字符串，并返回一个浮点数。

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

字符串中只返回第一个数字。

开头和结尾的空格是允许的。

如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

5.1.3 parseInt(string,radix)

parseInt(string, radix) 用于将字符串转换为整数。

它接受两个参数：string 是要被转换的字符串，radix 是一个可选参数，表示要解析的数字的基数（进制）。

参数	描述
string	必需。要被解析的字符串。
radix	可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

当忽略参数 radix , JavaScript 默认数字的基数如下:

如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN

console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16
PS:旧浏览器由于使用旧版本的ECMAScript（ECMAScript版本小于ECMAScript 5，当字符串以"0"开头时默认使用八进制，ECMAScript 5使用的是十进制），所以在解析("010") 将输出8。

只有字符串中的第一个数字会被返回。

开头和结尾的空格是允许的。

如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。
在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数。

5.2 自定义函数

5.2.1 函数声明

function functionName(parameter1, parameter2) {
  // 函数体，执行一系列操作
  // 可以使用参数 parameter1 和 parameter2
  // 返回一个值（可选）
}

var functionName = function(parameter1, parameter2) {
  // 函数体，执行一系列操作
  // 可以使用参数 parameter1 和 parameter2
  // 返回一个值（可选）
};

5.2.2 实例

// 定义一个简单的函数，计算两个数的和
function add(a, b) {
  return a + b;
}

// 调用函数，传入参数 5 和 10
var result = add(5, 10);
console.log(result); // 输出 15

// 定义一个简单的函数，计算两个数的差
var subtract = function(a, b) {
  return a - b;
};

// 调用函数，传入参数 10 和 5
var result = subtract(10, 5);
console.log(result); // 输出 5

5.3 匿名函数

<script>
  //匿名函数
  var fun = function (){
    document.write("-----fun-----<br/>");
  }
  var fun2 = function (a,b){
    document.write(a + "-----fun2-----" + b + "<br/>");
  }
  var fun3 = function (a,b){
    document.write(a + "-----fun3-----" + b + "<br/>");
    return a+b;
  }
  //调用匿名函数
  fun();
  fun2(1,3);
  var result = fun3(10,10);
  alert(result);
</script>

6 变量的作用域

6.1 局部变量

局部变量是在特定作用域内声明的变量，只在该作用域内可见和使用。

在 JavaScript 中，我们可以使用 var、let 或 const 关键字来声明局部变量。

6.2 全局变量

全局变量是在整个 JavaScript 程序中都可访问的变量，即它们具有全局作用域。

在任何地方声明的全局变量都可以在整个程序中使用。

<script>
	var userId = 1001; //全局变量：整个script脚本中都可用,要注意先后顺序

	function printMessage() {
		var userName = "李白";//局部变量：只在当前函数中生效
		document.write(userId);//使用全局变量的时候，保证使用（方法被调用）之前定义并赋值
		document.write(userName);//使用局部变量
	}	
	printMessage();
</script>
<script>
	function printMessage2() {
		var userName2 = "李白2";
		document.write(userId);//这里也可以使用userId
		//document.write(userName1);//错误：调用不到printMessage函数中的局部变量
		document.write(userName2);//正确：可以使用自己函数中的局部变量
	}
</script>

6.3 变量的生命周期

变量的生命周期指的是变量在程序中存在的时间段。它由变量的创建、初始化、使用和销毁等阶段组成。

局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

7 自定义对象

7.1 对象的定义

对象中可以有属性，也可以有方法

var person = {
  name: "John",
  age: 25,
  gender: "male",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

7.2 对象的属性

可以说 “JavaScript 对象是变量的容器”。

但是，我们通常认为 “JavaScript 对象是键值对的容器”。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为对象属性。

7.3 访问对象的属性

7.3.1 使用点符号访问属性

var person = {
  name: "John",
  age: 25,
  gender: "male"
};

console.log(person.name); // 输出："John"
console.log(person.age);  // 输出：25

7.3.2 使用方括号访问属性

var person = {
  name: "John",
  age: 25,
  gender: "male"
};

console.log(person["name"]); // 输出："John"
console.log(person["age"]);  // 输出：25

7.4 访问对象的方法

7.4.1 使用点符号访问方法

var person = {
  name: "John",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet(); // 调用方法，输出："Hello, my name is John"

7.4.2 使用方括号访问方法

var person = {
  name: "John",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

person["greet"](); // 调用方法，输出："Hello, my name is John"

7.4.3 动态调用方法

var person = {
  name: "John",
  age: 25,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

var methodName = "greet";
person[methodName](); // 动态调用方法，输出："Hello, my name is John"

8 Window–浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

BOM：Browser Object Model，中文浏览器对象模型。

虽然现在BOM尚无正式标准，但是由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此window常被认为是 BOM 的方法和属性。

8.1 window对象

window 对象是 JavaScript 提供的全局对象，它表示浏览器窗口或框架。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

Window 对象表示浏览器中打开的窗口。

8.2 window对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。(请参阅对象)
frames	返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history	对 History 对象的只读引用。请参数 History 对象。
innerHeight	返回窗口的文档显示区的高度。
innerWidth	返回窗口的文档显示区的宽度。
localStorage	在浏览器中存储 key/value 对。没有过期时间。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerHeight	返回窗口的外部高度，包含工具条与滚动条。
outerWidth	返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
screen	对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft	返回相对于屏幕窗口的x坐标
screenTop	返回相对于屏幕窗口的y坐标
screenX	返回相对于屏幕窗口的x坐标
sessionStorage	在浏览器中存储 key/value 对。在关闭窗口或标签页之后将会删除这些数据。
screenY	返回相对于屏幕窗口的y坐标
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的父窗口。

8.2.1 history对象

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

常用方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()

<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>

8.2.2 location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

常用属性和方法：

window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址
replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

8.3 window对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
atob()	解码一个 base-64 编码的字符串。
btoa()	创建一个 base-64 编码的字符串。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
getSelection()	返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()	获取指定元素的 CSS 样式。
matchMedia()	该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scroll()	已废弃。该方法已经使用了 scrollTo() 方法来替代。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。
stop()	停止页面载入。

8.3.1 打开和关闭浏览器

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

8.3.2 弹框

<script>
	//window对象常用的弹框方法
	//1、基本弹框
	window.alert("只有一个确定按钮的对话框");
	//2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回false
	var res=window.confirm("确认要关闭吗？");
	if(res){
		alert("点击了确定按钮");
	}else{
		alert("点击取消按钮");
	}
	//3、输入框：prompt(提示信息，默认值)
	var age=prompt("请输入年龄：",19);
	alert("输入的年龄信息是："+age);
</script>

8.3.3 定时器

<div id="today1">
	div--显示时间1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<div id="today2">
	div--显示时间2
</div>
<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
<script>			
	function showTime1(){
		var time=new Date();
		var y=time.getFullYear();
		var mon=time.getMonth();
		var d=time.getDate();
		
		var h=time.getHours();
		var m=time.getMinutes();
		var s=time.getSeconds();				
		document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s;				
	}
	//定时器setInterval(定时调用的函数,时间间隔毫秒)
	var flag1=window.setInterval("showTime1()",1000);			
</script>
<script>			
	function showTime2(){
		var time=new Date();
		var y=time.getFullYear();
		var mon=time.getMonth();
		var d=time.getDate();
			
		var h=time.getHours();
		var m=time.getMinutes();
		var s=time.getSeconds();
				
		document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日    "+h+":"+m+":"+s;
		flag2=window.setTimeout("showTime2()",1000);
	}			
	//在指定的毫秒数后调用函数或计算表达式。	
	var flag2=window.setTimeout("showTime2()",1000);
</script>

9 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

9.1 HTML事件

HTML 事件可以是浏览器行为，也可以是用户行为。

例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。

通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。

9.2 常用的HTML事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onfocus	元素获取焦点时触发
onblur	元素失去焦点时触发

更多事件参考：HTML事件列表

<script>
	function fun1(){
		alert('选择的内容发生了变化');
	}
	function fun2(){
		alert("触发了单击事件");
	}
	function fun3() {
		document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
	}
	function fun4() {
		document.getElementById("btn").innerHTML="点击我试试";
	}
	function fun5() {
		alert("键盘按下了");
	}
	function fun6() {
		alert("获取到了焦点");
	}
	function fun7() {
		alert("input失去了焦点");
	}
	function myLoad(){
		alert("页面加载完毕");
	}
</script>
	<body onload="myLoad()">		
		<input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
		<input id="password" type="password" />
		<button id="btn" type="button" onclick="fun2()" 
                onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
		
		<select id="month" onchange="fun1()">
			<option>1月份</option>
			<option>2月份</option>
		</select>
	</body>

10 DOM模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

DOM:Document Object Model,文档对象模型。

当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

10.1 document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示： Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

10.2 document对象常用方法

10.2.1 查找 HTML 元素常用方法

方法	描述
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.getElementsByName()	返回带有指定名称的对象集合。

<script>
	function myLoad(){
		//页面加载完毕之后再去获取页面上的元素，否则获取不到
		//根据ID 获取元素，只能获取到唯一元素（如果有重名的ID元素，获取到的是第一个元素）
		var div=document.getElementById("myDiv");
		console.log(div);
		//根据指定的类样式的名称获取元素，返回集合
		var list=document.getElementsByClassName("demo");
		console.log("根据类样式的名称获取到的元素的集合长度是："+list.length);
		for(var i=0;i<list.length;i++){
			console.log(list[i]);
		}
		//根据指定HTML标签名称获取元素，返回集合
		var list2=document.getElementsByTagName("li");
		console.log("根据标签的名称获取到的元素的集合长度是："+list2.length);
		for(var i=0;i<list2.length;i++){
			console.log(list2[i]);
		}
		//根据指定HTML元素的name属性获取元素，返回集合
		var list3=document.getElementsByName("myli");
		console.log("根据标签的名称属性获取到的元素的集合长度是："+list3.length);
		for(var i=0;i<list3.length;i++){
			console.log(list3[i]);
		}
	}
</script>
<body onload="myLoad()">
	<p  class="demo"></p>
	<div id="myDiv" class="demo">
		div
	</div>
	<ul class="demo">
		<li>li11111111111</li>
		<li name="myli">li11111111111</li>
		<li>li11111111111</li>
		<li name="myli">li11111111111</li>
	</ul>
</body>

10.2.2 修改 HTML 内容和属性

修改内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
修改 HTML 元素的内容的语法：

document.getElementById(*id*).innerHTML=*新的 HTML*。

PS：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

修改 HTML 属性
- 修改 HTML 元素属性的语法：

方式1：document.getElementById(*id*).attribute=新属性值

方式2：document.getElementById(*id*).setAttribute(属性名，属性值);

<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="新的div内容";
document.getElementById("myimg").src="x1.jpg";

<h1 style="color: green;" id="myh1">hello world</h1>
var h1=document.getElementById("myh1");
h1.setAttribute("class","bg");//设置属性
console.log(h1.getAttribute("class"));//获取属性class
console.log(h1.getAttribute("style"));//获取属性style

10.2.3 修改 HTML 元素的css

修改 HTML 元素css的语法：

document.getElementById(*id*).style.*property*=新样式

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

11.3 HTML DOM 元素 (节点)

11.3.1 创建新的 HTML 元素

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

<button type="button" onclick="createNewP()">动态添加一个元素--appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素--insertBefore</button>
<div id="div1">
	<p id="p1">这是段落1</p>
	<p id="p2">这是段落2</p>
</div>
<script>
	function createNewP(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
		//将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
		//获取一个页面已经存在的元素
		var div=document.getElementById("div1");
		//添加新创建的元素p到已经存在的元素div中
		div.appendChild(newElementP);
	}
		
	function createNewP2(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
		//将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
		
		//获取一个页面已经存在的元素
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
		//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
		div.insertBefore(newElementP,p1);
	}
</script>

11.3.2 替换 HTML 元素 -replaceChild()

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script>
    function changeElemnt(){
		var newElementP=document.createElement("p");//创建一个新的段落元素
		var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
		//将文本的节点添加到新创建的元素中
		newElementP.appendChild(text);
		//获取要被替换的元素p1及其父元素div
		var div=document.getElementById("div1");
		var p1=document.getElementById("p1");
		//将div中的元素p1替换为新创建的元素
		div.replaceChild(newElementP,p1);
	}
</script>

10.3.3 删除元素 -removeChild()

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement()">删除p1-方式2</button>
<script>
    function deleteElement(){
        var div=document.getElementById("div1");
        var p1=document.getElementById("p1");
        //从父元素div中删除子元素p1
        div.removeChild(p1);
    }
    function deleteElement2(){
        var p1=document.getElementById("p1");
        //p1.parentNode：作用就是获取要删除元素p1的父元素div
        p1.parentNode.removeChild(p1);
    }
</script>

11 表单验证

11.1 表单验证意义与场景

数据完整性：表单验证可以确保用户提交的表单数据完整，没有遗漏必填项。
- 通过设置 required 属性或自定义验证逻辑，可以要求用户填写必填字段，并在验证失败时阻止表单提交。
数据格式合法性：表单验证可以验证用户输入的数据是否符合指定的格式要求
- 电子邮件地址、电话号码、日期等。通过使用正则表达式等技术，可以对数据进行有效的格式验证，避免错误数据的提交。
提升用户体验：表单验证可以在用户输入时及时给出反馈和提示，提醒用户输入的数据是否正确。通过给出错误信息和警示，帮助用户更准确地填写表单，减少提交错误数据的可能性，提高用户的满意度和便利性。
安全性防护：表单验证可以用于防止恶意攻击和数据注入。
- 对用户提交的数据进行过滤和验证，确保不包含恶意脚本和非法字符，防止跨站脚本（XSS）攻击和 SQL 注入等常见安全威胁。
表单动态交互：表单验证还可以用于实现表单的动态交互效果。
- 在用户输入时实时检查数据的合法性，并根据验证结果动态显示或隐藏其他表单字段或错误提示，提供更智能、灵活的表单交互体验。

11.2 表单验证常用事件与属性

11.2.1 常用事件

submit：当用户提交表单时触发。可以使用该事件来执行表单验证逻辑并阻止表单的实际提交。
input：当输入框的值发生改变时触发。可以使用该事件来实时进行数据验证，给出实时反馈。

11.2.2 常用属性

required：指定一个表单字段为必填项。如果用户未填写此字段，验证将失败。
maxlength：限制输入框接受的最大字符数。
pattern：使用正则表达式指定输入的格式要求。
min 和 max：用于数字输入框，指定允许的最小值和最大值。
type：指定输入字段的类型，例如 text、email、number 等，不同类型会自动进行一些基本的验证。

11.2.3 案例-注册用户

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script>
			function validateName(){
				//所有的表单项元素都value属性
				var name=document.getElementById("userName").value;
				var msg=document.getElementById("nameMsg");
				if(name==null || name ==""){
					msg.innerHTML="用户名不能为空！";
					msg.style.color="red";
					return false;
				} else if(name.length<6){
					msg.innerHTML="用户名长度必须为大于6的！";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="用户名可用";
				msg.style.color="green";
				return true;
			}
			
			function validatePwd(){
				var password1=document.getElementById("password1").value;
				var msg=document.getElementById("pwdMsg1");
				if(password1==null || password1 ==""){
					msg.innerHTML="密码不能为空！";
					msg.style.color="red";
					return false;
				} else if(password1.length<8){
					msg.innerHTML="密码的长度必须为大于8的！";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="密码合法";
				msg.style.color="green";
				return true;
			}
			function confirmPwd(){
				var pwd1=document.getElementById("password1").value;
				var pwd2=document.getElementById("password2").value;
				var msg=document.getElementById("pwdMsg2");
				if(pwd1!=pwd2){
					msg.innerHTML="两次输入的密码不一致！";
					msg.style.color="red";
					return false;
				}
				msg.innerHTML="两次输入的密码一致";
				msg.style.color="green";
				return true;
			}
			
			function validateGender(){
				var gender=document.getElementById("gender").value;
				if(gender==-1){
					alert("性别为必选项！");
					return false;
				}
				return true;
			}
			
			function register(){
				return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
			}
		</script>
	</head>
	<body>
		<h1>英雄会注册</h1>
		<form action="提交.html" method="get" onsubmit="return register()">
			*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
				<span id="nameMsg">用户名长度至少6位</span><br />
			*密码：<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/>
				<span id="pwdMsg1">密码长度至少8位</span><br />
			*确认密码：<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
				<span id="pwdMsg2">确认密码与密码一致</span><br />
			*性别：<select id="gender">
					<option value="-1">请选择性别</option>
					<option value="0">女</option>
					<option value="1">男</option>
				</select><br /><br />
			<button type="submit">注册</button>
			<button type="reset">重置</button>
		</form>
	</body>
</html>

12 RegExp 对象-正则表达式

12.1 概念

RegExp 对象是 JavaScript 中用于处理正则表达式的内置对象。

正则表达式是一种描述字符串模式的工具，用于在文本中进行搜索、匹配和替换。

14.2 语法

语法：
var reg=new RegExp(/正则表达式主体/,修饰符(可选));
或更简单的方法
var reg=/正则表达式主体/修饰符(可选);

案例：
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此处定义了一个一个正则表达式。
kaikeba  是一个正则表达式主体 (用于检索)。
i  是一个修饰符 (搜索不区分大小写)。

13.2.1 修饰符

可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

13.2.2 正则表达式模式

方括号用于查找某个范围内的字符：

表达式	描述
[a-z]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

13.2.3 正则表达式的方法test(str)

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var reg = /kaikeba/i;
var res=reg.test("开课吧的汉语拼音为kaikeba");
console.log(res);//true

var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
var str="a公司拼音为9";
var res=reg.test(str);
console.log(res);//true
console.log(reg.test("a你好239"));//false

更多关于正则表达式的内容，参考正则表达式参考手册

13.3 常用的正则表达式校验

<script>
	/*检查输入的身份证号是否正确*/
	function checkCard(str) {
		/*15位数身份证正则表达式:
		 * 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序码。
			[1-9]\d{5}                  前六位地区，非0打头    
			\d{2}                       出生年份后两位00-99
			((0[1-9])|(10|11|12))       月份，01-12月
			(([0-2][1-9])|10|20|30|31)  日期，01-31天
			\d{3}                       顺序码三位，没有校验码
		*/
		var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
		if (arg1.length == 15 && !arg1.test(arg1)) {
             return false;
         }				
		/*
		 * 18位数身份证正则表达式:
		 * 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1位数字校验码（可为x）。
			[1-9]\d{5}                 前六位地区，非0打头
			(18|19|([23]\d))\d{2}      出身年份，覆盖范围为 1800-3999 年
			((0[1-9])|(10|11|12))      月份，01-12月
			(([0-2][1-9])|10|20|30|31) 日期，01-31天
			\d{3}[0-9Xx]：              顺序码三位 + 一位校验码
		 */
		var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
		if (arg2.length == 18 && !arg2.test(sfzhmcode)){
             return false;
         }
		return true;
	}
	/*是否是小数*/
	function isDecimal(strValue) {
		var objRegExp = /^\d+\.\d+$/;
		return objRegExp.test(strValue);
	}
	/*校验是否中文名称组成 */
	function ischina(str) {    
		var reg = /^[\u4E00-\u9FA5]{2,4}$/; 
		return reg.test(str); 
	}
	/*校验是否全由8位数字组成 */
	function isNum(str) {    
		var reg = /^[0-9]{8}$/; 
		return reg.test(str); 
	}
	/*校验电话码格式 :座机和手机*/
	function isTelCode(str) {    
		var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
		return reg.test(str);
	}
	/*校验手机号*/
	function isPhoneNum(str) { 
		//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。 
		var reg = /^1[3|4|5|7|8][0-9]{9}$/;
		// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们只要验证手机号码为11位，且以1开头。 
		var reg = /^^1[0-9]{10}$$/;
		return reg.test(str);
	}
	/*校验邮件地址是否合法 */
	function IsEmail(str) {    
		var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
		return reg.test(str);
	}
	/*检查输入的URL地址是否正确	*/
	function checkURL(str) {
		if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null) {
			return false;
		} else {
			return true;
		}
	}	
</script>

13 案例

13.1 全选/全不选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选</title>
		<script>
			function myAll(){
				var all=document.getElementById("all");
				var oneList=document.getElementsByName("one");
				for(var i=0;i<oneList.length;i++){
					oneList[i].checked=all.checked;
				}
			}
			function myOne(){
				var all=document.getElementById("all");
				var oneList=document.getElementsByName("one");
				for(var i=0;i<oneList.length;i++){
					if(oneList[i].checked==false){
						all.checked=false;
						return;
					}
				}
				all.checked=true;
			}
		</script>
	</head>
	<body>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
			<tr>
				<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox"/></td>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
			<tr>
				<td><input name="one" type="checkbox"/></td>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>￥125</td>
				<td>1</td>
				<td>￥125</td>
			</tr>
		</table>
	</body>
</html>

13.2 动态表格

表格的属性和方法	描述
table.rows	获取表格中的所有行
tr.cells	获取表格中某一行的所有单元格
tr.rowIndex	获取表格中某一行的下标索引（从0开始）
td.cellIndex	获取单元格的下标索引
table.insertRow()	在表格中创建新行，并将行添加到rows集合中
table.deleteRow()	从表格即rows集合中删除指定行
tr.insertCell()	在表格的行中创建新的单元格，并将单元格添加到cells集合中

遍历表格中的内容，动态添加行、删除行。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<style>
			td,th{
				padding: 10px;
			}
		</style>
		<script>
			function bianli(){
				var tab=document.getElementById("myTable");//获取到了表格的js对象
				//获取表格的所有行
				var trArr=tab.rows;
				//遍历行
				for(var i=0;i<trArr.length;i++){
					var trObj=trArr[i];
					//alert("行的下标索引："+trObj.rowIndex);
					//获取每行的单元格的集合
					var tdArr=trObj.cells;
					//遍历每个单元格
					var str="";
					for(var j=0;j<tdArr.length;j++){
						var tdObj=tdArr[j];
						var html=tdObj.innerHTML;//获取每个单元格中的内容
						var index=tdObj.cellIndex;//获取每个单元格的下标索引
						str+=index+"-"+html+"=====";
					}
					console.log("行的下标索引："+trObj.rowIndex+":"+str);
				}
			}
			
			function addRow(){
				//获取到表格的对象
				var tab=document.getElementById("myTable");
				//给表格添加一行
				var newTr=tab.insertRow();//创建了一个空行，在页面上看不出来
				//给新创建的行添加列
				var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格
				var newTd2=newTr.insertCell();
				var newTd3=newTr.insertCell();
				var newTd4=newTr.insertCell();
				var newTd5=newTr.insertCell();
				//给每一个单元格中添加内容
				var num=parseInt(Math.random()*10)+1;
				newTd1.innerHTML=num;
				newTd2.innerHTML="小熊饼干"+num;
				newTd3.innerHTML="$125";
				newTd4.innerHTML="1";				
				newTd5.innerHTML='<button  type="button" οnclick="delRow(this)">删除</button>';
			}
			
			function delRow(btn){
				var tab=document.getElementById("myTable");
				//btn:表示点击的当前的删除按钮，
				//btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的按钮的父元素td的父元素tr
				var trIndex=btn.parentNode.parentNode.rowIndex;
				//根据行的下标索引删除行
				tab.deleteRow(trIndex);
			}
		</script>
	</head>

	<body>
		<button type="button" onclick="bianli()">遍历表格</button>
		<button type="button" onclick="addRow()">添加</button>
		<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%"  style="text-align: center;">
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥125</td>
				<td>1</td>
				<td><button type="button" onclick="delRow(this)">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥125</td>
				<td>1</td>
				<td><button  type="button" onclick="delRow(this)">删除</button></td>
			</tr>
		</table>
	</body>

</html>

13.3 省市级联特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市级联</title>
	</head>
	<body>
		<select onchange="changeCity(this.value)">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city">
		</select>
	</body>
</html>
<script>
	//创建二维数组存储省份和对应的城市
	var cityList=new Array();
	cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
	cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
	cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
	cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
	
	function changeCity(val){
		//获取到城市的下拉列表框
		var city=document.getElementById("city");
		//先去清空原有的城市下拉列表内容
		city.options.length=0;
		var arr=cityList[val];
		for(var i=0;i<arr.length;i++){
			//创建option元素节点
			var option=document.createElement("option");
			//设置option元素节点的内容和value
			option.innerHTML=arr[i];
			option.value=arr[i];
			//将新创建的option节点添加到城市下拉框中
			city.appendChild(option);
		}
	}
</script>

13.4 图片自动轮播

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 文档加载完成的事件 onload
			2. 事件要触发 : init()
			3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
			   1. 开启定时器: 执行切换图片的函数 changeImg()
			4.  changeImg()
			   1. 获得要切换图片的那个元素
		-->
		<script>
			var index = 0;
			
			function changeImg(){
				var arr = ["../img/1.jpg", "../img/2.jpg", "../img/3.jpg" , "../img/4.jpg"];

				
				//1. 获得要切换图片的那个元素
				var img = document.getElementById("img1");
				
				//计算出当前要切换到第几张图片
				var curIndex = index % 4;  //0,1,2
				// img.src="../img/"+curIndex+".jpg";  //1,2,3
				img.setAttribute("src", arr[curIndex]);
				//每切换完,索引加1
				index = index + 1;
			}
			
			function init(){
				
				setInterval("changeImg()",1000);
			}

			// window.onload = function() {
			//     init();
            // }

		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" width="100%" id="img1"/>
	</body>
</html>

13.5 网页定时弹出广告

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			1. 确定事件: 页面加载完成的事件 onload
			2. 事件要触发函数:  init()
			3. init函数里面做一件事: 
			   1. 启动一个定时器 : setTimeout() 
			   2. 显示一个广告
			      1. 再去开启一个定时5秒钟之后,关闭广告
		-->
		
		<script>
		
			function init(){
				setTimeout("showAD()",3000);
			}
			
			function showAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//显示广告
				img.style.display = "block";
				
				//再开启定时器,关闭广告
				setTimeout("hideAD()",3000);
			}
			
			function hideAD(){
				//首先要获取要操作的img
				var img = document.getElementById("img1");
				//隐藏广告
				img.style.display = "none";
			}
		</script>
	</head>
	<body onload="init()">
		<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none;"/>
	</body>
</html>

13.6 商品的左右选择

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			步骤分析
				1. 确定事件: 点击事件 :onclick事件
				2. 事件要触发函数 selectOne
				3. selectOne要做一些操作
					(将左边选中的元素移动到右边的select中)
					1. 获取左边Select中被选中的元素
					2. 将选中的元素添加到右边的Select中就可以
		-->
		<script>
			
			function selectOne(){
//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;

				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");
				//遍历找出被选中的option
				for(var i=0; i < options.length; i++){
					var option1 = options[i];
					if(option1.selected){
		//				2. 将选中的元素添加到右边的Select中就可以
						rightSelect.appendChild(option1);
					}
				}
			}
			
			//将左边所有的商品移动到右边
			function selectAll(){
//				1. 获取左边Select中被选中的元素
				var leftSelect = document.getElementById("leftSelect");
				var options = leftSelect.options;

				//找到右侧的Select
				var rightSelect = document.getElementById("rightSelect");
				//遍历找出被选中的option
				for(var i=options.length - 1; i >=0; i--){
					var option1 = options[i];
					rightSelect.appendChild(option1);
				}
			}
			
			
			
		</script>
	</head>
	<body>
		
		<table border="1px" width="400px">
			<tr>
				<td>分类名称</td>
				<td><input type="text" value="手机数码"/></td>
			</tr>
			<tr>
				<td>分类描述</td>
				<td><input type="text" value="这里面都是手机数码"/></td>
			</tr>
			<tr>
				<td>分类商品</td>
				<td>
					<!--左边-->
					<div style="float: left;">
						已有商品<br />
						<select multiple="multiple" id="leftSelect" >
							<option>华为</option>
							<option>小米</option>
							<option>锤子</option>
							<option>oppo</option>
						</select>
						<br />
						<a href="#" id="a1"> &gt;&gt; </a> <br />
						<a href="#" id="a2"> &gt;&gt;&gt; </a>
					</div>
					<!--右边-->
					<div style="float: right;"> 
						未有商品<br />
						<select multiple="multiple" id="rightSelect">
							<option>苹果6</option>
							<option>肾7</option>
							<option>诺基亚</option>
							<option>波导</option>
						</select>
						<br />
						<a href="#"> &lt;&lt; </a> <br />
						<a href="#"> &lt;&lt;&lt; </a>
					</div>
					<script>
						var l = document.getElementById("leftSelect");
						var r = document.getElementById("rightSelect");
						var a1 = document.getElementById("a1");
						var a2 = document.getElementById("a2");
						a1.onclick = function () {
							console.log(l.options[l.selectedIndex]);
							// r.add(l.options[l.selectedIndex]); //html dom
							r.appendChild(l.options[l.selectedIndex]); //xml dom
						};
						a2.onclick = function () {
							for (var i = l.options.length - 1; i >= 0; i--) {
								r.appendChild(l.options[i]); //xml dom
							}
						};

					</script>



				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="submit" value="提交"/>
				</td>
			</tr>
		</table>
		
		
	</body>
</html>

山月见光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

1 JavaScript概述1.1 什么是JavaScript1.1.1 概念JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易入门。1.1.2 作用客户端脚本语言：JavaScript 是一种在客户端（即用户的浏览器）运行的脚本语言，可以直接嵌入到 HTML 页
复制链接

扫一扫