文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载在 Web 开发中把 JavaScript 代码从 HTML 中拆分为独立的.js文件是保证页面结构清晰、代码可复用、加载性能更优的基础实践。本指南以 Modern JavaScript Tutorial 仓库1-js/02-first-steps/01-hello-world/2-hello-alert-ext中的经典任务Show an alert with an external script为骨架完整讲解如何将内联的alert脚本抽取为同目录下的alert.js外部文件并通过script src标签接入页面同时剖析src属性的路径规则、浏览器缓存机制与常见陷阱。读完本文你将掌握外部脚本的标准接入方式并能独立完成页面弹窗 外部脚本的最小可运行示例。任务背景从内联脚本走向外部脚本该任务承接上一题Show an alert参见 1-hello-alert/task.md上一题要求创建一个弹出Im JavaScript!消息的页面脚本直接写在script标签内部而本任务在此基础上进一步要求——把脚本内容抽取到与页面同目录的外部文件alert.js中再让页面加载它并打开页面确认弹窗仍然生效。这看似只是把代码挪了个地方但它触及了 JavaScript 在浏览器中运行的两个关键问题代码应该写在哪里内联 vs 外部文件浏览器如何定位并加载外部脚本src属性的寻址机制。官方解决方案两个文件的分工仓库给出的标准答案由两个文件组成2-hello-alert-ext1.index.html—— 页面骨架与脚本引入!DOCTYPE html html body script srcalert.js/script /body /html文件路径1-js/02-first-steps/01-hello-world/2-hello-alert-ext/index.html要点解析页面没有任何可见内容body中只有一个script标签srcalert.js采用相对路径指代当前页面所在文件夹下的alert.js即本任务要求的same folder浏览器解析到该标签时会自动下载并执行alert.js。2.alert.js—— 被提取的脚本内容alert(Im JavaScript!);文件路径1-js/02-first-steps/01-hello-world/2-hello-alert-ext/alert.js这里只剩一行业务代码调用内置的alert函数弹出一个内容为Im JavaScript!的对话框。这正是上一题内联脚本的全部内容现在被完整迁移到独立文件中。核心知识点一src属性的三种寻址方式外部脚本通过script src...引入src的值可以是参见 01-hello-world/article.md 的 External scripts 一节写法含义示例站点根绝对路径以/开头从网站根目录定位script src/js/script.js/script相对路径相对当前页面所在位置srcalert.js等价于src./alert.js表示当前文件夹下的alert.js完整 URL直接指向外部 CDN 或任意可访问地址script srchttps://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js/script本任务用的是第二种——相对路径。这也意味着只要alert.js与index.html位于同一目录就像仓库中 2-hello-alert-ext 目录那样在本地直接用浏览器打开index.html脚本就能被正确加载无需搭建服务器。核心知识点二引入多个脚本与缓存收益需要引入多个脚本时使用多个标签script src/js/script1.js/script script src/js/script2.js/script为什么建议把脚本放到独立文件而不是全部内联教程原文article.md给出了明确解释作为规则只有最简单的脚本才写在 HTML 里更复杂的脚本应放在独立文件中。独立文件的收益在于浏览器下载后会将其存入缓存cache。其他页面引用同一脚本时会直接从缓存读取而不是重新下载因此该文件实际只被下载一次——这减少了流量也让页面加载更快。这正是本任务把alert脚本抽取成alert.js的深层动机之一即便只有一行代码它也示范了可被多个页面复用的外部资源这一工程模式。核心知识点三src与内联内容不可共存教程特别强调了一个高频陷阱article.md如果设置了src标签内的脚本内容会被忽略。下面这段代码不会按预期工作script srcfile.js alert(1); // 被忽略因为设置了 src /script一个script标签不能同时拥有src属性和内部代码二者只能选其一。若要两者都生效需要拆成两个标签script srcfile.js/script script alert(1); /script对本任务而言script srcalert.js/script是自闭合的空标签没有内部代码因此不存在此问题——但理解这一规则能避免日后把内联代码误写进带src的标签里。核心知识点四现代标记中已可省略的属性在旧 HTML4 标准下script需要声明type通常为text/javascriptlanguage属性也曾用于标明脚本语言。这两个属性在现代标准中均已不再需要——JavaScript 是默认脚本语言type的新含义与 ES 模块module相关属于进阶话题详见 article.md 的 Modern markup 一节。因此本任务给出的解决方案里script srcalert.js/script不带任何多余属性是最简洁、最符合现代实践的写法。实战验证如何运行并确认弹窗按照本任务要求完成以下步骤即可验证在当前仓库的 2-hello-alert-ext 目录下确认存在index.html与alert.js两个文件用浏览器直接打开index.html在本地磁盘上运行即可如任务描述所述doesnt matter, just ensure that it works页面加载后应立即弹出内容为Im JavaScript!的对话框——若弹窗出现说明外部脚本被成功加载并执行若弹窗未出现优先检查两点alert.js是否与index.html位于同一目录相对路径srcalert.js的解析前提以及script src标签内是否误写了其他内容。从源码看整体脉络结合仓库文件可以完整还原这条学习路径上一题的解决方案 1-hello-alert/solution.md 只有index.html一个文件脚本内联在页面中本任务的解决方案 solution.md 则明确给出两份文件HTML 页面 同目录alert.js任务描述 task.md 中的importance: 5表明这是一个高优先级的核心练习其目标正是让初学者亲手完成内联 → 外部脚本的迁移建立对src寻址和文件组织方式的直觉。小结外部脚本通过script srcpath/to/script.js/script引入src支持站点根绝对路径、相对路径与完整 URL 三种写法本任务使用相对路径srcalert.js要求脚本与页面同目录浏览器可直接本地加载独立脚本文件可被浏览器缓存复用减少流量、加快页面加载带src的script标签不能同时包含内联代码type、language等旧属性在现代 HTML 中已可省略。将这一行alert从内联迁移到外部文件是理解代码与结构分离的第一课也是后续学习脚本加载时序、模块化与构建工具的基础。赞分享文档/教程前端【免费下载链接】en.javascript.infoModern JavaScript Tutorial项目地址https://gitcode.com/gh_mirrors/en/en.javascript.info点击查看免费下载相关推荐JavaScript 字符串引号与模板插值从 Modern JavaScript Tutorial 的 String quotes 任务理解 ${} 机制JavaScript 字符串引号与模板插值从 Modern JavaScript Tutorial 的 String quotes 任务理解 ${} 机制 在文档/教程前端Modern JavaScript Tutorial 第一课实战用 script 标签与 alert() 弹出第一条消息Modern JavaScript Tutorial 第一课实战用 script 标签与 alert 弹出第一条消息 导读 本文基于 Modern Java文档/教程前端FLAN-T5 Large vs 传统T5模型为什么指令微调让语言模型性能提升30%FLAN T5 Large vs 传统T5模型为什么指令微调让语言模型性能提升30% 在当今人工智能快速发展的时代FLAN T5 Large作为一款经过指上一篇JUnit4源码构建日志分析错误模式识别下一篇CenterNet vs YOLOv5谁才是实时检测领域真正王者创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考