【JavaScript 语法】

■ JavaScript 是什么

是一门编程语言，可以实现很多的网页交互效果。

■ JavaScript 语法

■ JS 注释

单行注释 //
多行注释 /* */

■ JS 结束符

分号； 可以加可以不加。

■ JS 输入输出语句

1. 使用 window.alert() 写入警告框 ：// window.alert(5 + 6);
2. 使用 document.write() 写入 HTML 输出 //document.write(5 + 6);
3. 使用 innerHTML 写入 HTML 元素 //document.getElementById(“demo”).innerHTML = 5 + 6;
4. 使用 console.log() 写入浏览器控制台 //console.log(5 + 6);

■ JS 代码块

JavaScript 语句可以用花括号（{...}）组合在代码块中。
代码块的作用是定义一同执行的语句。
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

■ JS var和let 作用域

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

使用 var 关键字

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

使用 let关键字

{ 
    let x = 2;
}
// 这里不能使用 x 变量

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

循环作用域

使用 var 关键字：
var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 10

使用 let 关键字：
var i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...
}
// 这里输出 i 为 5

■ JS var和let 全局变量

var carName = "Volvo";
// 可以使用 window.carName 访问变量

let carName = "Volvo";
// 不能使用 window.carName 访问变量

■ JS const 常量/对象/数组

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改：

const 声明的常量必须初始化：
// 错误写法
const PI;
PI = 3.14159265359;
// 正确写法
const PI = 3.14159265359;

const 定义的对象

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"}; 
// 修改属性:
car.color = "red"; 
// 添加属性
car.owner = "Johnson";

我们不能对常量对象重新赋值：
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

const 定义的数组：

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"]; 
// 修改元素
cars[0] = "Toyota"; 
// 添加元素
cars.push("Audi");

不能对常量数组重新赋值：
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // 错误

■ JS 关键词

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

■ JS 值

JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。
变量值被称为变量。

■ JS 字面量 （混合值）

书写混合值最重要的规则是：
写数值有无小数点均可：15.90 ，10011

■ JS 变量（变量值）

JavaScript 使用 var 关键词来声明变量。= 号用于为变量赋值。
var x;
x = 7; //x 被定义为变量。然后，x 被赋的值是 7：

■ JS 文本值 (字符串)

文本值被称为字符串。
字符串被包围在双引号或单引号中。数值不用引号。

属性	描述
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()	返回某个字符串对象的原始值

var answer = "It's alright";           // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

■ JS 字符串可以是对象

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

var x = "John";              
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

=== 为绝对相等，即数据类型与值都必须相等。

■ JS 数据类型

JavaScript 数据类型包括：字符串值，数值，布尔值，数组，对象等。

var length = 7; // 数字
var lastName = "Gates";  // 字符串
var cars = ["Porsche", "Volvo", "BMW"];   // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象 

typeof 运算符可返回以下原始类型之一：
string
number
boolean
undefined

typeof 运算符可返回以下两种类型之一：
function
object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

■ JS 拥有动态类型

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

■ JS 数值

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

■ JS 布尔值

var x = true;
var y = false;

■ JS 数组

var cars = [“Porsche”, “Volvo”, “BMW”];

■ JS 对象

var person = {firstName:“Bill”, lastName:“Gates”, age:62, eyeColor:“blue”};
上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。

■ JS typeof 运算符

typeof ""                  // 返回 "string"
typeof "Bill"              // 返回 "string"
typeof "Bill Gates"        // 返回 "string"

typeof 0                   // 返回 "number"
typeof 314                 // 返回 "number"
typeof 3.14                // 返回 "number"
typeof (7)                 // 返回 "number"
typeof (7 + 8)             // 返回 "number"

typeof 运算符可返回以下原始类型之一：

string
number
boolean
undefined

typeof "Bill"    // 返回 "string"
typeof 3.14     // 返回 "number"
typeof true     // 返回 "boolean"
typeof false    // 返回 "boolean"
typeof x        // 返回 "undefined" (假如 x 没有值)

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

■ JS Undefined

var person; // 值是 undefined，类型是 undefined
person = undefined; // 值是 undefined，类型是 undefined
var car = “”; // 值是 “”，类型是 “string”

您也可以通过设置值为 undefined 清空对象：
var person = undefined; // 值是 undefined，类型是 undefined

