[JS] JavaScript由浅入深(1) 基本特性

1.全局变量的特性：

　　在函数体内直接写的变量（未用var标志）自动升级为全局变量。

?

1 2 3 4

(function func() {     i = 100; }()); alert(i);

　　非常不建议不写var.

?

1 2 3 4 5 6 7 8

var num = 1; (function func() {     i = 100; }()); delete i; delete num; if (typeof i != "undefined") alert(i); if (typeof num != "undefined") alert(num);

　　

 

2.DOM操作

　　a.什么是DOM(Document Object Model)，文档对象模型。包括元素节点，文本节点，属性节点和注释节点。

　　b.DOM操作：

　　　　　　　　HTML:write(),innerHTML,innerText,getElementById()

　　　　　　　　CSS:

?

1 2 3 4 5

<div>text</div> <script>     var e = document.getElementsByTagName('div')[0];     e.style.background = 'blue'; </script>

　　　　　　　　Event:事件有4种添加方式。

　　　　　　　　所有事件：事件

 

3.异常：

?

1 2 3 4 5

try {      throw 'exception happend'; } catch (e) {       alert(e); }

　　

4.类型：

　　JS中5种基本类型：string number boolean undefined null　　和一个复杂类型：object

　　注意:

　　　　typeof null 是object。

　　　　因为null类型只有一个值null，null即代表一个类型，又代表一个空对象的指针。

　　　　因为undefined类型只有一个值undefined，undefined代表一个类型，又代表一个未定义的变量.

　　

　　　　typeof Object 是function

　　　　Object Function String都是构造函数。（推荐以后构造函数名Pascal命名，方法Camel命名）

 

5.内置对象

　　JS中有7个Number String Date Array Boolean Math RegExp默认构造函数。通过new关键字，可以定义对应的对象。

 　  注意：

　　　　prototype是用来向对象添加属性和方法。

　　　　constructor是指向函数本身的指针。

 

6.事件

事件流：

　　事件流是指在页面中接受事件的顺序。

　　事件冒泡指从最具体的节点到最不具体的节点,事件捕获和事件冒泡完全相反。

事件对象：

　　触发DOM事件时，会产生事件对象。

　　type：事件类型　　　　　　target：相当于sender　　　　　　stopPropagation()：阻止事件冒泡　　　　preventDefault():阻止事件默认行为（如：a标签默认点击跳转事件）

添加事件：

　　addEventListener(事件名，函数，是否冒泡)

　　attachEvent(on事件名，函数)

　　on事件 = 函数

a.直接在html上

?

1 2 3 4 5 6

<div onclick="func()">text</div> <script>     　　function func() {         //todo     　　} </script>

b.DOM0级处理

?

1 2 3 4 5 6 7 8

<div >text</div> <script>     var e = document.getElementsByTagName('div')[0];     e.onclick = func;     function func() {         //todo     } </script>

c.DOM2级处理

?

1 2 3 4 5 6 7 8

<div >text</div> <script>     var e = document.getElementsByTagName('div')[0];     e.addEventListener('click', func);     function func() {         //todo     } </script>

d.IE8以下

?

1 2 3 4 5 6 7 8

<div >text</div> <script>     var e = document.getElementsByTagName('div')[0];     a.attachEvent('onclick', func);     function func() {         //todo     } </script>

　　

 

7.BOM

　　BOM(BrowserObjectModel)浏览器对象模型。

　　包括：window，timing，history，location，screen

window：

　　window对象代表浏览器窗口。DOM节点属于window对象的一个属性。所有的全局变量自动成为window对象的一个属性。

timing：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div>text</div> <div>text</div> <script>     setInterval(function () {         var e = getDivs()[0];         e.innerHTML = new Date().toLocaleString();     }, 500);       setTimeout(function() {         var e = getDivs()[1];         e.innerHTML = new Date().toLocaleString();     }, 500);       function getDivs() {         return document.getElementsByTagName('div');     } </script>

 

8.DOM控制HTML：

　　增：document.createElement(tagName);

　　删：element.removeChild(element);

　　改：element.setAttribute(attrName, attrValue);

　　查：

　　　　document.getElementById(elementId); 　　　　element.parentNode;　　　　element.childNodes;

　　　　document.getAttribute(attrName);

 

9.prototype（原型）

 　　除了基本类型外，都有prototype属性。

 　　prototype（包括原型链）中的属性会直接继承到对象上。

　　

10.call和apply

　　当用call和apply调用方法时，方法中的this可以由我们指定。

?

1 2 3 4 5 6 7 8 9 10

function func(a, b) {     this.sum = a + b;     return this; } var o1 = {}; var o2 = {}; func.call(o1, 3, 5); func.apply(o2, [3, 4]); alert(o1.sum); alert(o2.sum);

 

时间：

　　GMT（Greenwich Mean Time）——格林尼治标准时间，世界基准时间

　　UTC 这几个字母是英文Coordinated Universal Time 和法语Temp UniverselleCoordinee 的混合体。世界时。原子时。