前端入门系列--JavaScript(1)

从本篇开始主要讲JavaScript的相关内容；

1、浏览器执行js

浏览器分为渲染引擎和js引擎两部分：

js引擎会逐行解释每一行代码将其转换为机器语言再由计算机去执行；

2、js的组成

1、ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准，详细可参照MDN手册；

2、文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）；

3、浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等；

3、js三种书写方式

与CSS一样，js也有三种书写位置：

3.1行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />

特点如下：

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
• 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
• 可读性差， 在html中编写JS大量代码时，不方便阅读；
• 引号易错，引号多层嵌套匹配时，非常容易弄混；
• 特殊情况下使用

3.2内嵌式

在head中写script标签对即可（最常用）：

<script>
   这里是内容部分
</script>

3.3外部文件式

在外面新建一个.js文件后再将其引入到html中：

<script src="my.js"></script>

• 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
• 引用外部 JS文件的 script 标签中间不可以写代码
• 适合于JS 代码量比较大的情况

4、js变量相关

4.1变量声明与赋值

通过var来声明变量，并可在声明的同时进行赋值，如：

var age = 23;

通常，我们把声明一个变量并赋值称为变量的初始化

4.2变量语法扩展

• 更新变量：一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准；
• 同时声明多个变量：同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开，如：var age = 10, name = 'zs', sex = 2;
• 声明变量特殊情况：
  
  
  
  
  

5、js数据类型

不同于其他语言在定义时要写明数据类型，js不需要写明数据类型，而是在程序运行过程中，类型会被自动确定（代码运行时变量的数据类型是由 JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕之后， 变量就确定了数据类型）；

堆和栈的区别：
1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面
2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；栈中存放的是其地址，其内容存在堆中；

但要注意复杂数据类型在在函数中传参的使用：
函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象，会引起外部的值变化，如下：

function Person(name) {
    this.name = name;
}
function f1(x) { // x = p
    console.log(x.name); // 2. 这个输出什么 ?    
    x.name = "张学友";
    console.log(x.name); // 3. 这个输出什么 ?    
}
var p = new Person("刘德华");
console.log(p.name);    // 1. 这个输出什么 ?   
f1(p);
console.log(p.name);    // 4. 这个输出什么 ?  

最后输出：

5.1数据类型分类

其主要分为简单数据类型与复杂数据类型（后面文章再介绍）两种：

简单数据类型：存储时变量中存储的是值的本身；
复杂数据类型：存储时变量中存储的只是地址，包括：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；

5.1.1简单数据类型

5.1.1.1数字型

1、数值的最大值与最小值：

• 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
• 最小值：Number.MIN_VALUE，这个值为：5e-32

2、数字型的三个特殊值：

• Infinity ，代表无穷大，大于任何数值
• -Infinity ，代表无穷小，小于任何数值
• NaN ，Not a number，代表一个非数值

3、isNaN的使用：用来判断变量是否是一个非数字类型的变量，若非数字返回true，是数字返回false；

5.1.1.2字符串类型

string类型可以使用单引号或者双引号括起来；

1、字符串引号嵌套：可以外单内双、内单外双

var strMsg = '我是"程序猿”来的';   // 可以用''包含""
var strMsg2 = "我是'程序猿'来的";  // 也可以用"" 包含''

2、字符串转义字符，常见的如下：

3、通过变量名.length可以获取字符串长度

4、字符串拼接
有其他方法，这里只介绍+方法：

• 多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
• 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112 

或者：

var age = 23
console.log('我今年' + age + '岁啦'); // 我今年23岁啦

5、字符串的不可变性
指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
​ 当重新给字符串变量赋值的时候，变量之前保存的字符串不会被修改，依然在内存中重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变。
​ 由于字符串的不可变，在大量拼接字符串的时候会有效率问题

6、根据字符返回所在位置（与数组中的一致）

7、根据位置返回字符串

8、字符串操作

此外，还有replace方法：
将字符串中的一部分替换为其他字符串

字符串.replace(被替换的字符串， 要替换为的字符串)；

split方法：
split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组

字符串.split("分割字符")

5.1.1.3布尔类型

知道布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0；

5.1.1.4Undefined和 Null

一个声明但不赋值的变量会是undefined，注意其与其他类型的运算结果：

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明后赋值为null的变量表名其中内容为空（一般在对象中用）：

5.1.1.5typeof查看数据类型

typeof 变量名

5.1.1.6数据类型间的转换

1、转换为字符串

• toString() 和 String() 使用方式不一样；
• 三种转换方式，更多第三种加号拼接字符串转换方式， 这一种方式也称之为隐式转换；

2、转换为数字

• 注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
• 隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

3、转换为布尔型

• 代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
• 其余值都会被转换为 true

6、一些扩展

js是解释型语言，与之相对应的是编译型语言，如java

• 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同；
• 编译器是在代码执行之前进行编译，生成中间代码文件；
• 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)；