JavaScript 基础知识（一） JavaScript简介、在HTML中使用JavaScript、基本概念（基本数据类型、流控制语句等）等

一、JavaScript简介

JavaScript 诞生于1995年，当时的主要目的（需求）：

是处理以前由服务端语言（如Perl）负责的一些输入验证操作。

 

如今，JavaScript 不再局限于简单的数据验证，而是：

具备了与浏览器窗口及其内容等几乎所有方面交互的能力。

 

1.1、JavaScript实现

JavaScipt

ECMAScript

DOM

BOM

 

1.2、ECMA-262 定义的 ECMAScript 与 Web 浏览器没有依赖关系

规定了下列组成部分：

语法

类型

语句

关键字

保留字

操作符

对象

 

1.3、文档对象模型（DOM, Document  Object  Model）

针对 XML 但经过扩展用于 HTML 的应用程序编程接口（API,  Application Programming  Interface）

 

1.4、浏览器对象模型（BOM,  Browser Object Model）

支持开源访问和操作浏览器窗口

 

1.5、小结：JavaScript 是一种专为与网页交互而设计的脚本语言，由下列三个不同的部分组成：

1. ECMAScript， 由 ECMA-262 定义，提供核心语言功能；
2. 文档对象模型（DOM），提供访问和操作网页内容的方法和接口；
3. 浏览器对象模型（BOM）， 提供与浏览器交互的方法和接口。

注： JavaScript 的三个部分，在当前五个主要浏览器（IE、Firefox、Chrome、Safari 和 Opera）中得到不同程度的支持。对于DOM 的支持彼此相差较多，BOM 各浏览器实现了很多共同特性，但其他特性还是因浏览器而异（如 Window对象 、 navigator对象）。

 

二、在HTML中使用JavaScript

2.1、<script> 元素

向 HTML（Web 的核心语言） 页面中插入 JavaScript 的主要方法，就是使用 <script> 元素， <script> 定义了下列 6 个属性：

1. async  ：  可选。 表示应立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。 只对外部脚本文件有效。
2. charset  ：  可选。 表示通过 src 属性指定的代码的字符集。因为大多数浏览器会忽略它的值，所以此属性很少使用。
3. defer  ：  可选。 表示脚本可以延迟到文档完全被解析 和 显示之后再执行。 只对外部脚本文件有效。
4. language  ：  不赞成使用。规定脚本语言。请使用 type 属性代替它。
5. src  ：  可选。 表示包含要执行代码的外部文件。
6. type  ：  可选。 可以看成 language 的代替属性； 表示编写代码使用的脚本语言的内容类型（也称为 MIME 类型）。默认值为 text/javascript。

 

2.2、使用<script> 元素的方式两种：

• 直接在页面中嵌入 JavaScript 代码；
• 包含外部 JavaScript 文件。（推荐）

---

外部文件 相对 嵌入代码 有如下优点：

• 可维护性；
• 可缓存；
• 适应未来。

 

2.3、小结

• 把 JavaScript 插入到 HTML 页面中使用 <script> 元素。使用这个元素可以把 JavaScript 嵌入到 HTML 页面中，让脚本与标记混合到一起；也可以包含外部的 JavaScript 文件。需要注意以下几点：
• 在包含外部 JavaScript  文件时，必须将 src 属性设置为指向相应文件的 URL。 而这个文件可以是与包含它的页面位于同一服务器上的文件，也可以是其他任何域中的文件。
• 所有  <script>  元素都会按照它们在页面中出现的先后顺序依次被解析。 在不使用 defer 和 async 属性的情况下，只有在解析完前面 <script> 元素中的代码之后，才会开始解析后面 <script> 元素中的代码。
• 使用 defer 属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
• 使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

注： 使用 <noscript> 元素可以指定在不支持脚本的浏览器中显示的代替内容。但在启用了脚本的情况下，浏览器不会显示 <noscript> 元素中的任何内容。

 

三、基本概念（语法、基本数据类型、流控制语句、函数）等

3.1、语法

• 区分大小写（如： test 和 Test 是两个变量）；
• 标识符：变量、函数、属性的名字、或函数的参数（格式： 第一个字符必须是一个字母、下划线"_"、一个美元符号"$"，其他字符可以是字母、下划线、美元符号或数字。  一般采用 驼峰大小写格式， 即第一个字母小写，剩下的单词首字母大写，如 manyObject）；
• 严格模式（"use strict;"）：为 JavaScript定义一种不同的解析与执行模型；
• 语句： ECMAScript 中的语句以一个分号结尾；
• 关键字（如： break、do、instanceof等） 和 保留字（如： abstract、enum、interface、private等）；
• 变量：  ECMAScript 中的变量是松散类型，即可以用来保存任何类型的数据（使用 var操作符时）；

 

3.2、数据类型

