JavaScirpt 简介
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言，可插入HTML页面的编程代码，并被浏览器执行
注：JavaScript 可被略写为 JS
在学习这篇JavaScript之前，您需要先学习HTML和了解CSS，以及一门面向对象计算机语言，例如Python，C/C++，PHP等
JavaScript 用法
在 HTML 中插入 JS 脚本需要使用 <script> </script> 标签
JS 代码可被放置在 HTML 页面的 <body> 和 < head> 元素中
<script> 标签
<script> 和 </script> 标签用以引用 JS 脚本
<script>
alert("我的第一个 JavaScript");
</script><body> 中的 JS
<body> 中的 JS 会在页面加载时执行，就像我们见过的 C/C++ Python 一样
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>在 <head> 或者 <body> 的 JavaScript
JS 脚本可位于HTML <body> 或者 <head> 中，也可以同时存在于两个部分中
通常的做法是把JS函数放入 <head> 或者 <body> 底部，这样就可以即美观，又不影响页面编辑
外部的 JavaScript
JS 脚本可以另外存放在后缀为 “ .js ” 的文件中，方便被多个网页使用
引用这些 js 文件需要这样
<script src="myScript.js"></script>JavaScript 函数和事件
函数和事件在 JS 中非常重要，例如我点击按钮，那么点击（onclick）就是事件，触发的动作就是由函数执行的
例如
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>浏览器中执行JavaScript
就像Python一样，JavaScript 也有控制台程序，只不过不是像Python那样在终端中运行，JS 的控制台在浏览器中（大部分浏览器都支持，推荐使用 Chrome 浏览器）
如何打开
打开浏览器后点击键盘上的 F12 ，进入浏览器的开发者模式，然后在开发者工具栏里找到 “控制台”，这里便是 JS 的控制台
尝试着运行一下简单的代码
console.log("goblog")
在浏览器中写代码
在浏览器中也可以像IDE那样子新建一个代码段，在代码段中写好自己的代码，然后再运行
写脚本并运行
JavaScript 输出
因为 JavaScript 是面向浏览器的脚本语言，所以并没有打印或者输出的函数
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
操作 HTML 元素
如果想要访问HTML元素，则应该使用 document.getElementById(id) 方法
如果要获取或插入元素的内容，请使用 innerHTML 属性
注：id 是 HTML 元素的属性
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>JavaScript 语法
JavaScript 是一个程序语言。语法规则定义了语言结构
JavaScript 的每行语句末尾都需要使用 ;
JavaScript 注释
// 双斜杠后的内容是注释内容，注释内容不会被执行
/* 这是多行注释 */JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字)
| 语句 | 描述 |
|---|---|
| break | 用于跳出循环。 |
| catch | 语句块，在 try 语句块执行出错时执行 catch 语句块。 |
| continue | 跳过循环中的一个迭代。 |
| do … while | 执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
| for | 在条件语句为 true 时，可以将代码块执行指定的次数。 |
| for … in | 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
| function | 定义一个函数 |
| if … else | 用于基于不同的条件来执行不同的动作。 |
| return | 退出函数 |
| switch | 用于基于不同的条件来执行不同的动作。 |
| throw | 抛出（生成）错误 。 |
| try | 实现错误处理，与 catch 一同使用。 |
| var | 声明一个变量。 |
| while | 当条件语句为 true 时，执行语句块。 |
对代码行进行折行
可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示
document.write("你好 \
世界!");不过，不能这样子折行
document.write \
("你好世界!");JavaScript 关键字
JS 也有关键字，这些关键字是保留的，不能被使用的
以下是 JavaScript 中最重要的保留关键字（按字母顺序）
| 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 字面量
在编程语言中，一般固定值称为字面量，如 3.14。
- 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)
3.141001123e5 - 字符串（String）字面量 可以使用单引号或双引号
"john Doe"'John Doe - 表达式字面量 用于计算
5 + 65 * 10 - 数组（Array）字面量 定义一个数组
[40, 100, 1, 5, 25, 10] - 对象（Object）字面量 定义一个对象
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} - 函数（Function）字面量 定义一个函数
function myFunction(a, b) { return a * b;}
JavaScript 变量
在编程语言中，变量用于存储数据值
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头（不推荐）
- 变量对大小写敏感
声明（创建） JavaScript 变量
JS 使用关键字 var 来声明变量，使用等号来为变量赋值
var lastname="Doe", age=30, job="carpenter"; // 同时声明多个变量
var lastname="Doe", // 跨行同时声明多个变量
age=30,
job="carpenter";
var length = 16; // Number 通过数字字面量赋值
var points = x * 10; // Number 通过表达式字面量赋值
var lastName = "Johnson"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值Value = undefined
如果要将某个变量申明为 undefined，则可以这样
var carname;重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失
使用 let 和 const（ES6）
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）
JavaScript 拥有动态类型
JavaScript 的变量类型会自动转变，这意味着一个变量可能会从一个类型经过赋值运算后变成另一个类型
变量的数据类型可以使用 typeof 操作符来查看
typeof 操作符
用来查看变量的数据类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)JavaScript 字符串
字符串是存储字符（比如 “Bill Gates”）的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号
var carname="Volvo XC60";
var carname='Volvo XC60';JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写极大或极小的数字可以通过科学（指数）计数法来书写
var y=123e5; // 12300000
var z=123e-5; // 0.00123JavaScript 布尔
布尔（逻辑）只能有两个值：true 或 false
var x=true;
var y=false;JavaScript 数组
下面的代码创建名为 cars 的数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";或者（condensed array）
var cars=new Array("Saab","Volvo","BMW");或者（literal array）
var cars=["Saab","Volvo","BMW"];JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var person={
firstname:"John",
lastname:"Doe",
id:5566
};
// person 对象中有 ”firstname“、”lastname“、”id“三个属性对象属性的两种寻址方式
name=person.lastname;
name=person["lastname"];undefined 和 null
Undefined 这个值表示变量不含有值
可以通过将变量的值设置为 null 来清空变量
cars=null;
person=null;注：undefined 和 null 的值相等，但是类型不等
声明变量类型
当您声明新变量时，可以使用关键词 “new” 来声明其类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;JavaScript 对象
前面 JavaScript 数据类型部分讲到了对象的声明和属性的访问，这里会补充一下对象方法的定义和访问
JavaScript 对象的方法
JS 的对象也有方法，对象的方法实际就是一个于对象关联的方法，并作为对象的属性存储
方法的定义
使用这个语句创建对象方法
methodName : function() {
// 代码
}方法的访问
objectName.methodName()如果你学会了另外一门面向对象语言，相信你对这里应该不会有什么疑惑
JavaScript 函数
与其他高级语言（C语言）的函数基本一样，不做过多解释
JS 的函数使用 function来声明，是不是很像 PHP
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}代码块
代码块以左花括号开始，以右花括号结束
{
console.log("Hello");
console.log("World");
}函数也是一个代码块
JavaScript 作用域
JS也有作用域，函数中的变量为局部变量，只能在函数中中访问，离开作用域后就会被销毁
函数以外的定义变量为全局变量，全局变量有全局作用域，网页中所有脚本和函数均可使用，全局变量在页面关闭后销毁
注意：JavaScript 的代码块不会创建一个新的作用域，也就是说，在代码块（非函数）内创建的变量也是全局变量
JavaScript 事件
HTML 事件是发生在 HTML 元素上的事情
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
在事件触发时 JavaScript 可以执行一些代码
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素
<some-HTML-element some-event="JavaScript 代码">下面这个实例中按钮元素中添加了 onclick 属性
<button onclick="this.innerHTML=Date()">现在的时间是?</button> // 当初发了onclick事件后，便会执行后面的JS代码，这段代码将修改自身元素的内容常见的 HTML 事件
下面是一些常见的HTML时间的列表
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 鼠标指针移动到指定的元素上时发生 |
| onmouseout | 用户从一个 HTML 元素上移开鼠标时发生 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
JavaScript 字符串
JavaScript 字符串用于存储和处理文本
JavaScript 字符串
字符串可以存储一系列字符，如 “John Doe”。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号
如同PHP一样，可使用索引位置（索引从零开始）来访问字符串中的每个字符
var character = carname[7];字符转义
对于字符串中的特殊字符，我们应该使用转义符（ \ ）
"We are the so-called \"Vikings\" from the north."下表中列举了在字符串中可以使用转义字符转义的特殊字符：
| 代码 | 输出 |
|---|---|
| \’ | 单引号 |
| \” | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
字符串可以是对象
通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = “John”
但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)
但请不要船舰 String 对象，这会拖慢运行速度，并可能产生其他副作用
字符串属性和方法
原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象
注意：原始值并不是对象
字符串属性
| 属性 | 描述 |
|---|---|
| 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() | 返回某个字符串对象的原始值 |
JavaScript 运算符
JavaScript 算数运算符
| 运算符 | 描述 | 例子 | 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 |
JavaScript 赋值运算符
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | 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 |
用于字符串的 + 运算符
+ 运算符用于把文本值或字符串变量加起来（连接起来）
注意：数字和字符串相加时会将数字强制转化为字符串
JavaScript 比较 和 逻辑运算符
比较运算符
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | 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 |
逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
条件运算符
variablename=(condition)?value1:value2 
