javaScript入门基础说明

JavaScript 教程

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都使用 JavaScript。

JavaScript 非常容易学，本教程将教你打开 JavaScript 的大门

浏览器中的 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 实例，您可以自己手动跟着敲来执行。

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

下面是一个例子

<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body>
<span>这个是我第一个javascript案例</span>
<p id="demo">点击显示日期会发生改变</p>
<button type="button" onclick="displayDate();">显示日期</button>
<script>function displayDate(){document.getElementById('demo').innerHTMl=Date();}</script></body>
</html>

显示效果：

为什么学习 JavaScript?

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

HTML 定义了网页的内容
CSS 描述了网页的布局
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 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

您将学到什么

下面是您将在本教程中学到的主要内容。

<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><p>JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");
</script>
<p>您只能在 HTML 输出流中使用 <strong>document.write</strong>。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>

演示效果：

JavaScript：对事件的反应

<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><button type="button" onclick="alert('欢迎点我');">点我点我</button>
</body>
</html>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件只是您即将在本教程中学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body><p id="demo">孙叫兽欢迎你</p>
<script>var x;x=document.getElementById('Demo');//查找元素x.innerHTML="你好，javascript";//改变内容</script>
</body>
</html>

您会经常看到 document.getElementById(”some id”)。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

您将在本教程的多个章节中学到有关 HTML DOM 的知识。

JavaScript：改变 HTML 图像

本例会动态地改变 HTML 的来源（src）：

<!DOCTYPE html>
<html lang="En">
<head><meta charset="UTF-8"><title>孙叫兽的博客</title></head>
<body>
<img id="myimage" onclick="changeimage();" src="center.png" width="100px;" height="100px;">
<script>function changeimage(){element=document.getElementById("myimage");if(element.src.match("center")){element.src="center.png";}else {element.src="center.png";}}
</script></body>
</html>

以上实例中代码 element.src.match(“center”) 的作用意思是：检索 <img id="myimage" onclick="changeImage()" src="center.png" width="100" height="180"> 里面 src 属性的值有没有包含 center这个字符串，如果存在字符串center，图片 src 更新为center.ong，若匹配不到center 字符串，src 则更新为 center.png

JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

    x=document.getElementById("demo")  //找到元素x.style.color="#ff0000";           //改变样式

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

    if isNaN(x) {alert("不是数字");}

以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断

    if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){alert("不是数字");}

ECMAScript 版本

JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。

JavaScript 用法

HTML 中的脚本必须位于与标签之间。

脚本可被放置在 HTML 页面的和部分中。