• 值类型( 6 种基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。）
• 引用数据类型：对象(Object)、数组(Array)、函数(Function)

[ typeof 操作符 ]

• "undefined"  == 如果此值未定义；
• "boolean"  == 如果此值是布尔值；
• "string"  == 如果此值字符串；
• "number"  == 如果此值数值；
• "object"  == 如果此值是对象 、数组 或 null；
• "function"  == 如果此值是函数；

[ 基本数据类型 ]

字符串（String）：由 0 个 或多个 16位 Unicode 字符组成的字符序列，即字符串； 字符串可以单引号(') 或 多引号(") 表示；

注意：转义字符（如： \n换行、\b退格）、字符串特点（字符串是不可变的，即字符串一旦创建，其值就不能改变）

转换为字符串的 两种方式： toString()、String()

 

---

数字(Number)： 使用了 IEEE754 格式表示整数 和 浮点数值( 该数值必须包含一个小数点，并小数点后面必须至少有一位数字；如浮点数在 Java中表示双精度数值)；    

注意： 浮点数值的最高精度是 17 位小数，但是在计算时精确度 远不如 整数；即 浮点数值 计算会产生舍入误差

由于内存限制， ECMAScript不能保存世界上所有的数值，谷歌浏览器最小数值 和 最大数值如下：

NaN：非数值（Not a Number）是一个特殊的数值，此数值表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误）

数值转换的 3 个函数： Number、parseInt、parseFloat

 

---

布尔(Boolean)：只有两个值 true 和 false

数据类型	转换为 true的值	转换为 false的值
Boolean	true	false
String	任何非空字符串	""（空字符串）
Number	任何非零数字值（包括无穷大）	0 和 NaN
Object	任何对象	null
Undefined	不适用	undefined

---

对空（Null）：只有一个值，即特殊的 Null。从逻辑角度， null值表示一个空对象指针，所以 typeof 检测 null 会返回 "object"。  "null == undefined" 为 true，因为操作符 "=="在比较时，会转换其操作数；

 

---

未定义（Undefined）：只有一个值，即特殊的 undefined；

 

Symbol： Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

[ 引用数据类型 ]

对象(Object):   一组数据 和 功能的 集合

 

数组(Array)、函数(Function)

 

3.3、操作符

一元操作符：  ++age、age++；  --b、b-- 

位操作符：  原理将 64 位值转换为  32 位值，然后执行操作，再将结果转换为 64 位；

从右往左数，32位中 前31 位表示整数的值，第32 位表示数值的符号；

负数 二进制码格式，使用二进制补码： 1、绝对值的二进制码；2、按位取反； 3、再将二进制码加 1 

---

 

• 按位非(not)：  操作符 “~”，即根据该值的 二进制值 按位取反 后的值
• 按位与(and)： 操作符“&”，即 都为1 时，才返回1， 否则返回0；如 1 &０＝ 0
• 按位或(or)： 操作符“|”，即 都为0 时，才返回0， 否则返回1；如 1 &０＝ 1
• 按位异或(xor)： 操作符“^”，即 都为0 或 都为1 时，才返回0， 否则返回1；如 1 ^０＝ 1、1 ^1＝ 0

---

 

• 左移： 操作符“<<”，左移 不会 影响 符号位，右边以 0 填充
• 右移： 操作符“>>”，右移 不会 影响 符号位，左边以 符号位 填充
• 无符号右移： 操作符“>>>”，右移 不会 影响 符号位，左移 会 影响 符号位，即符号位的值 也会计算在内，不再有负号。

---

 

布尔操作符：

• 逻辑非“！”： 返回一个布尔值
• 逻辑与 “&&”： 短路操作， 若第一个值为 false，则不判断第二个操作数
• 逻辑或 “||”：短路操作，若第一个值为 true，则不判断第二个操作数

---

 

相等操作符：

1. 相等和不相等： “==” 和 “！=”，先转换 再 比较
2. 全等和不全等：“===” 和 “！==”， 仅比较 而 不转换

注： "null == undefined" 返回 true，因为它们是 类似的值； 但 "null === undefined" 返回 false，因为它们是 不同类型的值；

 

3.4、控制流语句

在 ECMAScript 中 不存在 块级作用域， 所以循环内部定义的变量，在外部也可访问

---

 

for-in 语句：用来枚举对象的属性， 每次执行循环时，都会给 对象obj 中存在的一个属性名赋值给变量 i，直到所有属性都被枚举， 注意此循环是 没有顺序的

---

 

break 和 continue 语句：

• break ： 退出当前循环，如 退出当前 for循环

• continue ： 退出此次循环，再继续从循环顶部继续循环， 如 退出本次 i = 3时的循环，继续 i = 4的循环

 

3.5、函数

严格模式对函数的限制如下：

1. 不能把 函数名 命名为 eval 或 arguments;
2. 不能把 参数名 命名为 eval 或 arguments;
3. 不能出现 两个命名参数 同名的情况。

注：发生以上错误，会导致语法错误，代码无法执行。

• 函数的参数，内部是用一个 数组表示的。 但arguments 对象只是 与数组 类似（不是 Array 的实例），但可以 通过 arguments[0] 获取参数； 
• ECMAScript 函数没有签名（接受的参数的类型和数量），即没有重载（不同于其他语言，如Java 语言就存在重载），因为 参数是由一个 包含零个 或多个 值的 数组来表示的；
• 但是 可以通过 检查传入函数中参数的类型和数量作出不同的反应，来模仿重载

 

3.6、总结

• ECMAScript  6 种基本数据类型包括： String、 Number、Boolean、Null、Undefined、Symbol
• ECMAScript  区别于其他语言，没有分为整数 和 浮点数值，Number 类型代表所有数值
• ECMAScript  3 种引用数据类型： Object（是此语言所有对象的基本类型）、Array、Function
• 无须指定函数的返回至， 因为任何 函数都可以 在任何时候 返回任何值
• 实际上，未指定返回值的函数 返回的 是一个 特殊的 undefined值
• ECMAScript 没有函数签名概念 ，即没有重载，因为 函数参数是由一个 包含零个 或多个 值的 数组来表示的
• 可以向 ECMAScript  函数传递任意数量的 参数，并且可以通过 "arguments" 对象来访问参数

 

 

写给自己的随笔，有问题欢迎指出(*^▽^*)