JavaScript 是一种用于网页交互的脚本语言,广泛应用于前端开发。以下是一个 JavaScript 编程的入门教程,帮助你快速掌握基础知识。
JavaScript 是一种轻量级的解释型编程语言,主要用于为网页添加动态功能,如表单验证、动画、交互等。它可以在浏览器中直接运行,也可以用于服务器端开发(如 Node.js)。
直接在 HTML 文件中使用 标签:
<script>
alert("Hello, JavaScript!");
script>
将 JavaScript 代码保存到单独的文件中(如 script.js
),然后在 HTML 中通过 标签引入:
<script src="script.js">script>
script.js
文件内容:
alert("Hello, JavaScript!");
JavaScript 是弱类型语言,变量可以用 let
、const
或 var
声明:
let name = "Alice"; // 字符串
const age = 25; // 数字(常量)
var isStudent = true; // 布尔值
使用 console.log()
在控制台输出内容:
console.log("Hello, JavaScript!");
使用 prompt()
获取用户输入:
let name = prompt("请输入你的名字:");
alert("你好, " + name);
使用 if
、else if
和 else
进行条件判断:
let age = 18;
if (age >= 18) {
console.log("你已成年!");
} else {
console.log("你还未成年!");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
使用 function
定义函数:
function greet(name) {
console.log("Hello, " + name);
}
greet("Alice");
数组用于存储多个值:
let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出 "apple"
对象用于存储键值对:
let person = {
name: "Alice",
age: 25,
isStudent: true
};
console.log(person.name); // 输出 "Alice"
DOM(文档对象模型)是 JavaScript 操作 HTML 文档的接口。
使用 document.getElementById()
或 document.querySelector()
获取元素:
let header = document.getElementById("header");
let paragraph = document.querySelector("p");
使用 innerHTML
或 textContent
修改元素内容:
header.innerHTML = "新的标题";
paragraph.textContent = "新的段落内容";
使用 addEventListener()
为元素添加事件:
let button = document.querySelector("button");
button.addEventListener("click", function() {
alert("按钮被点击了!");
});
JavaScript 支持异步操作,如 setTimeout
和 Promise
。
延迟执行代码:
setTimeout(function() {
console.log("2 秒后执行");
}, 2000);
处理异步操作:
let promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("操作成功!");
}, 2000);
});
promise.then(function(result) {
console.log(result);
});
通过小项目巩固所学知识:
希望这个入门教程能帮助你快速掌握 JavaScript 编程!如果有任何问题,欢迎随时提问。