智慧的网络爬虫之JavaScript基础

最新推荐文章于 2024-07-16 22:01:51 发布

温轻舟

最新推荐文章于 2024-07-16 22:01:51 发布

阅读量882

点赞数 32

分类专栏： Python-爬虫知识解析文章标签：爬虫 javascript 开发语言

本文链接：https://blog.csdn.net/qiao_yue/article/details/140049257

版权

Python-爬虫知识解析专栏收录该内容

23 篇文章 5 订阅

订阅专栏

智慧的网络爬虫之`JavaScript`基础

js全称JavaScript，是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助 Node.js），因此 JavaScript 是一种全栈式的编程语言。

JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：

HTML 用来定义网页的内容，例如标题、正文、图像等；
CSS 用来控制网页的外观，例如颜色、字体、背景等；
JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。

JavaScript通常由以下部分组成

核心（ECMAScript）：提供语言的语法和基本对象；
文档对象模型（DOM）：提供操作html网页内容的方法和接口；
浏览器对象模型（BOM）：提供与浏览器进行交互的方法和接口，例如弹出移动，关闭窗口
事件处理：用来响应用户的各种操作，如点击、滑动、键盘输入等，这就是事件处理。

引入`JavaScript`

在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签，用户可以在 <script> 标签中直接编写 JavaScript 代码

<!-- 第一种方法 再HTML中写入<script>标签-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        document.write("向html文档中写入数据");
    </script>
</head>
<body></body>
</html>

<!-- 第二种方法 导入外部js文件 -->
<!-- 第一种方法 再HTML中写入<script>标签-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js文件路径"></script>
</head>
<body></body>
</html>

js基础语法

1. 注释

js中单行注释以双斜杠//开头，多行注释用/*开头*/结尾。js还能识别html的注释

2. 变量

js中的变量可以包含数字、字母、下划线_、美元符号$，变量名中不能出现汉字，变量名中不能包含空格，变量名不能是 JavaScript 中的关键字、保留字，变量名不能以数字开头。

在这里插入图片描述

变量的定义

在 JavaScript 中，定义变量需要使用var关键字，语法格式如下：

var 变量名;
// 定义变量时，可以一次定义一个或多个变量，若定义多个变量，则需要在变量名之间使用逗号,分隔开。
// 变量定义后，如果没有为变量赋值 那么这些变量会被赋予一个初始值——undefined

let 变量名
const 变量名

// ES6 新增了 let 和 const 两个关键字来声明变量
let name = '张三' //关键字声明的变量 不允许重名
const age= 18    //关键字声明的变量  不允许重名 并且值定义之后不能修改

赋值

使用等于号=来为变量赋值，等号左边的为变量的名称，等号右边为要赋予变量的值

var num;    // 定义一个变量 num
num = 1;    // 将变量 num 赋值为 1

3. 数据类型

JavaScript 中的数据类型可以分为两种类型：基本数据类型（值类型）和引用数据类型

基本数据类型：

// String类型
var str = "helloworld"   //以单引号''或双引号""包裹起来的文本

// Number类型   不区分整数和小数 统一用Number表示
var num1 = 123;     // 整数
var num2 = 3.14;    // 浮点数

// Boolean类型
var a = true;   // 定义一个布尔值 true
var b = false;  // 定义一个布尔值 false

// Undefined 类型
var num;
console.log(num);  // 输出 undefined

引用数据类型

// Object类型  由键、值组成的无序集合，定义对象类型需要使用花括号{ }
var person = {name:"张三",age:24,sex:'男'}  // 对象类型的键都是字符串类型的，值则可以是任意数据类型
// 获取对象中的值可以使用 对象名.键  或者  对象名[键]
console.log(person.name)
console.log(person.age)

// Array类型  一组按顺序排列的数据的集合,数组中的每个值都称为元素
var a1 = [1,'hello', true, 34.2]
console.log(a1[0])  // 输出索引为0的元素， 即1
console.log(a1[1])  //输出索引为1的元素，即'hello'


// function类型  函数是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行
function sayHello(name){
    return "Hello, " + name;
}
var res = sayHello("Peter");
console.log(res);

4. 运算符

算术运算符

运算符	描述	示例
`+`	加法运算符	`x + y` 表示计算 `x` 加 `y` 的和
`-`	减法运算符	`x - y` 表示计算 `x` 减 `y` 的差
`*`	乘法运算符	`x * y` 表示计算 `x` 乘 `y` 的积
`/`	除法运算符	`x / y` 表示计算 `x` 除以 `y` 的商
`%`	取模（取余）运算符	`x % y` 表示计算 `x` 除以 `y` 的余数

