JavaScript技术
JavaScript技术
一、JavaScript的定义
JavaScript是一种【基于对象】和【事件驱动】的【脚本语言】，在客户端执行，客户端主要实现数据的验证和页面的特效，大幅度提高网页的速度和交互的能力，在互联网中得到了广泛的运用。
基于对象 ： js是基于面向对象的。
事件驱动：使用的时候是结合事件一起进行驱动并使用。
脚本语言：不是一个编程语言，而是一个基于客户端的浏览器就可以解析的语言。
二、JavaScript作用
JavaScript在互联网中运用主要的作用就是，如下这2个方面：
1、大量的使用JavaScript实现页面的特效，让页面具备更多的渲染性和交互性；【站点】
2、大量的用于各类软件系统的前台数据验证，减轻服务器端的压力，从而提高性能；【软件】
提示！
我们重点关注的一定是在各种软件系统中的数据验证、前后端交互方面的处理；
三、JavaScript入门程序
引导：
我们在学习JavaScript技术之前，需要具备如下的知识作为前提：
1、html；
2、css；
JavaScript第一个入门程序:
<!--通过script这个标签，来在html页面中定义js程序代码-->
<script type="text/javascript">
/*
* 1、document就是一个内置的对象；【基于面向对象的】
2、write()这是document对象中的一个叫write的函数，函数是带有（）括号的；
3、. 表示的就是，使用的是document对象中的write函数，是一种查找的方式；
* */
document.write("这是我的第一个JavaScript程序!");
document.write("<hr/>");
</script>
注意！
当我们想在HTML页面中定义JavaScript程序的时候，只需在页面上通过script的标签来定义一个区域，在区域中编写Js程序代码，需要注意的是【每一行代码编写完毕后，需要使用；符号进行结束】。
特别提示！
我们在script标签中定义的js程序，在预览页面的时候，是可以自动的执行和解析的。
四、JavaScript引入方式
将JavaScript引入到HTML中可以有2种形式：
第一种方式：就是在HTML页面中直接通过script标签来进行定义和引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--通过script这个标签，来在html页面中定义js程序代码-->
<script type="text/javascript">
/*
* 1、document就是一个内置的对象；
2、write()这是document对象中的一个叫write的函数；
3、.表示的就是，使用的是document对象中的write函数，是一种查找的方式；
* */
document.write("这是我的第一个JavaScript程序!");
document.write("<hr/>");
</script>
</body>
</html>
注意！
在HTML页面中，可以是任意的位置。
第二种方式：就是独立的定义一个js的文件，在HTML中进行单独的引入
myjs.js文件：
document.write("这是外部独立的js文件!");
document.write("<hr/>");
html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js的引入方式</title>
</head>
<body>
<!--定义了独立的js文件，在页面中可以通过script标签进行引入-->
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
五、变量和数据类型
引言！
JavaScript和java、c语言一样，都有自己的一套语法规则，包括数据类型、变量的定义、各种流程控制语句，下面我们就开始介绍JavaScript的基本语法；
5.1、变量的定义
JavaScript变量也是用于临时存储数值的容器，在程序中变量存储的数值是可以进行变化的，在使用一个变量之前，首先声明这个变量。在JavaScript中使用【var关键字】来声明变量；
关键字：
关键字就是平台内部已经赋予了特殊含义的一些单词；
5.2、变量定义的语法格式
var 变量名称 = 值；
说明：
1、var：variable的缩写，可变类型，就是表示变量的意思；
2、变量名称：就是我们给变量定义的名字，需要符合规范即可（只能包含数字、字母、下划线等，要以字母开头，不能使用我们的一些关键字）；
3、= ：表示的是赋值符号，指代的是将右边的值交给左边的变量，在后续的程序中，这个变量就代表了这个值；
4、值 ： 任意的值；
<script type="text/javascript">
//定义一个姓名的变量;
var name = '张三';
var age = 30;
//将name本身这个内容信息写出到页面中，得到的就是 name这个内容
//document.write("name");
//将name变量的内容写出到页面中，得到的就是 name变量所代表的这个内容（'张三'）;
document.write(name); //使用变量不需要使用 ‘’ 或者是 “” ；
document.write("<br/>");
document.write(age);
</script>
<script type="text/javascript">
//声明address这个变量
var address;
//针对address变量进行赋值操作
address = '西安市';
//使用这个变量
document.write(address); //西安市
//针对address进行重新的赋值操作
address = "北京市";
//使用这个变量
document.write(address); //北京市
</script>
注意！
+号的使用：在程序中表示2层含义：
a、作用在数值之间表示的是求和运算；
b、作用在字符串中（只要满足有一侧是字符串）表示的是连接；
<script type="text/javascript">
var name = '张三丰';
var sex = '男';
// + 号在程序中有2层含义： a、左右两边是数值，则表示求和 b、如果有一边是字符串，则表示的是连接作用
document.write("这个孩子的姓名："+name+" 性别："+sex);
</script>
5.3、JavaScript注释
所谓的注释就是可以写在程序中，但是不会参与程序的执行，仅仅只是针对所编写的程序代码进行相关的说明；
/*
多行注释
多行注释 【可以直接注释掉多行的一个范围】
* */
//单行注释 【只会注释掉一行的范围】
5.4、数据类型
在JavaScript语言中不像别的编程语言一样，都具备清晰而准确的数据类型的约定，js是一种弱类型的语言，就是说对数据类型是比较模糊的，在程序执行的期间是不会做出任何的检查，所以我们在定义变量的时候直接使用的就是var（变量），而没有要求我们定义准确的类型；
数据类型 具体描述
数值类型 能够存储整数和小数类型
字符串类型 使用''或者“”包含的一个或者多个字符
布尔类型 表示的是开关原理，只有2个取值：true ， false
提示！
var name = 'admin'; name的类型是靠值来确定的；
name就是一个字符串的类型。
var age = 30; age的类型是靠值来确定的；
age就是一个整数的类型。
5.5、转换函数
提示！
鉴于在Js中，+号在字符串中进行运算的时候，表示的是连接的作用，那么如果针对字符串中的数据进行运算的话，我们就需要将包含有数值的字符串转换为相应的数值才能进行计算的处理，所以Js中也推出了2个转换函数：分别是 parseInt('整数字符串') 和 parseFloat（‘小数字符串’）；
<script type="text/javascript">
var a = '10';
var b = '20';
//以上的2个变量，都是字符串类型
//现在我们希望进行求和运算
//var sum = a+b; 1020 内部实现的是字符串的连接。
//parse:解析的意思；
var sum = parseInt(a)+parseInt(b);
//parseFloat（）:将字符串转换为小数；前提是字符串中是一个小数的格式；
document.write(sum);
</script>
注意！
字符串之间是不能进行运算的，需要通过转换函数进行转换处理；
上机任务：
1、定义一个html页面；
2、在页面中定义JavaScript程序，实现将个人的信息输出到页面上进行显示；
3、尽量让页面显示比较整洁；
4、通过定义变量的形式来进行实现；
六、运算符与表达式
在JavaScript中将所有的运算符划分为如下几类：
6.1、算术运算符
算术运算符主要是用于数学计算的操作，针对的都是数值来进行的；
+ - * / %（求模，也就是取余数） ++ --
%的使用:
<script type="text/javascript">
var a = 10;
var b = 20;
//针对数值类型的时候，我们就不需要使用转换函数进行转换了
var sum = a+b;
//显示数据的方式（以提示框的形式进行显示!）
//alert(sum);
//alter //数据库中实现表结构修改的关键字
var x = 10;
var y = 3;
var result1 = x/y; // 结果为 : 3.3333333333333335
//alert(result);
//%表示的就是求模的意思，表示的是取余数；
var result2 = x%y;
alert(result2);
</script>
++ 的使用:
<script type="text/javascript">
var x = 10;
//x++表示的含义是： 首先将x自身的值带入运算（写出到页面上），然后x自身+1；
/*document.write(x++); // 10
document.write("<br/>");
document.write(x); // 11
*/
/* x++;
document.write(x); // 11*/
// ++x表示的含义是：首先自身+1，再带入进行运算；
/*document.write(++x); // 11*/
++x;
document.write(x);// 11
</script>
6.2、比较运算符
所谓的比较运算符就是针对数据进行相关的大小或是否一致来进行比较的，【比较运算符的最终结果一定的是布尔类型】的，也就是说，要么成立|正确，要么不成立|错误的，就是我们JavaScript里面说的true | false；
> < >= <= != == ===
> < >= <= : 这几个比较运算符一定是针对数据的大小才能进行比较的；
!= == ： 这2个运算符不仅仅是用于数值之间，也可以用于其他的类型；
=== ：不仅仅是比较数值，还同时要比较类型才可以；
<script type="text/javascript">
document.write(1>2); //false
document.write("<br/>");
document.write(2>=2); //true
document.write("<br/>");
//!=使用在数值之间进行比较
document.write(1!=2); //true
document.write("<br/>");
//!=也可以用于布尔类型之间，比较左右两侧是否一致；
document.write(true!=false); //true
document.write("<br/>");
document.write(true!=true); //false
//== 或者是 ！= 也可以用于字符串中进行比较;
document.write("<br/>");
document.write('张三'=='张三'); //true
document.write("<br/>");
document.write(10=='10'); //true
//===:表示数值要相等，并且类型要一致；
document.write("<br/>");
document.write(10===10); //true
document.write("<br/>");
document.write(10=='10'); //true
document.write("<br/>");
document.write(10==='10'); //false
</script>
6.3、逻辑运算符
逻辑运算符就是 与 、或 、非 ，表示的是同时 、或者 、 取反的一种概念；【逻辑运算符的最终结果一定是布尔类型】；
&& || ！
<script type="text/javascript">
//&&:表示的是同时成立的意思，只要有一个不成立的，最终的结果就是false；
//逻辑运算符的内部使用的是“短路板”的模式设计的，可以提高处理的性能；
document.write(true&&true); // true
document.write("<br/>");
document.write(true&&false); // false
document.write("<br/>");
document.write(true&&true&&false&&true); // false
document.write("<br/>");
//我们更多的在实际的使用过程中，肯定都是由比较复杂的情况所构成的，比如：
document.write((1>2)&&(8>5)&&((700%4!=0)&&(700%100==0))); //false；
document.write("<hr/ color='red'>");
// ||:表示的是或者的意思，只要有一个成立（为true），则整个的最终结果就是 true；
//逻辑运算符的内部使用的是“短路板”的模式设计的，可以提高处理的性能；
document.write(true||false);//true;
document.write("<br/>");
document.write((1>2&&3>4)||(5<3)||true);//true;
document.write("<br/>");
// !取反
document.write(!true);
</script>
6.4、赋值运算符
在我们学习变量的时候，我们就开始在使用赋值运算符了，其实就是 = 符号；基于这个 = 赋值符号，也扩展出了许多的赋值运算符：
= += -= *= /= %=
<script type="text/javascript">
//赋值：就是将右侧的值，交给左侧的变量来进行表示；
var a = 10;
a+=5; // a+=5 其实就是等价于 a = a+5;
document.write(a); // 15
document.write("<br/>");
a-=10; // a=a-10;
document.write(a); // 5
document.write("<br/>");
a%=5; // a=a%5;
document.write(a); // 0
</script>
6.5、三目运算符
三目运算符也称为条件运算符，其语法格式如下：
表达式1?语句1：语句2；
表示的含义是：
如果表达式1的结果为true，则执行 语句1部分；
如果表达式1的结果为false，则执行 语句2部分；
注意！
表达式1必须要是一个布尔类型的结果。
<script type="text/javascript">
//?前面的表达式一定要是一个布尔类型的结果才可以；
document.write(1>2?'1>2':'1<2');
</script>
6.6、JavaScript表达式
所谓的表达式就是由【运算符】和【操作数】所构成的一个序列；
例如：
var a = 10;
var b = 20;
a+b;
a>b&&a<b;
七、函数定义及调用
7.1、函数的定义
所谓的函数：就是封装在具体的某个对象中的功能，不同的对象拥有不同的函数，可以去实现一些不同的功能。函数分为系统内部函数 和 自定义函数；
系统内部函数：parseInt() 、parseFloat() 、write（）、alert（）、prompt（）可以接受浏览器输入的字符串数据信息；
注意！以上的这些系统内部的函数都是分布于不同的对象之中；
自定义函数：就是系统内部的函数无法满足我们的需求的时候，我们就需要自己动来定义函数，实现特定的功能；
如何定义自定义的函数呢？
7.2、定义函数的语法
在JavaScript中自定义一个函数，需要使用一个关键字：function --- 函数的意思；
function 函数名称([参数列表....]){
//函数体----函数的主体部分；
}
提示！
其实我们定义一个函数，就是将一些JavaScript的程序代码进行了相应的封装，来完成一个特定的功能；代码一旦定义在函数中之后，那么这些代码是无法直接执行的，需要进行函数的调用才能够执行的；
函数的定义及函数的调用：
<script type="text/javascript">
//自定义第一个函数--------求出10+20的和，并且最终写出到页面中去;
//没有参数的函数
function fn1(){
var a = 10;
var b = 20;
var sum = a+b;
document.write(sum);
}
/**
* 一旦我们把代码封装到函数中去了之后，那么这些程序是无法直接执行的，需要针对函数进行调用才可以的；
*/
//函数的调用----通过函数的名称来进行调用即可；
//fn1();
//自定义一个含有参数的函数；----- 有了参数后，我们这个函数可以针对任意的2个数值进行求和运算；
function fn2(a,b){ //参数列表中的a和b，我们也称为“形式参数”，简称“形参”
var sum = a+b;
document.write(sum);
}
//调用fn2这个函数----有参数存在的；
//fn2(100,200); //调用的时候传入的实际参数，就是“实参”；
//自定义一个有返回值的函数
function fn3(a,b){
var sum = a+b;
//针对有返回值的函数，在最后需要使用return关键字进行数据的返回处理；
return sum; //return返回，返回到哪里了？？
}
//调用函数-----针对有返回值的函数，我们在函数调用后，可以进行结果的接收。
var result = fn3(20,25);
//在这里进行使用
document.write(result);
</script>
提示！
我们在讲解的过程中，将函数分为如下几种形式来进行讲解的：
1、无参数、无返回值的函数；
2、有参数、无返回值的函数；
3、有参数、有返回值的函数；
补充一个系统函数： prompt()
<script type="text/javascript">
//实现浏览器输入信息和js程序之间的交互功能
var input = prompt("请输入一个你的姓名:");
alert(input);
//第二个参数，表示的是一个默认值
var input1 = prompt("请输入一个你的姓名:","admin");
alert(input1);
</script>
八、流程控制语句
我们在编写JavaScript的程序代码的过程中，如果仅仅是按照自上而下的顺序来依次执行程序的话，那么将来我们能够实现出来的功能就会非常的有限，所以在Js中也存在相应的流程控制语句，针对程序的执行流程进行控制，程序中存在的流程控制语句有如下三大结构（编程语言是一样的）：顺序结构 、 选择结构、循环结构。
8.1、选择结构
基本IF结构：
if(表达式){
//语句代码;
}
如果表达式为true，则执行语句部分，否则跳过if不执行任何的操作；
<script type="text/javascript">
//if语句就是具有判断性的语句，针对判断的结果可以跳过某些代码的执行
var input = prompt('请输入一个数据:','');
if(input<0){
//负数
document.write('输入的是一个负数！');
}
if(input>0){
//正数
document.write('输入的是一个正数!');
}
</script>
IF-ELSE结构：
if(表达式){
//语句1；
}else{
//语句2；
}
如果表达式为true，则执行语句1部分操作，否则（false的话）也会执行语句2的部分操作；
<script type="text/javascript">
var input = prompt("输入的数据:",'');
if(input>=0&&input<=100){
//科目的成绩的合法范围
document.write(input+"是一个合法的成绩数据");
}else{
//其余的数据取值，不是在（0---100）范围内的；
document.write(input+'不是一个合法的成绩数据');
}
</script>
IF-ELSE IF 结构：
if(表达式1){
//语句1;
}else if(表达式2){
//语句2；
}else if(表达式3){
//语句3；
}.......
else{
//语句N;
}
注意！
多重if语句，是一个基于“短路板”的模式，也就是说只要其中有一个表达式的结果为true，则执行语句部分，后续的条件不会再进行检查，这样可以很好的提高程序的性能；
<script type="text/javascript">
//要求：
//输入一个成绩，将这个成绩进行分类的评级；
var score = prompt('输入您的成绩:','');
//针对不同的区间来进行评级的处理
if(score>=90&&score<=100){
document.write('A');
}else if(score>=80&&score<90){
document.write('B');
}else if(score>=70&&score<80){
document.write('C');
}else if(score>=60&&score<70){
document.write('D');
}else{
document.write('不及格');
}
</script>
IF语句的嵌套：
if(表达式1){
if(表达式2){
//语句；
}else{
//语句;
}
}else{
if(表达式2){
//语句；
}else{
//语句；
}
}
<script type="text/javascript">
//需求：任何的输入三个数，求出其中的最大的那个数，并写出到页面中；
var a = prompt('请输入第一个数:','');
var b = prompt('请输入第二个数:','');
var c = prompt('请输入第三个数:','');
//检测一下输入的数据的类型
//alert(typeof(a)); // 输入的数据都是string字符串类型；
//将所有的字符串类型的数据转换为整数的类型；
a = parseInt(a);
b = parseInt(b);
c = parseInt(c);
//定义一个变量保存最大值;
var max;
if(a>b){
//a 大 ， b 小
if(a>c){
max = a;
}else{
//c>a>b
max = c;
}
}else{
//b大 ， a小
if(b>c){
max = b;
}else{
// c>b>a
max = c;
}
}
document.write(a+','+b+','+c+' 中最大的值为:'+max);
</script>
提示！
以上的这些IF语句结构，if后面的表达式一定是一个布尔类型（true|false）的结果；
SWITCH-CASE结构：
switch(表达式){
case 值1:
语句1;
break;
case 值2:
语句2;
break;
..........
default:
语句N;
break;
}
工作的流程：
switch后面的表达式的结果，只要和下面的任意的一个case的值匹配了，那么就会执行case下的相应的语句，然后通过break关键字进行跳出。
如果所有的case都不匹配，则会执行default中的语句。
<script type="text/javascript">
var value = 2;
switch (value){
case 1:
//在控制台进行数据的输出；
console.log('1');
break;
case 2:
//在控制台进行数据的输出；
console.log('2');
//break;
case 3:
//在控制台进行数据的输出；
console.log('3');
break;
case 4:
//在控制台进行数据的输出；
console.log('4');
break;
default:
console.log('都不匹配!');
break;
}
</script>
注意！
1、case后面的值，是不能重复的，并且是一个常量的值，不能是变量；
2、我们可以在case中针对break进行省略，程序会产生多个case的穿透，直到下一次遇到break为止才会跳出switch的语句体，执行的是一组case的相关操作；
3、default缺省是可以被省略的；
8.2、循环结构
在JavaScript中用于控制程序反复执行的结构就是循环结构，最为常见的几种循环结构有：
for循环
for标准循环
for--in循环
for--of循环
while循环
do-while循环
8.2.1、for循环
for标准循环语法结构：
for(var i=0;i<5;i++){
//循环体部分语句;
}
<script type="text/javascript">
//这就是一个10次的循环结构
for(var i=1;i<=10;i++){
console.log('这是第'+i+'此执行程序');
console.log(i);
console.log('----------');
}
//在实际运用的过程中，我们也可以根据需要进行拆分；
var i = 1;
var value = 5;
for(;i<=value;){
console.log('这是第'+i+'此执行程序');
console.log(i);
i++;
console.log('----------');
}
</script>
8.2.2、for-in循环
for-in循环语法结构：
for(var 变量 in 数组|对象){
//操作
}
注意！
在for-in语句中得到的变量的值是下标值；
<script type="text/javascript">
//数组，就是一组数；
var array = ['admin','guest','tom','lucy'];
//使用for-in语句来进行操作
for(var index in array){
//for-in语句中的index是数组的下标值
console.log('下标：'+index); // 0 1 2 3
//通过下标再获取数组中的元素值
console.log('值：'+array[index]); // admin guest tom lucy
}
</script>
8.2.3、for-of循环
for-of循环语法结构：
for(var 变量 of 数组|对象){
//操作
}
注意！
在for-of语句中得到的变量就是具体的值；
<script type="text/javascript">
//数组，就是一组数；
var array = ['admin','guest','tom','lucy'];
//使用for-of语句来进行操作
for(var value of array){
//这个value就是数组中的每一个具体的元素值
console.log(value);
}
</script>
for 、 for-in 、 for-of的使用场景区分:
1、for循环就是一般的基本循环，可以直接针对数值进行循环范围的确定；
2、for-in是针对数组或者对象来进行循环处理的，循环得到的是下标或者是key键；
3、for-of是针对数组或者对象来进行循环处理的，循环的到的是元素值；
4、学习开发的同学，不要和Java语言进行混淆；
8.3、while循环
while循环语法结构：
while(条件表达式){
//循环体（业务）;
//必须要有改变条件的语句;
}
注意！
1、while后面的条件表达式只能是一个布尔类型的结果；
2、在循环体中必须要有改变条件的语句，否则就是一个死循环；
<script type="text/javascript">
var x = 1;
while(x<=5){
console.log('x的值是:'+x);
//存在改变条件的语句,否则就是一个死循环；
x++;
}
</script>
while循环有一个特点：
首先进行条件的判断，再确定是否执行循环，如果条件不成立，则1次循环都不会执行；
8.4、do-while循环
do-while循环语法结构：
do{
//循环体；
//需要有改变条件的语句;
}while(条件表达式);s
注意！
1、while后面的条件表达式只能是一个布尔类型的结果；
2、在循环体中必须要有改变条件的语句，否则就是一个死循环；
<script type="text/javascript">
var index = 1;
do{
console.log('index的值是:'+index); //1 1
//一定要有改变条件的语句
index++;
}while(index<=5);
</script>
do-while循环有一个特点：
首先执行1次循环，再进行条件的判断，确定是否继续进行后续的循环，也就是说do-while循环即使是条件不成立，至少都会执行1次循环；
8.5、跳转语句
在JavaScript中同样存在如下这几个有关程序跳转的语法，分别是：
continue : 使用于循环结构中（for、while、do-while），表示终止当前的本次循环；
break :
a、使用在switch-case语句中，表示的是跳出整个switch的语句体；
b、使用在循环（for、while、do-while）中，表示终止后续的所有的循环；
return : 可以在很多的地方进行使用，比如：有返回值的函数、各种语句中表示的是函数执行结束；
如果return是使用在有返回值的函数中，那么必须是【return + 值】 的形式进行数据的返回，返回的是函数的调用处；如果return是单独进行使用，那么必须要在函数的环境中，表示的是将这个函数的执行进行终止。
continue的运用：
<script type="text/javascript">
for(var i=1;i<=5;i++){
if(i==3){
//终止了当前i==3的时候这次循环；
continue;
}
//后续的4 和 5的时候，程序继续执行循环；
console.log(i);
}
</script>
输出结果： 1 2 4 5
break的运用：
<script type="text/javascript">
for(var i=1;i<=5;i++){
if(i==3){
//终止了后续所有的循环
break;
}
//后续的3 、4 和 5的循环全部被终止掉了；
console.log(i); // 结果 ： 1 2
}
</script>
输出结果： 1 2
return的运用：
<script type="text/javascript">
//自定义的一个函数
function fn1(){
console.log('函数开始执行！');
for(var i=1;i<=5;i++){
console.log('A');
console.log('B');
if(i==3){
//终止的是整个函数fn1的执行（将函数停掉了）
return;
}
console.log('C');
}
console.log('函数执行结束!');
}
fn1();
</script>
九、JavaScript对象
9.1、数组Array对象
数组其实就是JavaScript中的一个对象Array，表示的是可以保存同种类型的批量数据的一种容器；
9.1.1、如何创建数组
在JavaScript中创建数组可以有如下的三种形式：
常规方式，创建数组并进行元素的赋值
var 变量名 = new Array();
变量名[index] = 值;
<script type="text/javascript">
//创建数组，并通过下标进行赋值操作
var myArray = new Array();
//赋值
myArray[0] = 'A';
myArray[1] = 'B';
myArray[2] = 'C';
myArray[3] = 'D';
console.log(myArray);
</script>
注意！
数组其实就是保存的一组数据，针对数组进行操作的时候，我们使用的都是数组的【下标】，一个数组的合法下标是从0开始的，最大是数组的长度-1结束；
简洁方式，直接创建并赋值
var 变量名 = new Array('admin','guest','tom');
<script type="text/javascript">
var myArray1 = new Array('中国','美国','德国','加拿大');
console.log(myArray1);
</script>
隐式创建方式
var 变量名 = ['admin','guest','tom'];
<script type="text/javascript">
var myArray2 = ['苹果','橘子','香蕉'];
console.log(myArray2);
</script>
9.1.2、数组的属性
在数组的属性中，我们只是需要掌握一个就可以了：
length ： 表示的是自动获取数组的长度（数组中元素的个数）。
9.1.3、数组方法(操作)
在JavaScript中我们习惯称为“函数”，其实函数也就是我们各种编程语言中所说的“方法”。
结论： 函数 = 方法，只是不同的表达方式而已！
不管是函数还是方法，都是某些对象中定义的实现某种特定功能的代码的封装体（函数|方法），我们在学习的过程中需要掌握一些常用的方法|函数，有助于我们来实现比较复杂的一些功能。
数组的合并：concat函数的使用
<script type="text/javascript">
//定义的第一个数组arr
var arr = new Array(3)
arr[0] = "Jani"
arr[1] = "Tove"
arr[2] = "Hege"
//定义的第二个数组
var arr2 = new Array(3)
arr2[0] = "John"
arr2[1] = "Andy"
arr2[2] = "Wendy"
//运用了数组对象中的 concat函数来实现数组的合并
document.write(arr.concat(arr2))
</script>
将数组的元素生成一个字符串： join函数的使用
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
document.write(arr.join() + "<br />") //默认的是 ， 号进行连接元素；
document.write(arr.join(".")) //自定义的是.号进行连接元素；
var myDate = ['2021','12','29'];
//将数组中的元素使用 - 符号进行连接，生成一个字符串的结果；
var myStr = myDate.join('-');
console.log(myStr);
</script>
数组元素的排序：sort函数的使用
<script type="text/javascript">
//自定义一个比较函数(内部进行大小的比较，从而确定位置)
function mySortFn(a,b){
return a-b;
}
var array1 = [1,5,3,20,6,4];
//针对数组进行排序 ---- 为了更好的可靠，我们都会自定义一个比较函数
array1.sort(mySortFn); //传入这个自定义的函数；
console.log(array1);
var myArray2 = ['10','8','3','6','1'];
//自定义一个比较函数
function mySortFn(a,b){
return a-b;
}
myArray2.sort(mySortFn);
console.log(myArray2);
//针对文本字符串内容也是可以进行排序的，直接使用sort函数即可。
var arr = new Array()
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
arr[5] = "Tove"
arr[6] = "Jbni";
document.write(arr + "<br />")
document.write(arr.sort())
</script>
如果是中文汉字，那么每个汉字都唯一性的对应着一个ASCCI码值，也是可以用于比较大小的，从而形成排序的效果；
提示！
针对数组中的元素，我们可以通过for-in语句来获取到下标，也可以直接通过for-of语句获取到元素值；
9.2、日期Date对象
提示学习的重点：
1、如何创建日期对象；
2、日期操作常用的函数的学习；
9.3、字符串String对象
参阅JavaScript手册中的各种API....
9.4、数学运算Math对象
通过我们对Array数组对象的学习，希望大家能够掌握API的使用和对象的学习方法，参考手册进行对象的属性和常用函数的学习和掌握。
十、事件
JavaScript也是一种基于【事件驱动】的脚本语言，其中的事件驱动指的就是我们今天所学习的事件，在JavaScript中涉及到的事件有很多种类，但是我们经常使用的事件其实并不是很多，主要是常用的几种。
注意！
我们直接在script标签中编写的js程序，在打开页面的时候会自动进行执行，我们无法进行精确的控制和调用；所以我们
通常会将这些Js程序代码封装在 函数 中，在需要的时候通过调用的方式来进行执行；但是没有和HTML中的元素进行关联
那么我们肯定最终需要的是 操作某些HTML元素的时候，去掉用相关的一些函数来进行相应的功能的处理。
学习事件的要点：
1、掌握事件的写法；
2、掌握事件的特点（事件是干吗的）；
3、什么行为（操作）会触发这个事件；
<!--点击事件-->
<button onclick="test1();">点我呀</button>
<script type="text/javascript">
function test1(){
alert('你对我进行了操作!');
}
//针对test1函数进行调用
//test1();
</script>
<!--onblur ： 失去焦点的时候，会进行触发-->
<p>UserName:<input type="text" onblur="test2();" /></p>
<p>Password:<input type="password"/></p>
<script type="text/javascript">
function test2(){
alert("在切换的时候，我执行了!");
}
</script>
<!--
onchange :表示输入框中的内容进行改变的时候，会自动进行触发
-->
<p>
账号:<input type="text" onchange="test3();"/>
</p>
<script type="text/javascript">
function test3(){
alert('我是test3函数!');
}
</script>
<select onchange="fn1();">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">成都</option>
<option value="">洛阳</option>
</select>
<script type="text/javascript">
function fn1(){
alert('test');
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="服务器.html" method="post" onsubmit="return checkData();">
<p>
账号:<input type="text" />
</p>
<p>
密码:<input type="password" />
</p>
<p>
<input type="submit" value="提交" />
</p>
</form>
<script type="text/javascript">
function checkData(){
alert('针对输入的数据进行验证!');
//如果一旦发现数据验证存在不合法的情况，应该停留在当前的页面进行数据的调整，阻止发送到服务器端
//return true;
return false;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>服务器端正在处理数据...</h1>
</body>
</html>
注意！
在使用onsubmit事件的时候，需要注意如下的几点：
1、在form表单提交的时候，我们使用的是onsubmit事件进行函数的调用；
2、form表单最终是否会到达指定的服务器端，取决于onsubmit事件所调用的函数的返回结果来确定的；
3、函数返回的是true，则执行函数后会继续提交到服务器端，函数返回的是false，则会在执行完毕函数后，停留在本页面上；
4、如果想达到如上的效果，那么onsubmit事件在调用函数的时候，必须要使用return关键字来进行定义，表示将这个函数的返回结果再次的告诉form表单从而来确定是否继续提交到服务器端；
<body onload="fn1();">
<button>我是按钮</button>
<script type="text/javascript">
function fn1(){
alert('页面被加载了！');
}
</script>
</body>
提示！
在页面加载的时候，就触发了onload事件，此时页面中的元素还没有进行渲染；
<!DOCTYPE html>
<html>
<body>
<-- onselect ： 在文本选中的时候，触发此事件 -->
请选择一些文本：<input type="text" value="Hello world!" onselect="myFunction()">
<script>
function myFunction() {
alert("You selected some text!");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width:200px;
height:80px;
background-color: green;
}
</style>
</head>
<body>
<div id="div1" onmouseover="over();" onmouseout="out();">
</div>
<script type="text/javascript">
function over(){
alert('鼠标悬浮!');
}
function out(){
alert('鼠标离开!');
}
</script>
</body>
</html>
十一、DOM编程
11.1、DOM定义
DOM就是（Document Object Model）(文档对象模型)，根据W3C DOM规范，DOM是HTML的应用编程接口(API)，DOM
将整个页面映射为一个由层次节点组成的对象。
提示！
所谓的DOM编程就是将整个HTML中所有的元素视为一个可以操作的对象（属性、函数），针对元素进行操控、也可以操作元素的属性等；
11.2、获取DOM元素的API
注意！
针对DOM操作，就是将HTML文档看成是一个document的对象，可以使用这个对象中的属性和方法来针对文档进行相关的操作。
在HTML文档中获取元素的常见函数
通过元素中的id属性值来查找元素对象：
var obj = document.getElementById("id属性的值");
最终得到的obj仅仅只是一个对象，因为id是唯一性的；
通过元素中的class属性值来查找元素对象：
var objs = document.getElementsByClassName("class属性的值");
最终得到的objs是一个对象的集合，因为class是一组元素；
批量元素的获取：
document.getElementsByName('name属性的值');
document.getElementsByTagName('标签的名称');
11.3、DOM操作的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="success.html" method="get" onsubmit="return checkUserInfo();">
<table border="1px" width="450px" align="center">
<tr>
<td>UserName:</td>
<td><input type="text" id="userName" /></td>
</tr>
<tr>
<td>手机 :</td>
<td><input type="text" class="tel"/></td>
</tr>
<tr>
<td>座机 :</td>
<td><input type="text" class="tel"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/> </td>
</tr>
</table>
</form>
<!--编写函数实现表单数据的验证-->
<script type="text/javascript">
function checkUserInfo(){
//①、找到表单中哪些填入数据信息的控件对象
var userNameInput = document.getElementById("userName");
//②、获取输入框中的值(使用的是对象中的value属性)
var userName_value = userNameInput.value;
//获取批量元素
var tels = document.getElementsByClassName("tel");
document.getElementsByName('name属性的值');
document.getElementsByTagName('标签的名称');
//③、进行校验
if(""==userName_value){
alert('用户名必须要填写!');
return false;
}else{
//要求必须至少是6位
if(userName_value.length<6){
alert('用户名至少是6位!');
return false;
}
}
return true;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="showData();">显示数据</button>
<hr />
<div id="show">
</div>
<script type="text/javascript">
function showData(){
//找到显示信息的div元素对象
var div = document.getElementById('show');
//将显示的数据信息进行嵌入
//div.innerHTML='这是我要显示的信息...';
div.innerHTML='<h1>国内新闻</h1><p>西安近期疫情比较严重...</p>';
}
</script>
</body>
</html>
十二、数据验证
12.1、H5自带验证
H5就是HTML的5的版本，在这个版本中发生了一些比较重大变化（在H5的版本中废除了原来4.0的一些标签，同时也加入
了一些新的标签），这些标签发生变化的主要目标是为了进一步的达到“语义化”。
<body>
<form action="" method="get">
<p><input type="text" maxlength="6" required="required"> <input type="submit" value="提交" /></p>
</form>
<form action="" method="get">
<p><input type="email" required="required"> <input type="submit" value="提交" /></p>
</form>
<form action="">
<p><input type="url"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="color"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="number" max="10" min="1" > <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="range"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="search" required="required"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="date"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="month"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="week"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="time"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="datetime" required="required"> <input type="submit" value="提交"></p>
</form>
<form action="">
<p><input type="datetime-local"> <input type="submit" value="提交"></p>
</form>
</body>
总结！
1、在H5中多出了一些控件的类型，自带了验证的功能；
2、各种标签也可以通过属性的使用来进行相关的限制；
12.2、Js实现表单验证
博客网的数据验证：
function checkInfo(){
var flag = true;
//针对用户名是否为空的验证
var userNameInput = document.getElementById('username');
var userNameValue = userNameInput.value;
if(''==userNameValue){
alert('用户名必须要填写!');
flag = false;
return flag;
}
//针对密码进行是否为空 + 长度至少是6位的限制;
var pwdInput = document.getElementById('pwd');
var pwdInputValue = pwdInput.value;
if(''==pwdInputValue){
alert('密码必须要填写！');
flag = false;
return flag;
}else{
if(pwdInputValue.length<6){
alert('密码设置至少是6位!');
flag=false;
return flag;
}
}
//针对重复密码的校验（1、不能不填写 2、2次输入必须要保证一致性）
var regPwdInput = document.getElementById('regPwd');
var regPwdInputValue = regPwdInput.value;
if(''==regPwdInputValue){
alert('重复密码必须要填写！');
flag=false;
return flag;
}else{
if(pwdInputValue!=regPwdInputValue){
alert('两次密码不一致!');
flag=false;
return flag;
}
}
//针对email的校验（1、不能为空 2、必须要符合邮箱的规范）
var emailInput = document.getElementById('email');
var emailInputValue = emailInput.value;
if(''==emailInputValue){
alert('邮箱必须要填写！');
flag = false;
return flag;
}else{
//xianjiyong@163.com
//保证符合邮箱的规范(含有@符号和. , 并且.是在@符号之后出现的)
//emailInputValue就是我们输入的邮箱数据
if(emailInputValue.indexOf('@')==-1){
alert('邮箱必须要含有@符号!');
flag=false;
return flag;
}
if(emailInputValue.indexOf('.')==-1){
alert('邮箱必须要含有.符号!');
flag=false;
return flag;
}
if(emailInputValue.indexOf('.')<emailInputValue.indexOf('@')){
alert('@符应该在.的前面!');
flag=false;
return flag;
}
}
return flag;
}
以上我们通过纯手动的方式来实现数据的检验，发现某些情况的处理会变得相对比较复杂，比如：邮箱、手机号、身份证等的验证。
针对所有的字符串都有一种处理的利器（正则表达式），正则表达式都是针对字符串的处理；
正则表达式的使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="success.html" method="get" onsubmit="return checkUserInfo();">
<table border="1px" width="450px" align="center">
<tr>
<td>UserName:</td>
<td><input type="text" id="userName" /></td>
</tr>
<tr>
<td>手机 :</td>
<td><input type="text" class="tel"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
<!--使用正则表达式对手机号进行验证-->
<script type="text/javascript">
function checkUserInfo(){
//手机号是以 134，135，138 开头的手机号
var telInput = document.getElementsByClassName('tel')[0];
var telInputValue = telInput.value;
//telInputValue 就是一个我们填写的手机号的字符串
var reg = /^13[4|5|8][0-9]{8}$/;
//test函数就是使用正则表达式的模式来匹配传入的字符串
//如果匹配（一致）：返回true,否则返回的就是false
var result = reg.test(telInputValue);
if(!result){
alert('格式不匹配!');
return false;
}
return true;
}
</script>
</body>
</html>
通过上面对正则表达式的使用，我们发现确实比使用JavaScript去验证来的方便，但是正则表达式也存在自身的一些难度，那就是掌握不同的符号的使用方法，功能越复杂编写出来的正则表达式的可读性就会比较差；
十三、Ajax操作
在原生的JavaScript中可以使用Ajax技术实现前后端的数据交互，其中针对json格式的数据处理较多，其中就会涉及到针对json格式的字符串转换为json格式的对象的操作，可以使用如下的2种转换形式:
var jsonStr = "json格式的字符串";
var jsonObj = eval('('+jsonStr+')');
jsonObj = JSON.parse(jsonStr);
