js基础教程零基础入门：从变量到函数30天实战清单

是不是很多零基础的朋友想学 JavaScript，却总被 “变量”“函数” 这些词吓住？看教程时觉得 “好像懂了”，自己动手写代码却连个弹窗都做不出来；跟着视频敲代码能运行，换个题目就两眼一抹黑；更不知道该怎么规划学习，学了半个月还在原地踏步？其实啊，JS 入门没那么难，关键是找对方法，循序渐进。今天兔子哥就给零基础的朋友准备了 30 天实战清单，从最基础的变量讲到实用的函数，每天学一点、练一点，30 天就能入门 JS 基础，一起往下看吧！

一、为啥 30 天能入门？零基础学 JS 的关键是 “边做边学”

很多人觉得编程难，是因为光看不动手。兔子哥带过的学员里，有个叫小林的女生，零基础学 JS 时每天跟着练 1 小时，30 天后自己做了个简易计算器，她说：“原来不是我学不会，是之前光看教程不敲代码，记不住东西。”
JS 是 “实践型” 技能，就像学骑车，光看教程没用，得自己蹬起来才会。比如学变量时，不光要知道let a = 10，还要试试改a的值，看看控制台会怎么变；学函数时，写个计算加法的函数，故意传错参数，看看报错信息 —— 这样学记得才牢。
给零基础朋友一个建议：别买太厚的语法书，找个简单的编辑器（比如 VS Code），每天学一个知识点，然后用这个知识点做个小效果，比如学了弹窗就做个 “点击按钮弹提示” 的例子，成就感来了，自然能坚持。

二、30 天实战清单：从变量到函数，每天目标清晰

阶段	时间	核心内容	每日实战小任务
基础阶段	第 1-10 天	变量、数据类型、运算符	用变量保存个人信息，打印到控制台
进阶阶段	第 11-20 天	条件判断、循环、数组操作	做简易成绩评级，用循环打印数字
实战阶段	第 21-30 天	函数、事件绑定、简单交互	写计算函数，做点击按钮变色效果

三、基础阶段（1-10 天）：搞定变量和数据，JS 的 “地基”

核心问题：变量到底是什么？为什么写 JS 非得用变量？
变量就是 “装数据的盒子”，比如保存名字、年龄、成绩这些数据，方便后面使用。这就像家里的抽屉，把不同的东西分类放好，要用时能快速找到。

第 1-3 天：学会声明变量，给数据 “起名字”

JS 里声明变量有三种方式，新手先掌握let和const：

• let：声明 “会变的变量”，比如let age = 18; age = 19;（年龄会变）
• const：声明 “不变的常量”，比如const pi = 3.14;（圆周率不变）

实战任务：声明变量保存自己的姓名、年龄、爱好，用console.log打印出来：
javascript

// 声明变量let userName = "张三";let userAge = 20;const userHobby = "打篮球";// 打印到控制台（按F12打开控制台查看）console.log("姓名：", userName);console.log("年龄：", userAge);console.log("爱好：", userHobby);

避坑点：变量名不能用数字开头，也不能用 JS 的关键字（比如let function），最好起有意义的名字，比如userName比a b强多了。

第 4-7 天：认识数据类型，知道盒子里装的 “是什么东西”

JS 里的数据类型就像盒子的类型，装衣服的盒子和装书的盒子不一样，数据类型也分几种：

• 字符串（string）：用引号包起来的文本，比如"你好" 'JS教程'
• 数字（number）：整数或小数，比如100 3.14
• 布尔值（boolean）：只有true（真）和false（假）两种
• 数组（array）：装多个数据的列表，比如[1, 2, 3] ["苹果", "香蕉"]

实战任务：声明不同类型的变量，用typeof查看类型：
javascript

let str = "Hello JS";let num = 99;let isStudent = true;let fruits = ["苹果", "橘子"];console.log(typeof str); // 输出stringconsole.log(typeof num); // 输出number

第 8-10 天：学运算符，让数据 “做运算”

运算符就是 “数据的计算器”，比如加减乘除、拼接字符串：

• 算术运算符：+ - * /（加减乘除）
• 字符串拼接：+（把字符串连起来，比如"我叫" + userName）
• 赋值运算符：= +=（比如age += 1相当于age = age + 1）

实战任务：计算自己的年龄加 5 岁，拼接 “我叫 XX，今年 XX 岁” 的字符串：
javascript

