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

1.全局变量的特性：

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

        (function func() {

            i = 100;

        }());

        alert(i);

　　非常不建议不写var.

        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:

    <div>text</div>

    <script>

        var e = document.getElementsByTagName('div')[0];

        e.style.background = 'blue';

    </script>

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

　　　　　　　　所有事件：事件

 

3.异常：

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上

　　　　<div onclick="func()">text</div>

　　　　<script>

        　　function func() {

            //todo

        　　}

　　　　</script>

b.DOM0级处理

    <div >text</div>

    <script>

        var e = document.getElementsByTagName('div')[0];

        e.onclick = func;

        function func() {

            //todo

        }

    </script>

c.DOM2级处理

    <div >text</div>

    <script>

        var e = document.getElementsByTagName('div')[0];

        e.addEventListener('click', func);

        function func() {

            //todo

        }

    </script>

d.IE8以下

    <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：

    <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可以由我们指定。

        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 的混合体。世界时。原子时。