JavaScript高级程序设计（笔记一）

QQ接受的文件：d:我的文档——tencent files 821709846 -filerecv


html5:用于绘画的canvas;video、audio;article、footer、header、nav、section.
表单控件：date、time、email、url、search、calendar;




严格模式
" use strict"


所有语句一般都要有分号结尾;




var message = "hi",
    found = false,
    age = 29;
这样提高可读性;
基本数据类型：
Undefined
Null
Boolean
Number
String


typeof 操作符主要用于检测基本类型
若是一个对象或null 则返回“object”；


<script>
    var s = 'hello',
        b = true,
            i = 22,
            u,
            n = null,
            o = new Object();
    alert(typeof  s);    // string
    alert(typeof  b);    // number
    alert(typeof  i);    // boolean
    alert(typeof  u);    // undefined
    alert(typeof  n);    // object
    alert(typeof  o);    // object
</script>
 
instanceof 操作符主要用于检测引用类型
alert（person instanceof Object）  //变量person 是 Object ？是则返回true,






1:判断一个数是不是位于最大数和最小数之间
使用isFinite()函数
var result = 1000;
alert(isFinite(result));  // true


2:isNaN()
判断这个参数是不是“不是数值”
不是数值则为true
是数值则为false
alert(isNaN(NaN));  //true
alert(isNaN(10));   //false
alert(isNaN('blue'));  //true
alert(isNaN(true));  //false
    
var num1 = Number("hello world!");  //NaN
var num2 = Number(" ");             // 0
var num3 = Number("0000011");       //11
var num4 = Number(true);            //1


var num1 = parseInt("123blue");     //123
var num2 = parseInt('');            //Nan
var num3 = parseInt("oxA")          //10十六进制
var num4 = parseInt(22.5);          // 22
var num5 = parseInt("o70");         //56 八进制
var num6 = parseInt('70');          //70


在ecmascript5中parseInt()已经不具有解析八进制值得能力了
因此需要传入第二个参数
如：
var num = parseInt('oxAF', 16);   //175
也可以这样
var num = parseInt('AF', 16);    //175
var num1 = parseInt("10",2);     //2
var num2 = parseInt("10", 8);    //8
var num3 = parseInt("10", 10);    //10




parseFloat()只能解析十进制值，因此没有第二个参数可选。


3：转换字符串


var age = 11;
var ageAsstring = age.toString();   //字符串 11 
var found = true;
var foundAsString = found.toString();   //字符串 true


var num = 10;
alert(num.toString());     //"10"
alert(num.toString(2));    // "1010"


4:object类型


var o = new Object();


object 具有下列属性和方法


constructor :保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）


hasownproperty（propertyName）：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。
eg：o.hasownproperty("name")






for-in;


eg:
for (var proName in window) {
document.write(proName);
}


arguments对象，类数组。
function hello(){
alert("this is :" + arguments[0] + arguments[1]);
}
作用域


<script>
   var color = 'blue';
    function changeC() {
        if(color == 'blue') {
            color = 'red';
        } else {
            color = 'blue';
        }
    }
    changeC();
    alert('now color is :' + color);   //red
</script>






<script>
 function add(num1, num2) {
     var sum = num1 + num2;
     return sum;  //必须要return语句，否则，res则会报错。
 }
 var res = add(10, 20);
    alert(res);
</script>




创建Object实例的方法有两种
<script>
var person = new Object();
//var person = {};==  person = new Object();
    person.name = 'zhb';
    person.age = 24;
//    the second method
    var person = {
        name : "zhb",
        age : 24
    };


</script>


检测数组


if(Array.isArray(value)) {
    //do something
}
转换方法
var colors = ['red', 'blue', 'green'];
    alert(colors.toString());  // red,blue ,green  这是一个字符串。
    alert(colors.valueOf()[0]);  //red    返回的是一个数组。
 alert(colors.join("~~")); 用作分隔符


栈方法


栈是一种LIFO（后进先去）的数据结构。


push（）可以接受任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后的数组长度。
pop（）从数组末尾移除最后一项，减少数组的长度值，然后返回移除的项。




var colors = ['red', 'blue', 'green'];
var count = colors.push('yellow', 'black');
    alert(count);  //5;
    var item = colors.pop();
    alert(colors.length);  //4


