介绍
- JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
浏览器分成两部分：渲染引擎和 JS 引擎 - 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit
- JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
- 浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。
JavaScript的功能
- JavaScript 能够改变 HTML 内容（文字内容）
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById('myImage').src='/i/eg_bulbon.gif'
- JavaScript 能够改变 HTML 样式 (CSS)，属于改变 HTML 属性的一种。
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.display="none";
document.getElementById("demo").style.display="block";
JavaScript 组成
JavaScript 包括 ECMAScript、DOM、BOM
- ECMAScript：JavaScript语法
- DOM：页面文档对象模型
- BOM：浏览器对象模型
ECMAScript
ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
DOM文档对象模型
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM浏览器对象模型
BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
JS的引用
< head > 或 < body > 中的 JavaScript
在 HTML 中，JavaScript 代码必须位于< script> 与 < /script>标签之间。
旧的 JavaScript 例子会使用 type 属性：< script type=“text/javascript”>。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
- 能够在 HTML 文档中放置任意数量的脚本。
- 脚本可被放置与 HTML 页面的 < body> 或 < head> 部分中，或兼而有之。
- 把脚本置于 < body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
外部脚本
外部文件：myScript.js
-
外部脚本很实用，可用于相同的脚本被用于许多不同的网页。 -
JavaScript 文件的文件扩展名是 .js。 -
如需使用外部脚本，要在 < script> 标签的 src (source) 属性中引入脚本 -
可以在 < head> 或 < body> 中放置外部脚本引用。 -
脚本的表现与它被置于 < script> 标签中是一样的。 -
外部脚本不能包含 < script> 标签。
外部 JavaScript 的优势
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
- 如需向一张页面添加多个脚本文件 - 使用多个 script 标签引入脚本
JS输出
JavaScript 不提供任何内建的打印或显示函数。
使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id是在HTML中定义的id。innerHTML 属性表示 HTML的内容。
更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
使用 document.write()
出于测试目的，使用 document.write() 比较方便，document.write() 方法仅用于测试。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
在 HTML 文档完全加载后结合按钮使用 document.write() 将删除所有已有的 HTML 。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
使用 window.alert()
使用警告框来显示数据
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
alert("hello");
</script>
</body>
</html>
使用 console.log()
使用JavaScript向控制台输出一句话
按F12弹出控制台
<script>
console.log("输出一条日志");
console.info("输出一条信息");
console.warn("输出一条警告");
console.error("输出一条错误");
</script>
JS语句语法
分号
- 分号分隔 JavaScript 语句。在每条可执行的语句之后应该添加分号。
- 如果有分号分隔，允许在同一行写多条语句：
- 以分号结束语句不是必需的，但仍强烈建议加分号。
JavaScript 行长度和折行
- 为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
- 如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：
JavaScript 代码块
- JavaScript 语句可以用花括号{…}组合，形成代码块。
- 代码块的作用是定义一同执行的语句。
JavaScript的运算符
- JavaScript 使用算数运算符（+ - * /）来计算值
- JavaScript 使用赋值运算符（=）向变量赋值
JavaScript 表达式
- 表达式是值、变量和运算符的组合，计算结果是值；以分号结尾。
- 值可以是多种类型，比如数值和字符串。
例如，“Bill” + " " + “Gates”，计算为 “Bill Gates”。
JavaScript 注释
- 单行注释：用//，后边加被注释的内容
- 多行注释：/* 被注释的内容*/
JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量。
把多个单词连接为一个变量名的方法
连字符
first-name, last-name, master-card, inter-city.
注释：JavaScript 中不能使用连字符。它是为减法预留的。
下划线
first_name, last_name, master_card, inter_city.
驼峰式大小写（Camel Case）
以大小写来区分单词
FirstName, LastName, MasterCard, InterCity.
JavaScript变量
- JavaScript 语句定义了两种类型的值：混合值和变量值。
- 混合值被称为字面量（literal）。变量值被称为变量。
字面量
- 数值：可以是小数也可以是整数。
- 字符串：是文本，由双引号或单引号包围
变量
- JavaScript 变量是存储数据值的容器。
- 构造变量名（唯一标识符）的通用规则是：
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称
定义变量：var + 变量名；
- 声明之后，变量是没有值的。（技术上，它的值是 undefined。）
- JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。
- 字符串被包围在双引号或单引号中，数值不用引号；如果把数值放在引号中，会被视作文本字符串。
- 没有初始化的变量，它的值将是 undefined。
<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>
重复声明 JavaScript 变量
- 如果再次声明某个 JavaScript 变量，将不会丢失它的值。
在这两条语句执行后，变量 carName 的值仍然是 “porsche”：
var carName = "porsche";
var carName;
JavaScript Let
全局作用域
全局（在函数之外）声明的变量拥有全局作用域。全局变量可以在 JavaScript 程序中的任何位置访问。
var carName = "porsche";
function myFunction() {
}
函数作用域
局部（函数内）声明的变量拥有函数作用域。局部变量只能在它们被声明的函数内访问。
function myFunction() {
var carName = "porsche";
}
JavaScript 块作用域
通过 var 关键词声明的变量没有块作用域。在块 { } 内声明的变量可以从块之外进行访问。
{
var x = 10;
}
可以使用 let 关键词声明拥有块作用域的变量。使在块 { } 内声明的变量无法从块外访问
{
let x = 10;
}
在函数内和全局内，var和let作用相似
重新声明变量
用var在块中重新声明变量也将重新声明块外的变量
var x = 10;
{
var x = 6;
}
使用 let 关键字在块中重新声明变量不会影响块外的变量。
var x = 10;
{
let x = 6;
}
- 允许在程序的任何位置使用 var 重新声明 JavaScript 变量
- 在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的
- 在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的
- 在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的
- 在不同的作用域或块中，通过 let 重新声明变量是允许的
在循环中var和let的区别
var i = 7;
for (var i = 0; i < 10; i++) {
}
使用let不影响循环外边
let i = 7;
for (let i = 0; i < 10; i++) {
}
HTML 中的全局变量
使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。
在 HTML 中，全局作用域是 window 对象。
通过 var 关键词定义的全局变量属于 window 对象：
<p id="demo"></p>
<script>
var carName = "Audi";
document.getElementById("demo").innerHTML = "我可以显示 " + window.carName;
</script>
通过 let 关键词定义的全局变量不属于 window 对象：
<p id="demo"></p>
<script>
let carName = "Audi";
document.getElementById("demo").innerHTML = "我不能显示 " + window.carName;
</script>
先后问题
- 通过 var 声明的变量会提升到顶端。可以在声明变量之前就使用它
- 通过 let 定义的变量不会被提升到顶端。在声明 let 变量之前就使用它会导致 ReferenceError。变量从块的开头一直处于“暂时死区”，直到声明为止。
JavaScript const
在块作用域内使用 const 声明的变量与 let 变量相似。
var x = 10;
{
const x = 6;
}
- JavaScript const 变量必须在声明时赋值
- 如果将一个原始值赋给常量，就不能改变原始值了；无法重新为常量对象赋值。
const PI = 3.14159265359;
可以更改常量对象的属性
const car = {type:"porsche", model:"911", color:"Black"};
car.color = "White";
car.owner = "Bill";
常量数组可以更改，可以更改常量数组的元素
const cars = ["Audi", "BMW", "porsche"];
cars[0] = "Honda";
cars.push("Volvo");
但无法重新为常量数组赋值
const cars = ["Audi", "BMW", "porsche"];
cars = ["Honda", "Toyota", "Volvo"];
重新声明
- 在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const
- 在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的；在另外的作用域或块中重新声明 const 是允许的
- 通过 const 定义的变量不会被提升到顶端。const 变量不能在声明之前使用
JavaScript运算符
- 在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符；
- JavaScript 中的“等于”运算符是 ==
- 运算符也可用于对字符串进行相加（concatenate，级联）；在用于字符串时，+ 运算符被称为级联运算符
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
txt1 = "Hello ";
txt1 += "Kitty!";
- 相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串。
区分
var x = "8" + 3 + 5;
var x = 3 + 5 + "8";
在第一个例子中，JavaScript 把 911 和 7 视作数值，直到遇见 “Porsche”。
在第二个例子中，由于第一个操作数是字符串，因此所有操作数都被视为字符串。
JavaScript 算数运算符
幂
取幂运算符（**）第一个数是底数，第二个数是指数
var x = 5;
var z = x ** 2;
x ** y 产生的结果与 Math.pow(x,y) 相同
var x = 5;
var z = Math.pow(x,2);
JavaScript 数据类型
JavaScript 拥有动态类型。意味着相同变量可用作不同类型
JavaScript 字符串
- 字符串被引号包围。可使用单引号或双引号。
- 可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配（外部用双引号内部就用单引号，反之一样。）
var answer = "It's alright";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
JavaScript 数值
JavaScript 只有一种数值类型。
- 写数值时用不用小数点均可；3.0和3是一样的。
- 超大或超小的数值可以用科学计数法来写；1e5.
布尔值
布尔值只有两个值：true 或 false.布尔值经常用在条件测试中。
数组
JavaScript 数组用方括号书写。数组的项目由逗号分隔。
var cars = ["Porsche", "Volvo", "BMW"];
对象
JavaScript 对象用花括号来书写。对象属性是 name:value 对，由逗号分隔。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。（类似于结构体）
typeof 运算符
可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型；typeof 运算符返回变量或表达式的类型。
typeof "Bill"
typeof 314
- 字符串返回string
- 数字返回number
- 布尔型返回boolean
- undefined返回undefined
- 对象，数组返回object
- 函数返回function
- typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象
Undefined
在 JavaScript 中，没有值的变量（没有赋值），其值是 undefined。typeof 返回 undefined。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined
person = undefined;
空值
空值与 undefined 不是一回事。空的字符串变量既有值也有类型。
var car = "";
Null
null 的数据类型是对象（可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null）；可以通过设置值为 null 清空对象
var person = null;
var person = undefined;
Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等
typeof undefined
typeof null
null === undefined
null == undefined
函数
如果访问没有 () 的函数将返回函数定义；即函数代码
对象
var car = {type:"porsche", model:"911", color:"white"};
对象属性
名称:值对被称为属性
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中（属性：属性值是一个函数）。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
this 关键词
在函数定义中，this 引用该函数的“拥有者”。（this.firstName=person.firstName）
在上例子中，this 指的是“拥有” fullName 函数的 person。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。
访问对象属性
objectName.propertyName
objectName["propertyName"]
访问对象方法
objectName.methodName()
不要把字符串、数值和布尔值声明为对象类型！
如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String();
var y = new Number();
var z = new Boolean();
要避免字符串、数值或逻辑是对象类型。会增加代码的复杂性并降低执行速度。
事件
HTML 事件
HTML 事件是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
当用户执行一些操作时，计算机的反应
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
| 世界 | 描述 |
|---|
| onchange | HTML 元素已被改变 | | onclick | 用户点击了 HTML 元素 | | onmouseover | 用户把鼠标移动到 HTML 元素上 | | onmouseout | 用户把鼠标移开 HTML 元素 | | onkeydown | 用户按下键盘按键 | | onload | 浏览器已经完成页面加载 |
|