什么是JavaScript？
JavaScript是一种轻量级的解释型编程语言，主要用于Web开发，为网页添加交互功能。它是Web的三大核心技术之一，与HTML和CSS并列。
JavaScript的历史
JavaScript由Brendan Eich于1995年在网景公司(Netscape)开发，最初名为Mocha，后来改为LiveScript，最终确定为JavaScript。1997年，JavaScript被提交给ECMA国际组织进行标准化，形成了ECMAScript规范。
JavaScript的主要特点
- 解释型语言 - 无需编译，由浏览器直接解释执行
- 动态类型 - 变量类型在运行时确定
- 基于原型 - 使用原型链实现继承
- 函数是一等公民 - 函数可以作为参数传递和返回值
- 事件驱动 - 支持异步编程和事件处理
- 跨平台 - 可以在各种浏览器和环境中运行
JavaScript的运行环境
JavaScript可以在多种环境中运行：
- 浏览器环境 - 最常用的运行环境，通过内置的JavaScript引擎执行
- Node.js - 服务器端JavaScript运行环境，基于Chrome V8引擎
- 移动应用 - 通过React Native、Ionic等框架开发原生移动应用
- 桌面应用 - 通过Electron、NW.js等框架开发跨平台桌面应用
- 物联网设备 - 在嵌入式设备上运行JavaScript
- 数据库 - MongoDB等数据库支持JavaScript查询
JavaScript引擎
不同的浏览器使用不同的JavaScript引擎：
| 浏览器 | JavaScript引擎 | 特点 |
|---|---|---|
| Chrome | V8 | 高性能，开源，也用于Node.js |
| Firefox | SpiderMonkey | 第一个JavaScript引擎，由Brendan Eich开发 |
| Safari | JavaScriptCore | 也称为Nitro，专注于能效 |
| Edge | Chakra | 现已改用Chromium和V8引擎 |
第一个JavaScript程序
让我们从最简单的"Hello, World!"程序开始：
<!DOCTYPE html>
<html>
<head>
<title>第一个JS程序</title>
</head>
<body>
<script>
// 在浏览器控制台输出信息
console.log("Hello, World!");
// 在页面上显示警告框
alert("欢迎学习JavaScript!");
// 在页面上写入内容
document.write("<h1>Hello, JavaScript!</h1>");
</script>
</body>
</html>代码解释
console.log()- 在浏览器控制台输出信息，主要用于调试alert()- 显示一个警告对话框，包含指定的消息和确定按钮document.write()- 将HTML表达式或JavaScript代码写入文档
JavaScript的引入方式
在HTML中有多种方式引入JavaScript代码：
1. 内联脚本
<script>
console.log("这是内联脚本");
</script>特点： 代码直接嵌入在HTML文件中，适用于小型脚本或特定页面的逻辑。
2. 外部脚本
<script src="script.js"></script>特点： 代码存储在外部文件中，可以跨多个页面重用，有利于代码维护和缓存。
3. 事件处理脚本
<button onclick="alert('按钮被点击了!')">
点击我
</button>特点： 直接在HTML元素上定义事件处理程序，适用于简单的交互。
4. 模块导入 (ES6+)
<script type="module">
import { functionName } from './module.js';
functionName();
</script>特点： ES6引入的模块系统，支持代码的模块化和依赖管理。
开发工具
开始学习JavaScript，你需要：
| 工具 | 用途 | 推荐 |
|---|---|---|
| 文本编辑器 | 编写代码 | VS Code, Sublime Text, Atom |
| 浏览器 | 运行和调试 | Chrome, Firefox, Edge, Safari |
| 开发者工具 | 调试和测试 | 浏览器内置工具 |
| 版本控制 | 代码管理 | Git, GitHub, GitLab |
| 包管理器 | 依赖管理 | npm, Yarn |
| 构建工具 | 自动化任务 | Webpack, Parcel, Rollup |
推荐的开发环境设置
- 安装一个现代浏览器（推荐Chrome或Firefox）
- 安装一个代码编辑器（推荐VS Code）
- 安装必要的浏览器扩展（如React Developer Tools等）
- 设置代码格式化工具（如Prettier）
- 配置代码检查工具（如ESLint）
浏览器控制台的使用
浏览器控制台是学习JavaScript的重要工具：
// 输出信息
console.log("普通信息");
console.warn("警告信息");
console.error("错误信息");
console.info("信息性消息");
// 清空控制台
console.clear();
// 计算执行时间
console.time("计时器");
// 一些代码...
console.timeEnd("计时器");
// 表格形式显示数据
console.table([{name: "John", age: 30}, {name: "Jane", age: 25}]);
// 分组显示
console.group("用户信息");
console.log("姓名: John");
console.log("年龄: 30");
console.groupEnd();控制台的其他有用功能
console.assert(condition, message)- 如果条件为false，则输出错误信息console.count(label)- 记录特定标签被调用的次数console.trace()- 输出堆栈跟踪console.dir(object)- 以对象形式显示指定对象的属性
JavaScript的版本历史
JavaScript的发展经历了多个重要版本：
| 版本 | 年份 | 主要特性 |
|---|---|---|
| ES1 | 1997 | 第一个标准化版本 |
| ES3 | 1999 | 正则表达式，try/catch，更多内置对象 |
| ES5 | 2009 | 严格模式，JSON支持，数组方法 |
| ES6/ES2015 | 2015 | 类，模块，箭头函数，Promise，let/const |
| ES2016-2022 | 2016-2022 | 每年发布新特性，如async/await，可选链，空值合并等 |
实践练习
👆 请点击上方按钮进行演示操作
选择不同的演示按钮来探索JavaScript的各种功能和用法
尝试编写代码
// 练习1: 变量声明和使用
let message = "Hello, JavaScript!";
const PI = 3.14159;
var count = 10;
console.log(message);
console.log("圆周率:", PI);
console.log("计数:", count);
// 练习2: 基本运算
let a = 5;
let b = 3;
console.log("加法:", a + b);
console.log("减法:", a - b);
console.log("乘法:", a * b);
console.log("除法:", a / b);
console.log("取余:", a % b);
// 练习3: 字符串操作
let firstName = "张";
let lastName = "三";
let fullName = firstName + " " + lastName;
console.log("全名:", fullName);
console.log("姓名长度:", fullName.length);常见问题与解答
1. JavaScript和Java有什么关系？
尽管名字相似，但JavaScript和Java是两种完全不同的编程语言。JavaScript最初命名为LiveScript，后来为了营销目的改名为JavaScript，但实际上两者在语法、设计和用途上都有很大差异。
2. JavaScript只能在浏览器中运行吗？
不是的。虽然JavaScript最初是为浏览器设计的，但现在它可以在多种环境中运行，包括服务器(Node.js)、移动设备(React Native)和桌面应用程序(Electron)等。
3. 学习JavaScript需要什么基础？
学习JavaScript前，建议先了解HTML和CSS的基础知识，因为JavaScript通常用于操作网页内容和样式。但即使没有这些基础，也可以开始学习JavaScript。