JavaScript-w3c学习

如果对某个模块不熟悉，仔细地阅读w3c关于这个模块的介绍[其实并不多]，不要打眼一看，就认为找到了自己需要的东西。
注意：有个JavaScript高级教程，入口不好找，很重要，别忘了

笔记

• JavaScript标识符对大小写敏感
• if(x=0)不通过，x=0返回值是0，赋值总是返回赋值的值
• null的数据类型是对象，这是JavaScript的一个bug，本应该是null的；null和undefined值相等，类型不同
• NaN做关系运算，返回false；算数运算，返回NaN；和自身不相等
• 在所有数字运算中，JavaScript会强制把字符串转换为数字。但是，由于加法和级联运算使用同一个符号（+），+的一个运算数为字符串就按照级联运算来处理。
• 字符串和数字做比较运算时，会把字符串转化为数字【非数字式字符串不能转化为数字，会转化为NaN，e.g. ‘a’】。字符串之间作比较时，按照字母排序比较。
• 未声明的标识符被赋值时，会自动为该标识符创建一个全局变量，并赋值。而除了typeof之外，运算符只能用于已声明的变量，否则会报错。
• 提升 hoisting
• 所有JavaScript对象都拥有toString方法
• 正则表达式（构成搜索模式的字符序列）
• break 语句和 continue 语句都可以与标签语句联合使用，返回代码中的特定位置
• arguments对象
• 实现一个只能通过add()修改的计数器[局部变量且只初始化一次]
• 函数实际上是功能完整的对象，函数名只是指向函数对象的引用值。
• ECMA-262 只定义了两个内置对象，即 Global 和 Math。它们在 ECMAScript 程序开始执行时就被实例化了，开发者不必明确实例化内置对象。
• JSONP可以跨域请求JSON数据
• HTML DOM Event 对象
• JavaScript保留词：不能把这些保留词作为变量、标记或函数名；还应尽量避免使用HTML事件处理程序的名称、HTML 和 Window 对象和属性的名称、Java 对象和属性、JavaScript 内建对象的名称属性和方法。

JavaScript 简介

JavaScript 是因特网上最流行的脚本语言，它存在于全世界所有 Web 浏览器中，能够增强用户与 Web 站点和 Web 应用程序之间的交互。
在HTML中，JavaScript是由web浏览器执行的指令。

历史

 当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。当时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。
而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。
 那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。于是 JavaScript诞生 了，并成为了因特网的必备组件。

三足鼎立 ：在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。
与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。

标准化
 1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262,也即 ECMA Script。。
 从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。

实现

JavaScript 实现由三部分组成：

• ECMAScript：JavaScript的核心，描述了该语言的语法和基本对象
• DOM：描述了处理网页内容的方法和接口
• BOM ：描述了与浏览器进行交互的方法和接口

DOM

即document object model，文档对象模型。当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。通过HTML DOM，JavaScript能够访问和改变HTML文档的所有元素。

看这一块，可以知道怎样直接对元素做操作，包括增删，样式、添加事件等等

document对象

HTML DOM 文档对象(HTML DOM Document 对象)是您的网页中所有其他对象的拥有者。
文档对象代表您的网页，如果您希望访问 HTML 页面中的任何元素，那么您总是从访问 document 对象开始。

BOM

即browser object model，浏览器对象模型。通过BOM，JavaScript能够与浏览器对话。
不存在浏览器对象模型（BOM）的官方标准，因此每种浏览器都有自己的 BOM 实现。有一些事实上的标准，如具有一个窗口对象和一个导航对象，不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。但是现代的浏览器已经（几乎）实现了与 JavaScript 交互的相同的方法和属性，因此 BOM经常被提到。

这一块主要介绍了浏览器窗口对象即window对象的几个属性和方法，包括location、history、alert等弹出窗、setInterval等。在使用它们时可以省略掉前面的"window."

Window对象

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员：

• 全局变量是 window 对象的属性。
• 全局函数是 window 对象的方法。
  甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("header"); // 等同于 document.getElementById("header");

AJAX

Asynchronous JavaScript And XML，异步的JavaScript和XML。其实这是一个令人误导的名称，因为Ajax 应用程序可能使用 XML 来传输数据，也可能使用纯文本或 JSON 文本格式。

AJAX并不是一种编程语言，而仅仅是结合了浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）和JavaScript 和 HTML DOM（显示或使用数据）
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。

AJAX是开发者的梦想，因为可以：

• 不刷新页面更新网页
• 在页面加载后从服务器请求数据
• 在页面加载后从服务器接收数据
• 在后台向服务器发送数据

