JavaScript基础 - 技术栈

JavaScript的使用：

行内：

使用范围：

特殊情况下使用

特点：

1）可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性）

2）注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号

3）可读性差，在html中编写JS大量代码时，不方便阅读

4）引号易错，引号多层嵌套匹配时，非常容易弄混

举例：

<1>JS代码展示
javascript 复制代码
 <input type="button" value="点击" onclick="alert('hello world!')"/>
<2>完整代码：
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <input type="button" value="点击" onclick="alert('hello world!')"/>
</body>
</html>

外嵌：

使用范围：

内嵌 JS 是学习时常用的方式

可以将多行JS代码写到 <script> 标签中

举例：

<1>js代码

javascript 复制代码

<script>
      alert('hello world')
   </script>

<2>完整代码

html 复制代码

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

外部：

特点：

1）利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

2）引用外部 JS文件的 script 标签中间不可以写代码

3）适合于JS 代码量比较大的情况

举例：

<1>js代码

javascript 复制代码

alert('hello world')

<2>完整代码

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <script src="text.js"></script>
</body>
</html>

JavaScript的注释：

JavaScript的注释方式和C/C++是一样的

单行注释：

适用范围：仅能注释一行

javascript 复制代码

//注释的内容

多行注释：

适用范围：可以一行也可以多行

javascript 复制代码

/*注释的内容*/

JavaScript的输入输出流：

|-------------------|-----------------|
| 代码 | 说明 |
| alert('内容') | 浏览器弹出警示框 |
| console.log('内容') | 浏览器控制台打印输出信息 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 |