01-初识JavaScript（JavaScript基础学习笔记）
初识JavaScript
基础概念
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 World
console.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>
- 学习笔记(01):从零开发微信小程序-JavaScript基础下
- Struts2学习笔记01----初识struts2配置文件和相关基础知识
- javascript学习笔记 （一）-函数基础
- javascript学习笔记-语法基础
- 精通JavaScript开发课时20（JS事件基础）学习笔记
- JavaScript高级程序设计学习笔记1： 基础
- python Tkinter学习笔记 基础UI控件 01
- 2015—01—22 Shell学习笔记基础（1）
- [翻译]javascript学习笔记 （一）-函数基础
- #大学#SQL基础学习笔记（01）
- JavaScript高级程序设计（第3版）学习笔记6 初识js对象
- javascript学习笔记01--javascript的基本介绍
- .Net学习笔记----2015-07-08(基础复习和练习01)
- [学习笔记]JavaScript基础--缓冲1
- JavaScript学习笔记之DOM基础 2.4
- Objective_C 基础知识学习笔记01
- JavaScript基础学习笔记（一）——JavaScript简介、 如何实现JavaScript、把 JavaScript 放置到何处、JavaScript语句
- javascript学习基础笔记之DOM对象操作
- JavaScript高级程序设计（第3版）学习笔记6 初识js对象
- 黑马程序员-javascript基础知识学习笔记