JavaScript 简称JS,是一种脚本编程语言,它灵活轻巧,兼顾函数式编程和面向对象编程,是 Web 前端开发的唯一选择。JavaScript 还有很多框架,比如 jQuery、AngularJS、React 等,它们这是学习 JavaScript 的重要内容。
JavaScript 最初只能运行于浏览器环境,用于 Web 前端开发,后来有“好事”的程序员将 JavaScript 从浏览器中分离出来,搞了一套独立的运行环境,所以现在的 JavaScript 也能用于网站后台开发了。学了 JavaScript,你就是全栈工程师。
文章最后有代码,可以复制验证一下的哦
今日学习开始了,后期内容请继续关注。
JavaScript 构成
一个完整的 JavaScript 实现由以下 3 个不同部分组成:
- 核心(ECMAScript):语言核心部分。
- 文档对象模型(Document Object Model,DOM):网页文档操作标准。
- 浏览器对象模型(BOM):客户端和浏览器窗口操作基础。
Web 浏览器只是 ECMAScript 实现的宿主环境之一。宿主环境不仅提供基本的 ECMAScript 实现,同时也会提供各种扩展功能。
文档对象模型是 HTML 的应用程序编程接口(API)。DOM 把整个文档映射为一个树形节点结构,以方便 JavaScript 脚本快速访问和操作。
IE3.0 和 Netscape Navigator 3.0 提供了一种新特性,即 BOM(浏览器对象模型)。使用 BOM 可以对浏览器窗口进行访问和操作,如移动窗口、访问历史记录、动态导航等。与 DOM 不同,BOM 只是 JavaScript 的一个部分,并没有形成规范性标准,但是所有浏览器都默认支持。
JavaScript 程序不能够独立运行,只能在宿主环境中执行。一般情况下可以把 JavaScript 代码放在网页中,借助浏览器环境来运行
编写第一个程序
在 HTML 页面中嵌入 JavaScript 脚本需要使用 <script> 标签,用户可以在 <script> 标签中直接编写 JavaScript 代码,具体步骤如下。
第 1 步,新建 HTML 文档,保存为 test.html。
第 2 步,在 <head> 标签内插入一个 <script> 标签。
第 3 步,为 <script> 标签设置type="text/javascript"属性。
第4步,<script> 标签内输入 JavaScript 代码:document.write("<h1>Hi,JavaScript!</h1>");。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个JavaScript程序</title>
<script type="text/javascript">
document.write("<h1>Hi,JavaScript!</h1>");
</script>
</head>
<body></body>
</html>
结果显示
新建 JavaScript 文件
JavaScript 程序不仅可以直接放在 HTML 文档中,也可以放在 JavaScript 文件中。
JavaScript 文件是文本文件,扩展名为.js,使用任何文本编辑器都可以编辑。新建 JavaScript 文件的步骤如下。
第1步,新建文本文件,保存为 test.js。注意,扩展名为.js,它表示该文本文件是 JavaScript 类型的文件。
第2步,打开 test.js 文件,在其中编写如下 JavaScript 代码。
alert("Hi,JavaScript!");
在上面代码中,alert() 表示 Window 对象的方法,调用该方法将弹出一个提示对话框,显示参数字符串 "Hi, JavaScript!"。
第3步,保存 JavaScript 文件。在此建议把 JavaScript 文件和网页文件放在同一个目录下。
JavaScript 文件不能够独立运行,需要导入到网页中,通过浏览器来执行。使用 <script> 标签可以导入 JavaScript 文件。
第4步,新建 HTML 文档,保存为 test.html。
第5步,在 <head> 标签内插入一个 <script> 标签。定义 src 属性,设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下:
<script type="text/javascript" src="test.js"></script>
注意:使用<script>标签包含外部 JavaScript 文件时,默认文件类型为 Javascript。因此,不管加载的文件扩展名是不是 .js,浏览器都会按 JavaScript 脚本来解析。
第6步,保存网页文档,在浏览器中预览,显示效果如图所示。
定义 src 属性的 <script> 标签不应再包含 JavaScript 代码。如果嵌入了代码,则只会下载并执行外部 JavaScript 文件,嵌入代码将被忽略。
执行 JavaScript 程序
浏览器在解析 HTML 文档时,将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分,因此 JavaScript 脚本的执行顺序也是根据 <script> 标签的位置来确定的。
例:
1. <!DOCTYPE html>
2. <script>
3. alert("顶部脚本");
4. </script>
5. <html>
6. <head>
7. <meta charset="UTF-8">
8. <title>test</title>
9. <script>
10. alert("头部脚本");
11. </script>
12. </head>
13. <body>
14. <h1>网页标题</h1>
15. <script>
16. alert("页面脚本");
17. </script>
18. <p>正文内容</p>
19. </body>
20. <script>
21. alert("底部脚本");
22. </script>
23. </html>
在浏览器中浏览上面示例网页,首先弹出提示文本“顶部脚本”,然后显示网页标题“test”,接着弹出提示文本“头部脚本”,下面才显示一级标题文本“网页标题”,继续弹出提示文本“页面脚本”, 接着显示段落文本“正文内容”,最后弹出提示文本“底部脚本”。
你看,对于导入的 JavaScript 文件,也将按照 <script> 标签在文档中出现的顺序来执行,而且执行过程是文档解析的一部分,不会单独解析或者延期执行。
如果想改变 JavaScript 文件的执行顺序,可以给 <script> 标签增加 defer 或者 async 属性。