Heureka's blog

Appearance

1.0 JavaScript 介绍 ​

JavaScript 是 Web 开发中最重要的编程语言之一，它让网页具有交互性和动态效果。

一、什么是 JavaScript ​

JavaScript 是一种轻量级的、解释型的编程语言，最初为网页设计而创建，现在也可以用于服务器端（Node.js）、移动应用、桌面应用等多个领域。

特点 ​

  • 动态类型：变量类型在运行时确定
  • 弱类型：类型转换自动进行
  • 解释执行：不需要编译，直接运行
  • 原型继承：基于原型的面向对象
  • 事件驱动：响应用户操作

二、JavaScript 历史 ​

1995 - Netscape 布兰登·艾克创建了 JavaScript
1997 - ECMAScript 标准化（ES1）
1999 - ES3（广泛使用）
2009 - ES5（添加严格模式、JSON 等）
2015 - ES6/ES2015（重大更新，箭头函数、Promise 等）
至今 - 每年持续更新（ES2017-ES2023）

三、JavaScript 能做什么 ​

浏览器端 ​

  • 页面交互（按钮点击、表单提交）
  • 数据验证（表单验证、输入检查）
  • 动态内容（AJAX 数据加载）
  • 动画效果（CSS 动画、Canvas 绘图）
  • 本地存储（LocalStorage、SessionStorage）

服务端（Node.js） ​

  • Web 服务器（Express、Koa）
  • API 服务（RESTful、GraphQL）
  • 实时应用（WebSocket）
  • 命令行工具（CLI）

其他领域 ​

  • 移动应用（React Native、Ionic）
  • 桌面应用（Electron）
  • 物联网（物联网编程）
  • 区块链（智能合约）

四、JavaScript 与 HTML、CSS 的关系 ​

HTML（结构）
  ↓
  └─ 定义页面的骨架和内容
       ↓
CSS（样式）
  ↓
  └─ 控制页面的外观和布局
       ↓
JavaScript（行为）
  ↓
  └─ 实现页面的交互和动态效果

协作示例 ​

html
<!-- HTML：结构 -->
<div id="message">你好</div>
<button id="btn">点击</button>

<!-- CSS：样式 -->
<style>
  #message {
    color: black;
    transition: color 0.3s;
  }
  .highlight {
    color: red;
  }
</style>

<!-- JavaScript：行为 -->
<script>
  const btn = document.getElementById("btn");
  const message = document.getElementById("message");

  btn.addEventListener("click", function() {
    message.classList.toggle("highlight");
  });
</script>

五、JavaScript 引擎 ​

JavaScript 代码由 JavaScript 引擎执行。

主流引擎 ​

引擎浏览器特点
V8Chrome、Edge、Node.js极快的 JIT 编译
SpiderMonkeyFirefox最早的 JS 引擎
JavaScriptCoreSafariApple 自研
ChakraEdge（旧版）Microsoft 自研

执行过程 ​

源代码
    ↓
解析（AST）
    ↓
编译（字节码/机器码）
    ↓
执行

六、JavaScript 版本（ES 版本） ​

ES 5 (ES5) ​

  • 2009 年发布
  • 添加了 严格模式
  • 添加了 JSON 对象
  • 添加了 Array 方法（forEach、map、filter 等）

ES 6 / ES2015 ​

  • 2015 年发布（重大更新）
  • 箭头函数
  • 模板字符串
  • 解构赋值
  • Promise
  • 类（Class）
  • 模块化（export/import）

ES2016-ES2023 ​

  • 每年持续更新
  • 添加了 async/await（ES2017）
  • 添加了 Optional Chaining（ES2020）
  • 添加了 Nullish Coalescing（ES2020）
  • 添加了私有字段（ES2022）
  • 等等...

七、学习路径 ​

初级阶段 ​

  • 基础语法（变量、数据类型、运算符）
  • 控制结构（条件语句、循环）
  • 函数（函数声明、箭头函数）
  • 数组和对象
  • DOM 操作

中级阶段 ​

  • ES6+ 新特性
  • 异步编程（Promise、async/await）
  • 事件处理
  • 表单操作
  • 本地存储

高级阶段 ​

  • 原型链与继承
  • 闭包与作用域
  • 模块化
  • 性能优化
  • 设计模式

八、开发环境 ​

浏览器开发者工具 ​

按 F12 或右键 → 检查

  • Console：执行 JS 代码、查看输出
  • Elements：查看和修改 DOM
  • Network：查看网络请求
  • Sources：调试代码

Node.js ​

bash
# 安装 Node.js 后，可以在命令行运行 JS
node script.js

九、Hello World ​

在浏览器中 ​

javascript
// 在开发者工具 Console 中
console.log("Hello, World!");
alert("Hello, World!");

在 HTML 中 ​

html
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个 JS 页面</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        console.log("Hello, World!");
        alert("Hello, World!");
    </script>
</body>
</html>

在 Node.js 中 ​

javascript
// script.js
console.log("Hello, World!");

总结 ​

JavaScript 是现代 Web 开发的核心，掌握它是成为前端开发者的必备技能。建议从基础开始，逐步深入。