简介
JavaScript 是一门跨平台、面向对象的脚本语言==，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：
-
改变页面内容
image.png -
修改指定元素的属性值
image.png
当我们点击上图的开灯按钮，效果就是上面右图效果；当我点击关灯按钮，效果就是上面左图效果。其他这个功能中有俩张灯泡的图片（使用img标签进行展示），通过修改img标签的src属性值改变展示的图片来实现
-
对表单进行校验
image.png
在上面左图的输入框输入用户名，如果输入的用户名是不满足规则的就展示右图(上) 的效果；如果输入的用户名是满足规则的就展示右图(下) 的效果。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是基础语法类似，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。
JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript ，所有的客户端校验语言必须遵守这个标准，当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本（发布于 2015 年)，我们的课程就是基于最新的 ES6 进行讲解。
JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
- 内部脚本：将 JS代码定义在HTML页面中
- 外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
内部引入
alert时JavaScript的一个方法，作用是将参数数据以浏览器弹框的形式输出出来
而且可以在HTML文档中任意地方，放置任意数量的<script>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
alert("hello js1");
//在这里写js代码
</script>
</body>
</html>
外部引入
目录结构
注意：
- 外部脚本不能包含
<script>标签
在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签
-
<script>标签不能自闭合
在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>
JavaScript基础语法
书写语法
- 区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。 - 注释
1、单行注释：//注释内容
2、多行注释：/* 注释内容 */
3、不过JavaScript没有文档注释 - 大括号表示代码块这里与Java一样
输出语句
window.alert()弹出警告框
<script>
window.alert("hello js");//写入警告框
</script>
document.write()写入HTML输出
<script>
document.write("hello js 2~");//写入html页面
</script>
consile.log()输出到控制台
<script>
console.log("hello js 3");//写入浏览器的控制台
</script>
控制台在浏览器中按12
变量
JavaScript中用关键字var来声明变量,并且它是弱类型的语言，变量可以存放各种类型的值
var test = 20;
test = "张三"
js 中的变量名命名也有如下规则，和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
var定义的变量是全局变量，可以重复定义
//全局变量
{
var age = 20;
}
alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用
//可重复定义
{
var age = 20;
var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30
ECMAScript 6 新增了 let关键字来定义变量，他的用法类似var，但是声明的变量，只在let关键字所在的代码块有效，不允许重复声明。还新增了const关键字，声明只读常量，值无法改变跟Java的final类似
数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
alert(typeof age);以弹框的形式将 age 变量的数据类型输出
原始数据类型：
-
number：数字（整数、小数、NaN(Not a Number)）
var age = 20; var price = 99.8; alert(typeof age); // 结果是 ： number alert(typeof price);// 结果是 ： number注意： NaN是一个特殊的number类型的值，后面用到再说
-
string：字符、字符串，单双引皆可
var ch = 'a'; var name = '张三'; var addr = "北京"; alert(typeof ch); //结果是 string alert(typeof name); //结果是 string alert(typeof addr); //结果是 string注意：在 js 中 双引号和单引号都表示字符串类型的数据
-
boolean：布尔。true，false
var flag = true; var flag2 = false; alert(typeof flag); //结果是 boolean alert(typeof flag2); //结果是 boolean -
null：对象为空
var obj = null; alert(typeof obj);//结果是 object为什么打印上面的 obj 变量的数据类型，结果是object；这个官方给出了解释，下面是从官方文档截的图
image.png -
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
var a ; alert(typeof a); //结果是 undefined
运算符
JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示
- 一元运算符：++，--
- 算术运算符：+，-，*，/，%
- 赋值运算符：=，+=，-=…
- 关系运算符：>，<，>=，<=，!=，==，===…
- 逻辑运算符：&&，||，!
- 三元运算符：条件表达式 ? true_value : false_value
== 和===区别
概述:
- ==：
- 判断类型是否一样，如果不一样，则进行类型转换
- 再去比较其值
- ===：js 中的全等于
- 判断类型是否一样，如果不一样，直接返回false
- 再去比较其值
代码：
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false
类型转换
上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。
-
其他类型转为number
-
string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
-
使用
+正号运算符：var str = +"20"; alert(str + 1) //21 -
使用
parseInt()函数(方法)：var str = "20"; alert(parseInt(str) + 1);
==建议使用
parseInt()函数进行转换。== -
-
boolean 转换为 number 类型：true 转为1，false转为0
var flag = +false; alert(flag); // 0
-
-
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
代码如下：
// var flag = 3; // var flag = ""; var flag = undefined; if(flag){ alert("转为true"); }else { alert("转为false"); }
使用场景：
在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：
var str = "abc";
//健壮性判断
if(str != null && str.length > 0){
alert("转为true");
}else {
alert("转为false");
}
但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：
var str = "abc";
//健壮性判断
if(str){
alert("转为true");
}else {
alert("转为false");
}
流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句，如下
- if
- switch
- for
- while
- dowhile
if 语句
var count = 3;
if (count == 3) {
alert(count);
}
switch 语句
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;
}
for 循环语句
var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
sum += i;
}
alert(sum);
while 循环语句
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
alert(sum);
dowhile 循环语句
var sum = 0;
var i = 1;
do {
sum += i;
i++;
}
while (i <= 100);
alert(sum);
函数
函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
定义格式
函数定义格式有两种：
-
方式1
function 函数名(参数1,参数2..){ 要执行的代码 } -
方式2
var 函数名 = function (参数列表){ 要执行的代码 }
==注意：==
- 形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){ return a + b; }上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
函数调用
函数调用函数：
函数名称(实际参数列表);
eg：
let result = add(10,20);
==注意：==
- JS中，函数调用可以传递任意个数参数
- 例如
let result = add(1,2,3);它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。
基本对象
Array对象
数组的定义格式有两种：
-
方式1
var 变量名 = new Array(元素列表);例如：
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素） -
方式2
var 变量名 = [元素列表];例如：
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义。
访问方式也是与Java一样 arr[索引] = 值；
特点
JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。
属性掌握length属性 数组的长度，方法掌握下面俩种
-
push 函数：给数组添加元素，也就是在数组的末尾添加元素
参数表示要添加的元素
// push:添加方法 var arr5 = [1,2,3]; arr5.push(10); alert(arr5); //数组的元素是 {1,2,3,10} -
splice 函数：删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素
// splice:删除元素 var arr5 = [1,2,3]; arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素 alert(arr5); // {2,3}
String对象
创建的方式有俩种
-
方式1：
var 变量名 = new String(s); -
方式2：
var 变量名 = "数组";
属性：length 字符串的长度
方法：charAt() 返回在指定位置的字符 indexOf() 检索字符串
trim() 去掉字符串俩边的空格
自定义对象
格式：
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
调用属性的格式：
对象名.属性名
调用函数的格式：
对象名.函数名()
接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~
BOM对象
BOM:Browser Object Model：浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装为对象
BOM 中包含了如下对象：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
重点掌握window、History、location对象
window对象
window对象是JavaScript对浏览器的窗口进行封装的对象，并且不需要创建可以直接使用，并可以省略 ，直接使用他自己的属性
window对象属性
window` 对象提供了用于获取其他 BOM 组成对象的属性
也就是说，我们想使用 Location 对象的话，就可以使用 window 对象获取；写成 window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。
window对象函数
alert(“弹出来显示的语句”)；
confim("弹出来显示的语句");
setTimeout(函数,毫秒值)；
setInterval(函数，毫秒值)；
window.alert("警告框");
if(window.confirm("你确定删除？")){
//点击确定 返回true 取消返回false
Document.write("true 确定删除")
}
//定时器 只执行一次
window.setTimeout(function (){alert("只执行一次")},1000);
//定时器 无限定时器
window.setInterval(function (){
Document.write("每三秒执行一次，写的是毫秒值")
},3000)
//第二种
function aa(){
alert("输出了bb")
}
window.setInterval(aa,3000);
//第三种
function bb(){
alert("输出了bb")
}
window.setInterval("bb()",1000);
无限定时器 会返回一个id；
调用clearInterval(id); 结束定时器
//window 都可以省略 提供的公共方法，所以全局可用
let count = 0;
let id = window.setInterval(function (){
Document.write("每三秒执行一次，写的是毫秒值");
count++;
if(count == 10){
window.clearInterval(id);
}
},1000);
History对象：历史记录
获取对象：window.history
方法1：back() 加载history列表中华的前一个URL
方法2：forward() 加载history列表中华的下一个URL
Location对象
location.href="url";//跳转到某页面
3秒后跳转到某页
Document.write("三秒后跳转到百度");
setTimeout(function(){
locaktion.href="https://www.baidu.com";
},3000);
//也可以使用无限定时器，页面消失定时器就会失效
document.write("三秒后跳转到百度");
setInterval(function(){
locaktion.href="https://www.baidu.com";
},3000);
DOM对象
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- DOM是W3C（万维网联盟）的标准
- DOM定义了访问HTML和XML文档的标准
- W3C DOM 标准被分为3个不同的部分
- 核心DOM：针对任何结构化文档的标准模型
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- XML DOM ：针对XML文档的标准模型
- HTML DOM：针对HTML文档标准模型
- Image：<img>
- Buttom：<input type="button">
- 核心DOM：针对任何结构化文档的标准模型
主要作用就是获取对象对THML进行操作
获取Element对象
document.querySelector() ：获取单个对象
doucment.querySelectorAll()：获取多个，返回数组
里面传值，传标签选择器，类选择器，id选择器
//querySelector() 找单个，如果目标多个，默认返回第一个 传值传元素选择器和类选择器还有id选择器
//querySelectorAll() 找多个，返回的是一个数组
let aa= document.querySelector("div");
alert(aa);
let bb = document.querySelectorAll("div");
for(let i=0;i<bb.length;i++){
let a =bb[i];
document.write(a.innerHTML);
}
let cc = document.querySelectorAll(".a1");//id选择器把.a1 换成#id即可
for(let i = 0;i<cc.length;i++){
let c = cc[i];
document.write(c.innerHTML);
}
//对元素的属性进行操作（样式属性，固有属性）
//样式属性是加的样式，固属性是标签自带的
//下面是html的设置
//<img src="a.jpg">
//<div>wwwwwwwwwwwwwwwwwwww </div>
//操作样式属性 div 没有固有属性
let div= document.querySelector("div");
//style:设置元素样式
//innerHTML:设置元素内容
div.innerHTML = "我爱学习";
div.style.color="red";
//操作固有属性
let img = document.querySelector("img");
img.src="s.png";
//操作标签内容innerHTML（设置标签体用的，专门针对围堵标签用的） 以及（表单项标签）value的东西
// input标签就是围堵标签
//姓名：<input type="text" name="name" value>
let input = document.querySelector("input");
input.value="林青霞";
事件监听和绑定
绑定事件的俩种方式
方式一
<input type="text" onclick="on()">
<script>
function on(){
alert("我被点了")
}
</script>
方式二
<input type="text" >
<script>
//获取input元素
let input = document.querySelector("input");
input.onclick = function(){
alert("我被点了")
}
</script>
常用事件使用
<!--失去焦点 onblur 鼠标点击别的地方即失去焦点
获得焦点 onfocus 鼠标点击到即获得焦点
点击事件 onclick 鼠标点一下
表单提交事件 onsubmit 点击标点提交按钮 -->
<form action="#" method="get">
姓名：<input type="text" >
<input type="submit">
</form>
<script>
//获取input元素
let input = document.querySelector("input");
//失去焦点 onblur
input.onblur = function (){console.log("失去焦点")};
//获得焦点 onfocus
input.onfocus = function(){console.log("获得焦点")};
//点击事件 onclick
//表单提交事件 onsubmit
let form = document.querySelector("form");
from.onsubmit = function(){
return false;
}
</script>
表单检验
当用户注册的时候，所有的信息符合相应规则才能提交成功，否则不允许提交表单，所以对其输入的进行校验。
正则表达式
从上面创建正则对象的格式中可以看出不管哪种方式都需要正则表达式，那么什么是正则表达式呢？
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则如下：
- ^：表示开始
- $：表示结束
- [ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
- .：代表任意单个字符，除了换行和行结束符
- \w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
- \d：代表数字字符： 相当于 [0-9]
量词：
- +：至少一个
- *：零个或多个
- ？：零个或一个
- {x}：x个
- {m,}：至少m个
- {m,n}：至少m个，最多n个
正则对象
RegExp是正则对象。判断制定和字符串是否符合规则
代码演示：
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);
函数
test(str) ：判断指定字符串是否符合规则，返回 true或 false
表单验证案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">
<table>
<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>
</tr>
<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>
<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>
</table>
<div class="buttons">
<input value="注 册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>
</div>
<script>
//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");
//1.2 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
//1.3 获取用户输入的用户名
var username = usernameInput.value.trim();
//1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
//var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");
//1.2 绑定onblur事件 失去焦点
passwordInput.onblur = checkPassword;
function checkPassword() {
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();
//1.4 判断密码是否符合规则：长度 6~12
var reg = /^\w{6,12}$/;
var flag = reg.test(password);
//var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("password_err").style.display = '';
}
return flag;
}
//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");
//1.2 绑定onblur事件 失去焦点
telInput.onblur = checkTel;
function checkTel() {
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();
//1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1
//var flag = tel.length == 11;
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("tel_err").style.display = '';
return flag;
}
//1. 获取表单对象
var regForm = document.getElementById("reg-form");
//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false
var flag = checkUsername() && checkPassword() && checkTel();
return flag;
}
</script>
</body>
</html>
