爬虫不得不学之 JavaScript 入门篇

如今的爬虫愈来愈难了，再也不和以前的那样，随便抓个包就能够找到相关的 url ，而后 post 一下或者 get 一下数据就出来了。还有一个可能就是可能你之前用来学习的爬虫网站太简单了，尚未看见过那些猛的。上两周我就想弄弄知乎登录，参数的加密算是把 js 代码扣出来了，可是只能在浏览器上运行，一换到 Python 执行就各类报错，你不会 JavaScript 就什么都调不了，因此二话不说，开启了新的大陆。那就开始吧！

1. JavaScript 介绍

JavaScript 是运行在 客户端的语言，和大家说的 Java 是很不同的， Java 一般用于服务器端的。可是他们二者也有类似之处，好比 JavaScript 的命名规范和名称和 Java 类似。其余的好像就没有什么了，哈哈。

JavaScript 也是一门脚本语言，和 python 同样，都是解释性语言，即每运行一行代码就解释一行，只不过 JavaScript 的解释器在浏览器内部。

JavaScript 最初被应用是为了处理与表单相关的验证，如今应用就更加广了，能够说是几乎无所不能，好比用来作服务端开发，命令行工具、桌面程序和游戏开发等。

我在学了以后也跟着弄了两个小的页面游戏，怀念童年。

2.JavaScript组成

• EcmaScript：JavaScript 的核心，定义了 JavaScript 的基本语法和数据类型，也是咱们今天所学的内容。
• DOM：document odject model， 文档对象模型，用于操做网页中的页面元素的，好比能够控制相关元素的增删改查。
• BOM：browser object model,， 浏览器对象模型， 用于操做浏览器窗口，好比弹出框，控制页面滑动等。

3.JavaScript 变量

在了解变量以前，先要知道 JavaScript 代码写在那里：

1. 行内，即写在 html 的元素中，不建议
2. 嵌入，即写在 <script>标签内，这个练习时可使用，但当代码量大的时候也不建议
3. 外部，即 js 代码都在另外一个文件内，用连接的方式接入 html 文件便可，推荐使用这种方式。

还有注释：

1. 单行注释： // 注释内容
2. 多行注释： /* 注释内容 */

3.1 变量的定义以及做用

变量是计算机内存中存储数据的标识符，根据变量名称能够获取到内存中存储的数据。

使用变量咱们能够更方便的获取或修改内存中的数据。

3.2 定义变量

使用 var 关键字来声明变量，和 python 差很少，都是弱类型的语言，只不过 python 不须要使用关键字来声明。

注：console.log()这个方法只是在控制台打印一下变量而已。

3.3 变量的命名规则和规范

1)：规则-必须遵照的，不遵照就会报错，就比如人类的法律

• 由字母、数字、下划线和 $ 组成，可是不能以数字开头，如：12asd 这个名字就会报错
• 不能是关键字或保留字，好比 var、for等
• 严格区分大小写，就是说大写和小写都是不同的变量

2)：规范-建议遵照的，但不遵照也不会报错，好比人类的道德

• 变量名必须有意义，由于这样别人才能看得懂，并且也利于维护，没有意义的就像咱们须要破解相关参数时看到的 js 混淆，想一想就头痛。
• 遵照驼峰命名法，首字母小写，后面单词的首字母大写，如：userName

3.4 小案例

了解完变量以后能够作个小案例：交换两个值

4. 数据类型

JavaScript 的数据类型分两种，一个为简单数据类型，另外一个为复杂数据类型。

简单数据类型有 Number、String、Boolean、undefined 和 null。一共五种

复杂数据类型好比 object，这个之后遇到再说，慢慢来。

4.1 Number

Number 为数值固定的表示法，用来表示整数和浮点数的。它的字面量就是数值，那字面量是什么意思呢？字面量就是这个变量表示的值，

好比上面变量 a 的字面量就是 12，b 的字面量就是 45。

咱们还可使用 typeof 关键字来判断这个数据类型

除了使用上面的十进制来赋值，咱们还可使用八进制和十六进制

八进制的数是以 0 开头的，而十六进制的是以 0x 开头的，其余的进制就不讨论了。

