《智慧的网络爬虫》— 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 中的关键字、保留字，变量名不能以数字开头。

关键字.png

变量的定义

在 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>

《智慧的网络爬虫》— JavaScript基础

引入`JavaScript`

js基础语法

1. 注释

2. 变量

3. 数据类型

4. 运算符

`js`输出语句

1. `alert()`函数

2. `confirm()`函数

3. `console.log()`

4. `document.write()`

分支、循环语句

1. `if-else`分支语句

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

3. `while`循环语句

4. `do while`语句

5. `for`循环

6. `switch case`语句

7. `break`和`continue`语句

`JS`函数

1.定义函数

2. 调用函数

JS事件

热门文章

最新文章

相关课程

相关电子书

相关实验场景

《智慧的网络爬虫》— JavaScript基础

引入JavaScript

js基础语法

1. 注释

2. 变量

3. 数据类型

4. 运算符

js输出语句

1. alert()函数

2. confirm()函数

3. console.log()

4. document.write()

分支、循环语句

1. if-else分支语句

2. if-eles if -else语句

3. while循环语句

4. do while语句

5. for循环

6. switch case语句

7. break和continue语句

JS函数

1.定义函数

2. 调用函数

JS事件

热门文章

最新文章

相关课程

相关电子书

相关实验场景

引入`JavaScript`

`js`输出语句

1. `alert()`函数

2. `confirm()`函数

3. `console.log()`

4. `document.write()`

1. `if-else`分支语句

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

3. `while`循环语句

4. `do while`语句

5. `for`循环

6. `switch case`语句

7. `break`和`continue`语句

`JS`函数