提示

本文主要介绍 JavaScript 入门相关知识。@ermo

HTML 用于控制网页的结构，CSS 用于控制网页的外观，JavaScript 用于控制网页的行为。

# hello-world

# 引用 JavaScript

每一门语言都有自己自定义的文件后缀名。编写 Java 的文件用 .java 作为后缀，编写 CSS 的文件用 .css 作为后缀，用于编写 JavaScript 代码的文件一般以 .js 后缀开头。

JavaScript 语言简称为 js 语言。

想要在 HTML 中引入 JavaScript，主要有三种方式：

外链式
内嵌式
行内式

（1）外链式

以下为 index.html 文件内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    
</body>
</html>

以下为 index.js 文件内容。

alert('hello world');

通过在 head 中添加 script 标签，然后使用 src 属性引入 index.js 文件。src 属性值可以使用相对路径和绝对路径。

上例中打开浏览器后，页面会出现弹窗，并提示 hello world 文件。这就是 alert 函数的作用，在浏览器中弹出提示框。

外链式是开发中最常用的使用方式，这样可以将 js 代码和 HTML 区分，便于项目工程化和程序员的阅读。

（2）内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- demo1 -->
    <a href="javascript: alert('hello world')">hello world</a>
    <!-- demo2 -->
    <div onclick="alert('hello world')">hello world</div>
</body>
</html>

上述例1中，在超链接 a 标签中嵌入了 javaScript 代码，alert 函数表示弹出提示框，提示内容为 hello world。

例2点击 hello world 文字可以得到相同的效果，使用到了点击事件属性 onclick。

在元素内部书写 javaScript 的形式称为内嵌式。

（3）行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert('hello world');
    </script>
</body>
</html>

上例中，在 body 中使用到 script 标签，script 标签内可以直接书写 js 代码，在浏览器中打开当前页面，浏览器会直接弹出提示框，并不依赖用户的任何行为，这就是内嵌式 js 代码。

script 标签同样可以写到 head 标签中。

# 注释

注释用来解释代码的含义，便于程序员的理解。js 中分为单行注释和多行注释两种。


// print number 1
// 单行注释
console.log(1);

/*
 *  多行注释
 */
console.log(2);

变量 →