JavaScript入门下-函数定义&DOM+BOM的操作示例

方才编程_公众号同名

发布于 2024-10-25 13:08:18

11200

代码可运行

运行总次数：0

代码可运行

本文转载自：https://fangcaicoding.cn/article/53
大家好！我是方才，目前是8人后端研发团队的负责人，拥有6年后端经验&3年团队管理经验，截止目前面试过近200位候选人，主导过单表上10亿、累计上100亿数据量级的业务系统的架构和核心编码。 “学编程，一定要系统化” 是我一直坚持的学习之道。目前正在系统化分享从零到一的全栈编程入门以及项目实战教程。无论你是编程新手，还是有经验的开发者，我都愿意与你分享我的学习方法、项目实战经验，甚至提供学习路线制定、简历优化、面试技巧等深度交流服务。 我创建了一个编程学习交流群（扫码关注后即可加入），秉持“一群人可以走得更远”的理念，期待与你一起 From Zero To Hero！茫茫人海，遇见即是缘分！希望这篇文章对你有所帮助！

JavaScript入门-下

函数

函数的定义与调用

函数是一段可复用的代码，可以根据需要调用多次。

function greet(name) {
    return "Hello, " + name;
}

let message = greet("Alice");
console.log(message); // 输出 "Hello, Alice"

函数的参数与返回值

函数可以接收参数并返回一个值。

function add(a, b) {
    return a + b;
}

let sum = add(5, 10);
console.log(sum); // 输出 15

函数表达式

函数可以作为表达式赋值给变量，这种函数称为函数表达式。

let multiply = function(a, b) {
    return a * b;
};

console.log(multiply(3, 4)); // 输出 12

箭头函数（ES6）

箭头函数是一种更简洁的函数定义方式，常用于简短的函数。

let divide = (a, b) => a / b;

console.log(divide(10, 2)); // 输出 5

如果箭头函数有多个语句，可以用 {} 包裹，并需要显式 return。

let square = (x) => {
    let result = x * x;
    return result;
};

console.log(square(5)); // 输出 25

匿名函数与回调函数

匿名函数没有函数名，常用于事件处理或回调函数。

setTimeout(function() {
    console.log("1秒后执行此函数");
}, 1000); // 1秒后执行

递归函数

递归函数是调用自身的函数，常用于解决分治问题或递归结构。

function factorial(n) {
    if (n === 1) {
        return 1;
    }
    return n * factorial(n - 1); // 递归调用自身
}

console.log(factorial(5)); // 输出 120

ES6 新特性(了解即可)

ES6（ECMAScript 2015）为 JavaScript 带来了很多重要的新特性，极大地提高了代码的简洁性和可维护性。

块级作用域（`let` 和 `const`）

let 和 const 引入了块级作用域，避免了 var 的变量提升和作用域问题。
**let**：声明变量，可以重新赋值。
**const**：声明常量，不能重新赋值。

let age = 30;
const name = "Alice";

// name = "Bob"; // 错误：无法重新赋值常量

模板字符串（Template Literals）