赋值运算符

运算符	描述	示例
`=`	最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量	`x = 10` 表示将变量 x 赋值为 `10`
`+=`	先进行加法运算，再将结果赋值给运算符左侧的变量	`x += y` 等同于 `x = x + y`
`-=`	先进行减法运算，再将结果赋值给运算符左侧的变量	`x -= y` 等同于 `x = x - y`
`*=`	先进行乘法运算，再将结果赋值给运算符左侧的变量	`x = y` 等同于 `x = x y`
`/=`	先进行除法运算，再将结果赋值给运算符左侧的变量	`x /= y` 等同于 `x = x / y`
`%=`	先进行取模运算，再将结果赋值给运算符左侧的变量	`x %= y` 等同于 `x = x % y`

自增自减运算符

运算符	名称	影响
`++x`	自增运算符	将 x 加 1，然后返回 x 的值
`x++`	自增运算符	返回 x 的值，然后再将 x 加 1
`--x`	自减运算符	将 x 减 1，然后返回 x 的值
`x--`	自减运算符	返回 x 的值，然后将 x 减 1

比较运算符

运算符	名称	示例
`==`	等于	`x == y` 表示如果 x 等于 y，则为真
`===`	全等	`x === y` 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真
`!=`	不相等	`x != y` 表示如果 x 不等于 y，则为真
`!==`	不全等	`x !== y` 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真
`<`	小于	`x < y` 表示如果 x 小于 y，则为真
`>`	大于	`x > y` 表示如果 x 大于 y，则为真
`>=`	大于或等于	`x >= y` 表示如果 x 大于或等于 y，则为真
`<=`	小于或等于	`x <= y` 表示如果 x 小于或等于 y，则为真

逻辑运算符

运算符	名称	示例
`&&`	逻辑与	`x && y` 表示如果 x 和 y 都为真，则为真
`\|\|`	逻辑或	`x \|\| y` 表示如果 x 或 y 有一个为真，则为真
`!`	逻辑非	`!x` 表示如果 x 不为真，则为真

`js`输出语句

1. `alert()`函数

在浏览器弹出一个提示框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var a = 11,b = 5;
        alert("a * b = " + a * b);
    </script>
</body>
</html>

2. `confirm()`函数

confirm() 函数与 alert() 函数相似, 都可以在浏览器窗口弹出一个提示框。confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
  </head>
  <body>
    <script type="text/javascript">
      var res = confirm("这里是要显示的内容");
      if(res == true){
        alert("你点击了“确定”按钮");
      }else{
        alert("你点击了“取消”按钮");
      }
    </script>
  </body>
</html>

3. `console.log()`

console.log() 可以在浏览器的控制台输出信息,要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例，要打开控制台您只需要在浏览器窗口按 F12 快捷键，或者点击鼠标右键，并在弹出的菜单中选择“检查”选项即可。最后，在打开的控制台中选择“Console”选项

var str = 'helloworld'
console.log(str);

4. `document.write()`

使用 document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码。

document.write("<p>现在的时间是：</p>");
document.write(Date());

分支、循环语句

1. `if-else`分支语句

if(条件表达式){
  // 当表达式成立时要执行的代码
}else{
  // 当表达式不成立时要执行的代码
}
// 
<html lang="en">
<head>
    <meta charSet="UTF-8">
    <title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
    let age = prompt("请输入你的年龄")
    if (age>=18) {
      console.log("欢迎光临");
    } else {
      console.log("你未成年哦");
    }
</script>
</body>
</html>

2. `if-eles if -else`语句

if (条件表达式 1) {
  // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
  // 条件表达式 2 为真时执行的代码
}
  ...
else if (条件表达式N) {
  // 条件表达式 N 为真时执行的代码
} else {
  // 所有条件表达式都为假时要执行的代码
}

3. `while`循环语句

while (条件表达式) {
    // 要执行的代码
}

// 示例代码
var i = 1
var sum1 = 0
while( i <= 5) {
    sum1 += i
    i++
}

4. `do while`语句

do {
    // 需要执行的代码
} while (条件表达式);

//实例代码
var i = 1
var sum1 = 0
do{
    document.write(i + " ");
}while (i > 5);

