第一部分：入门篇
第1章：JavaScript 基础
JavaScript 是什么？
JavaScript 是一种广泛使用的脚本语言，主要用于Web开发，为网页添加交互功能。它是一种解释型语言，可以在客户端（浏览器）或服务器端（如Node.js）运行。JavaScript 具有动态类型、原型继承等特性，支持面向对象、命令式、函数式等多种编程风格。
JavaScript 与其他编程语言的区别
- 动态类型：变量可以在运行时改变类型。
- 弱类型：变量类型由赋值决定，而不是在声明时固定。
- 原型继承：使用原型链实现继承，而不是传统的类继承。
- 事件驱动：通过事件响应用户的交互动作。
- 异步执行：支持非阻塞的异步编程模式，如回调函数、Promise、async/await。
开发环境搭建：编辑器与浏览器
- 选择编辑器：推荐使用 Visual Studio Code 或 Sublime Text 等现代编辑器。
- 安装浏览器：现代浏览器（如 Chrome、Firefox、Edge）内置了JavaScript引擎，可以直接运行JavaScript代码。
- 调试工具：使用浏览器的开发者工具（Developer Tools），如 Chrome DevTools，进行代码调试。
Hello World 示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script>
// 输出 "Hello World" 到浏览器控制台
console.log("Hello World");
// 输出 "Hello World" 到网页
document.write("Hello World");
</script>
</body>
</html>
JavaScript 在HTML中的使用方式
JavaScript 可以嵌入到HTML文档中，通过 <script> 标签来定义。有三种常见的使用方式：
- 内联式：直接在HTML标签中使用
onclick等事件属性。<button onclick="alert('Button clicked!')">Click me!</button> - 嵌入式：在HTML文档内部的
<head>部分或<body>部分使用<script>标签。<script> alert('Page loaded!'); </script> - 外部式：将JavaScript代码放在单独的
.js文件中，然后通过<script>标签引入。<script src="app.js"></script>
示例代码：外部式JavaScript文件
假设我们有一个名为 app.js 的外部JavaScript文件：
// app.js 文件内容
console.log("JavaScript file is loaded!");
function greet(name) {
return "Hello, " + name + "!";
}
document.write(greet("World"));
HTML 文件引用该文件的方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External JavaScript Example</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
以上就是第一章的详细介绍，通过这些内容，读者可以初步了解JavaScript是什么，它与其它语言有何不同，如何搭建基本的开发环境，以及如何编写和使用简单的JavaScript代码。
接下来我会为第一章增加几个常见的JavaScript示例，以帮助读者更好地理解JavaScript的基本用法及其在Web开发中的应用。
第一部分：入门篇
第1章：JavaScript 基础
示例代码：弹窗与提示框
-
弹出警告框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Alert Example</title> </head> <body> <script> alert("这是一个警告框！"); </script> </body> </html> -
确认框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Confirm Box Example</title> </head> <body> <script> if (confirm("您确定要继续吗？")) { alert("用户点击了确认！"); } else { alert("用户点击了取消！"); } </script> </body> </html> -
提示输入框：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Prompt Example</title> </head> <body> <script> let userName = prompt("请输入您的名字：", "您的名字"); alert("欢迎 " + userName); </script> </body> </html>
示例代码：动态修改网页内容
-
修改标题：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Initial Title</title> </head> <body> <script> document.title = "New Title"; </script> </body> </html> -
修改段落内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Change Paragraph Content</title> </head> <body> <p id="demo">初始内容</p> <script> document.getElementById("demo").innerHTML = "新的段落内容"; </script> </body> </html>
示例代码：按钮点击事件
-
按钮点击触发函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Button Click Example</title> </head> <body> <button onclick="greet()">点击我</button> <script> function greet() { alert("你好！"); } </script> </body> </html> -
按钮点击改变元素颜色：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Change Element Color</title> </head> <body> <p id="text">点击按钮改变文字颜色</p> <button onclick="changeColor()">点击我</button> <script> function changeColor() { document.getElementById("text").style.color = "red"; } </script> </body> </html>
示例代码：条件判断与循环
-
条件判断：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Conditional Statement Example</title> </head> <body> <script> let age = 20; if (age >= 18) { console.log("成年"); } else { console.log("未成年"); } </script> </body> </html> -
使用循环打印数字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Loop Example</title> </head> <body> <script> for (let i = 1; i <= 10; i++) { console.log(i); } </script> </body> </html>
通过这些示例，读者可以学习如何使用JavaScript进行简单的用户交互、修改网页内容以及实现基本的逻辑控制。这些基础技能是后续学习JavaScript更高级内容的重要基石。
我们继续增加一些JavaScript的示例，以帮助读者更好地理解和应用JavaScript的各种功能。以下是一些常见的应用场景和相应的代码示例：
更多示例代码
动态生成HTML元素
示例：动态创建一个新的段落并添加到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Element Creation</title>
</head>
<body>
<div id="content"></div>
<button onclick="addParagraph()">添加段落</button>
<script>
function addParagraph() {
// 创建一个新的段落元素
var newPara = document.createElement("p");
// 设置段落的内容
newPara.innerHTML = "这是新添加的段落。";
// 将新段落添加到页面上的某个位置
document.getElementById("content").appendChild(newPara);
}
</script>
</body>
</html>
处理表单数据
示例：获取表单输入并显示结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Data Handling</title>
</head>
<body>
<form id="myForm">
<label for="nameInput">姓名：</label>
<input type="text" id="nameInput" name="nameInput">
<br><br>
<label for="emailInput">邮箱：</label>
<input type="email" id="emailInput" name="emailInput">
<br><br>
<input type="submit" value="提交">
</form>
<div id="result"></div>
<script>
document.getElementById("myForm").onsubmit = function(event) {
event.preventDefault(); // 阻止默认提交行为
var name = document.getElementById("nameInput").value;
var email = document.getElementById("emailInput").value;
document.getElementById("result").innerText = "姓名：" + name + "，邮箱：" + email;
};
</script>
</body>
</html>
操作CSS样式
示例：根据按钮点击切换元素的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Element Style</title>
</head>
<body>
<p id="colorText">点击按钮改变文字颜色</p>
<button onclick="toggleColor()">点击我</button>
<script>
function toggleColor() {
var element = document.getElementById("colorText");
if (element.style.color === "red") {
element.style.color = "blue";
} else {
element.style.color = "red";
}
}
</script>
</body>
</html>
日期和时间
示例：显示当前日期和时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date and Time</title>
</head>
<body>
<p id="timeDisplay"></p>
<script>
function displayCurrentDateTime() {
var now = new Date();
var dateString = now.toLocaleString();
document.getElementById("timeDisplay").innerText = "当前时间：" + dateString;
}
displayCurrentDateTime(); // 页面加载时立即显示时间
</script>
</body>
</html>
数组操作
示例：数组的遍历与筛选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Operations</title>
</head>
<body>
<button onclick="filterArray()">筛选数组</button>
<script>
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function filterArray() {
var evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log("偶数:", evenNumbers);
}
</script>
</body>
</html>
AJAX请求
示例：使用Fetch API获取远程数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Request with Fetch API</title>
</head>
<body>
<p id="weatherInfo"></p>
<button onclick="getWeather()">获取天气</button>
<script>
function getWeather() {
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
document.getElementById("weatherInfo").innerText = "温度：" + data.main.temp + "K";
})
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
请注意，上述示例中的天气API请求需要替换 YOUR_API_KEY 为你从 OpenWeatherMap 获取的实际API密钥。
这些示例涵盖了JavaScript在Web开发中的多种应用场景，从简单的DOM操作到复杂的异步请求，可以帮助读者更好地掌握JavaScript的核心功能和技术要点。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