队列方法
队列是FIFO（先进先出）
shift（）他能够移除数组中的第一个项，并返回该项，同事数组的长度减一。
unshift（）在数组前端添加任意个项，并返回数组的长度。


重排序


reverse（）和sort（）


reverse（）方法会对反转数组项的顺序


 var values  =[1,2,3,4,5];
 values.reverse();
alert(values);  //5 4 3 2 1


sort排序
<script>
    function compare(value1, value2) {
        if(value1 < value2) {
            return -1;
        } else if(value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }
 var values  =[1,2,3,49,5];
values.sort(compare);
alert(values);
</script>




操作方法


concat()
可以基于当前数组中的所有项，创建一个新数组。


<script>
  var colors = ['red', 'green','blue'];
    var colors2 = colors.concat('yellow', ['black', 'brown']);
    alert(colors);
    alert(colors2);
</script>




slice（）方法


删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。
eg：splice（0， 2）会删除数组中的前两项。


插入：可以向指定位置插入任意的项，只需提供3个参数：起始位置，0（要删除的项数）和要插入的项。
eg：splice（2， 0，“red”,'green'）会从当前数组的位置2开始插入字符串‘red’和‘green’。


替换： 可以向指定位置插入任意数量的项，同时删除任意数量的项。需要3个参数。起始位置，要删除的项数和要插入任意数量的项。
eg：splice（2,1，‘red’，‘green’）会删除当前数组位置2 的项，然后再从位置2开始插入字符串‘red’和‘green’。


splice（）方法始终会返回一个数组，改数组中包含从原数组中删除的项。


位置方法：


<script>
  var number = [1,2,3,4,5,4,3,2,1];
    alert(number.indexOf(4));  //3
    alert(number.lastIndexOf(4));   // 5
    alert(number.indexOf(4,4));    // 5
    alert(number.lastIndexOf(4, 4));  // 5
    


</script>




迭代方法


every（）：对数组中每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。
filter（）：对数组中的每一项运行给定的函数，返回函数会返回true的项组成的数组。
forEach()： 对数组中的每一项运行给定的函数，这个方法没有返回值。
map（）：对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组。
some（）：对数组中的每一项运行给定的函数，如果该函数对任一项返回true，则返回true。
以上方法都不会修改数组中的包含的值。




<script>
  var number = [1,2,3,4,5,4,3,2,1];
  var everyResult = number.every(function(item, index, array) {
      return (item >2);
  });
    alert(everyResult);  //false


///


  var someResult = number.some(function(item, index, array) {
      return (item >2);
  });
  alert(someResult);  //true





  var filterResult = number.filter(function(item, index, array) {
      return (item >2);
  });
  alert(filterResult);  //[3,4,5,4,3]


  ///


  var mapResult = number.map(function(item, index, array) {
      return (item * 2);
  });
  alert(mapResult);


    ///


  var forEachResult = number.forEach(function(item, index, array) {
     //执行某些操作
  });
  alert(forEachResult);
</script>


Date 类型


RegExp 类型


Function 类型


<script>
 function sum(num1, num2) {
     return num1 + num2;
 }
    var sun = function(num1, num2) {
        return num1 + num2;
    };
</script>


没有重载


<script>
 function addSomeNumber(num) {
     return num + 100;
 }
    function addSomeNumber(num) {
        return num + 200;
    }
    var result = addSomeNumber(100);  //300


    var addSomeNumber = function(num) {
        return num + 100;
    }
    addSomeNumber = function (num) {
        return num + 200;
    }
 var result = addSomeNumber(100);  //300
</script>




作为值得函数
<script>
function callSomeFunction(someFunction, someArgument) {
    return someFunction(someArgument);
}


    function add10(num) {
        return num + 10;
    }
    var result = callSomeFunction(add10, 10);
    alert(result);




    function getGreeting(name) {
        return "hello" + ' '+ name;
    }
    var result2 = callSomeFunction(getGreeting, 'zhenbiao');
    alert(result2);


</script>




按某种方式进行排序


<script>
function createComparisonFunction(propertyName) {
    return function(object1, object2) {
        var values1 = object1[propertyName];
        var values2 = object2[propertyName];
        if(values1 < values2) {
            return -1;
        } else if (values1 > values2) {
            return 1;
        } else {
            return 0;
        }
    };
}
    var data = [{name : 'zhb', age : 20},{name : 'wll',age : 23}];
    data.sort(createComparisonFunction('name'));
    alert(data[0].name);
    data.sort(createComparisonFunction('age'));
    alert(data[0].name);
</script>




递归调用


function faction(num) {
    if(num <= 1) {
        return 1;
    } else {
        return num * faction(num - 1);
    }
}
//    这方法对函数名的耦合性太高，可以使用arguments.callee
    function faction(num) {
        if (num <= 1){
            return 1;
        } else {
            return num * arguments.callee(num - 1);
        }
    }




函数属性和方法




每个函数都包含两个非继承而来的方法：apply（）和call（）方法。


    <script>
function sum (num1, num2) {
    return num1 + num2;
}
    function callSum1(num1, num2) {
        return sum.apply(this, arguments);
    }
    function callSum2(num1, num2) {
        return sum.apply(this, [num1, num2]);
    }
    alert(callSum1(10,10)); //20
    alert(callSum2(10,10)); //20
/
function callSum1(num1, num2) {
    return sum.call(this, num1, num2);
}
alert(callSum1(10,10)); //20
使用call（）方法的情况下，必须明确的传入每一个参数。


</script>




基本包装类型


var obj = new Object('some text');
alert(obj instanceof String);   //true




内置对象


Global对象


Math对象


var values = [1,2,3,4,5,6,7,8];
var max = Math.max.apply(Math, values);


舍入方法


Math.cell() 向上取整
Math.floor()  向下取整
Math.round() 执行四舍五入




random（）方法


值 = Math.floor(Math.random() * 可能值得总数 + 第一个可能的值)


function selectFrom(lowerValues, upperValues) {
var choices = upperValues - lowerValues + 1;
return Math.floor(Math.random() * choices + lowerValues);
}
var num = selectFrom(2, 10);
alert(num);


2016年1月29日


JavaScript高级程序设计


面向对象程序设计///


创建对象的最简单方式就是创建一个Object的实例，然后在为他添加属性和方法。




//   工厂模式
    function createPerson(name, age, job) {
        var o = new  Object();
        o.name = name;
        o.age = age;
        o.job = job;
        o.sayname = function() {
            alert(this.name);
        };
        return o;
    }
    var person1 = createPerson('zhb', 20, 'worker');
    person1.sayname();
</script>


可以无数次的调用这个函数，每次返回包含三个属性一个方法的对象。工厂模式解决了创建多个相似对象的问题，但是没有解决对象识别的问题（即怎样知道一个对象的类
型）。




//   构造函数模式
    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayname = function() {
            alert(this.name);
        };
    }
    var person1 = new Person('zhb', 20, 'worker');
    var  person2 = new Person('wll',10, 'Doctor');
    person1.sayname();
    /*函数名Person的首字母应大写，构造函数始终都应该以一个大写字母开头，而非构造函数则应该以
    一个小写字母开头*/
