JavaScript 核心概念与实战入门
什么是 JavaScript
JavaScript 是一种轻量级的解释型脚本语言，具备动态类型、弱类型以及基于原型的特性，内置对多种数据类型的支持。其解释器通常被称为 JavaScript 引擎，内置于各大浏览器中，主要用于客户端编程。最初，它是为了增强 HTML 页面的交互能力而诞生，允许开发者添加动态效果和功能。
1995 年，Netscape 公司的布兰登·艾奇（Brendan Eich）在网景导航者浏览器上首次设计并实现了该语言。由于与 Sun 公司的合作，Netscape 的管理层希望这种新语言的外观看上去像 Java，因此将其命名为 JavaScript。不过，其核心语法风格更接近 Self 和 Scheme。
为争夺市场，微软推出了 JScript，而 CEnvi 则推出了 ScriptEase，两者均能在浏览器中运行。为了统一语言标准，由于 JavaScript 兼容 ECMA 标准，该语言也被称为 ECMAScript。
在 HTML 中使用 JavaScript
HTML 中的 JavaScript 代码需放置在 <script> 与 </script> 标签之间。这些标签可以放在 <head> 或 <body> 部分。
<script> 标签的作用
要在 HTML 页面中插入 JavaScript，你需要使用 <script> 标签。浏览器会读取并执行其中的代码。
<script>
alert("这是我的第一个 JavaScript 代码！");
</script>
在过去，你可能会看到 type="text/javascript" 属性，但现在所有现代浏览器和 HTML5 都已将其设为默认，因此不再需要。
将 JavaScript 放在 <body> 中
下面的例子在页面加载时，通过 document.write 向 <body> 写入文本内容。
<html>
<body>
<p>JavaScript 可以直接写入 HTML 输出流：</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
<p>
注意：只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果在页面加载完成后使用（例如在函数中），会覆盖整个文档。
</p>
</body>
</html>
函数与事件响应
通常，我们需要在用户触发某个事件（如点击按钮）时执行代码。将代码封装在函数中，然后在事件发生时调用它，是更常见的做法。
JavaScript 代码位置灵活
你可以在一个 HTML 文档中放置任意数量的脚本。它们可以分别位于 <head> 或 <body> 中，或同时存在。通常推荐将函数定义放在 <head> 或页面底部，以便集中管理且不影响页面布局。
外部 JavaScript 文件
为了复用，可以将脚本保存为 .js 文件，并通过 <script> 标签的 src 属性引用。
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
引用位置（<head> 或 <body>）不影响执行效果。注意，外部文件中不应包含 <script> 标签。
数据输出方式
操作 HTML 元素
使用 document.getElementById(id) 方法可以访问特定的 HTML 元素，然后通过 innerHTML 属性修改其内容。
<html>
<body>
<h1>我的第一个网页</h1>
<p id="demo">这是一个段落</p>
<script>
document.getElementById("demo").innerHTML = "这是 JavaScript 修改后的内容";
</script>
</body>
</html>
直接写入文档
document.write() 可以直接将内容输出到 HTML 文档。但要注意，如果在页面加载完成后调用，它会覆盖整个页面。
<html>
<body>
<h1>我的第一个网页</h1>
<p>第一个段落</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write("糟糕！文档被覆盖了。");
}
</script>
</body>
</html>
语句与语法规则
基本语句
JavaScript 语句向浏览器发出指令，每条语句以分号结束（可选），多行语句可用分号分隔写在一行。
document.getElementById("demo").innerHTML = "Hello World";
代码块与函数
花括号 { } 用于将多条语句组合成代码块。函数就是代码块的典型应用。
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
document.getElementById("myDiv").innerHTML = "How are you?";
}
大小写敏感
JavaScript 对大小写敏感。例如，getElementById 和 getElementbyID 是两个不同的函数。变量 myVariable 和 MyVariable 也不同。
空格与换行
JavaScript 会忽略多余空格，因此你可以通过空格提高代码可读性。字符串内可以使用反斜杠 \ 进行换行，但关键字中不能换行。
注释
注释不会被浏览器执行，用于解释代码或提高可读性。
- 单行注释：以
//开头 - 多行注释：以
/*开始，以*/结束
// 这是单行注释
/*
这是多行注释
可以跨越多行
*/
var x = 5; // 也可以放在行尾
变量与数据类型
变量声明
使用 var 关键字声明局部变量，不使用则为全局变量。变量名必须以字母、$ 或 _ 开头，且对大小写敏感。
var x = 2;
var y = 3;
var z = x + y;
a = 123; // 全局变量
数据类型
JavaScript 是动态类型语言，一个变量可以存储不同类型的值。
- 字符串：用单引号或双引号包裹
- 数字：整数或浮点数，支持科学计数法
- 布尔：
true或false - 数组：可用
new Array()或字面量[]创建 - 对象：用花括号
{}定义键值对 - undefined：未赋值的变量
- null：表示空值
// 字符串
var name = "张三";
// 数字
var pi = 3.14;
var big = 123e5; // 12300000
// 布尔
var isReady = false;
// 数组
var cars = ["Audi", "BMW", "Volvo"];
// 对象
var person = { firstname: "李", lastname: "四", age: 30 };
// 遍历数组
var i, len = cars.length;
for (i = 0; i < len; i++) {
document.write(cars[i] + "<br>");
}
// 访问对象属性
var fullName = person.firstname + person.lastname;
var alsoName = person["lastname"];
对象详解
在 JavaScript 中，几乎一切都是对象，包括字符串、数字、数组、日期等。对象拥有属性和方法。
// 对象的属性和方法
var txt = "Hello";
var len = txt.length; // 5，属性
var upper = txt.toUpperCase(); // HELLO，方法
// 自定义对象
person = new Object();
person.firstname = "王";
person.lastname = "五";
person.age = 25;
person.eyecolor = "brown";
函数
函数是事件驱动或可重复调用的代码块。
基本语法
function myFunction() {
// 要执行的代码
}
带参数与返回值
function multiply(a, b) {
return a * b;
}
var result = multiply(4, 3); // 12
作用域
- 局部变量：在函数内用
var声明，只能在函数内访问。 - 全局变量：在函数外声明，或未声明直接赋值的变量（即使在函数内）。
- 生存期：局部变量在函数执行完毕后被删除，全局变量在页面关闭后被删除。
运算符
算术运算符
| 运算符 | 描述 | 例子 (y=5) | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 取余 | x=y%2 | x=1 |
| ++ | 递增 | x=++y | x=6 |
| -- | 递减 | x=--y | x=4 |
赋值运算符
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
字符串连接
+ 运算符也可用于连接字符串。如果数字与字符串相加，结果将变为字符串。
var txt1 = "Hello ";
var txt2 = "World";
var greet = txt1 + txt2; // "Hello World"
var mix = 5 + "5"; // "55"
比较与逻辑运算符
比较运算符
| 运算符 | 描述 | 例子 (x=5) |
|---|---|---|
| == | 等于 | x==8 为 false |
| === | 全等（值和类型） | x===5 为 true；x==="5" 为 false |
| != | 不等于 | x!=8 为 true |
| > | 大于 | x>8 为 false |
| < | 小于 | x<8 为 true |
| >= | 大于或等于 | x>=8 为 false |
| <= | 小于或等于 | x<=8 为 true |
逻辑运算符
| 运算符 | 描述 | 例子 (x=6, y=3) |
|---|---|---|
| && | 与 | (x < 10 && y > 1) 为 true |
| || | 或 | (x==5 || y==5) 为 false |
| ! | 非 | !(x==y) 为 true |
条件运算符
var greeting = (visitor == "VIP") ? "Dear VIP" : "Guest";
流程控制
条件语句
用于根据不同条件执行不同代码块。
var score = 85;
if (score >= 90) {
grade = "优秀";
} else if (score >= 60) {
grade = "及格";
} else {
grade = "不及格";
}
switch 语句
var dayNum = new Date().getDay(); // 0 是周日
var dayName;
switch (dayNum) {
case 0: dayName = "星期日"; break;
case 1: dayName = "星期一"; break;
case 2: dayName = "星期二"; break;
default: dayName = "未知";
}
循环
for 循环
for (var i = 0; i < 5; i++) {
document.write("数字是 " + i + "<br>");
}
for...in 循环
var person = { name: "赵六", age: 28, job: "工程师" };
for (var key in person) {
document.write(key + ": " + person[key] + "<br>");
}
while 循环
var i = 0;
while (i < 5) {
document.write("数字是 " + i + "<br>");
i++;
}
do...while 循环
var j = 0;
do {
document.write("数字是 " + j + "<br>");
j++;
} while (j < 5);
break 与 continue
break：跳出整个循环。continue：跳过当前迭代，继续下一次。
for (var i = 0; i < 10; i++) {
if (i === 3) {
break; // 跳出循环
}
// 不包含 i=3 的代码
}
异常处理
使用 try...catch...finally 捕获和处理运行时错误。还可以用 throw 自定义异常。
function checkAge(age) {
try {
if (age < 0) throw "年龄不能为负数";
if (age > 150) throw "年龄过大";
return "年龄合法";
} catch (err) {
return "错误: " + err;
}
}
console.log(checkAge(200)); // 错误: 年龄过大
表单验证示例
在表单提交前验证数据是一种常见做法。
<html>
<body>
<script>
function checkRequired(field, msg) {
if (field.value == null || field.value == "") {
alert(msg);
field.focus();
return false;
}
return true;
}
function validateForm(form) {
if (!checkRequired(form.email, "邮箱不能为空")) {
return false;
}
return true;
}
</script>
<form action="submit.php" onsubmit="return validateForm(this)" method="post">
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
</body>
</html>
