JavaScript
JavaScript是一门跨平台、面向对象的脚本语言
JavaScript 是一门弱类型语言，变量可以存放不同类型的值
Java是编译语言，是需要编译成字节码文件才能运行的；
JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
一. JavaScript作用
JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等
二. JavaScript引入方式
1.内部脚本：将 JS代码定义在HTML页面中
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间
2.外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
定义外部 js 文件。如定义名为 demo.js的文件
在页面中引入外部的js文件（在body标签中的最后引入）
<script src="../js/demo.js"></script>
最好将<script>标签定义在<body></body>标签中的最后，可改善显示速度。
因为浏览器在加载页面的时候会从上往下进行加载并解析。
我们应该让用户看到页面内容，然后再展示动态的效果。
注意：
外部脚本不能包含 <script> 标签，在js文件中直接写 js 代码即可，不要在 js文件 中写 script 标签。
<script> 标签不能自闭合在页面中引入外部js文件时，不能写成 <script src="../js/demo.js" />
三. JavaScript基础语法
1. 注释
1.行注释：// 注释内容
2.多行注释：/* 注释内容 */
JavaScripts输出语句
1.window.alert() 写入警告框
2.document.write() 写入 HTML 输出
3.console.log() 写入浏览器控制台
2. 变量
1.声明变量格式：
- var 变量名 = 数据值;
作用域：全局变量
变量可以重复定义
var test = 20;
test = "张三";
- let 变量名 = 数据值;
只在 let 关键字所在的代码块内有效，且不允许重复声明。
{
let age = 20;
}
2.变量名命名规则
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
3. 数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
alert(typeof age);
原始数据类型：
number：数字（整数、小数、NaN(Not a Number))
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
4. 运算符
一元运算符：++，--
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value
a.==和===区别
==:判断类型是否一样，如果不一样，则进行类型转换,再去比较其值
===：js 中的全等于,判断类型是否一样，如果不一样，直接返回false,一样在再去比较其值
b.类型转换
其他类型转为number
1.string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
使用 + 正号运算符：
var str = +"20";
使用 parseInt() 函数(方法):
var str = "20";
alert(parseInt(str) + 1);
2.其他类型转为boolean
number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
null类型转换为 boolean 类型是 false
undefined 转换为 boolean 类型是 false
3.使用场景：
在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作
5. 流程控制语句
1. if语句
var count = 3;
if (count == 3) {
alert(count);
}
2.switch语句
var num = 3;
switch (num) {
case 1:
alert("星期一");
break;
case 2:
alert("星期二");
break;
default:
alert("输入的星期有误");
break;
3.for语句
var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
sum += i;
}
4.while语句
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
5.dowhile语句
var sum = 0;
var i = 1;
do {
sum += i;
i++;
}
while (i <= 100);
6. 函数
1.函数定义格式
function 函数名(参数1,参数2..){
要执行的代码
}
（形式参数不需要类型。因为JavaScript是弱类型语言）
（返回值也不需要定义类型，可以在函数内部直接使用return返回即可）
2.函数调用
函数名称(实际参数列表);
例子：let result = add(10,20);
JS中，函数调用可以传递任意个数参数
例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。
四. JavaScript常用对象
JavaScript常用对象分三类：
1.基本对象
Array
Boolean
Date
Math
Number
String
RegExp
Global
2.BOM对象
Window
Navigator
Screen
History
Location
3.DOM对象
Document
Anchor
Area
...
1. 基本对象
暂时先学习 Array 数组对象和 String 字符串对象。
其他对象的学习参考手册：www.w3school.com.cn/jsref/index…
Array对象
1.Array对象
JavaScript Array对象用于定义数组
- 定义格式：
1.数组定义格式1：var 变量名 = new Array(元素列表);
2.数组定义格式2：var 变量名 = [元素列表];
注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义
= 元素访问：
arr[索引] = 值;
- 特点：
1.JavaScript 中的数组相当于 Java 中集合。
2.JavaScript的数组长度是可以变化的。
3.JavaScript 是弱类型，所以可以存储任意的类型的数据。
假如数组长度为3，我们在索引6的位置也可以插入任意数据类型的数据，那索引4，5位置的数据没有赋值，默认是 undefined。
2.Array 对象属性
length ：设置或返回数组中元素的数量。
举例：
var arr = [1,2,3];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}
3.Array 方法
- push 函数 ： 给数组添加元素，也就是在数组的末尾添加元素
- splice 函数 ： 删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素
String对象
1.String对象
String对象的创建方式有两种:
1.var 变量名 = new String(s);
2.var 变量名 = "数组";
2.String对象属性
length属性：用于动态的获取字符串的长度
3.String对象的函数
1.charAt():返回在指定位置的字符
2.indexOf():检索字符串
3.trim():去掉字符串两端的空格
一般用在用户登录的时候，去除用户多输入的账号密码左右的空格。
自定义对象
1.自定义对象格式：
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
2.调用属性的格式：
对象名.属性名
3.调用函数的格式：
对象名.函数名()
五. BOM对象
BOM：Browser Object Model 浏览器对象模型。
也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。
BOM 中包含了如下对象：
1. Window：浏览器窗口对象
2. Navigator：浏览器对象
3. Screen：屏幕对象
4. History：历史记录对象
5. Location：地址栏对象
BOM 中的各个对象和浏览器的各个组成部分的对应关系
1. Window对象
Window对象对应上图的蓝色线框的范围
1. 获取window对象
该对象不需要创建直接使用 window ，其中 window. 可以省略。
比如我们之前使用的 alert() 函数，其实就是 window 对象的函数
显式调用:window.alert("abc");
隐式调用：alert("abc")
2.window对象属性
history
location
Navigator
Screen
window 对象提供了用于获取其他 BOM 组成对象的属性
如果我们想使用其他BOM对象，可以通过window.对象名获取
比如：window.location,window也可以省略不写，直接写location也可以获取对象.
3.window对象函数
alert("xxx"):显示带有一段消息和一个确认按钮的警告框。
confirm("xxx"):显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval(函数(),时间间隔)：按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(函数(),时间间隔)：在指定的毫秒数后调用函数或计算表达式。
setInterval()和setTimeout()区别：
setInterval()是在一定时间间隔内循环执行function（循环执行）
和setTimeout()是在一定的时间间隔后执行一个function（只执行一次）
2. History对象
History 对象是 JavaScript 对历史记录进行封装的对象。
1.History 对象的获取
window.history
也可以省略window.
2.History 对象的函数
back():加载history列表中的前一个URL
forward():加载history列表中下一个URL
这两个函数对应浏览器中的前进和后退的按钮。
3. Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。
1.获取Location对象
方式一：window.location.方法();
方式二：location.方法();
2.Location对象属性
href:设置或返回完整的URL
举例：
alert("要跳转了");
location.href = "https://www.baidu.com";
在浏览器首先会弹框显示 要跳转了，当我们点击了确定就会跳转到百度的首页。
案例：3秒跳转到百度首页
document.write("3秒跳转到首页...");
setTimeout(function (){
location.href = "https://www.baidu.com"
},3000);
六. DOM对象
1. DOM概述
DOM：Document Object Model 文档对象模型。
也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象.
DOM封装了如下对象：
1. Document：整个文档对象
2. Element：元素对象
3. Attribute：属性对象
4. Text：文本对象
5. Comment：注释对象
1.DOM对象的作用
JavaScript 通过 DOM， 就能够对 HTML进行操作了，比如：
1.改变 HTML 元素的内容
2.改变 HTML 元素的样式（CSS）
3.对 HTML DOM 事件作出反应
4.添加和删除 HTML 元素
2.DOM 是 W3C（万维网联盟）定义的访问 HTML 和 XML 文档的标准。
该标准被分为 3 个不同的部分：
1. 核心 DOM：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
2. XML DOM： 针对 XML 文档的标准模型
3. HTML DOM： 针对 HTML 文档的标准模型
该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象
例如： <img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。
<input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是Element 对象。
2. 获取 Element对象
Element对象就是每个标签对象，比如<img>标签，<input type='button'> 标签
获取 Element对象就是获取每个标签对象，并对标签对象进行一系列操作。
Document 对象是通过 window 对象获取
Element 对象可以通过 Document 对象获取
Document 对象中提供了以下获取 Element 元素对象的函数
1. getElementById() ：根据id属性值获取，返回单个Element对象
<img id="light" src="../imgs/off.gif"> <br>
document.getElementById("light"); //根据 id 属性值获取上面的 img 元素对象，返回单个对象
2. getElementsByTagName() ：根据标签名称获取，返回Element对象数组
<div class="cls">JavaScript</div> <br>
<div class="cls">Java</div> <br>
document.getElementsByTagName("div");// 返回一个数组，数组中存储的是 div 元素对象
3. getElementsByName() ：根据name属性值获取，返回Element对象数组
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
document.getElementsByName("hobby"); //根据name属性值获取，返回Element对象数组
4. getElementsByClassName() ：根据class属性值获取，返回Element对象数组
<div class="cls">Javascript</div> <br>
<div class="cls">Java</div> <br>
document.getElementsByClassName("cls"); //根据class属性值获取，返回Element对象数组
3. HTML Element对象使用
1.改变图片（先获取图片对象，然后通过src属性修改图片地址）
var img = document.getElementById("light");
img.src = "../imgs/on.gif";
2.将所有的 div 标签的标签体内容替换为 java（先获取对象数组，通过for循环遍历对象数组，通过对象.innerHTML方法更改元素内容。
style:设置元素css样式
innerHTML：设置元素内容
var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
divs[i].style.color = 'red';
divs[i].innerHTML = "java";
}
3.使所有的复选框呈现被选中的状态
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
hobbys[i].checked = true;
}
Element对象学习链接：www.w3school.com.cn/jsref/dom_o…
七. 事件监听
1. 事件：HTML 事件是发生在 HTML 元素上的“事情”，比如：
a.页面上的 按钮被点击
b.鼠标移动到元素之上
c.按下键盘按键 等都是事件
2.事件监听:JavaScript 可以在事件被侦测到时执行一段逻辑代码,例如:
a.当我们点击某按钮，就可以通过 js 代码实现替换图片
b.光标离开 输入框,就可以校验输入框中输入的字符串数据是否正确，并给出提示。
1. 事件绑定
1.JavaScript 提供了两种事件绑定方式
方式一：通过 HTML标签中的事件属性进行绑定（在标签上定义事件属性，在事件属性中绑定函数）
//onclick：事件属性，on()代表事件触发后要执行的函数。
<input type="button" onclick='on()’>
function on(){
alert("我被点了");
}
方式二：通过 DOM 元素属性绑定（绑定事件的操作需要在 js 代码中实现）
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
2. 常见事件
| 事件属性名 | 说明 |
|---|---|
| onclick | 鼠标单击事件 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onload | 某个页面或图像被完成加载 |
| onsubmit | 当表单提交时触发该事件 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
八.表单验证案例
1. 当输入框失去焦点时，验证输入内容是否符合要求
2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交
九.RegExp对象
RegExp 是正则对象。正则对象是判断指定字符串是否符合规则
在 js 中对正则表达式封装的对象就是正则对象。
1. 正则对象使用
1.正则对象有两种创建方式：
1.直接量方式: var reg = /正则表达式/; ( 注意不要加引号 )
2.创建RegExp对象: var reg = new RegExp("正则表达式");
2.函数
test(str) ：判断指定字符串是否符合规则，返回 true或 false
2.正则表达式
正则表达式定义了字符串组成的规则。
也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
1. 正则表达式常用的规则如下：
^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符： 相当于 [0-9]
2.量词：
+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个
3.代码演示：
var reg = /^\w{6,12}$/; //创建正则对象，对正则表达式进行封装\
var str = "abcccc";
var flag = reg.test(str); //判断 str 字符串是否符合 reg 封装的正则表达式的规则
alert(flag);
验证用户名是否符合规则
1.HTML代码
<input name="username" type="text" id="username">
<span id="username_err" class="err_msg" style="display: none">用户名不符合规则</span>
2.javascript代码
//1. 获取用户名的输入框
var usernameInput = document.getElementById("username");
//2. 绑定onblur事件 失去焦点
usernameInput.onblur = checkUsername;
function checkUsername() {
//3. 获取用户输入的用户名
var username = usernameInput.value.trim();
//4. 判断用户名是否符合规则：长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}
return flag;
}
