爱站程序员基地初识JavaScript
- 基础概念
- JavaScript与HTML、CSS的关系
- JavaScript的组成
- script标签
- 页面加载JavaScript的方式
- script标签的位置
- 延迟脚本
- 异步脚本
- 注释
- 编码习惯
基础概念
JavaScript是一个 面向对象、跨平台的脚本语言。
JavaScript与HTML、CSS的关系
一个网页由 JavaScript、HTML和CSS三个部分组成，如果我们将一个网站比作是一栋大楼，那么它们的作用分别如下：
- HTML：相当于大楼的骨架，用来确定网页的结构
- CSS：相当于大楼的装修，用来确定网页的样式
- JavaScript：相当于大楼的物业，让网页具备用户交互的功能
JavaScript的组成
虽然JavaScript和ECMAScript通常被人们用来表达相同的含义，但实际上JavaScript的含义要比ECMAScript中规定的多得多。一个完整的JavaScript应该由下面三个不同的部分组成：
- ECAMScript：定义了JavaScript的语法规范，是JavaScript的核心，描述了语言的基本语法和数据类型。ECMAScript是一套标准（定义了一种语言的标准），与具体的实现无关
- BOM（浏览器对象模型）：提供一套操作浏览器功能的API，通过BOM可以操作浏览器窗口（比如：弹出框、控制浏览器跳转、获取分辨率等）。
- DOM（文档对象模型）：提供了一套操作页面元素的API，DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作。
在HTML中使用JavaScript
script标签
向HTML页面中插入JavaScript的主要方法就是使用script标签，它的主要的属性如下：
| 属性名称 | 属性说明 |
|---|---|
| async | 表示应该立即下载脚本，但不妨碍页面中的其它操作（比如下载其它资源或等待加载其它脚本），只对外部脚本文件有效。（可选） |
| charset | 表示字符集，大多数浏览器会忽略它，基本上没啥用。（可选） |
| defer | 表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本有效。（可选） |
| src | 表示要执行代码的外部文件的路径。（可选） |
| type | 用来表示写代码的脚本语言的类型，没有必要指定该属性，默认情况下就是 text/javascript。（可选） |
页面加载JavaScript的方式
有两种引入JavaScript的方式：
1. 内联JavaScript脚本
可以通过script标签在html页面中直接写入JavaScript脚本：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>内联JavaScript</title></head><body><script>alert(\"Hello World!\");</script></body></html>
注意： 在script中嵌入JavaScript代码的时候，不要在任何地方出现 ‘</script>’ 的字符串，否则会报错。因为浏览器遇到这个字符串就会把它当作结束标签，可以通过下面的方式解决：
<script>function sayHi () {alert(“<\\/script>\");}</script>
2. 引入外部的JavaScript文件
通过给script指定src属性和type属性（可以省略）来引入外部的JavaScript文件：
// out.js 文件alert(\"Hello World!\");
<!-- index.html 文件 --><!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Document</title></head><body><script src=\"./out.js\"></script></body></html>
注意：一个script标签要么用来编写内部的js代码，要么用来引入外部的js文件，不能同时使用，同时使用的时候内联的js代码会失效，只会执行外部的js文件：
<script src=\"out.js\">// 这段文本不会被执行，只会执行外部js文件中的代码alert(\"Hello World!\");</script>
script标签是可以重复指定的，浏览器会按照从上到下的顺序去执行这些script标签中的javascript代码：
<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>Document</title></head><body><script>document.write(\"<h1>第一个script标签</h1>\")</script><script>document.write(\"<h1>第二个script标签</h1>\")</script><script>document.write(\"<h1>第三个script标签</h1>\")</script></body></html>
script标签的位置
按照惯例，所有的script标签都应该放在head标签中：
<html><head><title>页面标题</title><script src=\"example1.js\"> </script><script src=\"example2.js\"> </script><!-- ... --></head><body>页面内容</body></html>
这种做法就意味着必须等到所有的JavaScript代码都被下载、解析和执行完成之后才能开始呈现页面的内容，这样会导致页面出现延迟。所以现在一般将JavaScript引用放到body元素中，放在所有页面元素的后面，如：
<html><head><title>页面标题</title></head><body>页面内容<script src=\"example1.js\"> </script><script src=\"example2.js\"> </script></body></html>
延迟脚本
从HTML4.0后，为script标签增加了defer属性，这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说脚本会延迟到页面解析完毕后再执行，相当于告诉浏览器立即下载、但是延迟执行：
<html><head><title>页面标题</title><script src=\"example1.js\" defer=\"defer\"></script><script src=\"example2.js\" defer=\"defer\"></script></head><body>页面内容</body></html>
上面的案例虽然将script放到head中，但脚本会延迟到</html>标签后再执行。理论上第一个延迟脚本会在第二个延迟脚本之前执行，而这两个延迟脚本会先于DOMContentLoaded事件执行，但实际执行时不一定会按照这个顺序去执行，因此最好只包含一个延迟脚本。
注意：defer属性只适合外部脚本，而且HTML5的实现会忽略这个属性，新的浏览器也支持HTML的规则，会忽略这个属性。所以最好还是不要用这个属性，而是将脚本放在页面底部延迟执行。
异步脚本
HTML5为脚本添加了async属性，这个属性和defer属性类似，它也只支持外部脚本文件。它会告诉浏览器立即下载文件，但是不能保存脚本的执行顺序：
<html><head><title>页面标题</title><script src=\"example1.js\" async></script><script src=\"example2.js\" async></script></head><body>页面内容</body></html>
如上面的案例，第二个脚本可能会在第一个脚本之前运行，所以保持脚本之间相互不依赖非常重要。指定了async的目的是为了不让页面等待两个脚本的下载和执行，从而异步加载页面其它内容。但是，建议不要在异步脚本中操作DOM，因为异步脚本会在load事件之前执行，但可能会在DOMContentLoaded事件之前或者之后执行。该属性还存在浏览器兼容的问题。
noscript标签
早期浏览器都面临一个特殊的问题：如果浏览器不支持JavaScript时如何让页面平稳的退化。noscript就是为了解决这个问题，用来在不支持JavaScript的浏览器中显示替代的内容。这个标签可以包含能够出现在body文档中的任何HTML标签（script标签除外），包含在noscript中的内容只能在下列情况下才会显示：
- 浏览器不支持脚本
- 浏览器支持脚本，但是脚本被禁用
<html><head><title>页面标题</title><script src=\"example1.js\" async></script><script src=\"example2.js\" async></script></head><body><noscript><p>本页面需要浏览器支持(启用)JavaScript。</p></noscript></body></html>
JavaScript基础语法
注释
通过注释可以对代码进行解释说明，被注释的部分是不会被执行的。JavaScript提供了两种注释代码的方法：
- 单行注释
// 这里是一段注释的文本：下面的代码在控制台输出 Hello Worldconsole.log(\"Hello Wolrd\");
- 多行注释
/*这个是一个多行注释：下面定义了一个变量age该变量被初始化为16*/var age = 16;
编码习惯
好的编码习惯可以让代码更加便于阅读理解，在编写JavaScript注意养成以下习惯：
- 使用分号：虽然不加分号在JavaScript中是没有问题的，但是建议不要省略分号。因为加了分号后可以用软件对代码进行压缩，并且加分号也是良好的编码习惯
- 使用空格：运算符前后空一个空格，当逗号或者分号后面还有语句的时候也需要空一个空格
- 代码缩进：很多地方需要进行代码缩进，好的代码缩进可以帮助我们减少代码阅读的时间，提高开发的效率
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>编码习惯</title></head><body><script>// 语句后面添加分号var str = \"求两个数的和：\";// 逗号后面需要加上空格// 赋值语句等号两边需要加上空格var number1 = 10, number2 = 20;// 代码的缩进function add (num1, num2) {// 运算符前后需要加上空格return num1 + num2;}console.log(str + number1 + \" + \" + number2 + \" = \" + (number1 + number2));</script></body></html>
