26、JavaScript 知识要点与常见问题解答

最新推荐文章于 2025-11-18 14:09:13 发布

backprop5master

最新推荐文章于 2025-11-18 14:09:13 发布

阅读量61

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript去神秘化：从零开始的编程之旅文章标签： JavaScript 变量数据类型

本文链接：https://blog.youkuaiyun.com/backprop5master/article/details/149372937

JavaScript去神秘化：从零开始的编程之旅专栏收录该内容

27 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

JavaScript 知识要点与常见问题解答

1. JavaScript 基础概念

1.1 变量与数据类型

变量命名 ：变量名是计算机内存中为 JavaScript 预留空间的别名。例如，在代码中可以使用变量名来存储和操作数据。
数据类型 ：包括整数、小数（float 表示小数）、字符串等。如 let num = 10; 是整数类型，而 let price = 9.99; 则是小数类型。

1.2 运算符与表达式

运算符 ：在表达式中，如 1 + 1 ， + 是运算符， 1 是操作数。运算符包括算术运算符（如 + 、 - 、 * 、 / ）、逻辑运算符（如 && 、 || ）等。
表达式求值 ：例如 20 > 30 ? 'You win.' : 'You lose.' ，由于 20 > 30 为假，所以表达式的值为 You lose 。

1.3 语句与控制结构

条件语句 ： if...else 语句用于根据条件执行不同的代码块。 if 部分包含条件为真时执行的语句， else 部分则定义了条件为假时浏览器要评估的另一个条件表达式。
循环语句 ： do...while 循环无论条件是否为真都会至少执行一次语句； while 循环在条件为真时执行语句； for 循环常用于已知循环次数的情况； for in 循环用于遍历对象的属性。

2. 数组操作

2.1 数组创建与元素访问

创建数组 ：可以使用 new Array() 来创建数组，如 Products = new Array('Soda','Beer','Pizza') ，该数组包含 3 个元素。
元素访问 ：数组元素的索引从 0 开始，所以 Products[1] 表示数组中的第二个元素。

2.2 数组方法

方法	描述
`push()`	在数组末尾添加一个或多个元素
`pop()`	移除数组的最后一个元素
`shift()`	移除数组的第一个元素
`slice()`	创建一个新数组，包含从开始到结束（不包括结束）的元素

let arr = [1, 2, 3];
arr.push(4); // 数组变为 [1, 2, 3, 4]
let lastElement = arr.pop(); // lastElement 为 4，数组变为 [1, 2, 3]
let firstElement = arr.shift(); // firstElement 为 1，数组变为 [2, 3]
let newArr = arr.slice(0, 1); // newArr 为 [2]

3. 事件处理

3.1 常见事件

鼠标事件 ：当鼠标光标离开对象时， onmouseout 属性会触发相应的操作；当鼠标光标悬停在对象上时， onmouseover 属性会触发操作。
文本框事件 ：当用户在文本框中高亮显示文本时，会触发 onselect 事件；当用户离开文本框时，会触发 onblur 事件。

3.2 事件处理示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <input type="text" id="myInput" onselect="selectText()" onblur="leaveText()">
    <script>
        function selectText() {
            alert('You selected text!');
        }
        function leaveText() {
            alert('You left the text field!');
        }
    </script>
</body>

</html>

4. 窗口与框架操作

4.1 窗口操作

窗口聚焦 ：可以使用 focus() 方法将新窗口置于其他窗口之上。
窗口滚动 ：调用 scrollTo() 方法可以滚动窗口。

4.2 框架操作

框架加载页面 ：使用 src 属性指定要加载到框架中的网页。例如 <frame src="page.html"> 。
框架大小调整 ：如果有两个垂直框架，可通过调整 cols 值来使一个框架比另一个框架小。

graph TD;
    A[开始] --> B[创建窗口];
    B --> C[设置窗口属性];
    C --> D[加载网页到框架];
    D --> E[调整框架大小];
    E --> F[结束];

5. 正则表达式

5.1 特殊字符

^ ：用于告诉浏览器在正则表达式中从字符串的开头开始匹配。
\w ：用于搜索任何字母、数字或下划线。
g ：用于告诉浏览器搜索字符串中某个字符的所有出现位置。

5.2 正则表达式应用

let str = "Hello, World!";
let pattern = /^Hello/;
let result = pattern.test(str); // result 为 true

6. 表单与验证

6.1 表单提交

JavaScript 函数可以通过返回 true 到表单的 onsubmit 属性来指示浏览器提交表单。

6.2 菜单验证

可以使用 onsubmit 属性来验证从下拉菜单中选择的选项。

6.3 操作步骤

创建表单：

<form id="myForm" onsubmit="return validateForm()">
    <select id="mySelect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
    <input type="submit" value="Submit">
</form>

编写验证函数：

function validateForm() {
    let select = document.getElementById('mySelect');
    if (select.value === "") {
        alert('Please select an option.');
        return false;
    }
    return true;
}

