概念

JavaScript 是一门跨平台、面向对象的脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等。

引入方式

内部脚本

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间，在 HTML 文档中可以在任意地方，放置任意数量的<script>标签，但一般把脚本置于<body>元素的底部，可改善显示速度。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    alert("hello js1");
</script>
</body>
</html>

外部脚本

在demo.js中书写代码，如下（在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签）
注：<script> 标签不能自闭合，即必须写一对标签。

alert("hello js");

在页面中引入外部的js文件，在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

基础语法

书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无，建议加上
如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释

输出语句

使用 window.alert() 弹出警告框，window为内置对象可直接写alert()方法
使用 document.write() 写入 HTML 输出
使用 console.log() 写入浏览器控制台

变量

var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。JavaScript 是一门弱类型语言，变量可以存放不同类型的值；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数。

var test = 20;
test = "张三";

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 关键字所在的代码块内有效，且不允许重复声明。
ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

js 中的变量名命名也有如下规则，和java语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。
使用 typeof 运算符可以获取数据类型：alert(typeof age);

原始数据类型

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆可
boolean：布尔。true，false
null：对象为空。注：对null使用typeof判定得到的是Object结果
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

运算符

JavaScript 提供了如下的运算符。大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 == 和 ===。

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

==和===区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。

其他类型转为number

string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
- 使用 + 正号运算符：
- 使用 parseInt() 函数（建议使用）：
boolean 转换为 number 类型：true 转为1，false转为0

其他类型转为boolean

number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
null类型转换为 boolean 类型是 false
undefined 转换为 boolean 类型是 false

流程控制语句

与Java、C++完全一样这边不赘述（if、switch、for、while、dowhile）

函数

定义

方式1

function 函数名(参数1,参数2..){
    要执行的代码
}

方式2

var 函数名 = function (参数列表){
    要执行的代码
}

注：形式参数和返回值不需要类型，因为JavaScript是弱类型语言。

调用

调用：函数名称(实际参数列表);
注意：

JS中，函数调用可以传递任意个数参数
例如 let result = add(1,2,3);
它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

JavaScript常用对象

Array对象

定义

var 变量名 = new Array(元素列表);
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）
var 变量名 = [元素列表];
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）
注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义

访问

访问数组中的元素和 Java 语言的一样，格式如下：
arr[索引] = 值;

特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

属性

length 属性，该数组可以动态的获取数组的长度。而有这个属性，我们就可以遍历数组了

方法

push 函数：给数组添加元素，也就是在数组的末尾添加元素
splice 函数：删除元素
- 参数1：索引。表示从哪个索引位置删除
- 参数2：个数。表示删除几个元素

String对象

创建

var 变量名 = new String(s);
var 变量名 = "hello";

属性

String对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度

方法

charAt() 方法可返回指定位置的字符。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
trim() 方法用来去掉字符串两端的空格。

自定义对象

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用：

对象名.属性名
对象名.方法名()

BOM

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

1. Window对象

Window为内置对象，可以直接使用
window 对象提供了用于获取其他四个 BOM 组成对象的属性。
例如Window.History获取History对象，而前面的Window.可以省略，
即可以直接通过History获取其对象。

Window对象的方法

setTimeout(function,毫秒值) ：在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) ：在一定的时间间隔后执行一个function，循环执行
confirm("字符串");：一个弹窗，有确认和取消按钮

// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");

alert("字符串");：一个弹窗

History对象

方法：

back()：加载history列表中的前一个URL
forward()：加载history列表中的下一个URL
这两个方法就相当于浏览器的左右箭头

Location对象

Location对象属性

Location对象提供了很对属性。以后常用的只有一个属性 href：设置或返回完整的URL，举例：location.href = "https://www.baidu.com";

DOM

DOM包括：

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

作用：
JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

获取对象

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

对象使用

HTML 中的 Element 元素对象有很多，不可能全部记住，以后是根据具体的需求查阅文档使用。
举例：

//1，获取所有的 div 元素对象
var divs = document.getElementsByTagName("div");
/*
        style:设置元素css样式
        innerHTML：设置元素内容
    */
//2，遍历数组，获取到每一个 div 元素对象，并修改元素内容
for (let i = 0; i < divs.length; i++) {
    //divs[i].style.color = 'red';
    divs[i].innerHTML = "呵呵";
}

//1，获取所有的 复选框 元素对象
var hobbys = document.getElementsByName("hobby");
//2，遍历数组，通过将 复选框 元素对象的 checked 属性值设置为 true 来改变复选框的选中状态
for (let i = 0; i < hobbys.length; i++) {
    hobbys[i].checked = true;
}

事件监听

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

给输入框绑定点击事件为方法on

<input type="button" onclick='on()’>

function on(){
	alert("我被点了");
}

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn">

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

正则对象

创建对象

直接量方式：注意不要加引号

var reg = /正则表达式/;

创建 RegExp 对象

var reg = new RegExp("正则表达式");

正则对象的函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

规则

正则表达式常用的规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

Q.E.D.

你好，朋友！

概念