JavaScript

JS零基础通俗易懂手册

JS零基础通俗易懂手册（纯干货入门）

作者：洋柿子·2026-09-01·共 6 篇 · 当前 2

JS零基础通俗易懂手册（纯干货入门）

一、JS是什么？（大白话解释）

1.1 官方全称

JS：JavaScript 直译式脚本语言

1.2 最简单理解

  1. JS是正经编程语言：有变量、判断、循环、逻辑、运算。
  2. 专门用来：控制网页行为，做交互、修改内容、弹窗、动画、请求数据。
  3. 核心作用：让网页能动、能点、能反应、能交互。

1.3 前端三剑客终极比喻（必背）

  • HTML = 房子骨架（墙、门窗、结构、只有架子）
  • CSS = 装修装饰（颜色、大小、布局、好看美观）
  • JS = 电器智能（开关、感应、自动控制、人机交互）

二、JS 核心特点

  1. 直译式语言：不需要编译，写完直接浏览器运行。
  2. 弱类型语言：定义变量不用规定类型，随便存数字、字符串。
  3. 顺序执行：从上到下、逐行执行代码。
  4. 交互性强：可以操作网页、弹窗、监听鼠标键盘。
  5. 跨平台：浏览器、Node环境都能运行。

三、JS 三种引入方式（和CSS一模一样）

3.1 行内引入（不推荐）

直接写在标签事件里面，耦合度高，代码混乱。

<button onclick="alert('你好')">点击我</button>

3.2 内部引入（测试常用）

html文件底部写 <script> 标签，存放JS代码。

<body>
    <!-- 所有网页内容放上面 -->
    <script>
        alert('我是内部JS');
    </script>
</body>

3.3 外部引入（企业开发、推荐）

单独新建 .js 文件，通过script引入。

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

3.4 重要硬性规则

script标签建议放在body最底部

原因：先加载网页骨架，再执行JS，防止获取不到标签报错。

四、JS 基础语法规则（新手必记）

  1. 严格区分大小写：JS 和 js 完全不一样（HTML/CSS不严格区分）。

  2. 语句末尾加分号：; 代表一行代码结束。

  3. 注释写法：单行// 、多行/* */。

  4. 命名规范：英文、小写、驼峰命名，禁止中文、空格。

五、变量（JS一切的起点）

5.1 通俗理解

变量 = 盒子，用来存放数据，随时存、随时改、随时取。

5.2 三种定义方式

var a = 10;    // 老式、全局变量、有缺陷（不推荐）
let b = 20;    // 现代、块级变量、可以修改
const c = 30;  // 常量、定义后不能修改、必须赋值

5.3 命名规范

  • 不能数字开头；

  • 不能使用关键字（if、for、let）；

  • 见名知意：age、username；

  • 推荐小驼峰命名：userName。

六、五大基础数据类型（入门必背）
类型 说明 示例
String 字符串 引号包裹，文字 "hello"
Number 数字 整数、小数 18、3.14
Boolean 布尔 只有真、假 true / false
Undefined 未定义、空变量 let a;
Null 空 手动置空 let b = null;

七、运算符（基础运算）

7.1 算术运算符

      • / % ++ --

7.2 赋值运算符

= += -= *= /=

7.3 比较运算符

< >= <= == === !=

重点：=== 严格相等（值+类型全部一致，工作必用）

7.4 逻辑运算符

&& 并且 || 或者 ! 取反

八、流程控制（逻辑核心）

8.1 条件判断 if / else

满足条件就执行，不满足跳过。

let age = 18;
if(age >= 18){
    console.log("成年");
}else{
    console.log("未成年");
}

8.2 分支选择 switch

固定值匹配，适合多选一。

8.3 循环语句（重复干活）

  • for循环：固定次数循环（最常用）

  • while循环：条件满足就一直循环

  • do while：先执行一次，再判断

九、函数（代码封装）

9.1 通俗理解

函数 = 打包好的工具，一段代码封装起来，想用就调用，减少重复代码。

9.2 基础语法

// 定义函数
function sayHi(){
    console.log("你好");
}
// 调用函数
sayHi();

十、DOM操作（JS真正能干的活）

10.1 DOM通俗解释

DOM：把所有HTML标签变成JS对象，让JS随便操控网页。

10.2 常用DOM操作

// 获取标签
document.querySelector("div");
// 修改文字
innerText
// 修改样式
style.color
// 绑定点击事件
onclick

10.3 能干什么？

  1. 修改网页文字、颜色、大小；

  2. 点击按钮弹出窗口；

  3. 新增、删除网页标签；

  4. 监听鼠标、键盘动作。

十一、三种语言本质区别（必考总结）
语言 类型 作用 通俗一句话
HTML 标记语言 结构 负责长什么样
CSS 标记语言 样式 负责好不好看
JS 编程语言 逻辑交互 负责动不动、能不能点

十二、新手常见坑（直白避雷）

  1. 大小写不注意：JS严格区分大小写，最容易报错。

  2. 符号写错：中文分号、中文括号，直接报错。

  3. script写在头部：网页没加载完，获取不到标签。

  4. == 和 === 混用：工作全部用严格相等===。

  5. 变量不定义直接用：造成全局污染。

十三、通俗易懂总结

  1. JS是前端唯一编程语言，有逻辑、能运算、能判断。

  2. 基础流程：变量 → 数据类型 → 运算符 → 判断 → 循环 → 函数。

  3. 最终目的：DOM操作网页，实现交互效果。

  4. 学习顺序：基础语法 → 内置方法 → DOM → 数组对象 → ES6。

  5. 前端三件套：HTML搭架子、CSS装修、JS给灵魂。

← 返回课程首页