模板字符串使用反引号（`）定义，允许在字符串中嵌入表达式，并支持多行字符串。

let name = "Alice";
let greeting = `Hello, ${name}!`; // 使用 ${} 进行插值
console.log(greeting); // 输出 "Hello, Alice!"

let multiLine = `这是一行
这是另一行`;
console.log(multiLine);

解构赋值（Destructuring）

解构赋值可以从数组或对象中提取值，并将其赋给变量。

数组解构

let [first, second] = [1, 2];
console.log(first); // 输出 1
console.log(second); // 输出 2

对象解构

let person = { name: "Alice", age: 25 };
let { name, age } = person; // 解构对象
console.log(name); // 输出 "Alice"
console.log(age); // 输出 25

扩展运算符（Spread Operator）

扩展运算符 ... 可以将数组或对象展开为单独的元素。

数组的扩展运算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // 展开 arr1 并追加新元素
console.log(arr2); // 输出 [1, 2, 3, 4, 5]

对象的扩展运算符

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // 展开 obj1 并添加新属性
console.log(obj2); // 输出 { a: 1, b: 2, c: 3 }

箭头函数

箭头函数是 ES6 中引入的简洁语法，特别适合简短的函数表达式。它没有自己的 this，会捕获其外部函数的 this 值。

let sum = (a, b) => a + b;
console.log(sum(3, 5)); // 输出 8

默认参数

函数参数可以设置默认值，当调用时不提供对应的参数时，默认值会生效。

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(); // 输出 "Hello, Guest!"
greet("Alice"); // 输出 "Hello, Alice!"

`for...of` 循环

for...of 循环可以遍历数组或其他可迭代对象。

let colors = ["red", "green", "blue"];

for (let color of colors) {
    console.log(color); // 输出 "red", "green", "blue"
}

`Promise` 对象

Promise 用于处理异步操作，避免回调地狱。

let promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve("操作成功");
    } else {
        reject("操作失败");
    }
});

promise.then((message) => {
    console.log(message); // 操作成功
}).catch((error) => {
    console.log(error);
});

类（Class）

ES6 引入了 class 语法，用于更清晰地定义对象的构造函数和方法。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    }
}

let person1 = new Person("Alice", 25);
person1.greet(); // 输出 "Hello, my name is Alice and I'm 25 years old."

好的，我们继续详细讲解 事件处理 和 JavaScript 与 HTML 整合，并提供相应的代码示例：

事件处理(了解即可)

这部分的了解，可以直接使用菜鸟教程的在线编辑器，允许示例代码，感受相关的功能即可。在线编辑器链接：https://www.runoob.com/try/try.php?filename=tryhtml_intro

事件处理是前端开发中非常重要的一部分。它允许我们捕获用户的操作（如点击、输入、提交等），并做出响应。

常见的事件类型

点击事件（click）：当用户点击元素时触发。
键盘事件（keydown、keyup）：当用户按下或释放键盘按键时触发。
鼠标事件（mouseover、mouseout）：当鼠标悬停或离开元素时触发。
表单事件（submit、change、input）：当表单提交、元素内容改变或输入时触发。

事件处理的基本用法

我们可以通过 HTML 的属性（如 onclick）或 JavaScript 的 addEventListener 方法来绑定事件处理函数。

1. 通过 HTML 属性绑定事件

<button onclick="alert('按钮被点击')">点击我</button>

2. 通过 JavaScript 绑定事件

更好的方式是通过 JavaScript 使用 addEventListener 来添加事件监听器。

<button id="myButton">点击我</button>

<script>
    let button = document.getElementById("myButton");

    // 添加点击事件监听器
    button.addEventListener("click", function() {
        alert("按钮被点击");
    });
</script>

事件对象（`event`）

当事件被触发时，浏览器会创建一个事件对象 event，它包含了事件相关的信息（如鼠标位置、按键状态等）。

示例：获取点击位置

<button id="positionButton">点击获取鼠标位置</button>

<script>
    let button = document.getElementById("positionButton");

    button.addEventListener("click", function(event) {
        let x = event.clientX;
        let y = event.clientY;
        alert(`你点击的位置: X = ${x}, Y = ${y}`);
    });
</script>

事件冒泡与捕获

事件有两个传播阶段：冒泡（从内到外）和捕获（从外到内）。默认情况下，事件处理是在冒泡阶段执行的，但你也可以选择在捕获阶段处理。

停止事件传播

可以使用 event.stopPropagation() 来阻止事件进一步传播。

<div id="outerDiv" style="width: 200px; height: 200px; background-color: lightblue;">
    外部DIV
    <div id="innerDiv" style="width: 100px; height: 100px; background-color: lightgreen;">
        内部DIV
    </div>
</div>

<script>
    let outerDiv = document.getElementById("outerDiv");
    let innerDiv = document.getElementById("innerDiv");

    outerDiv.addEventListener("click", function() {
        alert("外部DIV被点击");
    });

    innerDiv.addEventListener("click", function(event) {
        alert("内部DIV被点击");
        event.stopPropagation(); // 阻止事件冒泡
    });
</script>

点击内部 DIV 时，只有内部的事件会触发，外部的不会触发。

事件委托

事件委托是一种优化事件处理的方法，它通过将事件监听器绑定到父元素上，利用事件冒泡来捕获子元素的事件。这样可以减少对多个子元素的事件绑定，尤其适用于动态创建的元素。

示例：事件委托

<ul id="list">
    <li>项 1</li>
    <li>项 2</li>
    <li>项 3</li>
</ul>

<script>
    let list = document.getElementById("list");

    list.addEventListener("click", function(event) {
        if (event.target.tagName === "LI") {
            alert("你点击了 " + event.target.innerText);
        }
    });
</script>

无论你点击哪个 li，都能捕获到点击事件，且只需要给父元素 ul 添加一次事件监听器。

JavaScript 与 HTML 整合(了解即可)

JavaScript 可以与 HTML 和 CSS 紧密结合，为网页提供交互功能。JavaScript 可以操作 DOM（文档对象模型）来动态修改页面内容和样式。

操作 DOM（Document Object Model）

获取 DOM 元素

你可以通过各种方法来获取 DOM 元素：

**getElementById**：通过元素的 id 获取。
**getElementsByClassName**：通过类名获取。
**querySelector**：通过 CSS 选择器获取（第一个匹配的元素）。
**querySelectorAll**：通过 CSS 选择器获取所有匹配的元素。

<p id="myParagraph">这是一个段落。</p>
<p class="text">这是另一个段落。</p>

<script>
    // 通过 ID 获取元素
    let paragraph = document.getElementById("myParagraph");
    console.log(paragraph.innerText); // 输出 "这是一个段落。"

    // 通过类名获取元素
    let textElements = document.getElementsByClassName("text");
    console.log(textElements[0].innerText); // 输出 "这是另一个段落。"

    // 使用 querySelector 获取元素
    let firstParagraph = document.querySelector("p");
    console.log(firstParagraph.innerText); // 输出 "这是一个段落。"
</script>

修改 DOM 内容

你可以使用 innerText 或 innerHTML 来修改元素的文本或 HTML 内容。

<p id="textElement">初始内容</p>

<script>
    let textElement = document.getElementById("textElement");
    textElement.innerText = "修改后的文本";
    textElement.innerHTML = "<strong>加粗的文本</strong>";
</script>

修改样式

可以通过 style 属性来修改元素的 CSS 样式，或通过添加/删除 CSS 类来改变样式。

<p id="styleElement" style="color: blue;">这是一个蓝色文本。</p>

<script>
    let styleElement = document.getElementById("styleElement");

    // 修改样式
    styleElement.style.color = "red"; // 变为红色

    // 添加 CSS 类
    styleElement.classList.add("highlight");
</script>

<style>
    .highlight {
        background-color: yellow;
    }
</style>

创建和删除 DOM 元素

你可以动态创建和删除 HTML 元素。

创建新元素

<div id="container"></div>

<script>
    let container = document.getElementById("container");

    // 创建一个新的 p 元素
    let newParagraph = document.createElement("p");
    newParagraph.innerText = "这是新添加的段落。";

    // 将新元素添加到 container 中
    container.appendChild(newParagraph);
</script>

删除元素

let container = document.getElementById("container");

// 移除子元素
container.removeChild(newParagraph);

事件驱动的页面交互示例

以下是一个简单的例子，演示如何结合 JavaScript 与 HTML 进行交互，通过点击按钮来动态修改网页内容和样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面交互示例</title>
</head>
<body>
    <h1>点击按钮修改页面</h1>
    <p id="content">这是一段可修改的内容。</p>
    <button id="changeButton">修改内容</button>

    <script>
        let button = document.getElementById("changeButton");
        let content = document.getElementById("content");

        button.addEventListener("click", function() {
            content.innerText = "内容已修改！";
            content.style.color = "green";
        });
    </script>
</body>
</html>

当用户点击按钮时，文本内容会被修改，颜色也会变为绿色。

操作 BOM (了解即可)

这部分的了解，可以直接使用菜鸟教程的在线编辑器，允许示例代码，感受相关的功能即可。在线编辑器链接：https://www.runoob.com/try/try.php?filename=tryhtml_intro

BOM（Browser Object Model）是浏览器的对象模型，用于与浏览器窗口进行交互操作。JavaScript 的 BOM 允许开发者与浏览器窗口及其功能进行交互，包括控制窗口、历史记录、URL 和显示屏信息等。通过掌握 window、navigator、location、history 和 screen 对象，可以更好地理解和利用浏览器的特性，从而实现更加灵活的前端开发。

window：代表浏览器窗口，是 BOM 的顶级对象。
navigator：提供浏览器的信息，如用户代理、是否在线等。
location：提供当前页面的 URL 信息，允许操作页面的地址。
history：表示浏览器的历史记录，允许页面在历史记录中进行前进或后退操作。
screen：表示用户的显示屏信息，如分辨率等。

以下是 JavaScript 对 BOM 的详细操作介绍：

`window` 对象

window 是 BOM 的核心对象，表示整个浏览器窗口。JavaScript 中所有全局变量、函数和对象都是 window 对象的属性或方法。

弹窗方法

alert(message)：弹出一个警告框，显示消息。
prompt(message, default)：弹出一个输入框，用户输入内容后返回字符串。
confirm(message)：弹出确认框，返回 true 或 false。

示例：

<script>
// 弹出警告框
window.alert("这是一个警告弹窗");

// 获取用户输入
let userInput = window.prompt("请输入你的名字：", "默认名字");
console.log("用户输入：" + userInput);

// 确认框，返回布尔值
let isConfirmed = window.confirm("你确定要执行这个操作吗？");
if (isConfirmed) {
    console.log("用户选择了确定");
} else {
    console.log("用户选择了取消");
}
</script>

计时器方法

setTimeout(function, milliseconds)：在指定的时间（毫秒）后执行一次指定的代码。
setInterval(function, milliseconds)：每隔指定的时间（毫秒）重复执行指定的代码。
clearTimeout(timeoutID)：取消通过 setTimeout 设置的计时器。
clearInterval(intervalID)：取消通过 setInterval 设置的重复执行。

示例：

<script>
// 3秒后执行
let timeoutID = window.setTimeout(() => {
    console.log("3秒后执行的代码");
}, 3000);

// 每2秒执行一次
let intervalID = window.setInterval(() => {
    console.log("每隔2秒执行一次的代码");
}, 2000);

// 5秒后停止 interval
window.setTimeout(() => {
    window.clearInterval(intervalID);
    console.log("停止每2秒执行的操作");
}, 5000);
</script>

浏览器尺寸与滚动

window.innerWidth：窗口的内部宽度（包括滚动条）。
window.innerHeight：窗口的内部高度（包括滚动条）。
window.scrollX：页面在水平方向上的滚动距离。
window.scrollY：页面在垂直方向上的滚动距离。
window.scrollTo(x, y)：将页面滚动到指定位置。

示例：

<script>
console.log("浏览器宽度：" + window.innerWidth);
console.log("浏览器高度：" + window.innerHeight);

// 获取页面的滚动位置
console.log("页面水平滚动：" + window.scrollX);
console.log("页面垂直滚动：" + window.scrollY);

// 将页面滚动到顶部
window.scrollTo(0, 0);
</script>

`navigator` 对象

navigator 对象提供关于用户浏览器的信息，如浏览器类型、平台和网络状态。

常用属性

navigator.userAgent：返回用户代理字符串，包含浏览器和操作系统的详细信息。
navigator.language：返回浏览器的语言。
navigator.onLine：返回布尔值，表示用户是否处于联网状态。

示例：

<script>
console.log("浏览器用户代理：" + navigator.userAgent);
console.log("浏览器语言：" + navigator.language);

// 检查用户是否在线
if (navigator.onLine) {
    console.log("用户在线");
} else {
    console.log("用户离线");
}
</script>

检查平台和浏览器类型

可以通过解析 navigator.userAgent 来判断用户所使用的浏览器或平台：

let userAgent = navigator.userAgent;

if (userAgent.indexOf("Chrome") > -1) {
    console.log("用户使用的是 Chrome 浏览器");
} else if (userAgent.indexOf("Firefox") > -1) {
    console.log("用户使用的是 Firefox 浏览器");
} else {
    console.log("用户使用的是其他浏览器");
}

`location` 对象

location 对象包含有关当前页面 URL 的信息，并且允许跳转到新页面。

常用属性

location.href：返回当前页面的完整 URL，可以设置它来跳转页面。
location.protocol：返回页面使用的协议（如 http: 或 https:）。
location.hostname：返回 URL 的域名。
location.pathname：返回 URL 的路径部分。
location.search：返回 URL 的查询字符串。
location.hash：返回 URL 的哈希部分（# 后面的部分）。

示例：

// 获取当前页面的 URL 信息
console.log("当前 URL：" + location.href);
console.log("协议：" + location.protocol);
console.log("域名：" + location.hostname);
console.log("路径：" + location.pathname);
console.log("查询字符串：" + location.search);
console.log("哈希：" + location.hash);

// 跳转到新页面
// location.href = "https://www.example.com";

页面重定向和刷新

location.assign(url)：跳转到指定页面。
location.reload()：重新加载当前页面。

示例：

// 重定向到一个新页面
// location.assign("https://www.example.com");

// 刷新当前页面
location.reload();

`history` 对象

history 对象允许开发者操作浏览器的历史记录。

常用方法

history.back()：跳转到历史记录中的上一页（相当于浏览器的“后退”按钮）。
history.forward()：跳转到历史记录中的下一页（相当于浏览器的“前进”按钮）。
history.go(n)：根据参数跳转到历史记录中的某个页面，n 为正数时向前跳转，为负数时向后跳转。

示例：

// 后退到上一页
history.back();

// 前进到下一页
history.forward();

// 跳转到历史记录中的第 2 页
history.go(2);

`screen` 对象

screen 对象提供用户显示屏的信息。

常用属性

screen.width：屏幕的宽度。
screen.height：屏幕的高度。
screen.availWidth：屏幕的可用宽度（除去操作系统任务栏等）。
screen.availHeight：屏幕的可用高度。

示例：

console.log("屏幕宽度：" + screen.width);
console.log("屏幕高度：" + screen.height);
console.log("可用屏幕宽度：" + screen.availWidth);
console.log("可用屏幕高度：" + screen.availHeight);

近期更新计划

近期更新计划（有需要的小伙伴，记得点赞关注哟！）

零基础前端入门系列，预计10月底更新完成；
博客系统功能完善，实现注册登录、评论系统等功能，预计11月开源；

“学编程，一定要系统化”——若你也是系统学习的践行者，记得点赞关注，期待与你一起 From Zero To Hero！

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2024-10-23，如有侵权请联系 cloudcommunity@tencent.com 删除

事件

本文分享自方才编程微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

JavaScript入门下-函数定义&DOM+BOM的操作示例

JavaScript入门下-函数定义&DOM+BOM的操作示例

JavaScript入门-下

函数

函数的定义与调用

函数的参数与返回值

函数表达式

箭头函数（ES6）

匿名函数与回调函数

递归函数

ES6 新特性(了解即可)

块级作用域（let 和 const）

模板字符串（Template Literals）

解构赋值（Destructuring）

数组解构

对象解构

扩展运算符（Spread Operator）

数组的扩展运算符

对象的扩展运算符

箭头函数

默认参数

for...of 循环

Promise 对象

类（Class）

事件处理(了解即可)

常见的事件类型

事件处理的基本用法

1. 通过 HTML 属性绑定事件

2. 通过 JavaScript 绑定事件

事件对象（event）

示例：获取点击位置

事件冒泡与捕获

停止事件传播

事件委托

示例：事件委托

JavaScript 与 HTML 整合(了解即可)

操作 DOM（Document Object Model）

获取 DOM 元素

修改 DOM 内容

修改样式

创建和删除 DOM 元素

创建新元素

删除元素

事件驱动的页面交互示例

操作 BOM (了解即可)

window 对象

弹窗方法

计时器方法

浏览器尺寸与滚动

navigator 对象

常用属性

检查平台和浏览器类型

location 对象

常用属性

页面重定向和刷新

history 对象

常用方法

screen 对象

常用属性

近期更新计划

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

块级作用域（`let` 和 `const`）

`for...of` 循环

`Promise` 对象

事件对象（`event`）

`window` 对象

`navigator` 对象

`location` 对象

`history` 对象

`screen` 对象