这一块主要介绍了怎样利用XMLHttpRequest对象发送请求，从而实现ajax。我觉得这是最原始的和服务器进行数据交互的方式，我们现在用的框架对这些请求进行了封装。

补充：

为什么说AJAX实现了“只更新网页的部分，而不需要重新加载整个页面”？那么在AJAX之前是需要重新加载整个页面吗？
在 AJAX 被发明之前，浏览器发起请求的方式：
1、地址栏。用户在地址栏输入 http://baidu.com ，按回车，就向 http://baidu.com发起了一个请求（同时页面刷新）
2、a 标签。用户点击页面中的 a 链接，也会发起一个请求（同时页面刷新）
3、img 标签。页面中如果有 img 标签，那么就会发起一个对此图片的请求（页面没有刷新，但是只能请求图片）类似的还有 link 标签、script 标签，都可以对某一类文件的请求。
 这些请求发起方式，要么会导致页面刷新，要么只能请求特定类型的文件（图片、CSS 或 JS）。复杂的网页应用非常需要一个 「可以请求任意类型的数据，并获取数据内容，且不会导致页面重新加载」 的方案，就是现在的AJAX

XMLHttpRequest对象

Ajax 的核心是 XMLHttpRequest 对象。它用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
所有现代浏览器都支持 XMLHttpRequest 对象。

数据类型

包括：number，string，boolean，null，undefined，以及object，function
对象类型有三种：Object，Array，Date

类型转换

• 自动转换
• 使用函数

自动转换

尝试操作“错误”的数据类型时，JavaScript会尝试将其转化为正确地类型
e.g. 数字运算时，会尝试将字符串转化为数字；输出变量时，会自动调用变量的toString()

使用函数

• 转字符串 toString
• 转number parseInt和parseFloat
• 强制转换 Number(), String(), Boolean()
  网址，包括这几种方法特别是转数字时的规则

变量有效期

JavaScript 变量的有效期始于其被创建时。
局部变量会在函数完成时被删除。
全局变量会在关闭页面时被删除。

关闭、刷新页面时都会把原来的全局变量清空。大概是因为变量本来就是属于浏览器的吧。

变量作用域 let const var

在 ES2015 之前，JavaScript 只有两种类型的作用域——全局作用域和函数/局部作用域：

• 在函数之外声明的变量拥有全局作用域，可以在 JavaScript 程序中的任何位置访问。
• 函数内声明的变量拥有函数作用域，只能在它们被声明的函数内访问。

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const
这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量和常量。通过let 和 const在块 {} 内声明的变量无法从块外访问

this关键词

JavaScript中this指的是它所属的对象。
它不同的使用位置决定了它拥有不同的值：

• 单独的情况下，拥有者是全局对象，因此this指的是全局对象。
• 在方法中，this指的是所有者对象。
• 在函数（function）中，函数的拥有者默认绑定this，因此this指的是全局对象。严格模式下不允许默认绑定，this 是undefined。
• 在事件中，this 指的是接收事件的元素。
  call() 和 apply() 这样的方法通过显式绑定可以将this引用到任何对象。
  ES2015引入了箭头函数，箭头函数没有自己的this，不适合定义对象方法

转义字符

由于字符串必须由引号包围，JavaScript会误解这个字符串：
 var y = "中国是瓷器的故乡，因此 china 与"China（中国）“同名。”
该字符串将被切为 “中国是瓷器的故乡，因此 china 与”。

使用反斜杠转义字符可以解决这个问题，反斜杠转义字符的作用是把那些正常情况下不被允许的字符插入到字符串中。
JavaScript中有效的转义序列：


补充：ECMAScript 的字符字面量[用到了反斜杠]

日期

JavaScript 获取日期方法

时区

• 在设置日期时，如果不规定时区，则 JavaScript 会使用浏览器的时区。
• 在获取日期时，如果不规定时区，则结果会被转换为浏览器时区。

e.g. 日期/时间以 GMT（格林威治标准时间）创建，如果用户从中国进行浏览，该日期/时间将被转换为 CST（中国标准时间）。

jQuery vs JavaScript

 jQuery 由 John Resig 于 2006 年创建。它旨在处理浏览器不兼容性并简化 HTML DOM 操作、事件处理、动画和 Ajax。十多年来，jQuery 一直是世界上最受欢迎的 JavaScript 库。
 但是，在 JavaScript Version 5（2009）之后，大多数 jQuery 实用程序都可以通过几行标准 JavaScript 来解决。

有用的例子