基础
# JS 基础
是一种运行在客户端的脚本语言
渲染引擎 ： 用来解析HTML与CSS , 俗称内核。blink ,webkit
JS引擎 ： JS解释器，读取网页中的JS代码，对其处理后运行。 v8
脚本语言 ，逐行进行解释
# JS 组成
# ECMAScript
是由ECMA国际进行标准化的一门标准语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript， 但实际上都是ECMAScript语言的实现和扩展
ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
# DOM 文档对象模型
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色）
# BOM 浏览器对象模型
浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。
通过BOM可以操作浏览器窗口，比如弹窗、控制浏览器跳转、获取分辨率等
# 引入方式
- 内部样式
- 内嵌JS
- 外部引入
<script src="script.js" async></script>
“外部”示例中使用了 JavaScript 的一项现代技术（async “异步”属性）来解决这一问题，它告知浏览器在遇到 <script> 元素时不要中断后续 HTML 内容的加载。
# async 和 defer
async:
浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>
2
3
4
5
三者的调用顺序是不确定的。jquery.js 可能在 script2 和 script3 之前或之后调用，如果这样，后两个脚本中依赖 jquery 的函数将产生错误，因为脚本运行时 jquery 尚未加载。
解决这一问题可使用 defer 属性，脚本将按照在页面中出现的顺序加载和运行：
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>
2
3
4
5
脚本调用策略小结：
- 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用
async。 - 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用
defer，将关联的脚本按所需顺序置于 HTML 中。
# 基本输入输出
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | |
| console.log(msg) | 浏览器控制台打印输出信息 | |
| prompt(info) | 浏览器弹出输入框，用户可以输入 |
# JS变量
变量声明初始化
var age = 18;
var name = 'yuadh';
console.log(age);
2
3
var 是一个js关键字
输入输出
var name = prompt("enter your name");
console.log(name);
2
注意点
- 多个变量声明和后端语言一样
- 未声明变量 输出值 undefined （未定义）
- 未声明的变量也可以使用，但是不推荐
- 未声明，为赋值 会报错
# 变量命名规则
- 由字母、数字、下划线、$ 符号组成 。开头不能用数字。
- 严格区分大小写，不能使用关键字，驼峰命名法。
# JS 数据类型
JavaScript 是一种弱类型或者动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定
var x = 6;
x = "yuadh";
2
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含 整型值和浮点型值 | 0 |
| Boolean | 布尔值类型，如true、false | false |
| String | 字符串类型 | "" |
| Undefined | 声明对象未赋值未定义 | undefined |
| Null | 空值 | null |
# 数字类型
赋值比较自由 可以是整数、浮点数
可以是八进制、十六进制
输出特殊值
- Number.MAX_VALUE 最大值
console.log(Number.MAX_VALUE) - Number.MIN_VALUE 最小值
console.log(Number.MIN_VALUE) - Infinity 无穷大
console.log(Number.MAX_VALUE*2) - -infinity 无穷小
console.log(Number.MIN_VALUE)*2 - NaN 非数字
console.log('yuadh'-100)
isNaN() 判断数字型函数 console.log(isNaN(1)) => false
# 字符串类型
使用单引号或双引号括起来的为字符串类型
JS可以使用单引号嵌套双引号，或者双引号嵌套单引号
var msg = "我是'yuadh'不是"
换行等使用转移字符 计算机通用
length属性
console.log("yuadh".length)
字符串拼接
字符串+任何类型=新字符串
# Boolean类型
true : 1
false :0
# undefined类型
未定义数据类型
undefined+11 => NaN
# null类型
null+"yuadh" => nullyuadh
# typeof
获取数据类型
var timer = null;
console.log(typeof timer); // object
2
可以测出promet获取的值类型为字符串
# 运算符
# 类型转换
# 转为字符串
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 隐式转换 | num.toString() |
| String() 强制转换 | String(num) | |
| 加号拼接字符串 | num+" " |
# 转为数字型
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(String) | 将String类型转换成整数数值型 | parseInt("85") |
| parseFloat(String) | 将String类型转换为浮点数数值型 | parseFloat("48") |
| Number() | Number('12') | |
| - * / | 隐式转换 | '12'-0 |
parsexxx() 会将数字后面的非数字字符删除
# 转为布尔型
Boolean('true')
非零值都为 true