今天终于把 JS 入门啃下来了 写给未来的自己以及同样刚开始学前端的人。不是教程文档那种冷冰冰的感觉就是边学边记——能跑通就算赢先说结论 HTML 是骨架CSS 是皮肤JS 是神经。页面能动起来靠的就是它。一开始看到document.getElementById会觉得好高级……后来发现就三板斧找到东西 → 听到点击 → 改掉内容会了这三步今天就算毕业了 ✨JS 到底搁哪浏览器不只是“显示网页”它还能跑程序。HTML 最后面挂一行scriptsrcjs-demo.js/script 小提醒尽量放在/body前面。为啥因为 JS 要去找按钮。你要是写在最上面按钮还没出生它就找容易报错我差点踩过这个坑 变量给值起外号 ️varn0;varmsg你好;就这么朴素。n是个小盒子里面先放了0。后面想加一nn1;常见几种货类型长啥样人话数字90拿来算的字符串你好拿来显示的文字布尔true/false对 / 错成立 / 不成立⚠️ 输入框里拿出来的默认是字符串要比大小记得varscoreNumber(scoreInput.value);不然90和数字90你会怀疑人生。相等判断请用这题面试也爱问先记结论写法我会不会用为啥✅ 日常就用它值、类型都要一样老实❌ 能不用就不用会偷偷转换类型坑人55// true 没毛病55// false 一个数字一个文字55// true ……它居然说对诡异所以相等不等!。搞定。DOM原来就是这个 老师一说 DOM 我以为要上天。结果就是浏览器把 HTML 变成一棵“能动手脚的树”JS 才能找节点、改文字。你写过的这些全是 DOM代码在干嘛getElementById(...)按身份证找人textContent ...改嘴里说的话onclick ...等人点一下classList.toggle(...)换衣服加/删 class最核心的一套点按钮改文字 HTML 先摆好pidmsg还没点过按钮/pbuttonidbtn-text点我改文字/buttonJS 再出手varbtnTextdocument.getElementById(btn-text);varmsgdocument.getElementById(msg);btnText.onclickfunction(){msg.textContent你好前端按钮被点过了。;};人话版流程 先用 id 找到按钮和文字 用户点下去 执行大括号里的代码 ✏️ 页面文字变了 —— 哇活了function () { ... }先别怕就当“一包待执行的指令”就行。计数器脑子和页面要同步 varn0;btnPlus.onclickfunction(){nn1;// 先改自己记住的数字countEl.textContentn;// 再贴到页面上};只改页面、不改n下次点会乱。只改n、不改页面你自己知道加了用户看不见 两个都要改。if人生就是选择题 岔路口if(条件){// 成立走这里}elseif(另一个条件){// 再问问看}else{// 前面都不行走兜底}密码小例子 if(value123456){pwdResult.textContent密码正确;}else{pwdResult.textContent密码错误;}分数等级 if(score90){gradeResult.textContent优秀;}elseif(score60){gradeResult.textContent及格;}else{gradeResult.textContent不及格;}从上往下问第一个中了就停不会全跑一遍。顺手记几个符号比大小%取余num % 2 0→ 偶数这个有点好玩今晚清单 ✅学完能打勾的知道 JS 干啥的会用var相等用会getElementById会写onclick会改textContent/ 读value会if / else知道这就是 DOM其实没那么吓人随口自测 为啥 script 喜欢放底部和你选哪个为啥getElementById(msg)找的是啥一串else if会不会全执行答得上来 今天没白学 下一步循环for重复劳动交给机器自己封装函数别复制粘贴一百遍数组一串数据排排坐写到这里先收工。前端三大件我算是摸到 JS 的门把手了——门后面还有很长但至少今天推开了一道缝 ️