不管你写何种进制，它的存储仍是以二进制来存储的，因此这样就弄成了浮点数的存储精确度，浮点数只能精确到17位小数。

能够看到 两个浮点数的相加不是很准确，因此不要在有浮点数的运算下作判断，有可能会有你想不到的结果，如

浮点数除了直接表示咱们还可使用科学计数法，固然，整数也是同样可使用的。

Number 数据类型是有范围的，可是不须要咱们刻意去计，记住它的关键字就能够了。

最后再说一个关键字：NaN：not a number,这个表示不是数值，当有两个数据运算时，运算失败就会返回这个值。咱们也能够判断一个数据类型是否是 NaN，使用 isNaN() 方法便可。

4.2 String

String 类型就是用单引号或双引号括起来的内容就是了，和 python 的字符串类型也是差很少的。

length 属性是获取字符串的长度。

链接两个字符串可使用 + 进行链接， + 号两边不须要全是 String 类型也能够进行链接

思考：如何打印出下列字符串

1. 我是一个"帅哥"
2. 我喜欢"学‘python’"

这里面有单引号和双引号，若是直接进行打印的话就会出错，这时候咱们就须要把这些有意义的字符给转义符，转成普通的字符

根据上面的转义符，就能够写出下面语句了

4.3 Boolean

boolean 类型，字面量只有 true 和 false，表示真假，即表示计算机的 1 和 0。

当咱们描述只有两种结果的事物是可使用这个。

4.4 undefined 和 null

1. undefined 表示一个声明了没有赋值的变量，因此变量的默认值就是undefined。
2. null 只是表示为空，若是要想把该值设为 null， 只能手动赋值。

5. 数据类型转换

5.1 其余类型转 String 类型

• 使用 toString() 方法

须要注意：undefined 和 null 类型不能使用这个方法

• 使用 String() 强转，这个对任何类型都适用

• 使用 + 链接符 链接空字符，这是最方便的,也是支持全部类型

5.2 其余类型转 Number 类型

• 使用 Number() ，当转不了的时候会返回 NaN,说明不是数值，在将 Boolean 类型转 Number 时，true会转为 1， false 会转为 0。这个方法不支持将数字开头带有其它字符的字符串转为数值类型，如 "12df"

• 使用 parseInt() ，只能转为整数，并且转不了Boolean。可是能够转以数字开头而带有字符的字符串。这个就能够应用在好比须要将 "16px" 转为数值，就可使用这个。转不了时也会返回 NaN。
• 使用 parseFloat() 能够转为浮点数，当字符串为整数时也能够转为整数。须要注意的是：当字符串中有两个小数点的时候，只会转第二个小数点以前的数字，后面的都看成字符串

• 使用 + 或 - 来将值取正或取负。这个的功能和 Number 差很少。

• 使用 - 来进行减法运算来转。这个使用运算符就会先把左右两边的类型先转为数值类型再运算，因此能够用来相减 0。至于 + 不行，是由于这个用来作字符串的拼接了。

5.3 其余类型转 Boolean 类型

这个使用 Boolean() 来转就能够了，全部类型均可以转。转为 false 的状况为 null、undefined、NaN、0 和 空字符串，其余状况均为 true。

其实这个还可使用隐式转换，就是不须要本身手动转，解释器会自动帮咱们转，隐式转换一般用在判断语句的状况，隐式转换能够减小代码的书写，等说到判断语句再说，下面就有！

6. 操做符

操做符就是用来对数据类型进行操做的符号，每一个语言的操做符都差很少，这里再说下能够更深入一点！

6.1 算术运算符

有 + - * / % 五个，任何一个数 除 0 都为为无穷大，模 0 为 NaN

6.2 一元运算符

一元运算符就是只须要一个操做数的运算符，有 ++、-- 和 !

• 前置++：如 a++，变量在前，这个是先将变量的结果返回再对自身加 1，
• 后置++：如 ++a，变量在后，这个是先将变量进行自身加 1，再把结果返回

还有 -- 也是同样的，只是 它是自身减 1，在运算中须要注意变量在一元运算符的顺序。

• ! 就是对操做数取反，并且返回的是 Boolean 类型

