Liawn's blog

# JavaScript 简介和使用方法

# JavaScript 简史

    上个世纪九十年代，人们普遍使用电话拨号上网，并且网页的大小、复杂性不断增加，提交一个表单请本需要等很久时间的响应，如果必填域没填或输入无效值那就更加费时。
    为了处理这种简单的验证，Netscape 公司的布兰登·艾奇(Brendan Eich)在 1995 年与 Sun 公司合作开发出 Live Script 客户端脚本语言(服务器端也可使用，名叫 Live Wire)，发布前夕为搭上热炒 Java 的顺风车改名为 JavaScript。
    因微软也推出名为 JScript 的 JavaScript 实现语言，两不同版本暴露出非标准化系列问题。1997 年，ECMA 的 TC39 以 JavaScript1.1 为蓝本完成了 ECMA-262——定义一种名为 ECMAScript 的新脚本语言的标准。
    第二年，ISO/IEC 也采用了 ECMAScript 作为标准，自此各浏觉器开发商将 ECMAScript 作为各自 JavaScript 实现的基础。

# JavaScript 实现

虽然 JavaScript 和 ECMAScript 通常被人们用来表达相同的含义，但 JavaScript 的含义却比 ECMA-262 中规定的要多得多，如下图。
JavaScript

# ECMAScript

    Web 浏览器是 ECMAScript 实现的宿主环境之一，不仅提供基本的 ECMAScript 实现，同时也会提供该语言的扩展(例如 DOM)以便语言与环境之间对接交互。其宿主环境有 Node 和 Adobe Flash。
    ECMAScript 就是对实现 ECMA-262 标准规定的各个方面内容的语言的描述。ECMA-262 标准规定了 ECMAScript 语言的组成部防：语法、类型、语句、关键字、保留字、操作符、对象。
    ECMA-262 第 1 版册除了所有针对浏览器的代码并作了小改动：支持 Unicode 标准，对象变得与平台无关。
    ECMA-262 第 3 版修改了：字符串处理、错误定义、数值输出。新增了正则表达式、新控制语句 try-catch 异常处理。
    ECMA-262 第 5 版新增：JSON 对象、继承的方法和高级属性定义，另外还包含一种严格模式。

# 文档对象模型(DOM)

    文档对象模型是针对 XML 但经过扩展用于 HTML 的应用程序编程接口(API)。DOM 把整个页面映射为一个多层节点结构。开发人员首次无需重新办载网页，就可以借助 DOM 提供的 API 对网页的外观和内容进行修改。
    DOM1 级由 DOM 核心(DOM Core)和 DOM HTML 组成，DOM 核心规定了如何映射基于 XML 的文档结构，DOM HTML 在 DOM 核心上扩展了针对 HTML 的对象和方法。
    DOM2 级在原 DOM 上扩充了鼠标和用户界面事件、范国、遍历等细分模块，而且通过对象接口增加了对 CSS 的支持。
    DOM3 级引入了以统一方式加载和保存文档的方法，新增了验证文挡的方法。也开始支持 XML1.0 规范。

# 浏免器对象模型(CO0M)

也是一种接口，用来处理浏览器窗口和框架及扩展，HTML5 给了标准。

# 在 HTML 中使用 JavaScript

# <script>元素和放置

<script>定义了 6 个元素：async(异步脚本)、charset(用得少)、defer(延迟脚本)、language(已废弃)、src(外部文件)、type(替代 language)

<script>的使用方式：

  1. 直接在页面中嵌入 JavaScript 代码，在<script>和</script>之间写 JavaScript 代码，如果代码里的字符串中有</script>这样的标签记得要使用 “/” 进行转译。

    <script type="text/javascript">
  function sayScript() {
    alert("<\/script>");
  }
</script>
    1
    2
    3
    4
    5

  2. 在页面引入 JavaScript 文件，<script type="text/javascript" src="xxx.js"></script>

    • 在 HTML 不能简写<script />，但在 XHTML 里可以；
    • src 中可以引用外部域的 JavaScript 文件，但该 JavaScript 文件要安全可靠；
    • 一般推荐放在页面主要内容后，</body>标签前，因为放在<head>标签中的话会先下载 JavaScript 文件来解析页面就可能会出现空白的间隙；
    • 解决上面的问题可以用defer="defer"，把<script src="xxx.js" defer="defer"></script>放在<head>标签里，代表立即下载但延迟执行；
    • 与 defer 类似有async，在<head>标签可放多个引用的 JavaScript 文件，立即下载这些 JavaScript 但执行顺序不保证，即多个文件要没关联。

# 扩展

  • 引入型的<script type="text/javascript" src="xxx.js"></script>中，是不会再有嵌在<script>和</script>中的代码，有也不会执行只会执行 src 里的文件。
  • 使用<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容，但在启用了脚本的情况下浏览器不会显示<noscript>元素中的任何内容。