其中：
this.name = sayname;
function sayname() {
alert(this.name);
}




<script>
//   原型模式
    function Person() {


    }
Person.prototype.name = 'hello';
Person.prototype.age = 29;
Person.prototype.job = 'worker';
Person.prototype.sayName = function() {
    alert(this.name);
};
var person1 = new Person();
person1.hasOwnProperty('name')  // false


/*hasOwnProperty()
* 方法可以检测一个属性是存在于实例中，还是存在于原型中。
* 只有给定属性存在于对象实例中时，才会返回true。
*
* 原型与in操作符
* 在单独使用in操作符时，会在通过对象能够访问给定属性时返回true，无论该属性存在于实例中还是
* 在原型中。
*alert('name' in person1);
*
* 要取得对象上所有可枚举的实例属性，可是使用Object.keys()方法，接受一个对象作为参数，返回
* 一个包含所有可枚举属性的字符串数组。
*
* */
var keys = Object.keys(Person.prototype);
console.log(keys);//["name", "age", "job", "sayName"]
var p1 = new Person();
    p1.name = 'bob';
    p1.age = 22;
    var p1keys = Object.keys(p1);
    console.log(p1keys);//["name", "age"]
/*
* 如果想要得到所有实例属性，无论是否可枚举，都可以使用Object。getOwnPropertyNames()方法
* */
    var keys = Object.getOwnPropertyNames(Person.prototype);
    console.log(keys);//["constructor", "name", "age", "job", "sayName"]
    



