前端学习日志 —— JavaScript 基础知识（1）一、JavaScript 概述 1️⃣ 是什么（What） Ja

一、JavaScript 概述

1️⃣ 是什么（What）

JavaScript 是一种脚本语言（Script Language） ，主要特点：

可以直接嵌入 HTML 中，在页面加载时执行
以纯文本形式编写
无需编译，由浏览器或运行环境解释执行

👉 示例：

<script>
  alert("Hello JavaScript");
</script>

🔹 语言特性：

动态类型语言
基于原型的面向对象
单线程（但支持异步）
解释执行

2️⃣ 为什么（Why）

（1）诞生原因

JavaScript 最初是为浏览器设计的，用来：

实现网页交互
让静态页面变成动态页面

👉 例如：

点击按钮弹窗
表单校验
页面内容动态更新

（2）重要性

是浏览器唯一原生支持的编程语言
与 HTML / CSS 深度集成
构成前端三大核心技术：

技术	作用
HTML	结构
CSS	样式
JavaScript	行为

（3）安全性原因

JavaScript 在浏览器中运行在**沙箱环境（sandbox）**中：

❌ 不能直接访问本地文件
❌ 不能直接操作系统资源
✅ 防止恶意代码破坏用户设备

3️⃣ 怎么样（How）

（1）运行方式

JavaScript 的能力取决于运行环境：

🔹 浏览器环境：

操作 DOM（页面内容）
监听用户行为（点击、输入）
发起网络请求（AJAX / Fetch）
使用浏览器 API（localStorage、cookie）

🔹 Node.js 环境：

读写文件
搭建服务器
操作系统资源
处理网络请求

👉 Node.js 让 JavaScript 可以脱离浏览器运行

（2）扩展能力

JavaScript 的应用范围：

前端开发
后端开发（Node.js）
移动开发（React Native）
桌面应用（Electron）

（3）生态补充

可以编译成 JavaScript 的语言：

TypeScript（最常用）
Dart
CoffeeScript

👉 优势：

更强类型系统
更好的开发体验

📌 总结：
JavaScript 是一门跨环境的通用脚本语言，从浏览器交互发展为全栈语言。

二、JavaScript 的引入方式（`<script>` 标签）

1️⃣ 基本用法

<script>
  alert('Hello, world!');
</script>

📌 特点：

浏览器解析到 <script> 会立即执行
会阻塞 HTML 解析

2️⃣ 常用属性

（1）type（可省略）

<script type="text/javascript"></script>

👉 现代默认就是 JS

（2）language（已废弃 ❌）

<script language="javascript"></script>

3️⃣ 外部脚本（推荐 ✅）

<script src="script.js"></script>

📌 路径：

相对路径：./script.js
绝对路径：/js/script.js
CDN：外部链接

4️⃣ 多脚本执行顺序

<script src="a.js"></script>
<script src="b.js"></script>

👉 按顺序执行（同步）

5️⃣ 注意事项

❗ src 与内部代码冲突

<script src="file.js">
  alert(1); // ❌ 无效
</script>

❗ 阻塞解析

执行流程：

解析 HTML
遇到 <script>
暂停解析
执行 JS
继续解析

6️⃣ 性能优化（重点 ⭐）

（1）defer（推荐）

<script src="script.js" defer></script>

不阻塞解析
HTML 解析完再执行
按顺序执行

（2）async

<script src="script.js" async></script>

异步加载 & 执行
顺序不保证

📌 总结：
推荐：外部脚本 + defer

三、代码结构

1️⃣ 分号（;）

alert('Hello');
alert('World');

📌 说明：

每条语句建议独立一行
JavaScript 会自动补分号（ASI）
❗但某些情况下可能出错，建议手动写分号

2️⃣ 注释（Comments）

（1）单行注释

// 这是注释
alert('Hello');

（2）多行注释

/* 多行注释 */
alert('Hello');

（3）注释的作用

提高代码可读性
解释“为什么这么做”
临时禁用代码

/*
alert('Hello');
*/
alert('World');

3️⃣ 现代模式（严格模式）

（1）是什么

"use strict";

👉 开启 JavaScript 严格模式

（2）作用

提高代码安全性
避免不规范写法
错误更容易被发现

（3）特点

禁止未声明变量
this 不再默认指向 window
参数不能重名
一些危险操作会报错

（4）使用规则

"use strict"; // 必须写在最顶部

（5）特殊情况

👉 以下情况自动开启严格模式：

ES6 模块（import / export）
class

👉 所以：

Vue / React 项目中通常不用手写

📌 总结：
严格模式让代码更规范、更安全、更易维护

✅ 总结

JavaScript 是前端核心语言，已发展为全栈语言
<script> 是 JS 的入口，推荐使用 defer 优化加载
良好的代码结构（分号 + 注释 + 严格模式）是基础

前端学习日志 —— JavaScript 基础知识（1）