7. 其他要点

7.1 外部 JavaScript 文件

使用外部 JavaScript 文件的主要目的是与多个网页共享 JavaScript 代码。可以通过在 <script> 标签的 src 属性中引用外部文件来使用。

7.2 类与样式

类定义在 <style> 标签内。
通过将类名分配给元素的 class 属性来应用类。

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
      .myClass {
            color: red;
        }
    </style>
</head>

<body>
    <p class="myClass">This text is red.</p>
</body>

</html>

7.3 定时器

setTimeout() 函数的第一个参数用于标识在超时结束时要调用的函数。

function myFunction() {
    alert('Timeout!');
}
setTimeout(myFunction, 3000); // 3 秒后调用 myFunction

8. 图像与横幅处理

8.1 图像数组

所有网页上的图像都会反映在 document.images 数组中。如果浏览器不支持图像对象， document.images 的值将为 null 。

8.2 横幅加载

为了在显示第一个横幅之前加载所有横幅，可以在网页加载时将横幅存储在数组中。示例代码如下：

let banners = [];
function preloadBanners() {
    banners[0] = new Image();
    banners[0].src = 'banner1.jpg';
    banners[1] = new Image();
    banners[1].src = 'banner2.jpg';
    // 可以继续添加更多横幅
}
window.onload = preloadBanners;

8.3 图像回滚

虽然没有 onmouserollback 或 onmouserestore 这样的标准事件，但可以通过 onmouseout 事件来实现图像回滚效果。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <img id="myImage" src="normal.jpg" onmouseover="changeImage()" onmouseout="restoreImage()">
    <script>
        function changeImage() {
            document.getElementById('myImage').src = 'hover.jpg';
        }
        function restoreImage() {
            document.getElementById('myImage').src = 'normal.jpg';
        }
    </script>
</body>

</html>

9. 函数相关知识

9.1 函数定义与调用

函数可以在 HTML 代码中被调用，并且调用函数的语句可以忽略函数返回的值。例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <button onclick="myFunction()">Click me</button>
    <script>
        function myFunction() {
            return 10;
        }
    </script>
</body>

</html>

9.2 函数参数

传递给函数的值必须与函数定义中参数的数据类型相对应，并且传递值的顺序也必须与参数的顺序一致。例如：

function addNumbers(a, b) {
    return a + b;
}
let result = addNumbers(5, 3); // 正确调用
// let wrongResult = addNumbers('5', 3); // 错误调用，数据类型不匹配

9.3 局部变量与作用域

局部变量只能被定义它的函数访问。当一个变量无法被语句访问时，它就超出了作用域。示例代码如下：

function myFunction() {
    let localVar = 10;
    console.log(localVar); // 可以访问
}
// console.log(localVar); // 无法访问，超出作用域

10. 常见问题解答

10.1 真假判断总结

问题描述	答案
所有网页上的图像是否都反映在 `document.images` 数组中	是
所有窗口是否都必须有标准浏览器工具栏	否
数组长度是否等于数组最后一个元素的索引	否
是否可以使用 JavaScript 删除 cookie	是
正则表达式是否可用于重新格式化文本	是

10.2 操作问题解答

如何使新窗口可调整大小 ：可以通过将 resizable 设置为 1 来实现。示例代码如下：

window.open('page.html', 'myWindow', 'resizable=1');

如何将新窗口置于其他窗口之上 ：调用 focus() 方法。示例代码如下：

let newWindow = window.open('page.html', 'myWindow');
newWindow.focus();

graph LR;
    A[开始] --> B{问题类型};
    B -->|真假判断| C[查看真假判断总结表];
    B -->|操作问题| D[查找对应操作步骤];
    C --> E[得出答案];
    D --> E;
    E --> F[结束];

11. 综合应用示例

11.1 动态菜单示例

可以通过创建数组并使用 new Option 来动态改变菜单选项。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <select id="myMenu"></select>
    <script>
        let options = ['Option 1', 'Option 2', 'Option 3'];
        let menu = document.getElementById('myMenu');
        for (let i = 0; i < options.length; i++) {
            let option = new Option(options[i], options[i]);
            menu.add(option);
        }
    </script>
</body>

</html>

11.2 表单验证与提交示例

结合前面的表单验证和提交知识，实现一个完整的表单示例。示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form id="myForm" onsubmit="return validateForm()">
        <select id="mySelect">
            <option value="">Select an option</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
        </select>
        <input type="submit" value="Submit">
    </form>
    <script>
        function validateForm() {
            let select = document.getElementById('mySelect');
            if (select.value === "") {
                alert('Please select an option.');
                return false;
            }
            return true;
        }
    </script>
</body>

</html>

通过以上内容，我们对 JavaScript 的多个方面进行了详细的介绍，包括基础概念、数组操作、事件处理、窗口与框架操作、正则表达式、表单验证等，同时还解答了一些常见问题并给出了综合应用示例，希望能帮助你更好地掌握 JavaScript 编程。