JavaScript
今日目标
- 掌握 JavaScript 的基础语法
- 掌握 JavaScript 的常用对象（Array、String）
- 能根据需求灵活运用定时器及通过 js 代码进行页面跳转
- 能通过DOM 对象对标签进行常规操作
- 掌握常用的事件
- 能独立完成表单校验案例
3，JavaScript基础语法
3.1 书写语法
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
大括号表示代码块
下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。
xxxxxxxxxxif (count == 3) {alert(count);}
3.2 输出语句
js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同
使用 window.alert() 写入警告框
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>window.alert("hello js");//写入警告框</script></body></html>上面代码通过浏览器打开，我们可以看到如下图弹框效果
使用 document.write() 写入 HTML 输出
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>document.write("hello js 2~");//写入html页面</script></body></html>上面代码通过浏览器打开，我们可以在页面上看到
document.write(内容)输出的内容
使用 console.log() 写入浏览器控制台
xxxxxxxxxx<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>console.log("hello js 3");//写入浏览器的控制台</script></body></html>上面代码通过浏览器打开，我们可以在不能页面上看到
console.log(内容)输出的内容，它是输出在控制台了，而怎么在控制台查看输出的内容呢？在浏览器界面按F12就可以看到下图的控制台
3.3 变量
JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量==可以存放不同类型的值==；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数
xxxxxxxxxx
var test = 20;test = "张三";
js 中的变量名命名也有如下规则，和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样
作用域：全局变量
xxxxxxxxxx{var age = 20;}alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用变量可以重复定义
xxxxxxxxxx{var age = 20;var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉}alert(age); //打印的结果是 30
针对如上的问题，==ECMAScript 6 新增了 let关键字来定义变量。==它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。
例如：
xxxxxxxxxx
{ let age = 20;}alert(age);
运行上面代码，浏览器并没有弹框输出结果，说明这段代码是有问题的。通过 F12 打开开发者模式可以看到如下错误信息
而如果在代码块中定义两个同名的变量，IDEA 开发工具就直接报错了
==ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。== 通过下面的代码看一下常用的特点就可以了
我们可以看到给 PI 这个常量重新赋值时报错了。
3.4 数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
alert(typeof age);以弹框的形式将 age 变量的数据类型输出
原始数据类型：
number：数字（整数、小数、NaN(Not a Number)）
xxxxxxxxxxvar age = 20;var price = 99.8;alert(typeof age); // 结果是 ： numberalert(typeof price);// 结果是 ： number==注意：== NaN是一个特殊的number类型的值，后面用到再说
string：字符、字符串，单双引皆可
xxxxxxxxxxvar ch = 'a';var name = '张三';var addr = "北京";alert(typeof ch); //结果是 stringalert(typeof name); //结果是 stringalert(typeof addr); //结果是 string==注意：==在 js 中 双引号和单引号都表示字符串类型的数据
boolean：布尔。true，false
xxxxxxxxxxvar flag = true;var flag2 = false;alert(typeof flag); //结果是 booleanalert(typeof flag2); //结果是 booleannull：对象为空
xxxxxxxxxxvar obj = null;alert(typeof obj);//结果是 object为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
xxxxxxxxxxvar a ;alert(typeof a); //结果是 undefined
3.5 运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示
- 一元运算符：++，--
- 算术运算符：+，-，*，/，%
- 赋值运算符：=，+=，-=…
- 关系运算符：>，<，>=，<=，!=，\==，===…
- 逻辑运算符：&&，||，!
- 三元运算符：条件表达式 ? true_value : false_value
3.5.1 \==和===区别
概述:
==：
- 判断类型是否一样，如果不一样，则进行类型转换
- 再去比较其值
===：js 中的全等于
- 判断类型是否一样，如果不一样，直接返回false
- 再去比较其值
代码：
xxxxxxxxxx
var age1 = 20;var age2 = "20";alert(age1 == age2);// truealert(age1 === age2);// false
3.5.2 类型转换
上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。
其他类型转为number
string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
使用
+正号运算符：xxxxxxxxxxvar str = +"20";alert(str + 1) //21使用
parseInt()函数(方法)：xxxxxxxxxxvar str = "20";alert(parseInt(str) + 1);
==建议使用
parseInt()函数进行转换。==boolean 转换为 number 类型：true 转为1，false转为0
xxxxxxxxxxvar flag = +false;alert(flag); // 0
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
代码如下：
xxxxxxxxxx// var flag = 3;// var flag = "";var flag = undefined;if(flag){alert("转为true");}else {alert("转为false");}
使用场景：
在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：
xxxxxxxxxx
var str = "abc";//健壮性判断if(str != null && str.length > 0){ alert("转为true");}else { alert("转为false");}
但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：
xxxxxxxxxx
var str = "abc";//健壮性判断if(str){ alert("转为true");}else { alert("转为false");}
3.6 流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句，如下
- if
- switch
- for
- while
- dowhile
3.6.1 if 语句
xxxxxxxxxx
var count = 3;if (count == 3) { alert(count);}
3.6.2 switch 语句
xxxxxxxxxx
var num = 3;switch (num) { case 1: alert("星期一"); break; case 2: alert("星期二"); break; case 3: alert("星期三"); break; case 4: alert("星期四"); break; case 5: alert("星期五"); break; case 6: alert("星期六"); break; case 7: alert("星期日"); break; default: alert("输入的星期有误"); break;}
3.6.3 for 循环语句
xxxxxxxxxx
var sum = 0;for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let sum += i;}alert(sum);
3.6.4 while 循环语句
xxxxxxxxxx
var sum = 0;var i = 1;while (i <= 100) { sum += i; i++;}alert(sum);
3.6.5 dowhile 循环语句
xxxxxxxxxx
var sum = 0;var i = 1;do { sum += i; i++;}while (i <= 100);alert(sum);
3.7 函数
函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
3.7.1 定义格式
函数定义格式有两种：
方式1
xxxxxxxxxxfunction 函数名(参数1,参数2..){要执行的代码}方式2
xxxxxxxxxxvar 函数名 = function (参数列表){要执行的代码}
==注意：==
形式参数不需要类型。因为JavaScript是弱类型语言
xxxxxxxxxxfunction add(a, b){return a + b;}上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
3.7.2 函数调用
函数调用函数：
xxxxxxxxxx
函数名称(实际参数列表);
eg：
xxxxxxxxxx
let result = add(10,20);
==注意：==
JS中，函数调用可以传递任意个数参数
例如
let result = add(1,2,3);它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。