JS 教程 - JavaScript 教程

本文目录结构

JavaScript 教程

如果您对 ECMAScript6 感兴趣，可以点击 ES6 来学习一下，

如果ES6已经不能满足你了，阿西河还提供最新的 ECMAScript 文档；

这是包含 ECMAScript2020 草案的，也就是ES11，让你在知识的海洋里，尽情翱翔！！！

浏览器中的 JavaScript 能做什么？

现代的 JavaScript 是一种“安全”语言。

它不提供对内存或 CPU 的底层访问，因为它最初是为浏览器创建的，不需要这些功能。

JavaScript 的能力很大程度上依赖于它执行的环境。

例如：Node.js 允许 JavaScript 读写任意文件、执行网络请求等。

浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。

例如，浏览器中的 JavaScript 可以完成下面这些事：

• 在网页中插入新的 HTML，修改现有的网页内容和网页的样式。
• 响应用户的行为，响应鼠标的点击或移动、键盘的敲击。
• 向远程服务器发送网络请求，下载或上传文件（所谓 AJAX 和 COMET 技术）。
• 获取或修改 cookie，向访问者提出问题、发送消息。
• 记住客户端的数据（本地存储）。

浏览器中的 JavaScript 不能做什么？

为了用户的（信息）安全，在浏览器中的 JavaScript 的能力是有限的。

这样主要是为了阻止邪恶的网站获得或修改用户的私人数据。

这些限制的例子有：

• 网页中的 JavaScript 不能读、写、复制及执行用户磁盘上的文件或程序。它没有直接访问操作系统的功能。
  • 现代浏览器允许 JavaScript 做一些文件相关的操作，但是这个操作是受到限制的。仅当用户使用某个特定的动作，JavaScript 才能操作这个文件。例如，把文件“拖”到浏览器中，或者通过 <input> 标签选择文件。
  • JavaScript 有很多方式和照相机 / 麦克风或者其他设备进行交互，但是这些都需要提前获得用户的授权许可。所以，启用了 JavaScript 的网页应该不会偷偷地启动网络摄像头观察你，并把你的信息发送到美国国家安全局。
• 不同的浏览器标签页之间基本彼此不相关。有时候，也会有一些关系。例如，一个标签页通过 JavaScript 打开另外一个新的标签页。但即使在这种情况下，如果两个标签页打开的不是同一个网站（域名、协议或者端口任一不相同的网站），他们都不能够相互通信。
  • 这就是“同源策略”。为了解决“同源策略”问题，两个标签页必须都包含一些处理这个问题的特殊的 JavaScript 代码，并均允许数据交换，这样才能够实现两个同源标签页的数据交换。本教程会讲到这部分相关的知识。
  • 这个限制也是为了用户的信息安全。例如，用户打开的 http://anysite.com 网页的 JavaScript 肯定不能访问 http://gmail.com（另外一个标签页打开的网页）也不能从那里窃取信息。
• JavaScript 通过互联网可以轻松地和当前网页域名的服务器进行通讯。但是从其他网站 / 域名的服务器中获取数据的能力是受限的。尽管这可以实现，但是需要来自远程服务器的明确协议（在 HTTP 头中）。这也是为了用户的数据安全。
  • 浏览器环境外的 JavaScript 一般没有这些限制。例如服务端的 JavaScript 就没有这些限制。现代浏览器还允许安装可能会要求扩展权限的插件或扩展。

第一个 JavaScript 例子

本教程包含了大量的 JavaScript 实例， 您可以自己手动跟着敲来执行。

请一定要自己动手敲！！！

请一定要自己动手敲！！！

请一定要自己动手敲！！！

本站之所以没有做在线"点击运行"那种功能，就是让大家尽量自己动手来实现！

如果光看不敲，学习效果是非常非常非常不好的，基本属于看过就忘记的情况！

下面是一个例子

<script>
function displayDate(){
    document.getElementById('demo').innerHTML=Date();
}
</script>
<span>我的第一个 JavaScript 程序</span>
<p id="demo">这是阿西河前端教程的一个段落，你点击"显示日期"会发生改变！</p>
<button type="button" onclick="displayDate()">显示日期</button>

上面的代码演示效果如下

---

我的第一个 JavaScript 程序

这是阿西河前端教程的一个段落，你点击"显示日期"会发生改变！

显示日期

---

如果能根据本站的教程一步一个脚印的跟着敲，你将会在很短的时间内学会 JavaScript。

一定要跟着敲代码，不要光看！

本站之所以没有做在线"在线运行"那种功能，就是让大家尽量自己动手来实现！这样理解会更深刻

如果你感觉太麻烦，可以复制源码然后在自己编辑器里运行看效果，但还是推荐自己动手敲代码，不要图省事！

为什么学习 JavaScript?

JavaScript web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 网页的行为

本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。

谁适合阅读本教程？

• 如果您想学习 JavaScript，您可以学习本教程：
  • 了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。
• 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程：
  • JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。

比 JavaScript “更好”的语言

不同的人喜欢不同的功能，JavaScript 的语法也不能够满足所有人的需求。

这是正常的，因为每个人的项目和需求都不一样。

所以，最近出现了很多不同的语言，这些语言在浏览器中执行之前，都会被编译（转化）成 JavaScript。

现代化的工具使得编译速度非常快速且透明，实际上允许开发人员使用另一种语言编写代码并将其自动转换为 JavaScript。

这些编程语言的例子有：

• CoffeeScript 是 JavaScript 的语法糖，它语法简短，明确简洁。通常使用 Ruby 的人喜欢用。
• TypeScript 将注意力集中在增加严格的数据类型。这样就能简化开发，也能用于开发复杂的系统。TypeScript 是微软开发的。
• Flow 也添加了数据类型，但是以一种不同的方式。由 Facebook 开发。
• Dart 是一门独立的语言。它拥有自己的引擎用于在非浏览器环境中运行（如：手机应用），它也能被编译成 JavaScript 。由 Google 开发。

还有很多其他的语言。当然，即使我们在使用这些语言，我们也需要知道 JavaScript。因为学习 JavaScript 可以让我们真正明白我们自己在做什么。

那些语言**“净整那些没有用的”**，最终还是要编译成 JavaScript ；

阅读本教程前，您需要了解的知识

阅读本教程，您需要有以下基础：

• HTML 教程
• CSS 教程

不一定要了解的怎么样，但最起码要知道 HTML 和 CSS 是什么，需要先大概了解一下！