JavaScript 使用

Hello World

1、script 标签

我们可以使用 <script> 标签将 JavaScript 程序插入到 HTML 文档的任何位置。

比如：

html

<!DOCTYPE HTML>
<html lang="zh-CN">
<body>
<p>script 标签之前...</p>

<script>
    alert('Hello, world!');
</script>

<p>...script 标签之后</p>
</body>
</html>

<script> 标签中包裹了 JavaScript 代码，当浏览器遇到 <script> 标签，代码会自动运行。

使用方式

JS 有 3 种书写位置，分别为行内、内嵌和外部。

1、行内式
html
```
<input type="button" value="点我试试" onclick="alert('Hello World')"/>
```
1
- 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
- 注意单双引号的使用：在 HTML 中我们推荐使用双引号, JS 中我们推荐使用单引号
- 可读性差，在 html 中编写 JS 大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
2、内嵌式
html
```
<script>
    alert('Hello  World!');
</script>
```
1
2
3
- 可以将多行 JS 代码写到 script 标签中
- 内嵌 JS 是学习时常用的方式
3、外部 JS 文件
如果你有大量的 JavaScript 代码，我们可以将它放入一个单独的文件。
脚本文件可以通过 src 特性（attribute）添加到 HTML 文件中。
html
```
<script src="/path/to/script.js"></script>
```
1
这里，/path/to/script.js 是脚本文件从网站根目录开始的绝对路径。当然也可以提供当前页面的相对路径。例如，src ="script.js" ，就像 src="./script.js"，表示当前文件夹中的 "script.js" 文件。
我们也可以提供一个完整的 URL 地址，例如：
html
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
```
1

代码结构

1、语句

语句是执行行为（action）的语法结构和命令。

我们已经见过了 alert('Hello, world!') 这样可以用来显示消息的语句。

我们可以在代码中编写任意数量的语句。语句之间可以使用分号进行分割。

例如，我们将 “Hello World” 这条信息一分为二：

javascript

console.log('Hello');
console.log('World');

通常，每条语句独占一行，以提高代码的可读性：

javascript

console.log('Hello');
console.log('World');

2、分号

当存在换行符（line break）时，在大多数情况下可以省略分号。

下面的代码也是可以运行的：

javascript

console.log('Hello')
console.log('World')

在这，JavaScript 将换行符理解成“隐式”的分号。这也被称为自动分号插入。

提示

在大多数情况下，换行意味着一个分号。但是“大多数情况”并不意味着“总是”！

有很多换行并不是分号的例子，例如：

javascript

console.log(3 + 
1 + 
2);

代码输出 6，因为 JavaScript 并没有在这里插入分号。显而易见的是，如果一行以加号 "+" 结尾，那么这是一个“不完整的表达式”，不需要分号。所以，这个例子得到了预期的结果。

提示

大部分时候可以省略分号，但是最好不要省略分号，尤其对新手来说。

3、注释

你可以在脚本的任何地方添加注释，它们并不会影响代码的执行，因为引擎会直接忽略它们。

单行注释以两个正斜杠字符 // 开始。

这一行的剩余部分是注释。它可能独占一行或者跟随在一条语句的后面。

就像这样：

javascript

// 这行注释独占一行
console.log('Hello');

console.log('World'); // 这行注释跟随在语句后面

多行注释以一个正斜杠和星号开始 “\*” 并以一个星号和正斜杠结束 “*/”。

就像这样:

javascript

/* 两个消息的例子。
这是一个多行注释。
*/
console.log('Hello');
console.log('World');

变量

变量就是用来储存这些信息的。

1、变量

变量是数据的“命名存储”。我们可以使用变量来保存商品、访客和其他信息。

在 JavaScript 中创建一个变量，我们需要用到 let 关键字。

下面的语句创建（也可以称为声明或者定义）了一个名称为 “message” 的变量：

javascript

let message;

现在，我们可以通过赋值运算符 = 为变量添加一些数据：

javascript

let message;

message = 'Hello'; // 将字符串 'Hello' 保存在名为 message 的变量中

现在这个字符串已经保存到与该变量相关联的内存区域了，我们可以通过使用该变量名称访问它：

javascript

let message;
message = 'Hello!';

console.log(message); // 显示变量内容

简洁一点，我们可以将变量定义和赋值合并成一行：

javascript

let message = 'Hello!'; // 定义变量，并且赋值

console.log(message); // Hello!

也可以在一行中声明多个变量：

javascript

let user = 'John', age = 25, message = 'Hello';

看上去代码长度更短，但并不推荐这样。为了更好的可读性，请一行只声明一个变量。

多行变量声明有点长，但更容易阅读：

javascript

let user = 'John';
let age = 25;
let message = 'Hello';

一些程序员采用下面的形式书写多个变量：

javascript

let user = 'John',
    age = 25,
    message = 'Hello';

甚至使用“逗号在前”的形式：

javascript

let user = 'John'
    , age = 25
    , message = 'Hello';

技术上讲，这些变体都有一样的效果。

变量命名

JavaScript 的变量命名有两个限制：

变量名称必须仅包含字母，数字，符号 $ 和 _。
首字符必须非数字。

有效的命名，例如：

javascript

let userName;
let test123;

如果命名包括多个单词，通常采用驼峰式命名法（camelCase ）。也就是，单词一个接一个，除了第一个单词，其他的每个单词都以大写字母开头：myVeryLongName。

有趣的是，美元符号 '$' 和下划线 '_' 也可以用于变量命名。它们是正常的符号，就跟字母一样，没有任何特殊的含义。

下面的命名是有效的：

javascript

let $ = 1; // 使用 "$" 声明一个变量
let _ = 2; // 现在用 "_" 声明一个变量

console.log($ + _); // 3

下面的变量命名不正确：

javascript

let 1a; // 不能以数字开始

let my-name; // 连字符 '-' 不允许用于变量命名

保留字

有一张保留字列表，这张表中的保留字无法用作变量命名，因为它们被用于编程语言本身了。

比如，let、class、return、function 都被保留了。

下面的代码将会抛出一个语法错误：

javascript

let let = 5; // 不能用 "let" 来命名一个变量，错误！
let return = 5; // 同样，不能使用 "return"，错误！

常量

声明一个常数（不变）变量，可以使用 const 而非 let：

javascript

const myBirthday = '18.04.1982';

使用 const 声明的变量称为“常量”。它们不能被修改，如果你尝试修改就会发现报错：

javascript

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // 错误，不能对常量重新赋值

当程序员能确定这个变量永远不会改变的时候，就可以使用 const 来确保这种行为，并且清楚地向别人传递这一事实。

总结

我们可以使用 var、let 或 const 声明变量来存储数据。

let — 现代的变量声明方式。
var — 老旧的变量声明方式。一般情况下，我们不会再使用它。
const — 类似于 let，但是变量的值无法被修改。

变量应当以一种容易理解变量内部是什么的方式进行命名。

交互

alert

由于我们将使用浏览器作为我们的演示环境，让我们看几个与用户交互的函数：alert，prompt 和confirm。

它会显示一条信息，并等待用户按下 “OK”。

例如：

javascript

alert("Hello");

弹出的这个带有信息的小窗口被称为 模态窗（modal）。意味着用户不能与页面的其他部分（例如点击其他按钮等）进行交互，直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。

prompt

prompt 函数接收两个参数：

javascript

result = prompt(title, [default]);

浏览器会显示一个带有文本消息的模态窗口，还有 input 框和确定/取消按钮。

title
显示给用户的文本
default
可选的第二个参数，指定 input 框的初始值。

访问者可以在提示输入栏中输入一些内容，然后按“确定”键。然后我们在 result 中获取该文本。或者他们可以按取消键或按 Esc 键取消输入，然后我们得到 null 作为 result。

prompt 将返回用户在 input 框内输入的文本，如果用户取消了输入，则返回 null。

举个例子：

javascript

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

confirm

语法：

javascript

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true，点击取消返回 false。

例如：

javascript

let isBoss = confirm("Are you the boss?");

alert(isBoss); // 如果“确定”按钮被按下，则显示 true

总结

我们学习了与用户交互的 3 个浏览器的特定函数：

alert
显示信息。
prompt
显示信息要求用户输入文本。点击确定返回文本，点击取消或按下 Esc 键返回 null。
confirm
显示信息等待用户点击确定或取消。点击确定返回 true，点击取消或按下 Esc 键返回 false。

这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。

上述所有方法共有两个限制：

模态窗口的确切位置由浏览器决定。通常在页面中心。
窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口，并与用户进行更丰富的交互。

JavaScript 使用 ​

Hello World ​

使用方式 ​

代码结构 ​

1、语句 ​

2、分号 ​

3、注释 ​

变量 ​

变量命名 ​

保留字 ​

常量 ​

交互 ​

alert ​

prompt ​

confirm ​

JavaScript 使用

Hello World

使用方式

代码结构

1、语句

2、分号

3、注释

变量

变量命名

保留字

常量

交互

alert

prompt

confirm