爬虫不得不学之 JavaScript 入门篇

空空道人
• 阅读 1862

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

1. JavaScript 介绍

JavaScript 是运行在 客户端的语言,和你们说的 Java 是很不一样的, Java 通常用于服务器端的。但是他们两者也有相似之处,比如 JavaScript 的命名规范和名称和 Java 相似。其他的好像就没有什么了,哈哈。

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

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

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

爬虫不得不学之 JavaScript 入门篇

爬虫不得不学之 JavaScript 入门篇

2.JavaScript组成

爬虫不得不学之 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 不需要使用关键字来声明。

爬虫不得不学之 JavaScript 入门篇

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

3.3 变量的命名规则和规范

1):规则-必须遵守的,不遵守就会报错,就好比人类的法律

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

2):规范-建议遵守的,但不遵守也不会报错,比如人类的道德

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

3.4 小案例

了解完变量之后可以做个小案例:交换两个值

爬虫不得不学之 JavaScript 入门篇

4. 数据类型

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

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

复杂数据类型比如 object,这个以后遇到再说,慢慢来。

4.1 Number

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

爬虫不得不学之 JavaScript 入门篇

比如上面变量 a 的字面量就是 12,b 的字面量就是 45。

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

爬虫不得不学之 JavaScript 入门篇

除了使用上面的十进制来赋值,我们还可以使用八进制和十六进制

爬虫不得不学之 JavaScript 入门篇

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

无论你写何种进制,它的存储还是以二进制来存储的,所以这样就弄成了浮点数的存储精确度,浮点数只能精确到17位小数。

爬虫不得不学之 JavaScript 入门篇

可以看到 两个浮点数的相加不是很准确,所以不要在有浮点数的运算下做判断,有可能会有你想不到的结果,如

爬虫不得不学之 JavaScript 入门篇

浮点数除了直接表示我们还可以使用科学计数法,当然,整数也是一样可以使用的。

爬虫不得不学之 JavaScript 入门篇

Number 数据类型是有范围的,但是不需要我们刻意去计,记住它的关键字就可以了。

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

4.2 String

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

爬虫不得不学之 JavaScript 入门篇

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

连接两个字符串可以使用 + 进行连接, + 号两边不需要全是 String 类型也可以进行连接

爬虫不得不学之 JavaScript 入门篇

思考:如何打印出下列字符串
  1. 我是一个"帅哥"
  2. 我喜欢"学‘python’"

这里面有单引号和双引号,如果直接进行打印的话就会出错,这时候我们就需要把这些有意义的字符给转义符,转成普通的字符

爬虫不得不学之 JavaScript 入门篇

根据上面的转义符,就可以写出下面语句了

爬虫不得不学之 JavaScript 入门篇

4.3 Boolean

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

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

4.4 undefined 和 null

  1. undefined 表示一个声明了没有赋值的变量,所以变量的默认值就是undefined。
  2. null 只是表示为空,如果要想把该值设为 null, 只能手动赋值。

5. 数据类型转换

5.1 其他类型转 String 类型
  • 使用 toString() 方法

爬虫不得不学之 JavaScript 入门篇

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

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

爬虫不得不学之 JavaScript 入门篇

  • 使用 + 连接符 连接空字符,这是最方便的,也是支持所有类型

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

5.3 其他类型转 Boolean 类型

这个使用 Boolean() 来转就可以了,所有类型都可以转。转为 false 的情况为 null、undefined、NaN、0 和 空字符串,其他情况均为 true。

其实这个还可以使用隐式转换,就是不需要自己手动转,解释器会自动帮我们转,隐式转换通常用在判断语句的情况,隐式转换可以减少代码的书写,等说到判断语句再说,下面就有!

6. 操作符

操作符就是用来对数据类型进行操作的符号,每个语言的操作符都差不多,这里再说下可以更深刻一点!

6.1 算术运算符

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

爬虫不得不学之 JavaScript 入门篇

6.2 一元运算符

一元运算符就是只需要一个操作数的运算符,有 ++、-- 和 !

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

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

  • ! 就是对操作数取反,而且返回的是 Boolean 类型

爬虫不得不学之 JavaScript 入门篇

6.3 逻辑运算符

