本章定位走到这一章说明你已经完成了前端第一阶段也就是 HTML / CSS 的基础学习和第一个综合实战项目。前面你已经具备了这些能力能搭页面结构。能写基础样式。能做简单布局。能做基础响应式适配。能写简单表单。但你会很明显感觉到前面做出来的页面大多还是“静态的”能显示内容能展示样式能让用户看到页面可一旦你想让页面“动起来”问题就来了。例如点击按钮后弹出提示输入内容后给出反馈页面根据逻辑显示不同结果从服务器拿数据并展示这时候HTML 和 CSS 就不够了。这也是 JavaScript 登场的原因。这一章的目标不是马上带你写复杂交互而是先把 JavaScript 最基础、也最关键的三件事讲清楚JavaScript 到底是什么JavaScript 可以在哪里运行JavaScript 代码怎么放进网页里以及报错该怎么看本章学习目标学完这一章后你应该能做到理解 JavaScript 在前端开发中的作用。知道 JavaScript 常见的运行环境是什么。理解浏览器为什么可以执行 JavaScript。掌握在浏览器中引入 JavaScript 的几种基础方式。初步学会使用浏览器控制台查看输出信息。对报错建立基本正确认识知道报错并不等于“完了”。完成最基础的 JavaScript 入门练习输出信息、打印变量、观察错误。一、为什么前端还需要 JavaScript前面你已经学过HTML 负责结构CSS 负责样式那 JavaScript 负责什么你可以先记一句最重要的话JavaScript 负责网页中的逻辑和交互。也就是说它解决的问题通常是用户做了什么操作页面应该如何响应数据应该如何变化页面内容是否需要更新1. 只用 HTML 和 CSS 时页面有什么限制HTML 和 CSS 当然已经很有用了你可以做出结构完整的页面有样式的页面基础响应式页面但如果没有 JavaScript页面通常会缺少这些能力点击按钮后执行逻辑输入内容后立即校验自动切换状态动态加载内容和后端数据交互例如一个按钮光有 HTML 和 CSS你可以把它做得很好看但它点下去之后“发生什么”就需要 JavaScript。2. 用一个最直观的类比来理解三者分工你可以继续沿用前面学过的那个思路HTML决定页面里有什么CSS决定页面长什么样JavaScript决定用户操作后会发生什么所以如果把网页看成一个完整产品HTML 是骨架CSS 是外观JavaScript 是行为和逻辑二、什么是 JavaScriptJavaScript 是一种编程语言。对纯小白来说现在你可以先把“编程语言”理解成一种用来告诉计算机“该做什么”和“按什么规则做”的语言。HTML 更像是在描述页面结构CSS 更像是在写页面样式而 JavaScript 则更像是在写“规则”和“步骤”。例如如果用户点击按钮就弹出一条提示如果输入为空就提醒用户继续填写如果数据加载成功就把结果显示出来这些都已经不只是“展示内容”而是“根据条件执行逻辑”。1. 为什么 JavaScript 适合前端入门后的下一步因为你已经学过页面结构和样式现在最自然的下一步就是让页面拥有交互能力。也就是说你现在开始进入的是从“静态页面”走向“有行为的页面”JavaScript 就是这个转折点。2. JavaScript 不是只给前端用的这一章我们主要站在前端角度学 JavaScript但你也可以先知道JavaScript 不只可以在浏览器里运行。它还可以在其他环境里运行比如Node.js 环境某些桌面应用环境某些服务端环境不过对现在的你来说最重要的是先理解浏览器中的 JavaScript。三、JavaScript 在前端里到底负责什么如果你想快速建立整体感可以先把 JavaScript 在前端里的作用概括成下面几类。1. 第一类响应用户操作例如点击按钮输入文字提交表单切换标签这些操作本身不是结果JavaScript 的作用是用户操作发生后页面该如何响应。2. 第二类处理数据和逻辑比如计算商品总价判断输入是否合法根据不同条件显示不同内容这类问题通常不只是“展示页面”而是要进行判断、处理、计算。3. 第三类操作页面内容JavaScript 还可以修改页面。例如改文字改样式添加新内容删除某些内容这一类能力后面会在 DOM 操作章节中详细展开。现在你先知道JavaScript 可以影响页面最终显示结果。4. 第四类和外部数据打交道例如获取文章列表获取商品信息提交表单数据这也是现代网页非常常见的一类需求。前期你先建立认知不用急着马上掌握全部细节。四、什么叫“运行环境”现在我们开始讲一个对初学者非常重要、但也最容易忽略的问题JavaScript 到底是在哪里运行的这就引出了“运行环境”这个概念。你可以先这样理解运行环境就是代码真正被执行的地方。例如HTML 文件本身不会“执行逻辑”CSS 文件本身也不会“执行逻辑”JavaScript 代码则需要有一个环境去解释和执行1. 为什么要先搞清楚运行环境因为很多初学者刚开始写 JavaScript 时会混淆几件事代码写在哪里代码由谁执行执行结果在哪里看如果这些问题不先搞清楚后面你很容易一边写一边迷糊。所以在正式进入语法前先理解“代码在哪运行”是非常值得的一步。五、浏览器是前端 JavaScript 最重要的运行环境对于前端开发来说最常见也最重要的运行环境就是浏览器。也就是说你在网页里写的 JavaScript通常是由浏览器执行的。比如你在一个 HTML 页面里写scriptconsole.log(你好JavaScript);/script当浏览器加载这个页面时它会读取这段代码并执行。1. 浏览器为什么能执行 JavaScript因为现代浏览器内部带有 JavaScript 引擎。你现在不用记引擎名字也不用理解它内部实现只要先知道浏览器不是只会显示网页它也能执行网页里的 JavaScript 代码。这也是为什么浏览器是前端开发里非常核心的工具。2. 浏览器不仅执行代码还提供很多能力浏览器除了执行 JavaScript还会给它很多能力例如控制台输出操作页面内容监听点击和输入发网络请求也就是说JavaScript 在浏览器里不只是“能跑”而且还能和页面深度配合。六、除了浏览器还有别的运行环境吗有。比如你后面可能会听到Node.js它也是 JavaScript 的运行环境之一。但你现在先不用把它理解得太复杂你只要记住浏览器环境更偏前端页面、交互、DOM、用户操作Node.js 环境更偏脚本、工具、服务端等场景这一章我们重点只看浏览器环境。因为对纯小白来说现在最重要的是先搞明白网页里的 JavaScript 是怎么跑起来的。七、JavaScript 在浏览器里怎么进入页面知道了“浏览器会运行 JavaScript”之后下一个问题自然就是那我应该把 JavaScript 写到哪里在浏览器中最基础的方式就是通过script标签把 JavaScript 放进页面里。你可以先把script理解成告诉浏览器这里有一段 JavaScript 代码你需要执行它。八、第一种方式直接在 HTML 里写script这是最基础、也最适合入门理解的一种方式。例如!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/titleJavaScript 入门示例/title/headbodyh1我的第一个 JavaScript 页面/h1scriptconsole.log(你好JavaScript);/script/body/html当你用浏览器打开这个页面时浏览器会执行script标签中的代码。1. 这种写法适合什么场景它很适合做最小练习快速验证一个小例子学习阶段先理解 JavaScript 是如何进入页面的2. 为什么不建议所有代码都长期直接写在 HTML 里因为随着代码变多会出现这些问题HTML 和 JavaScript 混在一起不容易维护。代码越来越长页面结构不清晰。后续复用不方便。所以这是一种适合入门理解的写法但不是长期大型项目的理想方式。九、第二种方式把 JavaScript 写到单独的.js文件里这是一种更接近真实开发的方式。例如你可以先创建一个文件script.js然后写入console.log(你好JavaScript);再在 HTML 中引入它scriptsrc./script.js/script完整示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title外部 JavaScript 示例/title/headbodyh1我的第一个 JavaScript 页面/h1scriptsrc./script.js/script/body/html1. 为什么更推荐单独文件因为它更符合真实项目的组织方式HTML 管结构CSS 管样式JavaScript 管逻辑这样代码职责更清楚。2. 初学阶段该怎么选你可以先这样理解很小的演示例子直接在 HTML 里写script稍微正式一点的练习尽量写单独的.js文件十、script放在页面哪里更合适这是一个很值得初学者尽早注意的问题。最常见的写法之一是把script放在body标签结束前。例如bodyh1页面标题/h1p页面内容/pscriptsrc./script.js/script/body1. 为什么很多教程喜欢把script放在底部因为浏览器通常是从上到下读取 HTML。把脚本放在底部意味着页面结构先加载出来再执行 JavaScript对初学者来说这样更不容易遇到“页面元素还没加载好代码就先运行了”的问题。2. 这一章你先记什么就够了现在你先记住入门阶段把script放在body结束前是一种很常见、也比较稳妥的写法。后面你会再接触更完整的加载时机概念。十一、JavaScript 代码执行后结果去哪里看这是很多小白第一次写 JavaScript 最容易困惑的地方之一。你写了一段代码比如console.log(你好JavaScript);但页面上看起来什么都没变。于是很多人会想是不是我代码没运行其实不一定。因为不是所有 JavaScript 执行结果都会直接显示在页面里。这时候你就需要认识一个非常重要的工具控制台。十二、什么是控制台Console控制台可以先理解成浏览器里一个专门用来看程序输出、报错和调试信息的地方。你写console.log(你好JavaScript);这句代码的意思就是请把这段信息输出到控制台。1. 控制台为什么对初学者非常重要因为在 JavaScript 学习早期你会经常用它做这些事情打印一段文字看变量的值验证代码有没有执行到某一步查看报错信息可以说控制台是你和 JavaScript 运行结果之间的第一座桥。十三、怎么打开浏览器控制台在大多数现代浏览器中你可以这样打开打开网页右键页面点击“检查”或“Inspect”在开发者工具中找到Console面板你也可以使用快捷键打开开发者工具再切换到控制台。1. 第一次打开控制台时要注意什么你可能会看到很多信息不用慌。现在你最需要关注的只有两类你自己用console.log打印出来的内容浏览器显示出来的报错信息这两类信息会是你后面学习 JavaScript 最常用的反馈来源。十四、console.log是什么console.log是 JavaScript 中最常用的调试输出方式之一。例如console.log(欢迎学习 JavaScript);这行代码执行后会在控制台打印出欢迎学习 JavaScript1. 为什么初学阶段要多用console.log因为它能帮你确认很多事情代码有没有执行执行到哪一步了某个值到底是什么比如你后面学变量、条件判断、函数时console.log都会非常有用。2. 初学阶段最常见的三种用法打印一段固定文字console.log(页面加载成功);打印一个值constuserName小白;console.log(userName);打印提示文字和一个值constage18;console.log(当前年龄是,age);这第三种写法很适合你后面调试变量。十五、报错是什么为什么报错不是坏事这一节是本章最值得建立正确心态的地方。很多纯小白第一次看到报错时第一反应是完了我写坏了。但其实从学习角度看报错不是坏事它反而是非常有价值的反馈。因为报错至少说明了一件事浏览器已经在尝试执行你的代码了只是某个地方出了问题。如果没有任何反馈反而更难排查。1. 报错在告诉你什么通常一条报错至少会告诉你这些信息中的一部分什么地方出问题了可能是什么类型的问题大致在哪一行出错对初学者来说你现在不需要一眼就看懂所有报错细节但要先建立一个非常重要的态度不要看到报错就害怕先试着读它在说什么。十六、一个简单的报错例子比如你写console.log(开始运行);helloWorld();如果helloWorld并没有被定义浏览器就会报错。这时候你通常会在控制台里看到错误类型报错位置你现在可以先把这种情况理解成代码执行到这里了但浏览器找不到这个东西。1. 为什么故意制造一个小错误很有学习价值因为它能帮你第一次真正认识报错长什么样报错会出现在哪里报错不是神秘黑盒而是可以观察的线索这也是为什么本章练习会建议你故意写一个小错误。十七、初学者该怎么看一条报错你现在可以用一个非常简单的三步法。1. 先看有没有红色错误信息控制台里错误通常会比较醒目。2. 再看大概说的是哪类问题例如找不到某个东西语法写错了某一行执行失败了3. 最后看位置通常报错会提示大概在哪一行、哪个文件附近出问题。这对排查非常重要。你不需要一开始就完全读懂报错语义但一定要先养成“看报错位置”的习惯。十八、一个最基础的完整示例让页面和控制台同时有反馈这一节我们做一个非常适合入门的完整小例子。它会做三件事页面里有可见内容控制台里有输出你能第一次看到 JavaScript 真的在运行1. HTML 文件!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/titleJavaScript 入门示例/title/headbodyh1JavaScript 入门/h1pidmessage这里稍后会显示欢迎语。/pscriptconsole.log(页面中的 JavaScript 已经开始运行);// 这里先把它理解成“用 JavaScript 改页面里的文字”后面会专门系统学习 DOM 操作document.getElementById(message).textContent欢迎来到 JavaScript 的世界;/script/body/html这个例子里你要重点观察打开页面后控制台会打印一句话。页面里的段落文字也会被改掉。你现在不用急着深究document.getElementById的细节只要先知道JavaScript 不只是能在后台运行它还能影响页面内容。十九、一个更接近真实开发的版本拆成index.html和script.js如果你想更贴近真实写法可以再看这个版本。1. HTML!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8/title外部 JavaScript 文件示例/title/headbodyh1JavaScript 外部文件示例/h1pidmessage等待 JavaScript 更新内容.../pscriptsrc./script.js/script/body/html2.script.jsconsole.log(script.js 已成功加载);constwelcomeMessage你好这是来自外部 JavaScript 文件的内容;// 先体验 JavaScript 可以更新页面内容后面章节会专门展开讲 DOM 是什么document.getElementById(message).textContentwelcomeMessage;这个版本最大的价值是让你感受到HTML 和 JavaScript 可以分开浏览器会去读取外部.js文件JavaScript 文件里的代码同样会执行二十、第一次理解“代码在哪运行”走到这里你其实已经可以回答一个非常重要的问题了JavaScript 代码并不是飘在空中它是被浏览器读取并执行的。更具体一点说你把 JavaScript 写进 HTML 或.js文件浏览器加载页面浏览器执行这些 JavaScript 代码执行结果可能体现在控制台输出页面变化报错信息这一层认知非常关键。因为后面你学变量、条件、函数、事件时所有内容都建立在这个前提上JavaScript 代码是在某个运行环境中被真正执行的。二十一、新手最容易踩的坑1. 写了 JavaScript但不知道结果该去哪里看有些结果显示在页面上有些结果显示在控制台里。不要只盯着页面也要学会打开Console看输出。2.script文件路径写错例如scriptsrc./scripts.js/script但你的真实文件叫script.js那浏览器当然找不到它。这类问题非常常见。3. 报错一出现就慌这真的很常见但没必要。报错不代表你不适合学编程它只是说明当前这段代码里有一个浏览器执行不了的问题。你要做的不是害怕而是练习观察。4. 还没理解运行环境就急着背语法这样很容易学成“会背一点写法但不知道代码为什么会生效”。所以这一章看起来很基础但其实是在帮你把地基打稳。5. 把报错和失败理解成同一件事不是的。很多时候报错恰恰是学习进展的证明因为说明代码运行了浏览器在反馈你有线索可以继续修二十二、本章实践练习这一章的练习重点不是做复杂页面而是让你真的亲眼看到 JavaScript“开始运行”。1. 练习 1在页面中输出一句欢迎语请你新建一个 HTML 页面包含一个段落例如pidmessage这里会显示欢迎语/p然后在script中用 JavaScript 把它改成欢迎学习 JavaScript你现在不需要完全理解每个 API只要先体验“JavaScript 可以改页面”这件事。2. 练习 2使用console.log打印变量和值例如constuserName小白;constcity北京;console.log(userName);console.log(当前城市,city);练习时重点观察哪些内容出现在控制台控制台里显示格式是什么3. 练习 3故意写一个小错误例如你可以写console.log(开始执行);notDefinedFunction();然后观察控制台里会出现什么报错大概提示了什么信息报错位置在哪里做完后再把错误改回来。这个练习特别有价值因为它会让你第一次从“害怕报错”转向“观察报错”。4. 练习 4尝试使用外部script.js请把原本写在 HTML 里的 JavaScript拆到一个单独的script.js文件里。重点观察页面是否仍然能正常运行控制台输出是否还在这一步能帮你开始建立更像真实项目的代码组织方式。二十三、学习重点提示这一章最重要的不是记住很多语法而是先把 JavaScript 的角色和运行方式想明白。请重点记住JavaScript 是前端里负责逻辑和交互的语言。浏览器是前端 JavaScript 最重要的运行环境。JavaScript 可以直接写在 HTML 的script中也可以写在单独的.js文件中。控制台是你观察代码输出和报错的关键入口。报错不是坏事能看懂报错是入门的重要一步。在正式学复杂语法前先理解“代码在哪运行”会让后面学习更稳。如果你只记一句话请记住写下 JavaScript 代码只是第一步更重要的是知道它由谁执行、在哪里看结果、出错后怎么观察。二十四、本章小结这一章是 JavaScript 阶段的真正起点。你已经学习了JavaScript 在前端中的作用什么是运行环境浏览器为什么能运行 JavaScript如何在页面中引入 JavaScript控制台是什么为什么报错并不可怕这一步看起来不像“写了很多代码”但它非常重要。因为后面你所有真正的 JavaScript 学习都会建立在这一章的地基之上。如果这一章理解清楚了后面你在学变量、条件判断、函数、DOM 操作时就会更容易明白这些代码到底是怎么被执行起来的。二十五、课后思考题请你思考下面几个问题为什么说 JavaScript 是前端里负责逻辑和交互的语言浏览器和 JavaScript 的关系你现在会怎么解释为什么控制台对 JavaScript 初学者非常重要为什么报错不应该被理解成“彻底失败”为什么在学习语法前先理解“代码在哪运行”很有价值建议你用自己的话把答案写下来。只要你能把这些问题讲清楚说明你已经真正迈进 JavaScript 学习阶段了。二十六、下一章预告下一章我们会正式进入 JavaScript 最基础、也最核心的内容之一从零开始学前端 | 第十二章变量、数据类型与运算到那时你会开始真正写出能“存值、取值、比较和计算”的代码也会第一次系统接触编程思维中的数据概念。