文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文是「千古前端图文教程」JavaScript 基础篇的第一堂实战课讲解如何写出并运行你的第一行 JavaScripthello world。核心内容包括JavaScript 代码的三种引入方式行内式、内嵌式、外链式及各自的适用场景、window.onload与noscript两个关键的降级与延迟执行技巧、四条入门必知的语法规则、前端三种语言HTML / CSS / JavaScript的注释规范与 JSDoc 文档注释以及alert()、console.log()、confirm()、prompt()、document.write()五种常用输出语句的用法与区别。学完本文你可以在浏览器中独立编写并调试一段可交互的前端脚本为后续学习变量、函数与 DOM 操作打下基础。一、JS 代码的书写位置三种引入方式JS 代码写在哪里这个问题也可以理解成引入 JS 代码有哪几种方式共有三种方式且与 CSS 的引入方式类似行内式写在 HTML 标签内部。内嵌式内联式写在script标签中。外链式引入外部 JS 文件。方式 1行内式将单行或少量 JS 代码写在 HTML 标签的事件属性中以on开头的属性如onclick点击事件input typebutton value点我点我 onclickalert(千古壹号 Hello 方式1) /完整的可执行代码如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body input typebutton value点我点我 onclickalert(千古壹号 Hello 方式1) / /body /html需要理解的关键点onclick属于 JavaScript 的事件属性。在仓库的《事件简介》一节中有更系统的讲解事件有三要素——事件源、事件、事件驱动程序。这里的input标签是事件源onclick是事件alert(...)就是事件被触发后执行的事件驱动程序。事件属性中写入的 JS 代码会在事件被触发时才执行。不推荐在生产中使用这种写法原因是可读性差尤其是需要编写大量 JS 代码时很难维护引号多层嵌套时容易出错。关于代码中的引号在 HTML 标签中推荐使用双引号在 JS 中推荐使用单引号这样能有效避免引号冲突。方式 2内嵌式内联式在 HTML 页面的body标签里放入script typetext/javascript/script标签对并在script里书写 JavaScript 代码!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script typetext/javascript // 在这里写 js 代码 alert(千古壹号 hello 方式2); console.log(qianguyihao hello 方式2); /script /body /html需要理解的关键点type属性中的text表示纯文本因为 JavaScript 代码本身就是纯文本。当然type属性可以省略因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。在仓库的《HTML5详解》等文档中可以看到大量省略type直接书写script的代码示例。可以将多行 JS 代码写到script标签中。内嵌式 JS 是学习时最常用的书写方式适合课程练习与临时调试。方式 3外链式引入独立的 JS 文件!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body !-- 外链式引入外部的 js 文件这个 utils.js 文件与当前的 html 文件处于同一级目录 -- script srcutils.js/script /body /html需要理解的关键点上面的script标签依然放在body里可以与内嵌的 JS 代码并列放置。一旦script标签通过src引入了外部 JS 文件这个标签内部就不可以再写 JS 代码。方式 2 和方式 3 不能混用——同一个script标签要么内嵌代码要么引入外部文件二者只能取其一。总结在实战开发中基本都采用方式 3外链式。将 HTML 文件与 JS 文件分离有利于代码的结构化和复用符合高内聚、低耦合的思想。很少有人会把一大堆 JS 代码塞进单个 HTML 文件里。二、拓展知识一window.onload —— 先加载最后执行上面的三种方式有一个共同点JS 代码都写在body标签内准确来说是在页面标签元素如title的后面、/body结束标签的前面。为什么一般按这个顺序写因为浏览器默认遵循 HTML 文档的加载顺序即从上至下解析网页这句话很重要。所以通常情况下我们会把 JS 代码写在body内部的末尾。这里引出一个关键问题当你需要通过 JS操作界面上的标签元素时如果 JS 代码或script标签被写进了head标签中或者写在 HTML 标签元素的前面那么这段 JS 是无效的——因为标签元素此时还没来得及加载自然无法操作。关于操作页面元素可以进一步阅读仓库的《DOM简介和DOM操作》DOM 正是 JS 操作页面元素的 API 规范。重点来了当你需要通过 JS 操作界面上的标签元素又实在想把 JS 写到head标签中时就必须用window.onload将 JS 代码包裹起来head window.onload function(){ // 这里可以写操作界面元素的JS代码等页面加载完毕后再执行。这里面的JS代码会延迟执行。 ... } /headwindow.onload的含义是等界面上所有内容都加载完毕后不仅要等文本加载完毕还要等图片等资源加载完毕再执行window.onload内部的代码。它做到了先加载最后执行也就是延迟执行。我们可以根据具体需要决定将window.onload写在head标签中或者写在script标签中。三、拓展知识二noscript标签 —— 浏览器不支持 JS 时的降级方案如果有些浏览器不支持 JS 脚本或者用户主动禁用了浏览器的 JS 脚本该如何给用户一个友好的提示我们可以通过noscript标签作为降级的处理方案。noscript是一种 HTML 标签用于提供在浏览器禁用 JavaScript 或无法执行 JavaScript 脚本时的替代内容。它允许开发者在需要时向用户显示备用内容有助于提高网站的可访问性和用户体验。基础语法noscript !-- 降级方案这里放置备用内容当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -- p请启用JavaScript以获得最佳网站体验。/p /noscript使用说明noscript标签内部可以包含任何 HTML 内容通常包括用于向用户传达信息或提供备用功能的文本、图像、链接等。noscript的内容仅在浏览器不支持或禁用 JS 的情况下才会显示。也就是说如果用户的浏览器支持 JS 脚本noscript里的内容将不会显示会被忽略如果浏览器不支持 JS或用户关闭了 JS则会显示noscript里的内容。四、JavaScript 一些简单的语法规则学习编程语言是有规律可循的程序会有相同的部分这些部分就是一种规定不能更改我们称之为语法。先来了解四条最基础的语法规则。规则 1JS 对换行、缩进、空格不敏感语句以分号结尾也就是说下面两段代码是完全等价的代码一script typetext/javascript alert(今天蓝天白云); alert(我很高兴); /script等价于代码二script typetext/javascript alert(今天蓝天白云);alert(我很高兴); /script规则 2每一条语句末尾建议加上分号当存在换行符line break时大多数情况下可以省略分号——JavaScript 会将换行符理解成隐式的分号进而自动添加分号。也就是说分号不是必须加的如果不写分号浏览器会在换行符的位置自动添加分号但会消耗一些系统资源和性能甚至可能添加错误导致一些奇怪的 bug。因此规范做法是每条语句末尾显式写上分号。规则 3所有的符号都是英文的括号、引号、分号等符号都必须使用英文半角符号。如果你用的是搜狗拼音建议不要用 Shift 切换中英文可以在搜狗软件里进行设置否则很容易输入中文的分号建议用Ctrl Space切换中英文输入法。规则 4JS 严格区分大小写HTML 和 CSS 不区分大小写但是JS 严格区分大小写。例如alert和Alert、console和Console在 JS 中是截然不同的标识符写错大小写会导致程序报错。五、前端代码的注释注释即解释、注解。注释有利于提高代码的可读性且有利于程序员之间的沟通和工作交接。注释可以用来解释某一段代码的功能和作用通过注释还可以补充代码中未体现出来的部分——代码只是开发工作的结果注释可以阐述开发工作的过程、思路、注意事项以及踩过的坑。注释可以是任何文字可以写中文。注意不要把 HTML、CSS、JavaScript 三者的注释格式搞混淆了。HTML 的注释格式!-- 我是 HTML 注释 --举例!--头部开始-- div classheader/div !--头部结束-- !--内容开始-- div classmain/div !--内容结束-- !--底部开始-- div classfooter/div !--底部结束--CSS 的注释举例style typetext/css /* 我是 CSS 注释 */ p { font-weight: bold; font-style: italic; color: red; } /style注意CSS 只有/* */这种注释没有//这种注释而且注释要写在style标签里面才算生效。JavaScript 的注释单行注释// 我是注释多行注释写法 1/* 多行注释1 多行注释2 */多行注释写法 2/** * 多行注释1 * 多行注释2 */VS Code 中的注释快捷键补充在 VS Code 中单行注释的快捷键是Ctrl /多行注释的默认快捷键是Alt Shift A。如果觉得多行注释的默认快捷键不方便可以自行修改VS Code -- 首选项 -- 键盘快捷方式 -- 查找注释 -- 将原来的快捷键修改为其他快捷键比如 Ctrl Shift /。注释的高级用法文档注释JSDocJSDoc是 JavaScript 中用于文档注释的一种标准化格式。写完 JSDoc 注释后再通过相关工具开发者便可以为函数、方法、类和变量等添加注释以便生成可读性强的 API 文档。以下是一个基本的 JSDoc 注释示例/** * 这是一个示例函数用于求两个数字的和。 * param {number} num1 - 第一个数字 * param {number} num2 - 第二个数字 * returns {number} - 两个数字的和 */ function sum(num1, num2) { return num1 num2; }使用效果鼠标悬停在函数调用的地方就能看到关于这个函数的文档说明而不需要定位到函数的源码处。JSDoc 经常应用于工具函数开发者甚至可以借助 JSDoc 相关工具生成函数的一系列 API 文档并部署到网站上方便其他开发者查阅——这种协作方式在日常开发中极为常见。另外需要说明VS Code 默认集成了文档注释的显示功能可以在单独的 JS 文件中显示文档注释的效果但无法在 HTML 文件中显示效果。对注释的认知很多人认为代码注释是多余的理由是注释太多说明代码写得不清晰代码更新的同时如果注释没更新那段注释就成了磁盘上的垃圾误导他人。还有人认为注释应该尽可能详细像写小作文一样。这两种观点都不全面写注释的真正理由在于注释有利于提高代码的可读性且有利于程序员之间的沟通和工作交接。并非所有注释都是必要的。注释不应该用来解释某些代码正在做什么——如果代码无法清楚到解释自己那么代码需要变得更简单。但也有例外正则表达式和复杂算法通常能从解释它们正在做什么的注释中获益很多。注释在解释为什么某些代码存在时很有用。大多数注释都针对代码本身无法包含的信息例如决策背后的推理、业务流程、业务逻辑、注意事项、踩坑经验总结、参考链接。注释的本质是文档需要持续更新维护、新陈代谢。文档也会过期但不能因噎废食——即便文档过期至少它记载了曾经的开发记录。关于注释还有一个悖论我最喜欢的事情是别人写注释我最不喜欢的事情是自己写注释。无论如何建议各位开发者多写注释、多写技术文档越详细越好、越系统越好这样才能提高协作效率促进良性循环。六、JavaScript 输出语句在下面的这几个输出语句中按照使用频率排序console.log()用得最多其次是alert()其他语句用得较少了解即可。弹窗alert() 语句要学习的第一个语句就是alert语句。代码举例如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script alert(千古壹号); /script /body /htmlalert中文翻译为警报、警告的用途是弹出警告框。它会在弹窗中显示一条信息并等待用户按下 OK。如果代码中写了两个alert()语句网页的效果是弹出第一个警告框点击确定后继续弹出第二个警告框。补充该方法只能传入一个参数。控制台输出console.log() 打印日志console.log()用于在浏览器的控制台中输出信息里面可以传入一个或多个参数常用于代码调试和测试。console表示控制台log表示输出。括号里可以写字符串、数字、变量、表达式等。语法格式console.log(传入一个参数 arg1); // 传入多个参数时可以用逗号隔开 console.log(传入多个参数, arg2, arg3);控制台是程序员调试程序的地方。可以使用 console 语句打印日志在控制台的 console 面板查看打印的内容测试程序是否运行正常。在 Chrome 浏览器中按F12即可打开控制台选择「console」栏查看打印内容。console 语句可以设置不同的打印等级console.log(千古壹号1); // 普通打印 console.warn(千古壹号2); // 警告打印 console.error(千古壹号3); // 错误打印不同的打印等级区别主要在于颜色、背景上的差别方便肉眼区分、过滤信息。做前端开发时需要经常使用控制台调试甚至可以直接在控制台输入 JS 语句并打印执行结果。总结alert()主要用来显示消息给用户console.log()用来给程序员做调试用。弹窗confirm() 语句含确认/取消代码举例如下var result confirm(你听说过千古壹号吗); console.log(result);代码运行后页面上会显示一个弹窗弹窗上有确认和取消两个按钮点击确定返回true点击取消返回false。返回值可以通过变量接收并在控制台查看——这正是 JS 中用变量接收函数返回值的最早实践关于变量的详细知识可参考仓库的《常量和变量》。弹出输入框prompt() 语句prompt()专门弹出能够让用户输入内容的对话框用得少测试的时候偶尔会用。JS 代码如下var a prompt(请随便输入点什么东西吧); console.log(a);上方代码中用户输入的内容将被传递到变量a里面并在控制台打印出来。alert() 和 prompt() 的区别alert()语句中可以输出数字和字符串如果要输出字符串则必须用引号括起来。而prompt()语句中用户不管输入什么内容都是字符串。prompt()会返回用户输入的内容我们可以用一个变量来接收用户输入的内容。网页内容区域输出document.write() 语句该方法的作用是向网页中写入文本内容可以是 HTML 代码传入的参数可以是一个或多个字符串。代码举例document.write(千古前端图文教程);页面效果网页正文区域直接显示千古前端图文教程这段文字。需要注意document.write()会直接改写文档流实际项目中使用较少多用于学习演示。七、本篇小结与下一步本文完成了一次完整的 JavaScript 入门闭环主题核心结论三种引入方式行内式不推荐、内嵌式学习常用、外链式实战标准加载顺序浏览器从上至下解析 HTMLJS 写在 body 末尾操作 DOM 需借助window.onload延迟执行降级方案noscript在浏览器禁用 JS 时显示备用内容语法规则分号结尾、英文符号、区分大小写、对换行缩进不敏感注释规范HTML 用!-- --、CSS 用/* */、JS 用//与/** */进阶可用 JSDoc 生成 API 文档输出语句alert()面向用户、console.log()面向开发者调试、confirm()返回布尔、prompt()接收输入、document.write()写入页面学完本文后建议按顺序继续阅读仓库中同一目录下的进阶篇章《常量和变量》理解var/let/const与字面量、《事件简介》理解事件三要素、《DOM简介和DOM操作》理解 JS 如何操作页面元素逐步构建完整的 JavaScript 知识体系。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐千古前端图文教程JavaScript 正则表达式入门与实战RegExp 对象、匹配模式与 String 正则方法全解千古前端图文教程JavaScript 正则表达式入门与实战RegExp 对象、匹配模式与 String 正则方法全解 正则表达式是 JavaScript文档教程前端千古前端图文教程JavaScript async 异步函数详解——声明语法、返回值规律与 async/await 实战千古前端图文教程JavaScript async 异步函数详解——声明语法、返回值规律与 async/await 实战 本文是「千古前端图文教程」Web 前端文档教程前端千古前端图文教程用 innerHTML 动态创建 DOM 元素的三种方式与实战详解千古前端图文教程用 innerHTML 动态创建 DOM 元素的三种方式与实战详解 导读 在前端开发中页面内容往往需要根据用户操作或服务器数据动态生成这时文档教程前端上一篇Flair 自定义数据集加载完全指南ColumnCorpus、CSV 与 FastText 格式实战下一篇GSD Beta 特性实战/gsd-ultraplan-phase 将 Plan Phase 搬进 Claude Code 云端浏览器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 千古前端图文教程：开始写JavaScript —— 三种引入方式、基础语法规则与常用输出语句实战
文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本文是「千古前端图文教程」JavaScript 基础篇的第一堂实战课讲解如何写出并运行你的第一行 JavaScripthello world。核心内容包括JavaScript 代码的三种引入方式行内式、内嵌式、外链式及各自的适用场景、window.onload与noscript两个关键的降级与延迟执行技巧、四条入门必知的语法规则、前端三种语言HTML / CSS / JavaScript的注释规范与 JSDoc 文档注释以及alert()、console.log()、confirm()、prompt()、document.write()五种常用输出语句的用法与区别。学完本文你可以在浏览器中独立编写并调试一段可交互的前端脚本为后续学习变量、函数与 DOM 操作打下基础。一、JS 代码的书写位置三种引入方式JS 代码写在哪里这个问题也可以理解成引入 JS 代码有哪几种方式共有三种方式且与 CSS 的引入方式类似行内式写在 HTML 标签内部。内嵌式内联式写在script标签中。外链式引入外部 JS 文件。方式 1行内式将单行或少量 JS 代码写在 HTML 标签的事件属性中以on开头的属性如onclick点击事件input typebutton value点我点我 onclickalert(千古壹号 Hello 方式1) /完整的可执行代码如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body input typebutton value点我点我 onclickalert(千古壹号 Hello 方式1) / /body /html需要理解的关键点onclick属于 JavaScript 的事件属性。在仓库的《事件简介》一节中有更系统的讲解事件有三要素——事件源、事件、事件驱动程序。这里的input标签是事件源onclick是事件alert(...)就是事件被触发后执行的事件驱动程序。事件属性中写入的 JS 代码会在事件被触发时才执行。不推荐在生产中使用这种写法原因是可读性差尤其是需要编写大量 JS 代码时很难维护引号多层嵌套时容易出错。关于代码中的引号在 HTML 标签中推荐使用双引号在 JS 中推荐使用单引号这样能有效避免引号冲突。方式 2内嵌式内联式在 HTML 页面的body标签里放入script typetext/javascript/script标签对并在script里书写 JavaScript 代码!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script typetext/javascript // 在这里写 js 代码 alert(千古壹号 hello 方式2); console.log(qianguyihao hello 方式2); /script /body /html需要理解的关键点type属性中的text表示纯文本因为 JavaScript 代码本身就是纯文本。当然type属性可以省略因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。在仓库的《HTML5详解》等文档中可以看到大量省略type直接书写script的代码示例。可以将多行 JS 代码写到script标签中。内嵌式 JS 是学习时最常用的书写方式适合课程练习与临时调试。方式 3外链式引入独立的 JS 文件!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body !-- 外链式引入外部的 js 文件这个 utils.js 文件与当前的 html 文件处于同一级目录 -- script srcutils.js/script /body /html需要理解的关键点上面的script标签依然放在body里可以与内嵌的 JS 代码并列放置。一旦script标签通过src引入了外部 JS 文件这个标签内部就不可以再写 JS 代码。方式 2 和方式 3 不能混用——同一个script标签要么内嵌代码要么引入外部文件二者只能取其一。总结在实战开发中基本都采用方式 3外链式。将 HTML 文件与 JS 文件分离有利于代码的结构化和复用符合高内聚、低耦合的思想。很少有人会把一大堆 JS 代码塞进单个 HTML 文件里。二、拓展知识一window.onload —— 先加载最后执行上面的三种方式有一个共同点JS 代码都写在body标签内准确来说是在页面标签元素如title的后面、/body结束标签的前面。为什么一般按这个顺序写因为浏览器默认遵循 HTML 文档的加载顺序即从上至下解析网页这句话很重要。所以通常情况下我们会把 JS 代码写在body内部的末尾。这里引出一个关键问题当你需要通过 JS操作界面上的标签元素时如果 JS 代码或script标签被写进了head标签中或者写在 HTML 标签元素的前面那么这段 JS 是无效的——因为标签元素此时还没来得及加载自然无法操作。关于操作页面元素可以进一步阅读仓库的《DOM简介和DOM操作》DOM 正是 JS 操作页面元素的 API 规范。重点来了当你需要通过 JS 操作界面上的标签元素又实在想把 JS 写到head标签中时就必须用window.onload将 JS 代码包裹起来head window.onload function(){ // 这里可以写操作界面元素的JS代码等页面加载完毕后再执行。这里面的JS代码会延迟执行。 ... } /headwindow.onload的含义是等界面上所有内容都加载完毕后不仅要等文本加载完毕还要等图片等资源加载完毕再执行window.onload内部的代码。它做到了先加载最后执行也就是延迟执行。我们可以根据具体需要决定将window.onload写在head标签中或者写在script标签中。三、拓展知识二noscript标签 —— 浏览器不支持 JS 时的降级方案如果有些浏览器不支持 JS 脚本或者用户主动禁用了浏览器的 JS 脚本该如何给用户一个友好的提示我们可以通过noscript标签作为降级的处理方案。noscript是一种 HTML 标签用于提供在浏览器禁用 JavaScript 或无法执行 JavaScript 脚本时的替代内容。它允许开发者在需要时向用户显示备用内容有助于提高网站的可访问性和用户体验。基础语法noscript !-- 降级方案这里放置备用内容当浏览器禁用 JS 或者浏览器不支持 JS 时将显示 -- p请启用JavaScript以获得最佳网站体验。/p /noscript使用说明noscript标签内部可以包含任何 HTML 内容通常包括用于向用户传达信息或提供备用功能的文本、图像、链接等。noscript的内容仅在浏览器不支持或禁用 JS 的情况下才会显示。也就是说如果用户的浏览器支持 JS 脚本noscript里的内容将不会显示会被忽略如果浏览器不支持 JS或用户关闭了 JS则会显示noscript里的内容。四、JavaScript 一些简单的语法规则学习编程语言是有规律可循的程序会有相同的部分这些部分就是一种规定不能更改我们称之为语法。先来了解四条最基础的语法规则。规则 1JS 对换行、缩进、空格不敏感语句以分号结尾也就是说下面两段代码是完全等价的代码一script typetext/javascript alert(今天蓝天白云); alert(我很高兴); /script等价于代码二script typetext/javascript alert(今天蓝天白云);alert(我很高兴); /script规则 2每一条语句末尾建议加上分号当存在换行符line break时大多数情况下可以省略分号——JavaScript 会将换行符理解成隐式的分号进而自动添加分号。也就是说分号不是必须加的如果不写分号浏览器会在换行符的位置自动添加分号但会消耗一些系统资源和性能甚至可能添加错误导致一些奇怪的 bug。因此规范做法是每条语句末尾显式写上分号。规则 3所有的符号都是英文的括号、引号、分号等符号都必须使用英文半角符号。如果你用的是搜狗拼音建议不要用 Shift 切换中英文可以在搜狗软件里进行设置否则很容易输入中文的分号建议用Ctrl Space切换中英文输入法。规则 4JS 严格区分大小写HTML 和 CSS 不区分大小写但是JS 严格区分大小写。例如alert和Alert、console和Console在 JS 中是截然不同的标识符写错大小写会导致程序报错。五、前端代码的注释注释即解释、注解。注释有利于提高代码的可读性且有利于程序员之间的沟通和工作交接。注释可以用来解释某一段代码的功能和作用通过注释还可以补充代码中未体现出来的部分——代码只是开发工作的结果注释可以阐述开发工作的过程、思路、注意事项以及踩过的坑。注释可以是任何文字可以写中文。注意不要把 HTML、CSS、JavaScript 三者的注释格式搞混淆了。HTML 的注释格式!-- 我是 HTML 注释 --举例!--头部开始-- div classheader/div !--头部结束-- !--内容开始-- div classmain/div !--内容结束-- !--底部开始-- div classfooter/div !--底部结束--CSS 的注释举例style typetext/css /* 我是 CSS 注释 */ p { font-weight: bold; font-style: italic; color: red; } /style注意CSS 只有/* */这种注释没有//这种注释而且注释要写在style标签里面才算生效。JavaScript 的注释单行注释// 我是注释多行注释写法 1/* 多行注释1 多行注释2 */多行注释写法 2/** * 多行注释1 * 多行注释2 */VS Code 中的注释快捷键补充在 VS Code 中单行注释的快捷键是Ctrl /多行注释的默认快捷键是Alt Shift A。如果觉得多行注释的默认快捷键不方便可以自行修改VS Code -- 首选项 -- 键盘快捷方式 -- 查找注释 -- 将原来的快捷键修改为其他快捷键比如 Ctrl Shift /。注释的高级用法文档注释JSDocJSDoc是 JavaScript 中用于文档注释的一种标准化格式。写完 JSDoc 注释后再通过相关工具开发者便可以为函数、方法、类和变量等添加注释以便生成可读性强的 API 文档。以下是一个基本的 JSDoc 注释示例/** * 这是一个示例函数用于求两个数字的和。 * param {number} num1 - 第一个数字 * param {number} num2 - 第二个数字 * returns {number} - 两个数字的和 */ function sum(num1, num2) { return num1 num2; }使用效果鼠标悬停在函数调用的地方就能看到关于这个函数的文档说明而不需要定位到函数的源码处。JSDoc 经常应用于工具函数开发者甚至可以借助 JSDoc 相关工具生成函数的一系列 API 文档并部署到网站上方便其他开发者查阅——这种协作方式在日常开发中极为常见。另外需要说明VS Code 默认集成了文档注释的显示功能可以在单独的 JS 文件中显示文档注释的效果但无法在 HTML 文件中显示效果。对注释的认知很多人认为代码注释是多余的理由是注释太多说明代码写得不清晰代码更新的同时如果注释没更新那段注释就成了磁盘上的垃圾误导他人。还有人认为注释应该尽可能详细像写小作文一样。这两种观点都不全面写注释的真正理由在于注释有利于提高代码的可读性且有利于程序员之间的沟通和工作交接。并非所有注释都是必要的。注释不应该用来解释某些代码正在做什么——如果代码无法清楚到解释自己那么代码需要变得更简单。但也有例外正则表达式和复杂算法通常能从解释它们正在做什么的注释中获益很多。注释在解释为什么某些代码存在时很有用。大多数注释都针对代码本身无法包含的信息例如决策背后的推理、业务流程、业务逻辑、注意事项、踩坑经验总结、参考链接。注释的本质是文档需要持续更新维护、新陈代谢。文档也会过期但不能因噎废食——即便文档过期至少它记载了曾经的开发记录。关于注释还有一个悖论我最喜欢的事情是别人写注释我最不喜欢的事情是自己写注释。无论如何建议各位开发者多写注释、多写技术文档越详细越好、越系统越好这样才能提高协作效率促进良性循环。六、JavaScript 输出语句在下面的这几个输出语句中按照使用频率排序console.log()用得最多其次是alert()其他语句用得较少了解即可。弹窗alert() 语句要学习的第一个语句就是alert语句。代码举例如下!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleDocument/title /head body script alert(千古壹号); /script /body /htmlalert中文翻译为警报、警告的用途是弹出警告框。它会在弹窗中显示一条信息并等待用户按下 OK。如果代码中写了两个alert()语句网页的效果是弹出第一个警告框点击确定后继续弹出第二个警告框。补充该方法只能传入一个参数。控制台输出console.log() 打印日志console.log()用于在浏览器的控制台中输出信息里面可以传入一个或多个参数常用于代码调试和测试。console表示控制台log表示输出。括号里可以写字符串、数字、变量、表达式等。语法格式console.log(传入一个参数 arg1); // 传入多个参数时可以用逗号隔开 console.log(传入多个参数, arg2, arg3);控制台是程序员调试程序的地方。可以使用 console 语句打印日志在控制台的 console 面板查看打印的内容测试程序是否运行正常。在 Chrome 浏览器中按F12即可打开控制台选择「console」栏查看打印内容。console 语句可以设置不同的打印等级console.log(千古壹号1); // 普通打印 console.warn(千古壹号2); // 警告打印 console.error(千古壹号3); // 错误打印不同的打印等级区别主要在于颜色、背景上的差别方便肉眼区分、过滤信息。做前端开发时需要经常使用控制台调试甚至可以直接在控制台输入 JS 语句并打印执行结果。总结alert()主要用来显示消息给用户console.log()用来给程序员做调试用。弹窗confirm() 语句含确认/取消代码举例如下var result confirm(你听说过千古壹号吗); console.log(result);代码运行后页面上会显示一个弹窗弹窗上有确认和取消两个按钮点击确定返回true点击取消返回false。返回值可以通过变量接收并在控制台查看——这正是 JS 中用变量接收函数返回值的最早实践关于变量的详细知识可参考仓库的《常量和变量》。弹出输入框prompt() 语句prompt()专门弹出能够让用户输入内容的对话框用得少测试的时候偶尔会用。JS 代码如下var a prompt(请随便输入点什么东西吧); console.log(a);上方代码中用户输入的内容将被传递到变量a里面并在控制台打印出来。alert() 和 prompt() 的区别alert()语句中可以输出数字和字符串如果要输出字符串则必须用引号括起来。而prompt()语句中用户不管输入什么内容都是字符串。prompt()会返回用户输入的内容我们可以用一个变量来接收用户输入的内容。网页内容区域输出document.write() 语句该方法的作用是向网页中写入文本内容可以是 HTML 代码传入的参数可以是一个或多个字符串。代码举例document.write(千古前端图文教程);页面效果网页正文区域直接显示千古前端图文教程这段文字。需要注意document.write()会直接改写文档流实际项目中使用较少多用于学习演示。七、本篇小结与下一步本文完成了一次完整的 JavaScript 入门闭环主题核心结论三种引入方式行内式不推荐、内嵌式学习常用、外链式实战标准加载顺序浏览器从上至下解析 HTMLJS 写在 body 末尾操作 DOM 需借助window.onload延迟执行降级方案noscript在浏览器禁用 JS 时显示备用内容语法规则分号结尾、英文符号、区分大小写、对换行缩进不敏感注释规范HTML 用!-- --、CSS 用/* */、JS 用//与/** */进阶可用 JSDoc 生成 API 文档输出语句alert()面向用户、console.log()面向开发者调试、confirm()返回布尔、prompt()接收输入、document.write()写入页面学完本文后建议按顺序继续阅读仓库中同一目录下的进阶篇章《常量和变量》理解var/let/const与字面量、《事件简介》理解事件三要素、《DOM简介和DOM操作》理解 JS 如何操作页面元素逐步构建完整的 JavaScript 知识体系。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐千古前端图文教程JavaScript 正则表达式入门与实战RegExp 对象、匹配模式与 String 正则方法全解千古前端图文教程JavaScript 正则表达式入门与实战RegExp 对象、匹配模式与 String 正则方法全解 正则表达式是 JavaScript文档教程前端千古前端图文教程JavaScript async 异步函数详解——声明语法、返回值规律与 async/await 实战千古前端图文教程JavaScript async 异步函数详解——声明语法、返回值规律与 async/await 实战 本文是「千古前端图文教程」Web 前端文档教程前端千古前端图文教程用 innerHTML 动态创建 DOM 元素的三种方式与实战详解千古前端图文教程用 innerHTML 动态创建 DOM 元素的三种方式与实战详解 导读 在前端开发中页面内容往往需要根据用户操作或服务器数据动态生成这时文档教程前端上一篇Flair 自定义数据集加载完全指南ColumnCorpus、CSV 与 FastText 格式实战下一篇GSD Beta 特性实战/gsd-ultraplan-phase 将 Plan Phase 搬进 Claude Code 云端浏览器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考