■ JS Null

在 JavaScript 中，null 的数据类型是对象。
var person = null; // 值是 null，但是类型仍然是对象

■ JS Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

■ JS 运算符

JavaScript 使用算数运算符（+ - * /）来计算值： (7 + 8) * 10

■ JS 类型转换

■ JS 将数字转换为字符串

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

String(x)         // 将变量 x 转换为字符串并返回
String(123)       // 将数字 123 转换为字符串并返回
String(100 + 23)  // 将数字表达式转换为字符串并返回

x.toString()
(123).toString()
(100 + 23).toString()

■ JS 将布尔值转换为字符串

String(false)        // 返回 "false"
String(true)         // 返回 "true"

false.toString()     // 返回 "false"
true.toString()      // 返回 "true"

■ JS 将布尔值转换为数字

Number(false)     // 返回 0
Number(true)      // 返回 1

■ JS 将日期转换为字符串

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

obj = new Date()
obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

■ JS 将字符串转换为数字

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

Number("3.14")    // 返回 3.14
Number(" ")       // 返回 0 
Number("")        // 返回 0
Number("99 88")   // 返回 NaN

■ JS 自动转换类型

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"    null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

■ JS 字符串和数字的相加

提示：如果您对数字和字符串相加，结果将是字符串！
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
x、y 和 z 的结果将是：
15
78
Hello7

var x = "Porsche" + 911 + 7;
结果：
Porsche9117

■ JS 与驼峰式大小写

连字符：
first-name, last-name, master-card, inter-city.
下划线：
first_name, last_name, master_card, inter_city.
驼峰式大小写（Camel Case）：
FirstName, LastName, MasterCard, InterCity.
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：
firstName, lastName, masterCard, interCity

■ JS 字符集

JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。

■ JS 标识符

构造变量名称（唯一标识符）的通用规则是：
名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

■ JS 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

■ JS 逻辑运算符

运算符	描述
&&	逻辑与
11	逻辑或
!	逻辑非

■ JS 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的范例。

■ JS 位运算符

位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。
因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

■ JS 运算符优先级值

■ JS 赋值运算符

■ JS 正则表达式

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x	y)

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

■ JS search()

ar str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); //输出结果为：6

检索字符串中 "Runoob" 的子串：
var str = "Visit Runoob!"; 
var n = str.search("Runoob"); 

■ JS replace()

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

eplace() 方法将接收字符串作为参数：
var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

■ JS test()

var patt = /e/;
patt.test("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为：true

你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
/e/.test("The best things in life are free!")

■ JS exec()

/e/.exec("The best things in life are free!");
字符串中含有 "e"，所以该实例输出为:e

■ JS JSON

“name”:“Runoob” //键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
{“name”:“Runoob”, “url”:“www.runoob.com”} //对象可以保存多个 键/值 对：
//JSON 数组保存在中括号内
“sites”:[
{“name”:“Runoob”, “url”:“www.runoob.com”},
{“name”:“Google”, “url”:“www.google.com”},
{“name”:“Taobao”, “url”:“www.taobao.com”}
]

■ JSON 字符串转换为 JavaScript 对象

函数	描述
JSON.parse()	字符串转 js 对象。
JSON.stringify()	js 对象转字符串。

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

var obj = JSON.parse(text);  //使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

JSON 与 JS 对象的关系

var obj = {a: 'Hello', b: 'World'}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：
var obj = JSON.parse(‘{“a”: “Hello”, “b”: “World”}’); //结果是 {a: ‘Hello’, b: ‘World’} 一个对象

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：
var json = JSON.stringify({a: ‘Hello’, b: ‘World’}); //结果是 ‘{“a”: “Hello”, “b”: “World”}’ 一个JSON格式的字符串

■ HTML使用JS（JS书写位置）

■ 中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 部分。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

■ 中的 JavaScript

JavaScript 函数被放置于 HTML 页面的 部分。

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

■ 外部脚本

脚本可放置与外部文件中：

1）外部文件：myScript.js
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
----------------------------------------
2.使用外部脚本：
<script src="myScript.js"></script>

■ 外部脚本引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：

<script src="https://www.codebaoku.com/js/myScript1.js"></script>

■ 体验HTML+CSS+JS交互效果

■