Document

--- title: 02-开始写JavaScript：hello world --- ## 开始写第一行 JavaScript：hello world JS 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 JS 代码，有哪几种方式？有三种方式：（和 CSS 的引入方式类似） 1. **行内式**：写在HTML标签内部。 2. **内嵌式**（内联式）：写在 script 标签中。 3. **外链式**：引入外部 JS 文件。 ### 方式 1：行内式代码举例： ```javascript ``` 完整的可执行代码如下： ```html Document ``` 解释： - 可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），比如放在上面的 `onclick`点击事件中。 - 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS 代码时，很难维护；引号多层嵌套时，也容易出错。 - 关于代码中的「引号」，在 HTML 标签中，我们推荐使用双引号，JS 中推荐使用单引号。 ### 方式 2、内嵌式（内联式）我们可以在 HTML 页面的 `` 标签里放入``标签对，并在` ``` 解释： - tyue属性中的text 表示纯文本，因为 JavaScript 代码本身就是纯文本。当然，type属性可以省略，因为 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。 - 可以将多行 JS 代码写到 ` ``` 解释： - 上面这段代码，依然是放到 body 标签里，可以和内嵌的 JS 代码并列。 - 上方代码的 script 标签已经引入了外部 JS 文件，所以这个标签里面，不可以再写 JS 代码。 - 方式2和方式3不能混用。 **总结**：我们在实战开发中，基本都是采用方式 3，因为将 html 文件和 js 文件分开的方式，有利于代码的结构化和复用，符合高内聚、低耦合的思想。很少会有人把一大堆 JS 代码塞到单个 html 文件里。 ## 拓展知识 ### window.onload：先加载，最后执行上面的三种方式，有个共同的地方是：JS 代码都是写在 body 标签中的，准确来说，是在页面标签元素（比如 `title` 标签）的后面，在 ``结束标签的前面。为什么一般是按这样的顺序来写呢？这是因为：浏览器默认遵循**HTML文档**的加载顺序，即按照**从上至下**的加载顺序解析网页（这句话很重要）。所以，通常情况下，我们会把JS代码写在 body 内部的末尾。然而，当你需要通过 JS 来操作界面上的标签元素时，假如将 JS 代码或者` ``` 等价于代码二： ```html ``` 2、每一条语句末尾建议加上**分号**。当存在换行符（line break）时，大多数情况下可以省略分号，JavaScript 会将换行符理解成“隐式”的分号，进而自动添加分号。也就是说，分号不是必须加的，如果不写分号，浏览器会在换行符的位置自动添加分号，但是会消耗一些系统资源和性能，甚至有可能**添加错误**，导致一些奇怪的bug。 3、所有的符号都是英文的，比如括号、引号、分号。如果你用的是搜狗拼音，**建议不要用 shift 切换中英文**（可以在搜狗软件里进行设置），不然很容易输入中文的分号；建议用 ctrl+space 切换中英文输入法。 4、JS 严格区分大小写。HTML和CSS不区分大小写，但是 JS 严格区分大小写。 ## 前端代码的注释注释：即解释、注解。注释有利于提高代码的可读性，且有利于程序员之间的沟通和工作交接。注释可以用来解释某一段代码的功能和作用；通过注释，还可以补充代码中未体现出来的部分。代码只是开发工作的结果，注释可以阐述开发工作的过程、思路、注意事项，以及踩过的坑。注释可以是任何文字，可以写中文。 **我们不要把 HTML、CSS、JavaScript 三者的注释格式搞混淆了**。 ### HTML 的注释格式： ```html ``` 举例： ```html

``` ### CSS 的注释举例： ```html ``` 注意：CSS 只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`