JavaScript（简称“JS”）是一种广泛使用的编程语言，用于为网站添加交互性和动态功能。在本文中，我们将介绍 JavaScript 的基本概念、规则和示例，帮助初学者入门。
一、JavaScript 简介
JavaScript 是一种脚本语言，可以直接嵌入到 HTML 文档中，浏览器会在加载页面时自动执行 JavaScript 代码。与 HTML 和 CSS 不同，JavaScript 关注的是网页的行为和功能，如表单验证、动态内容更新和动画效果等。
二、在 HTML 中使用 JavaScript
要在 HTML 中使用 JavaScript，需要将代码包含在<script>标签中。有两种方法：
内联JavaScript：
将 JavaScript 代码直接嵌入到HTML文档中。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 示例</title>
</head>
<body>
<button onclick="alert('Hello, World!')">点击我</button>
<script>
function showAlert() {
alert('Hello, World!');
}
</script>
</body>
</html>
外部 JavaScript
将 JavaScrip t代码存储在单独的.js文件中，并在 HTML 文档中引用。
<!DOCTYPE html>
<html>
<head>
<title>玩机大学 JavaScript 示例</title>
</head>
<body>
<button onclick="showAlert()">点击我</button>
<script src="scripts.js"></script>
</body>
</html>
三、JavaScript 基本语法
变量
变量用于存储数据。在 JavaScript 中，可以使用var、let或const 关键字声明变量。
var name = "张三"; let age = 25; const pi = 3.14159;
数据类型
JavaScript 有以下基本数据类型：字符串（String）、数字（Number）、布尔值（Boolean）、对象（Object）和数组（Array）。
var str = "Hello, World!"; // 字符串
var num = 42; // 数字
var bool = true; // 布尔值
var obj = {name: "张三", age: 25}; // 对象
var arr = [1, 2, 3, 4, 5]; // 数组
运算符
JavaScript 支持各种算术、比较和逻辑运算符。
var sum = 10 + 20; // 加法 var difference = 10 - 20; // 减法 var product = 10 * 20; // 乘法 var quotient = 10 / 20; // 除法 var isEqual = 10 == 20; // 相等比较 var isGreater = 10 > 20; // 大于比较 var result = (10 > 20) && (30 < 40); // 逻辑与
条件语句
if、else和else if语句用于根据条件执行不同的代码块。
var age = 18;
if (age >= 18) {
console.log("你已成年");
} else if (age < 18 && age >= 13) {
console.log("你是青少年");
} else {
console.log("你是儿童");
}
循环
for、while和do...while循环用于重复执行代码块。
// for循环
for (var i = 0; i < 5; i++) {
console.log(i);
}
// while循环
var j = 0;
while (j < 5) {
console.log(j);
j++;
}
// do...while循环
var k = 0;
do {
console.log(k);
k++;
} while (k < 5);
函数
函数是一组可重复使用的代码，可以接收参数并返回结果。
function add(a, b) {
return a + b;
}
var sum = add(10, 20);
console.log(sum);
四、DOM操作
DOM（文档对象模型）是一个编程接口，用于表示和操作HTML文档的结构。使用 JavaScript，可以轻松地访问和修改 DOM 元素。
选择元素
可以使用getElementById、getElementsByClassName、getElementsByTagName或querySelector等方法选择 DOM 元素。
var elementById = document.getElementById("myElement");
var elementsByClassName = document.getElementsByClassName("myClass");
var elementsByTagName = document.getElementsByTagName("div");
var elementByQuerySelector = document.querySelector("#myElement");
修改元素
可以修改选定元素的属性、样式和内容。
var element = document.getElementById("myElement");
element.innerHTML = "新内容";
element.style.backgroundColor = "red";
element.setAttribute("data-id", "123");
添加和删除元素
可以使用createElement、appendChild、insertBefore和removeChild等方法添加和删除 DOM 元素。
// 创建一个新的<div>元素
var newElement = document.createElement("div");
newElement.innerHTML = "我是一个新元素";
// 将新元素添加到页面末尾
document.body.appendChild(newElement);
// 将新元素插入到指定元素之前
var targetElement = document.getElementById("target");
document.body.insertBefore(newElement, targetElement);
// 从页面上删除指定元素
var elementToRemove = document.getElementById("remove");
document.body.removeChild(elementToRemove);
五、事件处理
在 JavaScript 中，可以使用事件监听器响应用户操作，如点击、鼠标移动和键盘输入等。
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("按钮被点击了");
});
通过掌握这些基本的 JavaScript 概念，初学者可以开始编写简单的交互式网页。然后，可以继续学习更高级的主题，如异步编程、AJAX 和框架（如 React、Angular 和 Vue 等）。
暂无评论
要发表评论，您必须先 登录