6.3 逻辑运算符

逻辑运算符有 && 、|| 和 !，! 由于只对一个操做数操做因此也属于一元运算符。

• &&：这个是与运算符，只有当两边都为 true 的时候才会返回 true，其余状况都返回 false。
• ||：这个是或运算符，只有当两边都为 false 的时候才返回 false， 其余状况都返回 true。

6.4 关系运算符

关系运算符有 < > <= >= == != === 和 !==。运算完都是返回 Boolean 类型的，这里就不细说了，都差很少的，只说下 == 和 === 的区别，还有 !== 和 != 的区别。== 只判断两值的字面量相等不相等，不会判断数据类型，而 === 会先去判断数据类型再判断字面量，!= 和 !== 的区别也是这样。

6.5 赋值运算符

赋值运算符有 += -= *= /= %= = 六个。

+= 就是把左右两边的值相加起来再赋值给左边的值，其余的也同样，就很少说了。

6.6 运算符优先级从高到低（运算顺序）

1. ()
2. 一元运算符
3. 算术运算符，同级时先 * / 再 + -
4. 关系运算符：> >= < <=
5. 相等运算符：== === != !==

6. 逻辑运算符：同级时先 && 再 ||

   1. 赋值运算符

7. 流程结构

JavaScript 的流程结构有三种，分别是顺序结构，分支结构和循环结构，这个也和 python 差很少的。

顺序结构就是代码是按顺序从上到下执行的，分支结构就是按照给定条件的是否成立而执行不一样的语句，循环结构就是重复执行某一段代码。

顺序结构就很少说了，咱们刚才运行的代码就是顺序结构的，如今先说下分支结构。

7.1 分支结构

使用分支结构可使用 if 和 else 组成的语句，写法和 python 差很少。

单独 if 语句

说到判断，就有个隐式转换，就是 if 括号里面的值会将任意类型的值隐式转换成 Boolean 类型。以下：

另外一种形式的分支语句：

if-else 一块儿用

这个 if-else 合用还有个简单点的写法，叫作三元运算符，语法为

当表达式1 为 true 的时候，就会把 表达式2 的值给返回，不然返回 表达式3 的值，这个有一个缺陷，就是必需要有结果返回。

还有一种形式的分支语句：

if-else if-if 三个合用

上面的 三个合用咱们也可使用 switch 语句来改写，这个是选择关键词。语法为

改写后：

由于 case 的值只能是一个值，不能是范围，因此用了个除法来解决，要否则须要写大量的 case，还须要注意一点是必定须要记得写 break，不然在匹配到相应的值以后它会一直往下运行无论 case 值是否对应，直到遇到 break 或者 所有运行完。

7.2 循环结构

JavaScript 的循环结构也有 while 和 for语句，但他还有 do-while语句。

• for语句：通常在肯定了循环的次数就会使用这个比较方便，语法为：

这个先去执行初始化表达式1， 而后去执行判断表达式2，符合条件就会执行循环体，循环体执行完以后就执行自增表达式3，再去判断，接下来就是重复刚才的动做，直到不知足判断表达式2。

• while 语句：在没法肯定循环次数的时候就能够用这个，使用这个须要注意循环结束的条件，以避免写了死循环。语法为：

知足循环条件以后就执行循环体，而后再去执行循环条件，接下来就是重复刚才的动做直到不知足条件。

• do-while 语句：这个也是在不知道循环次数的时候使用，可是当循环体不管如何都须要执行一次的话就能够选择使用这个。语法为：

先去执行循环体，再去判断循环条件，接下来就是重复刚才的动做直到循环条件不知足。

在循环结构中还可使用 break 和 continue 来对循环进行跳出的操做。break 就是跳出整个循环，就是循环结束，而 continue 是跳出本次循环，接着下一次的循环。

学习了循环以后，咱们也能够尝试着本身打印一个三角形，或者 99 乘法表来知足一下本身。

这两个的思路都是差很少的，只要你搞定了第一个三角形的思路，下面的乘法表天然就迎刃而解了，这里就很少说了。

下篇就开始进入复杂的数据类型了，即 object，准备好了吗？