let myAge = 22;let futureAge = myAge + 5; // 22+5=27let intro = "我叫" + userName + "，今年" + myAge + "岁";console.log(intro); // 输出“我叫张三，今年22岁”

四、进阶阶段（11-20 天）：条件和循环，让 JS “会思考”

核心问题：怎么让 JS 根据不同情况做不同事？循环又能解决什么问题？
条件判断能让 JS “做选择”，循环能让 JS “重复做事”，这俩是 JS 的 “大脑”，学会了就能写有逻辑的代码。

第 11-14 天：条件判断（if-else），JS 的 “选择题”

比如根据成绩评级：90 分以上是 “A”，60-89 是 “B”，60 以下是 “C”：
javascript

let score = 85;let grade;if (score >= 90) {grade = "A";} else if (score >= 60) {grade = "B";} else {grade = "C";}console.log("成绩等级：", grade); // 输出B

实战任务：让用户输入年龄，判断是否成年（>=18 岁），弹对应提示：
javascript

let age = prompt("请输入你的年龄："); // 弹出输入框if (age >= 18) {alert("你已成年");} else {alert("你未成年");}

第 15-20 天：循环（for/while），让 JS “重复干活”

比如打印 1 到 10 的数字，用循环不用写 10 遍console.log：
javascript

// for循环：打印1-10for (let i = 1; i <= 10; i++) {console.log(i);}// while循环：打印1-5let num = 1;while (num <= 5) {console.log(num);num++; // 每次加1}

实战任务：用循环计算 1 到 100 的和（1+2+...+100）：
javascript

let sum = 0;for (let i = 1; i <= 100; i++) {sum += i; // 相当于sum = sum + i}console.log("1到100的和：", sum); // 输出5050

五、实战阶段（21-30 天）：函数和事件，让网页 “动起来”

核心问题：函数到底有啥用？怎么用 JS 让网页有交互？
函数能封装重复的代码，事件能让 JS 响应用户操作（比如点击、输入），学会这俩就能做简单的网页交互了。

第 21-25 天：函数，JS 的 “工具包”

比如写个计算加法的函数，下次要用直接调用，不用重复写代码：
javascript

// 定义加法函数function add(a, b) {return a + b; // 返回计算结果}// 调用函数let result = add(3, 5);console.log("3+5=", result); // 输出8

实战任务：写个计算面积的函数（长 × 宽），调用函数计算不同长方形的面积。

第 26-30 天：事件绑定，让网页 “有反应”

给按钮加点击事件，点击后弹提示或改变样式：
html

<button id="myBtn">点我变色button><p id="myText">Hello Worldp><script>// JS部分：获取元素let btn = document.getElementById("myBtn");let text = document.getElementById("myText");// 绑定点击事件btn.onclick = function() {// 点击后改变文字颜色text.style.color = "red";alert("文字变色啦！");};script>

实战任务：做个 “切换图片” 按钮，点击后切换网页上的图片（准备两张图片路径）。

六、零基础常见问题：这些坑别再踩了！

1. 代码没效果，控制台报错 “is not defined”？

十有八九是变量名拼错了，比如把userName写成userNamee，JS 区分大小写，一点错都不行。解决方法：仔细检查变量名拼写，确保声明后再使用。

2. 循环停不下来，浏览器卡住了？

循环条件写错了，比如for (let i = 1; i > 0; i++)，i永远大于 0，导致无限循环。解决方法：检查循环条件，确保有结束的时候（比如i <= 10）。

3. 事件绑定后没反应？

元素还没加载就绑定事件了，比如 JS 代码写在里，而元素在里。解决方法：把 JS 代码放末尾，或用window.onload等页面加载完再执行。

最后说几句实在的

30 天入门 JS 基础，不是说能成为大神，而是能掌握变量、函数、事件这些核心概念，能看懂简单代码，做些基础交互。兔子哥见过很多零基础朋友，刚开始连console.log都写错，坚持练习一个月后，都能独立做计算器、图片切换这些小功能。
别害怕报错，编程就是在报错中进步的，每个错误都是在告诉你 “这里要注意”。遇到问题先自己查代码，查不到就搜 “JS 报错信息”，网上有很多新手踩过的坑和解决办法。
按这个 30 天计划学下来，你会发现 JS 真的不难，甚至很有趣 —— 看着自己写的代码让网页 “动起来”，那种成就感只有试过才知道。动手试试吧，今天就从声明第一个变量开始，30 天后你会感谢现在坚持的自己！

标签： 循序渐进 计算器