JavaScript基础之语法
介绍
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript特点
- JavaScript 是一门脚本语言。
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
- JavaScript 很容易学习。
JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则表达式 添加 try/catch |
| ECMAScript 4 | 没有发布 | |
| 2009 | ECMAScript 5 | 添加 "strict mode"，严格模式 添加 JSON 支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 增加指数运算符 (**) 增加 Array.prototype.includes |
用法
HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的
和 部分中。通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
实例1：head中的script函数
head标签中script
我的函数
一段话
实例2：body中的script函数
body中的script
我的函数
我的函数
JavaScript也可以放在外部供调用，注意外部拓展名为.js。
实例3：外部调用JavaScript
外部调用.js
function myFunction() {
document.getElementById('demo').innerHTML = "这是我的函数"
}调用外部script
调用外部script
一段文字
输出
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
实例1：aler()弹窗输出
alert输出
alert输出
实例2：document.write()输出
document.write输出
document.write输出
实例3：写到HTMl文档
写到HTMl文档
写到HTMl文档
实例4：使用 console.log() 写入到浏览器的控制台
使用console.log()写入到浏览器的控制台
console.log()写入到浏览器的控制台
语法介绍
JavaScript 是一个脚本语言，它是一个轻量级，但功能强大的编程语言。
字面量
在编程语言中，一般固定值称为字面量。
- 数字（Number）字面量：可以是整数或者是小数，或者是科学计数(e)。如3.14，5.88等。
- 字符串（String）字面量：”可以使用单引号或双引号。如"Hello"，"Web"等
- 表达式字面量：用于计算的固定值。3 + 2.2,3.14 * 2等。
- 数组（Array：字面量：定义一个数组。如[1,2,3,4,5,6]。
- 对象（Object：字面量：定义一个对象。如{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}。
- 函数（Function）字面量：定义一个函数。如function myFunction(a, b) { return a * b;}。
注意，在JavaScript中，语句需要加结束符“；”。
JavaScrip变量
在编程语言中，变量用于存储数据值。JavaScript 使用关键字var来定义变量， 使用等号来为变量赋值，变量之间可以相互操作：
var y = false // 布尔值
var length = 16; // 数字
var points = x * 10; // 数字计算
var lastName = "Johnson"; // 字符串
var cars = ["Saab", "Volvo", "BMW"]; // 数组
var person = {firstName:"John", lastName:"Doe"}; // 对象字典
JavaScript函数
为了能够重复引用相同的功能，减少代码的书写和维护的方便，JavaScript提供函数功能，由关键字function引导：
function myFunc(a, b) {
return a + b; // 返回a+b结果
}JavaScript特点
相对其它语言，JavaScript具有下列特点：
- JavaScript对大小写敏感。
- JavaScript使用Unicode字符集。
- JavaScript推荐使用驼峰命名法定义变量，命名避免关键字。
- JavaScript属于弱类型语言，定义变量都是var关键字。
| abstract | else | instanceof | super |
| boolean | enum | int | switch |
| break | export | interface | synchronized |
| byte | extends | let | this |
| case | false | long | throw |
| catch | final | native | throws |
| char | finally | new | transient |
| class | float | null | true |
| const | for | package | try |
| continue | function | private | typeof |
| debugger | goto | protected | var |
| default | if | public | void |
| delete | implements | return | volatile |
| do | import | short | while |
| double | in | static | with |
JavaScript注释（与Java相同）
// 这是代码：单句注释，在编辑器一般是ctrl + L键。
/* 这是代码 */：多行注释，在编辑器一般是ctrl + shift + L键。
语句
JavaScript语句向浏览器发出的命令，告诉浏览器该做什么。下面的JavaScript语句向id="demo"的 HTML元素输出文本"Hello World!" ：
document.getElementById("demo").innerHTML = "Hello World!";与Python不同的是，JavaScript代码块都是在大括号中的，这点像极了Java。
Java标识符
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do ... while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for ... in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if ... else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
大部分语言能够自动补全空格，我们建议在运算符两边加上空格，这样清晰美观，但是要注意在HTML中空格的是要留意用法的，切勿混谈。在JavaScript中，下面两句话是一样的：
var a = 10;
var b=10;与Python相似，JavaScript也是脚本语言，属于解释型。
对象
定义对象
任何事物都是对象，具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。
在JavaScript中，对象就是是属性变量的容器，类似Python中的字典，Java中的哈希映射，其中定义了对象的属性。
var people = {
firstName: "Mike",
lastName: "Smith",
age: "18",
address: "Beijing",
job: "Student"
};以上就是对象定义，当然你也可以写作一行，我这样是为了美观，以后也强烈大家这样写。
访问对象属性
可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为key : value(键与值以冒号分割)，键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "（大部分语言都是用的这个）。
这是网站
访问类属性
两种访问方式,你可以使用 对象名 .property 或 对象名.["property"] 。
函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
参数与返回值
在调用函数时，您可以向其传递值，这些值被称为参数，参数个数不限。
function myFunction(var1,var2)
{
代码
}
参数在调用时，应该严格按照其顺序传参，如下所示：
这是一个JavaScript网站
函数参数传递问题
点击下面按钮调用
JavaScript函数允许有返回值，返回关键字为return。当函数返回值后，函数将停止执行，在return后面的语句将不会被执行。
实例：计算两个数的乘积并返回结果
JavaScript网站
计算两个数的值返回
变量
JavaScript变量分为两种：
- 全局变量：在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
- 局部变量：在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
当我们向未声明的JavaScript变量分配值时，该变量将被自动作为window的一个属性。如下列语句：
name = "Mike";将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。如：
var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性
console.log(this.var1); // 1
console.log(window.var1); // 1
delete var1; // false 无法删除
console.log(var1); //1
delete var2;
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义事件
描述
HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时， JavaScript可以触发这些事件。
HTML事件可以是浏览器行为，也可以是用户行为。以下是HTM 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。
- 单引号：<some-HTML-element some-event='JavaScript 代码'>
- 双引号：<some-HTML-element some-event="JavaScript 代码">
JavaScript事件
JavaScript事件处理两种方式
JavaScript通常是多行代码，比较差常见的就是通过事件属性调用。
JavaScript事件
JavaScript事件之属性调用
点击执行myFunc()函数
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
后续会继续学习更多事件。
事件作用
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作：
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生
字符串
字符串：一系列字符的集合。
var a = "abc";
var b = "Hello";与Python类似，可以使用索引来访问字符串中的每个字符：
var c = b[1]; // elength
该属性可以计算字符串的长度。
字符串长度
JavaScript也有一些特殊字符，例如当我们要打印引号时，需要加上“\”来进行转义，否则编译器无法解析。
| 代码 | 输出 |
|---|---|
| \' | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
字符串作为对象
通常，JavaScript字符串是原始值，可以使用字符创建： var firstName = "Mike"，但我们也可以使用new关键字将字符串定义为一个对象：var firstName = new String("Mike")，这点与Java类似。
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
==与===区别
1、对于 string、number 等基础类型，== 和 === 是有区别的
- a）不同类型间比较，==之比较"转化成同一类型后的值"看"值"是否相等，===如果类型不同，其结果就是不等。
- b）同类型比较，直接进行 "值" 比较，两者结果一样。
2、对于 Array,Object 等高级类型，== 和 === 是没有区别的
进行 "指针地址" 比较
3、基础类型与高级类型，== 和 === 是有区别的
- a）对于 ==，将高级转化为基础类型，进行 "值" 比较
- b）因为类型不同，=== 结果为 false
4、!= 为 == 的非运算，!== 为 === 的非运算
var num=1；
var str="1"；
var test=1；
test == num //true 相同类型 相同值
test === num //true 相同类型 相同值
test !== num //false test与num类型相同，其值也相同, 非运算肯定是false
num == str //true 把str转换为数字，检查其是否相等。
num != str //false == 的 非运算
num === str //false 类型不同，直接返回false
num !== str //true num 与 str类型不同 意味着其两者不等 非运算自然是true啦运算符
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y | 6 | 6 |
| x=y++ | 5 | 6 | ||
| -- | 自减 | x=--y | 4 | 4 |
| x=y-- | 5 | 4 |
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| x==5 | true | ||
| === | 绝对等于（值和类型均相等） | x==="5" | false |
| x===5 | true | ||
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!=="5" | true |
| x!==5 | false | ||
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
| <= | 小于或等于 | x<=8 | true |
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。如：
variablename=(condition)?value1:value2 条件判断
在 JavaScript 中，我们可使用以下条件语句：
- if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
if语句
条件为true时才会执行代码。如：
JavaScript网站
这是if语句
if...else语句
使用 if....else语句在条件为true时执行代码，在条件为false时执行其他代码。
JavaScript网站
这是if...else语句
多重if..else语句
JavaScript网站
多重if...else语句
switch语句
使用switch语句来选择要执行的多个代码块之一。如：
JavaScript网站
switch语句
循环
JavaScript 支持不同类型的循环：
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
for循环
JavaScript循环
点击按钮循环代码5次。
fo /in循环
Title
点击下面的按钮，遍历对象person属性
while循环
Title
点击按钮，i小于5就会打印输出
显示在这里
do/while循环
Title
点击按钮，打印小于5的数
for循环和while循环比较
Title
这是funcOne
funcOne在这里
这是funcTwo
funcTwo在这里
Break和Continue
break 语句用于跳出循环。continue 用于跳过循环中的一个迭代。
Title
这是continue和break语句
这是funcOne
这是funcTwo
typeof、null和undefined
使用typeof操作符来检测变量的数据类型。
Title
在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。
null表示空，也就是”什么也没有“。当使用typeof 检测时，返回object。对象可以使用undefined来清空。
Title
one:
two:
constructor属性
constructor属性返回所有JavaScript变量的构造函数。可以使用constructor属性来查看对象是否为数组或者是否为日期 (包含字符串 "Date")等。
Title
constructor属性返回变量或者构造函数
HRER
类型转换
JavaScript 变量可以转换为新变量或其他数据类型：
- 通过使用JavaScript函数
- 通过JavaScript自身自动转换
Title
String()方法可以将数字转化为字符串
HERE
toString()方法可以将数字转化为字符串
HERE
一元运算符+
Operator+可用于将变量转换为数字：
Title
typeof操作符返回变量或者表达式类型
HERE
HERE
| 原始值 | 转换为数字 | 转换为字符串 | 转换为布尔值 |
|---|---|---|---|
| false | 0 | "false" | false |
| true | 1 | "true" | true |
| 0 | 0 | "0" | false |
| 1 | 1 | "1" | true |
| "0" | 0 | "0" | true |
| "000" | 0 | "000" | true |
| "1" | 1 | "1" | true |
| NaN | NaN | "NaN" | false |
| Infinity | Infinity | "Infinity" | true |
| -Infinity | -Infinity | "-Infinity" | true |
| "" | 0 | "" | false |
| "20" | 20 | "20" | true |
| "Runoob" | NaN | "Runoob" | true |
| [ ] | 0 | "" | true |
| [20] | 20 | "20" | true |
| [10,20] | NaN | "10,20" | true |
| ["Runoob"] | NaN | "Runoob" | true |
| ["Runoob","Google"] | NaN | "Runoob,Google" | true |
| function(){} | NaN | "function(){}" | true |
| { } | NaN | "[object Object]" | true |
| null | 0 | "null" | false |
| undefined | NaN | "undefined" | false |
正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
search()
用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
Title
收索字符串，匹配位置
HERE
HERE
replace()
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
Title
正则表达式replace()替换
Hello,Java
Hello,Java
正则表达式模式
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| (x|y) | 查找任何以 | 分隔的选项。 |
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
test()
用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false。
Title
exec()
用于检索字符串中的正则表达式的匹配，该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
Title
错误异常
错误类型
- 当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。
- 可能是语法错误，通常是程序员造成的编码错误或错别字。
- 可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
- 可能是由于来自服务器或用户的错误输出而导致的错误。
- 当然，也可能是由于许多其他不可预知的因素。
try...catch
try语句允许我们定义在执行时进行错误测试的代码块，catch语句允许我们定义当try代码块发生错误时，所执行的代码块。
Title
throw
throw语句允许我们创建自定义错误。正确的技术术语是：创建或抛出异常（exception）。如果把throw与try和catch一起使用，那么您能够控制程序流，并生成自定义的错误消息。
Title
请输入一个5-10之间的数字
HERE
函数调用
JavaScript 函数有 4 种调用方式，每种方式的不同在于this的初始化。一般而言，在Javascript中，this指向函数执行时的当前对象。
调用1：作为一个函数调用
one
function myFunc(a, b) {
return a * b;
}
myFunc(1, 2);two
function myFunc(a, b) {
return a * b;
}
window.myFunc(1, 2);调用2：函数作为方法调用
Title
函数作为方法调用
HERE
调用3：使用构造函数调用函数
Title
该实例中，myFunc()是函数的构造函数
调用4：作为函数方法调动函数
Title
作为函数方法调动函数
HERE
闭包
内嵌函数
实际上，在JavaScript中，所有函数都能访问它们上一层的作用域。JavaScript支持嵌套函数，嵌套函数可以访问上一层的函数变量。内嵌函数plus()可以访问父函数的counter变量：
Title
内嵌函数
HERE
闭包
函数的自我调用称为bibao
Title
局部计数器
HERE
特别说明：由于本次学习总结特别简单，故而不放出运行结果，感兴趣的小伙伴可以自己敲一下，这也是为了培养大家的动手能力！