/
function Person () {


}
Person.prototype = {
    name : "monday",
    age : "23",
    job : "banzhaung",
    sayName : function() {
        alert(this.name);
    }
};
    /*
    * 组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性
    * 结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度的节省了内存。
    * 还可以支持向构造函数传递参数。
    * */


    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = ['sheliby', 'court'];
    }
    Person.prototype =　{
        constructor : Person,
        sayName : function(){
            alert(this.name);
        }
    }
    var person1 = new Person('hello', 55, 'cnd');
    var person2 = new Person('hai',22, 'come');
    person1.friends.push('today');
    alert(person1.friends);
    alert(person2.friends);
    alert(person1.friends === person2.friends );  //false
    alert(person1.sayName === person2.sayName);    //true


/*
* 继承
* 原型链——原型链是实现继承的主要方法。基本思想是：利用原型让一个引用类型继承另一个引用类型
* 的属性和方法。
* */
    function SuperType() {
        this.prototype = true;
    }
    SuperType.prototype.getSuperValue = function() {
        return this.prototype;
    };
    function SubType() {
        this.prototype = false;
    }
    //继承了SuperType
    SubType.prototype = new SuperType();


    SubType.prototype.getSubValue = function() {
        return this.subproperty;
    };
    var instance = new SubType();
    alert(instance.getSuperValue());


    /*借用构造函数
    *通过使用call（）方法或apply（）方法。
    * */
    function SuperType() {
        this.colors = ["erd", "blue", "green"];
    }
    function SubType() {
        //继承SuperType
        SuperType.call(this);
    }
    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors);
    var instance2 = new SubType();
    alert(instance2.colors);
/*
* 传递参数
* 相对与原型链而言，借用构造函数有一个很大的优势，即可以在子类型构造函数中向超类型构造函数传递参数。
*
* */
    function SuperType(name) {
        this.name = name;
    }
    function SubType() {
     //jichengk supertype,同时还传递了参数
        SuperType.call(this, "zhengbiao");
        this.age = 24;
    }
    var instance = new SubType();
    alert(instance.name);
    alert(instance.age);
    /*
    * 组合继承
    * 有时候也叫伪经典继承，指的是讲原型链和借用构造函数的的技术组合在一起。
    * */
    function SuperType(name) {
        this.name = name ;
        this.colors = ["red", "blue","green"];
    }
    SuperType.prototype.sayName = function() {
        alert(this.name);
    };


    function SubType(name ,age) {
        //继承属性
        SuperType.call(this, name);
        this.age = age;
    }
    //继承方法
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function() {
        alert(this.age);
    };
    var instance1 = new SubType("zhenbiao",23);
    instance1.colors.push("black");
    alert(instance1.colors);
    instance1.sayAge();
    instance1.sayName();


    var instance2 = new SubType("wulinglin", "22");
    alert(instance2.colors);
    instance2.sayAge();
    instance2.sayName();








    
</script>


2016年2月1日


第六章看完。
开始——193


2016年2月2日
十三章——事件对象


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="myDiv">
1111
</div>
<script>
    /*
    * 获取属性
    * */
    var myDiv = document.getElementById('myDiv');
    var getAttr = myDiv.getAttribute('id');
    console.log(getAttr);
    /*
    * 设置属性
    * */
    var setAttr = myDiv.setAttribute('title', "这是标题");
    /*
    *删除属性
    * */
    var removeAttr = myDiv.removeAttribute('title');


    /*
    * 第十三章——事件
    *事件流：描述的是从页面中接受事件的顺序.
    * ie中的事件叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接受。然后逐级
    * 向上传播到较为不具体的节点
    * 事件捕获：
    * 事件捕获的意思——是从不太具体的节点应该更早的接受事件，而最具体的节点应该最后接受事件。
    * IE678不支持事件捕获。
    * 一般情况下都用事件冒泡。
    *DOM0 级事件处理程序：优势--简单、跨浏览器优势。
    *
    */
var btn = document.getElementById('myBtn');
    btn.onclick = function() {
        alert(this.id);    //myBtn
    };
    /*
    * 删除DOM0 级方法指定的事件处理程序
    * */
    btn.onclick = null;  //删除事件处理程序