5. `for`循环

for(变量初始值; 判断条件; 更新变量值的表达式) {
    // 要执行的代码
}
// 实例代码
for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

// for in循环语句
for(变量 in object){
    //要执行的代码
}
// 实例代码
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {
    console.log(prop)
}

6. `switch case`语句

在 switch 语句中，case 子句只是指明了执行起点，但是没有指明执行的终点，如果在 case 子句中没有 break 语句，就会发生连续执行的情况，为了避免这种情况出现，可以在case语句后面添加break语句终止条件

switch (表达式){
  case value1:
    statements1  // 当表达式的结果等于 value1 时，则执行该代码
    break;
  case value2:
    statements2  // 当表达式的结果等于 value2 时，则执行该代码
    break;
    ......
  case valueN:
    statementsN  // 当表达式的结果等于 valueN 时，则执行该代码
    break;
  default :
    statements  // 如果没有与表达式相同的值，则执行该代码
}

7. `break`和`continue`语句

默认情况下循环会在表达式结果为假时自动退出循环，否则循环会一直持续下去。某些情况下，我们不用等待循环自动退出，可以主动退出循环，JavaScript 中提供了 break 和 continue 两个语句来实现退出循环和退出（跳过）当前循环。

`JS`函数

1.定义函数

JS 函数声明需要以 function 关键字开头，后面跟上空格以及函数名，函数体用花括号括起来。格式如下：

function 函数名(参数) {
    // 函数中的代码
}

// 示例代码  函数声明
function numAdd(num1,num2){
        return num1+num2
    }
var res = numAdd(2,6)
console.log(res)

// 函数表达式   类似于 python中的匿名函数
var numAdd1 = function(num1, num2) {
    return num1+num2
}

2. 调用函数

调用函数非常简单，只需要函数名后面加上一个括号即可

function sayHello(name){
    document.write("Hello " + name);
}
// 调用 sayHello() 函数
sayHello('python');

JS事件

事件	描述
`onclick`	点击鼠标时触发此事件
`ondblclick`	双击鼠标时触发此事件
`onmousedown`	按下鼠标时触发此事件
`onmouseup`	鼠标按下后又松开时触发此事件
`onmouseover`	当鼠标移动到某个元素上方时触发此事件
`onmousemove`	移动鼠标时触发此事件
`onmouseout`	当鼠标离开某个元素范围时触发此事件
`onkeypress`	当按下并松开键盘上的某个键时触发此事件
`onkeydown`	当按下键盘上的某个按键时触发此事件
`onkeyup`	当放开键盘上的某个按键时触发此事件
`onabort`	图片在下载过程中被用户中断时触发此事件
`onbeforeunload`	当前页面的内容将要被改变时触发此事件
`onerror`	出现错误时触发此事件
`onload`	页面内容加载完成时触发此事件
`onmove`	当移动浏览器的窗口时触发此事件
`onresize`	当改变浏览器的窗口大小时触发此事件
`onscroll`	当滚动浏览器的滚动条时触发此事件
`onstop`	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
`oncontextmenu`	当弹出右键上下文菜单时触发此事件
`onunload`	改变当前页面时触发此事件
`onblur`	当前元素失去焦点时触发此事件
`onchange`	当前元素失去焦点并且元素的内容发生改变时触发此事件
`onfocus`	当某个元素获得焦点时触发此事件
`onreset`	当点击表单中的重置按钮时触发此事件
`onsubmit`	当提交表单时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      /*body{*/
      /*  */
      /*}*/

    </style>
<!--  <script type="text/javascript" src="js代码.js"></script>-->

</head>
<body>
<input id="btn" type="button" value="添加元素" onclick="add_element()">
<p id="p1" onclick="move()">这是一个P标签</p>
<script>
  function add_element(){
    document.write('<div>'+'这是一个div标签'+'</div>')
  }
  function move(){
    var p = document.getElementById('p1')
    p.innerText = '这是修改后的P标签'
    console.log(p.innerText)
  }

</script>
</body>
</html>

/}/

</style>

这是一个P标签

~~~

温轻舟

关注

32
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
0
评论
智慧的网络爬虫之JavaScript基础

JavaScript，是一种轻量级的面向对象的编程语言，既能用在浏览器中控制页面交互，也能用在服务器端作为网站后台（借助Node.js），因此 JavaScript是一种全栈式的编程语言。
复制链接

扫一扫