JavaScript介绍

JavaScript 简称“JS”，是一种脚本编程语言，它灵活轻巧，兼顾函数式编程和面向对象编程，是 Web 前端开发的唯一选择。JavaScript 还有很多框架，比如 jQuery、AngularJS、React 等，它们这是学习 JavaScript 的重要内容。
JavaScript 最初只能运行于浏览器环境，用于 Web 前端开发，后来有“好事”的程序员将 JavaScript 从浏览器中分离出来，搞了一套独立的运行环境，所以现在的 JavaScript 也能用于网站后台开发了。学了 JavaScript，你就是全栈工程师。

第一个JavaScript程序

Html中使用

在 HTML 页面中嵌入 JavaScript 脚本需要使用标签，用户可以在标签中直接编写 JavaScript 代码，具体步骤如下。
第 1 步，新建 HTML 文档，保存为 test.html。
第 2 步，在  标签内插入一个标签。
第 3 步，为  标签设置type="text/javascript"属性。
现代浏览器默认  标签的脚本类型为 JavaScript，因此可以省略 type 属性；如果考虑到兼容早期版本浏览器，则需要设置 type 属性。
第 4 步，在标签内输入 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 脚本中，document 表示网页文档对象；document.write() 表示调用 Document 对象的 write() 方法，在当前网页源代码中写入 HTML 字符串"

`Hi,JavaScript!`

"。

第5步，保存网页文档，在浏览器中预览，显示效果如图所示。

新建 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 文件不能够独立运行，需要导入到网页中，通过浏览器来执行。使用标签可以导入 JavaScript 文件。

第4步，新建 HTML 文档，保存为 test.html。

第5步，在标签内插入一个标签。定义 src 属性，设置属性值为指向外部 JavaScript 文件的 URL 字符串。代码如下：

<script type="text/javascript" src="test.js"></script>

注意：使用＜script＞标签包含外部 JavaScript 文件时，默认文件类型为 Javascript。因此，不管加载的文件扩展名是不是 .js，浏览器都会按 JavaScript 脚本来解析。

第6步，保存网页文档，在浏览器中预览，显示效果如图所示。

定义 src 属性的标签不应再包含 JavaScript 代码。如果嵌入了代码，则只会下载并执行外部 JavaScript 文件，嵌入代码将被忽略。
执行 JavaScript 程序
浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据标签的位置来确定的。
示例
使用浏览器测试下面示例，会看到 JavaScript 代码从上到下逐步被解析的过程。

<!DOCTYPE html>
<script>alert("顶部脚本");
</script>
<html>
<head><meta charset="UTF-8"><title>test</title><script>alert("头部脚本");</script>
</head>
<body><h1>网页标题</h1><script>alert("页面脚本");</script><p>正文内容</p>
</body>
<script>alert("底部脚本");
</script>
</html>

在浏览器中浏览上面示例网页，首先弹出提示文本“顶部脚本”，然后显示网页标题“test”，接着弹出提示文本“头部脚本”，下面才显示一级标题文本“网页标题”，继续弹出提示文本“页面脚本”，接着显示段落文本“正文内容”，最后弹出提示文本“底部脚本”。

你看，对于导入的 JavaScript 文件，也将按照 ＜script> 标签在文档中出现的顺序来执行，而且执行过程是文档解析的一部分，不会单独解析或者延期执行。

如果想改变 JavaScript 文件的执行顺序，可以给标签增加 defer 或者 async 属性，我们将在下节中讲解。
JavaScript字符编码
JavaScript 遵循 Unicode 字符编码规则。Unicode 字符集中每个字符使用 2 个字节来表示，这意味着用户可以使用中文来命名 JavaScript 变量。

Unicode 是 Latin-1 字符集的超集，编码数目达到百万级；Latin-1是 ASCII 字符集的扩展，包含 256 个拉丁字母； ASCII 字符集包含 128 个基本字符，即常用英文字母和符号。

示例

新建 HTML5 文档，保存为 test.html。在页面中嵌入 ＜script＞ 标签，然后在该标签中输入下面代码，即可正常执行。

<script>var 书名="《JavaScript从入门到精通》", 姓名="张三";function 彩蛋(谁){document.write("<h1>" + 谁 + "</h1><p> 欢迎你学习 " + 书名 + "。</p>");}彩蛋(姓名);
</script>

注意：在 JavaScrip t第 1、2 版本中，仅支持 ASCII 字符编码，Unicode 字符只能出现在注释或者引号包含的字符串中。考虑到 JavaScript 版本的兼容性以及开发习惯，不建议使用双字节的中文字符命名变量或函数名。

由于 JavaScript 脚本一般都嵌入在网页中，并最终由浏览器来解释，因此在考虑到 JavaScript 字符编码的同时，还要兼顾 HTML 文档的字符编码，以及浏览器支持的编码。一般建议保持 HTML 文档的字符编码与 JavaScript 字符编码一致，以免出现乱码。
JavaScript中的几个重要概念
JavaScript 遵循 ECMA-262 规范，目前其最新版是 ECMAScript 2018，而获得所有主流浏览器完全支持的则是 ECMAScript 5。以ECMAScript 5版本为基础，兼顾 ECMAScript 6 版本中获得较大支持的新特性进行介绍。

JavaScript基础教程相关推荐

Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
javascript技术教程蔡敏_程序员都必掌握的前端教程之JavaScript基础教程（上）
阅读本文约需要10分钟,您可以先关注我们,避免下次无法找到. 本篇文章成哥继续带大家来学习前端教程之JavaScript,网页的动态事件基本上都是靠它来实现的.下面我们就一起来学习内容吧! 01 Ja ...
javascript基础教程_JavaScript基础教程（九）对象、类的定义与使用
对象.类的定义与使用对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
大工13秋 c/c++语言程序设计在线作业3,大工19秋《JavaScript基础教程与应用》在线作业3【满分答案】...
大工19秋<JavaScript基础教程与应用>在线作业3 试卷总分:100 得分:100 一.单选题 (共 10 道试题,共 50 分) 1.下列不属于Javascript的基本组成的 ...
JavaScript基础教程新手入门必看
对前端稍微有点了解的初学者都知道,JavaScript是必不可少的工具.毫不夸张的说,大部分网页都使用了JavaScript,想要成为一个优秀的前端工程师,做出漂亮令用户满意的网页,熟练掌握JavaS ...
Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
Javascript 基础教程阮一峰
Javascript 基础教程阮一峰 2021-11-16 阮一峰推荐的入门教程,重在查漏补缺 https://wangdoc.com/javascript/index.html 第一章入门 JS ...
JavaScript 基础教程
JavaScript 基础教程今天时间比较充裕,考虑到最近好久没有出文章了.有没什么特别的研究,
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
JavaScript基础教程速学笔记
JavaScript基础教程速学笔记 JavaScript简介 JavaScript 是 Web 的编程语言.(但是java与JavaScript的区别就是周杰与周杰伦的区别)所有现代的 HTML 页 ...

JavaScript基础教程