逻辑运算符有 && 、|| 和 !,! 因为只对一个操作数操作所以也属于一元运算符。

  • &&:这个是与运算符,只有当两边都为 true 的时候才会返回 true,其他情况都返回 false。
  • ||:这个是或运算符,只有当两边都为 false 的时候才返回 false, 其他情况都返回 true。

爬虫不得不学之 JavaScript 入门篇

6.4 关系运算符

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

爬虫不得不学之 JavaScript 入门篇

6.5 赋值运算符

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

+= 就是把左右两边的值相加起来再赋值给左边的值,其他的也一样,就不多说了。

爬虫不得不学之 JavaScript 入门篇

6.6 运算符优先级从高到低(运算顺序)
  1. ()
  2. 一元运算符
  3. 算术运算符,同级时先 * / 再 + -
  4. 关系运算符:> >= < <=
  5. 相等运算符:== === != !==
  6. 逻辑运算符:同级时先 && 再 ||

    1. 赋值运算符

7. 流程结构

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

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

顺序结构就不多说了,我们刚才运行的代码就是顺序结构的,现在先说下分支结构。

7.1 分支结构

使用分支结构可以使用 if 和 else 组成的语句,写法和 python 差不多。

爬虫不得不学之 JavaScript 入门篇

单独 if 语句

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

爬虫不得不学之 JavaScript 入门篇

另一种形式的分支语句:

爬虫不得不学之 JavaScript 入门篇

if-else 一起用

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

爬虫不得不学之 JavaScript 入门篇

当表达式1 为 true 的时候,就会把 表达式2 的值给返回,否则返回 表达式3 的值,这个有一个缺陷,就是必须要有结果返回。

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

if-else if-if 三个合用

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

爬虫不得不学之 JavaScript 入门篇

改写后:

爬虫不得不学之 JavaScript 入门篇

因为 case 的值只能是一个值,不能是范围,所以用了个除法来解决,要不然需要写大量的 case,还需要注意一点是一定需要记得写 break,否则在匹配到相应的值之后它会一直往下运行不管 case 值是否对应,直到遇到 break 或者 全部运行完。

7.2 循环结构

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

  • for语句:一般在确定了循环的次数就会使用这个比较方便,语法为:

爬虫不得不学之 JavaScript 入门篇

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

爬虫不得不学之 JavaScript 入门篇

  • while 语句:在无法确定循环次数的时候就可以用这个,使用这个需要注意循环结束的条件,以免写了死循环。语法为:

爬虫不得不学之 JavaScript 入门篇

满足循环条件之后就执行循环体,然后再去执行循环条件,接下来就是重复刚才的动作直到不满足条件。

爬虫不得不学之 JavaScript 入门篇

  • do-while 语句:这个也是在不知道循环次数的时候使用,但是当循环体无论如何都需要执行一次的话就可以选择使用这个。语法为:

爬虫不得不学之 JavaScript 入门篇

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

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

学习了循环之后,我们也可以尝试着自己打印一个三角形,或者 99 乘法表来满足一下自己。

爬虫不得不学之 JavaScript 入门篇

爬虫不得不学之 JavaScript 入门篇

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

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

爬虫不得不学之 JavaScript 入门篇

