JavaScript 入门教程：Hello World 与脚本基础-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00230/article/details/148415855

JavaScript 入门教程：Hello World 与脚本基础

zh.javascript.info 现代 JavaScript 教程（The Modern JavaScript Tutorial），以最新的 ECMAScript 规范为基准，通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。项目地址: https://gitcode.com/gh_mirrors/zh/zh.javascript.info

前言

作为 JavaScript 编程之旅的第一步，"Hello, world!" 程序是每个开发者都熟悉的起点。本文将详细介绍如何在网页中使用 JavaScript，以及脚本标签的各种用法和最佳实践。

脚本标签基础

在 HTML 文档中，<script> 标签是引入 JavaScript 代码的主要方式。这个标签可以放置在 HTML 文档的 <head> 或 <body> 部分，甚至两者都包含。

基本示例

<!DOCTYPE HTML>
<html>
<body>
  <p>页面内容开始...</p>
  
  <script>
    alert('Hello, world!');
  </script>
  
  <p>...页面内容结束</p>
</body>
</html>

当浏览器解析到 <script> 标签时，会立即执行其中的 JavaScript 代码。在上面的例子中，当页面加载到脚本位置时，会弹出一个显示"Hello, world!"的对话框。

现代脚本标签的最佳实践

随着 HTML5 的普及，<script> 标签的使用变得更加简洁：

不再需要 type 属性
在 HTML4 中需要声明 type="text/javascript"，现在这已成为默认值，可以省略。
避免使用 language 属性
这个过时的属性原本用于指定脚本语言，现在已经完全没有必要使用。
不再需要注释包裹
旧代码中常见用 HTML 注释包裹脚本的做法，这是为了兼容不支持 JavaScript 的古董浏览器，现代开发中完全不需要这样做。

外部脚本文件

当脚本代码量较大时，最佳实践是将 JavaScript 代码放在单独的文件中，然后通过 src 属性引入：

<script src="script.js"></script>

外部脚本的优势

代码复用：可以在多个页面中共享同一个脚本文件
缓存优势：浏览器会缓存外部脚本，提高后续页面加载速度
可维护性：使 HTML 和 JavaScript 代码分离，结构更清晰
并行下载：浏览器可以并行下载多个外部资源

路径说明

相对路径：src="script.js" 或 src="./script.js" 表示当前目录下的文件
绝对路径：src="/js/script.js" 从网站根目录开始
完整 URL：可以直接引用 CDN 上的脚本文件

重要注意事项

src 属性与内联代码互斥
如果一个 <script> 标签设置了 src 属性，那么标签内的任何代码都会被忽略。

<!-- 错误的写法 -->
<script src="external.js">
  alert('这段代码不会执行');
</script>

<!-- 正确的写法 -->
<script src="external.js"></script>
<script>
  alert('这段代码会执行');
</script>

脚本执行顺序
浏览器会按照 <script> 标签在文档中出现的顺序依次执行它们。
脚本阻塞渲染
默认情况下，浏览器遇到 <script> 标签时会暂停 HTML 解析，先执行脚本。可以使用 async 或 defer 属性改变这一行为（后续教程会详细介绍）。

开发环境选择

虽然本教程主要使用浏览器作为 JavaScript 运行环境，但需要了解：

浏览器环境：适合学习基础语法和前端开发
Node.js 环境：适合服务器端 JavaScript 开发
其他环境：如桌面应用、移动应用等

无论选择哪种环境，JavaScript 的核心语法都是相同的，这正是我们首先要掌握的内容。

总结

通过本文，我们学习了：

如何在 HTML 中嵌入 JavaScript 代码
现代 <script> 标签的正确用法
使用外部脚本文件的最佳实践
脚本加载的基本原理和注意事项

"Hello, world!" 虽然简单，但它包含了 JavaScript 编程的基础知识。随着教程的深入，我们将探索更多强大的 JavaScript 功能。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考