/*
* DOM2  级事件处理程序-可以添加多个事件处理程序。
*处理事件：addEventListener()
* 删除事件: removeEventListener()
* 他们都接受三个参数；要处理的事件名、事件处理函数、布尔值。
* 其中：布尔值为true时表示-在捕获阶段。false表示在冒泡阶段。
*
 *  */
    var btn = document.getElementById('myBtn');
    btn.addEventListener("click", function() {
        alert(this.id);
    }, false);
    btn.addEventListener("click", function() {
        alert("hello world！");
    }, false);
//移除DOM2级事件
    var btn = document.getElementById('myBtn');
    var handler = function () {
        alert(this.id);
    };
    btn.addEventListener("click", handler, false);


    //.............................
    btn.removeEventListener("click", handler, false);  //有效删除事件。


//IE事件处理程序-主要针对678
    /*
    * attachEvent() and detachEvent() 只存在于冒泡阶段。
    * 在IE中事件名称需要加上on！！！！
    * */
    var btn = document.getElementById('myBtn');
    btn.attachEvent("onclick", function() {
        //DOM0级的作用域就是所属元素的作用域，DOM 2 级事件程序会在全局作用域中运行，也就是this == window。
        alert(this == window);// true
    });
    btn.attachEvent("onclick", function() {
        alert("hello me!");
    });
    //最后的输出结果是反序的，hello me 》 true。
    //删除IE中的事件处理程序
    var btn = document.getElementById('myBtn');
    var handler = function() {
        alert("hello me!");
    };
    btn.attachEvent("onclick", handler);
    //----------------------------------------


    btn.detachEvent("onclick", handler);


/*
* 跨浏览器的事件处理程序。
* 第一个方法是创建addHandler（），这个方法属于EventUtil的对象，接受三个参数，要操作的元素、事件名称、事件处理函数。
*利用removeHandler()移除之前添加的事件处理程序，默认是DOM 0 级。
*
* */
    var EventUtil = {
        addHandler : function(element, type, handler) {
            if(element.addEventListener) {
                element.addEventListener(type, handler,false);
            } else if (element.attachEvent) {
                element.attachEvent("on"+ type ,handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler : function(element, type, handler) {
            if(element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on"+ type, handler);
            } else {
                element["on"+ type] = null;
            }
        }


    };
var btn = document.getElementById("myBtn");
    var handler = function() {
        alert("hello me!!");
    };
    EventUtil.addHandler(btn, "click", handler);
    //这里省略了其他代码
    EventUtil.removeHandler(btn, "click", handler);
/*
* 事件对象
* DOM中的事件对象
*
* */
var btn = document.getElementById("myBtn");
    btn.onclick = function(event) {
        alert(event.type);   //"click"
    };
    btn.addEventListener("click", function(event) {
        alert(event.type);    //click
    }, false);


/*
* 需要通过一个函数处理多个事件时，可以使用type属性。
* */
 var btn = document.getElementById('myBtn');
    var handler = function(event) {
        switch (event.type) {
            case "click":
                alert("hello");
                break;
            case  "mouserover":
                event.target.style.backgroundColor = "red";
                break;
            case "mouserout";
                event.target.style.backgroundColor = " ";
                break;
        }
    };
    btn.onclick = handler;
    btn.onmousemove = handler;
    btn.onmouseout = handler;


/*
* 阻止特定事件的默认行为，可以使用preventDefault()方法。
* 只有cancelable属性值为true的事件，才能使用来取消其默认行为。
* 另外，stopPropagation()方法用于立即停止事件在DOM层次中传播，即取消其进一步的事件捕获或冒泡。
* */
    var link = document.getElementById("myLink");
    link.onclick = function(event) {
        event.preventDefault();
    };
    var btn = document.getElementById('myBtn');
    btn.onclick = function(event) {
        alert("hello");
        event.stopPropagation();
    };
    document.body.onclick = function(event) {
        alert("body clicked");
    };


/*
*对于这个例子而言，如果不调用stop--，就会子啊单机按钮是出现两个警示框，可是由于click事件根本不会
 * 传播到document.body，因此就不会触发注册在这个元素上的onclick事件处理程序。
* */
    ///


page——358
















</script>
</body>
</html>