点赞
收藏
评论区
推荐文章
samzhangjy samzhangjy
4年前
知乎文章转Markdown的艰辛历程
好吧,让我们从头说起。众所不周知,我有了我自己的博客,于是就想把我的知乎内容同步到博客上去(目前还空空如也)。但是,出于能犯懒就犯懒的原则,我决定做一个自动化程序,自动将知乎上的文章转换成Markdown食用。嗯……结果还挺满意的,就是好像时间耗费的长了一点(三个月啊,中间搁置了两个月零30天)。。总之,我Python爬虫,成功构建了一个知乎2MD全自动转换
Wesley13 Wesley13
3年前
java爬虫进阶 —— ip池使用,iframe嵌套,异步访问破解
写之前稍微说一下我对爬与反爬关系的理解一、什么是爬虫   爬虫英文是splider,也就是蜘蛛的意思,web网络爬虫系统的功能是下载网页数据,进行所需数据的采集。主体也就是根据开始的超链接,下载解析目标页面,这时有两件事,一是把相关超链接继续往容器内添加,二是解析页面目标数据,不断循环,直到没有url解析为止。举个栗子:我现在要爬取苏宁手机价
把帆帆喂饱 把帆帆喂饱
4年前
爬虫
爬虫什么是爬虫使用编程语言所编写的一个用于爬取web或app数据的应用程序怎么爬取数据1.找到要爬取的目标网站、发起请求2.分析URL是如何变化的和提取有用的URL3.提取有用的数据爬虫数据能随便爬取吗?遵守robots.txt协议爬虫的分类通用网络爬虫百度,Google等搜索引擎,从一些初识的URL扩展到整个网站,主要为门户站点搜索引擎和大型网站服务采
Aimerl0 Aimerl0
4年前
Python网络爬虫与信息提取
title:Python网络爬虫与信息提取date:2020121001:00:23tags:Pythoncategories:学习笔记写在前面不知道写啥其实说实话TOC网络爬虫之规则安装requests库cmd命令行打开输入pip3installrequests,等待即可简单测试,爬一下bkjwpythonimportrequ
Stella981 Stella981
3年前
Python 爬虫:把廖雪峰的教程转换成 PDF 电子书
写爬虫似乎没有比用Python更合适了,Python社区提供的爬虫工具多得让你眼花缭乱,各种拿来就可以直接用的library分分钟就可以写出一个爬虫出来,今天就琢磨着写一个爬虫,将廖雪峰的Python教程爬下来做成PDF电子书方便大家离线阅读。开始写爬虫前,我们先来分析一下该网站1(https://www.oschina.net/
Stella981 Stella981
3年前
Node.js 简单学习
明白JavaScript语言,你就会用Node.js了。最常见的运行JavaScript语言的地方就是用户的浏览器,几乎所有的浏览器上都有个JavaScript引擎,这个引擎负责运行在页面中嵌入的JavaScript代码。代码是在用户的浏览器上运行的,用户那头叫前端(Frontend),服务器这头叫后端(Backend)。Node.js
Stella981 Stella981
3年前
Python爬虫入门教程 2
妹子图网站爬取前言从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10篇的博客,写爬图片这一件事情。希望可以做好。为了写好爬虫,我们需要准备一个火狐浏览器,还需要准备抓包工具,抓包工具,我使用的是CentOS自带的tcpdump,加上wireshark,这
Wesley13 Wesley13
3年前
GET和POST两种基本请求方法的区别
GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二。最直观的区别就是GET把参数包含在URL中,POST通过requestbody传递参数。你可能自己写过无数个GET和POST请求,或者已经看过很多权威网站总结出的他们的区别,你非常清楚知道什么时候该用什么。当你在面试中被问到这个问题,你的内心充满了自
Stella981 Stella981
3年前
Python实现王者荣耀小助手(一)
简单来说网络爬虫,是指抓取万维网信息的程序或者脚本,Python在网络爬虫有很大优势,今天我们用Python实现获取王者荣耀相关数据,做一个小助手:前期准备,环境搭建:Python2.7sys模块提供了许多函数和变量来处理Python运行时环境的不同部分;urllib模块提供了一系列用于操作URL的功能,爬虫所需要的功能,基本上在urll
Stella981 Stella981
3年前
GitHub:爬虫入门JS 模拟登陆各大网站
GitHub:爬虫入门JS模拟登陆各大网站hello,小伙伴们,大家好,今天给大家介绍的开源项目是:SpiderCrack_Js,想学习爬虫解密js登陆的可以看看这个开源项目,这个开源项目可以给你提供一个不错的思路。代码教程【OpenLaw】登陆参数加密
爬虫时“封IP”试试这个方法
我想很多会爬虫技术的小伙伴有给别人写爬虫软件赚外快的经历,小编也不例外。有时候就会遇到粉丝在后台留言,问:大佬,运行你的爬虫程序怎么报错了?于是我让他把报错信息发过来,看过之后一声叹息。多数爬虫源码运行的报错都是由于访问目标网站过于频繁,从而导致目标网站返回错误或者没有数据返回。这也是最常见的方式,也就是我们经常听到的“封IP”,需要不断地切换IP访问。