python爬虫之 JavaScript 简单基础

在这里插入图片描述

文章目录

在网页使用JavaScript 代码的方式
常用的JavaScript 事件
常用的JavaScript 对象

在网页使用JavaScript 代码的方式

在网页中使用 JavaScript 代码的方式主要有三种：

内联方式（Inline）：

在 HTML 文件中直接嵌入 JavaScript 代码，通过使用 <script> 标签。这段代码可以放在文档的 <head> 或 <body> 部分。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Inline JavaScript Example</title>
    <script>
        // JavaScript代码
        function myFunction() {
        
        
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="myFunction()">Click me</button>
</body>
</html>

内部脚本（Internal Script）：

将 JavaScript 代码放置在 HTML 文件的 <script> 标签内，但是通过使用外部文件的方式引入。这有助于将 JavaScript 代码与 HTML 分离，提高代码的可维护性。例如：
```
<!DOCTYPE html>
<html>
<head>
    <title>Internal Script Example</title>
    <script src="myscript.js"></script>
</head>
<body>
    <button onclick="myFunction()">Click me</button>
</body>
</html>
```
其中，myscript.js 是包含 JavaScript 代码的外部文件。

外部脚本（External Script）：

将 JavaScript 代码放在一个独立的外部文件中，通过 <script> 标签引用该文件。这是最常见的方式，可以在多个页面之间共享相同的 JavaScript 代码。例如：

HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title>External Script Example</title>
    <script src="myscript.js"></script>
</head>
<body>
    <button onclick="myFunction()">Click me</button>
</body>
</html>

JavaScript 文件（myscript.js）：

// JavaScript代码
function myFunction() {
      
      
    alert("Hello, World!");
}

这些方式可以根据项目的需要选择使用。内联方式适用于简单的小段代码，而外部脚本更适用于大型项目，使得代码更易维护和管理。

常用的JavaScript 事件

JavaScript 事件是指用户与网页互动时触发的行为，例如点击按钮、提交表单、鼠标悬停等。以下是一些常用的 JavaScript 事件：

点击事件（click）：

触发条件：用户点击页面上的元素，如按钮、链接等。

示例：

document.getElementById("myButton").addEventListener("click", function() {
        
        
    alert("Button clicked!");
});

提交事件（submit）：

触发条件：用户提交表单时触发。

示例：

document.getElementById("myForm").addEventListener("submit", function(event) {
        
        
    event.preventDefault(); // 阻止表单的默认提交行为
    alert("Form submitted!");
});

鼠标悬停事件（mouseover/mouseenter）：

触发条件：鼠标移动到元素上方时触发。

示例：

document.getElementById("myElement").addEventListener("mouseover", function() {
        
        
    alert("Mouse over the element!");
});

鼠标离开事件（mouseout/mouseleave）：

触发条件：鼠标离开元素时触发。

示例：

document.getElementById("myElement").addEventListener("mouseout", function() {
        
        
    alert("Mouse out of the element!");
});

键盘按下事件（keydown）：

触发条件：用户按下键盘上的任意键时触发。

示例：

document.addEventListener("keydown", function(event) {
        
        
    console.log("Key pressed: " + event.key);
});

窗口加载事件（load）：

触发条件：整个页面及其所有资源加载完成时触发。

示例：

window.addEventListener("load", function() {
        
        
    alert("Page and all resources are loaded!");
});

这只是一小部分常见的 JavaScript 事件。JavaScript 提供了许多其他事件，如焦点事件、变化事件、滚动事件等，开发者可以根据需要选择适合的事件来响应用户行为。

常用的JavaScript 对象

JavaScript 中有许多内置对象，每个对象都具有特定的属性和方法，用于执行各种任务。以下是一些常用的 JavaScript 对象：

Object 对象：

Object 是 JavaScript 中所有对象的基类。

示例：

var person = new Object();
person.name = "John";
person.age = 30;

Array 对象：
- Array 对象用于创建和操作数组。
- 示例：
```
var colors = ["red", "green", "blue"];
```
String 对象：
- String 对象用于创建和操作字符串。
- 示例：
```
var message = "Hello, World!";
```
Number 对象：
- Number 对象用于处理数字值。
- 示例：
```
var num = new Number(42);
```
Boolean 对象：
- Boolean 对象用于处理布尔值。
- 示例：
```
var isTrue = new Boolean(true);
```
Function 对象：
- Function 对象用于创建函数。
- 示例：
```
var add = new Function("a", "b", "return a + b");
```
Date 对象：
- Date 对象用于处理日期和时间。
- 示例：
```
var currentDate = new Date();
```
RegExp 对象：
- RegExp 对象用于处理正则表达式。
- 示例：
```
var pattern = new RegExp("\\w+");
```
Math 对象：
- Math 对象提供了执行数学计算的方法和属性。
- 示例：
```
var result = Math.sqrt(16);
```

JSON 对象：

JSON 对象用于处理 JSON 格式的数据。

示例：

var jsonData = '{"name": "John", "age": 30}';
var person = JSON.parse(jsonData);

这只是 JavaScript 中一些常用对象的简介，还有其他对象和自定义对象等。了解这些对象的特性和用法，可以更好地利用 JavaScript 进行开发。