javascript 高級程序設計學習筆記

時間 2019-11-30

標籤 javascript 高級程序設計學習筆記欄目 JavaScript 简体版

原文原文鏈接

<!--
<script>
// 異步請求封裝 IE6即以上瀏覽器
// ajax(url,fnSucc,selectID,fnFaild)
//url 請求地址
//fnSucc 異步請求後的內容處理函數
//fnFaild 請求失敗處理函數

function ajax(url,fnSucc,fnFaild)
{
//1.建立Ajax對象
//非IE6
var oAjax;
if(window.XMLHttpRequest)//不會報錯，只會是undefined
{oAjax=new XMLHttpRequest();}
else
//iE6 IE5
{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
//alert(oAjax);
//2.鏈接服務器
//open(方法,文件名,異步傳輸)
oAjax.open("get",url,true);//制止緩存
//3.發送請求
oAjax.send();
//4.接收返回值和服務器通信的時候此事件發生
oAjax.onreadystatechange=function()
{
//oAjax.readyState //瀏覽器和服務器，進行到哪一步了異步握手過程
if(oAjax.readyState==4)//讀取完成（可能文件不存在）
{
if(oAjax.status==200 || oAjax.status==304)//請求成功 304即便瀏覽器緩存了也返回數據
{
fnSucc(oAjax.responseText);
//alert("成功"+oAjax.responseText);
}
else
{
if(fnFaild)//fnFaild傳進來時
{
fnFaild(oAjax.status);
}
//alert("失敗:"+oAjax.status);//status爲404
}
}
}

}

window.onload=function(){
var oBtn=document.getElementById("left");
oBtn.onclick=function()
{
ajax("http://28967904.jsp.jspee.cn/ext/singlePage/list/json-1-1-20",function(str){
var da= JSON.parse(str); //JSON數據解析
alert(da.totalRow)
},function(erorr){
console.log('請求出錯：'+erorr);
})
}
}

</script> javascript

var Ajax = Factory.create();java

Ajax.prototype = {
init: function (successCallback, failureCallback) {
this.xhr = this.createXMLHttpRequest();
var xhrTemp = this.xhr;
var successFunc = null;
var failFunc = null;node

if (successCallback != null && typeof successCallback == "function") {
successFunc = successCallback;
}android

if (failureCallback != null && typeof failureCallback == "function") {
failFunc = failureCallback;
}ios

//this.get.apply(this, arguments);
//this.post.apply(this, arguments);web

this.xhr.onreadystatechange = function () {
if (xhrTemp.readyState == 4) {
if (xhrTemp.status == 200) {
if (successFunc != null) {
successFunc(xhrTemp.responseText, xhrTemp.responseXML);
}
}
else {
if (failFunc != null) {
failFunc(xhrTemp.status);
}
}
}
}
},
get: function (url, async) {
this.xhr.open("GET", url, async);
this.xhr.send();
},
createXMLHttpRequest: function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
else {
return new ActiveXObject("Microsoft.XMLHTTP");
}

throw new Error("Ajax is not supported by the browser!");
},
post: function (url, data, async) {
this.xhr.open("POST", url, async);
this.xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.xhr.send(data);
},
random: function (length) {
var array = new Array("0", "1", "2", "3", "5", "6", "7", "8", "9");
var len = parseInt(length);
var key = "";

for (var i = 0; i < len; i++) {
key += Math.floor(Math.random() * 10);
}

return key;
}
}

// 多重prototype鏈的例子
function Employee(name)
{
this.name = "";
this.dept = "general";
this.gender = "unknown";
}
function WorkerBee()
{
this.projects = [];
this.hasCar = false;
}
WorkerBee.prototype = new Employee; // 第一層prototype鏈
function Engineer()
{
this.dept = "engineer11"; //覆蓋了 "父對象"
this.language = "javascript";
}
Engineer.prototype = new WorkerBee; // 第二層prototype鏈
var jay = new Engineer("Jay");
var flag = true;
if (flag)
{
alert(jay.dept); //engineer, 找到的是本身的屬性
alert(jay.hasCar); // false, 搜索到的是本身上一層的屬性
alert(jay.gender); // unknown, 搜索到的是本身上二層的屬性
} */
</script>

<!-- 本身作的兩個簡單的封裝小例子
<script>
function calc(a,b){
this.a = a;
this.b = b;
}
calc.prototype.c = 5;
calc.prototype.sum = function(){
var sum = this.a + this.b + this.c;
return sum;
}
var result = new calc(3,4);
alert(result.sum());
</script>

<!-- 基礎篇
<script>
//做爲值的函數
function callSomeFunction(someFunction, someArgument){
return someFunction(someArgument);
}
function add10(num){
return num + 10;
}
var result1 = callSomeFunction(add10, 10);
alert(result1); //20

//每一個函數都有兩個非繼承來的方法apply和call，他們的第一個參數都是一個樣的是this，不一樣的只是接收第二個參數方式不一樣，apply的第二個參數能夠是數組，也能夠是對象，call的第二個參數要一一列舉出來傳給函數，
function sum(num1, num2){
return num1 + num2;
}
function callSum1(num1, num2){
return sum.apply(this, arguments); // 傳入 arguments 對象
}
function callSum2(num1, num2){
return sum.apply(this, [num1, num2]); // 傳入數組
}
alert(callSum1(10,10)); //20
alert(callSum2(10,10)); //20

function sum(num1, num2){
return num1 + num2;
}
function callSum(num1, num2){
return sum.call(this, num1, num2);
}
alert(callSum(10,10)); //20

//函數內部的另外一個特殊對象是 this，換句話說，this引用的是函數據以執行的環境對象——或者也能夠說是 this 值（當在網頁的全局做用域中調用函數時，this 對象引用的就是 window）。
window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"

//判斷是否Boolean值，有值爲true，空爲false;
var message = "hi";
if(message){
alert(true);
}

//for in 列舉出window對象的全部屬性
for(var propName in window){
document.write(propName + " ");
}

//傳遞參數證實對象是按值傳遞，而不是按引用傳遞的，
function setname(obj){
obj.name = "TOM";
}
var person = new Object();
setname(person);
alert(person.name);

//查找元數所在索引位置
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(1,4)); //8 從第四個索引日後查找1這個元素

function outer(){
inner();
}
function inner(){
alert(inner.caller);
}
outer();

//取數組裏的最大值
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);
alert(max);

//隨機輸出2-10之間的任何一個數，
var num = Math.floor(Math.random() * 9 + 2);
alert(num); //隨機選出2-10
</script>
-->

<!-- 面向對象之對象篇
<script>
//工廠模式
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("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
person1.sayName();

//構造函數模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
//原型
//Person.prototype.sayName = function(){
//alert(this.name);
//}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName();

// 在另外一個對象的做用域中調用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"

//原型模式
function Personp(){};
Personp.prototype.name = "TOM";
Personp.prototype.age = 30;
Personp.prototype.job = "Doctor";
Personp.prototype.sayName = function(){
alert(this.name);
}
var person1 = new Personp();
person1.sayName();

//當爲對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性；添加這個屬性只會阻止咱們訪問原型中的那個屬性，但不會修改那個屬性。即便將這個屬性設置爲 null，也不會恢復其指向原型的鏈接。不過，使用 delete 操做符則能夠徹底刪除實例屬性，從而讓咱們可以從新訪問原型中的屬性
function Person_del(){}
Person_del.prototype.name = "Nicholas";
Person_del.prototype.age = 29;
Person_del.prototype.job = "Software Engineer";
Person_del.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person_del();
var person2 = new Person_del();
person1.name = "Greg";
alert(person1.name); //"Greg"——來自實例
alert(person2.name); //"Nicholas"——來自原型
//person1.name = null; //改成null也沒有辦法恢復他訪問原型裏面的屬性，只能用delete刪除
delete person1.name;
alert(person1.name); //"Nicholas"——來自原型

//要取得對象上全部可枚舉的實例屬性，可使用 ECMAScript 5 的 Object.keys()方法。這個方法接收一個對象做爲參數，返回一個包含全部可枚舉屬性的字符串數組
function Person_in(){
}
Person_in.prototype.name = "Nicholas";
Person_in.prototype.age = 29;
Person_in.prototype.job = "Software Engineer";
Person_in.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.keys(Person_in.prototype);
alert(keys); //"name,age,job,sayName"
var p1 = new Person_in();
p1.name = "Rob";
p1.age = 31;
var p1keys = Object.keys(p1);
alert(p1keys); //"name,age"

//精簡原型
function person_simple(){};
person_simple.prototype = {
name:"TOM1111",
age:29,
job:"Doctor",
sayName:function(){
alert(this.name);
}
}
var person_simple = new person_simple();
person_simple.sayName();

//原型的動態性
function Person_fnd(){};
var friend = new Person_fnd();
Person_fnd.prototype.sayHi = function(){
alert("hi111");
}
//下面這段代碼重寫了其原型對象，運行結果會出錯，重寫原型對象切斷了如今有原型與任何以前已經存在的對象實例之間的聯繫，它們引用的仍然是最初的原型，
/*Person_fnd.prototype = {
//constructor:Person_fnd,
sayHi: function(){
alert("hi222");
}
}*/
friend.sayHi();

//原生對象原型字符串對象原型不推薦用這個方法，由於有可能會改寫了原生對象
String.prototype.startsWith = function(text){
return this.indexOf(text) == 0;
};
var msg = "hello world";
alert(msg.startsWith("hello")); //true

//組合使用構造函數模式和原型模式

//建立自定義類型的最多見方式，就是組合使用構造函數模式與原型模式。構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享的屬性。結果，每一個實例都會有本身的一份實例屬性的副本，但同時又共享着對方法的引用，最大限度地節省了內存。另外，這種混成模式還支持向構造函數傳遞參數；可謂是集兩種模式之長
function Person_all(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person_all.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person_all("Nicholas", 29, "Software Engineer");
var person2 = new Person_all("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

//動態原型模式(不能使用對象字面量重寫原型，這樣會切斷實例與新原型的聯繫)

//有其餘 OO 語言經驗的開發人員在看到獨立的構造函數和原型時，極可能會感到很是困惑。動態原型模式正是致力於解決這個問題的一個方案，它把全部信息都封裝在了構造函數中，而經過在構造函數中初始化原型（僅在必要的狀況下），又保持了同時使用構造函數和原型的優勢。換句話說，能夠經過檢查某個應該存在的方法是否有效，來決定是否須要初始化原型
function Person_fz(name,age,job){
this.name = name;
this.age = age;
this.job = job;
//判斷這個方法，若是不存在，就添加到原型中去
if(typeof this.sayName != "function"){
Person_fz.prototype.sayName = function(){
alert(this.name);
}
}
}
var friend = new Person_fz("Jim",50,"Teacher");
friend.sayName();

//寄生構造函數模式（不推薦使用）
function SpecialArray(){
//建立數組
var values = new Array();
//添加值
values.push.apply(values, arguments);
//添加方法
values.toPipedString = function(){
return this.join("|");
};
//返回數組
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
</script>
-->

<!-- 面向對象之繼承篇
<script>
//原型鏈
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//繼承了 SuperType 實現的方法就是指向另外一個對象的原型，產生一個新類型的實例
SubType.prototype = new SuperType();
//SubType的constructor被重寫了
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
//改寫超類型中的方法必定要放在下面
//SubType.prototype.getSuperValue = function(){
//return false;
//}
var instance = new SubType();
alert(instance.getSuperValue()); //true 繼承了SuperType的方法，
alert(instance.getSubValue()); //false 也保留了對本身方法的引用

//借用構造函數
function SuperType1(name){
this.name = name;
}
function SubType1(){
//繼承了 SuperType，同時還傳遞了參數
SuperType1.call(this, "Nicholas");
//實例屬性
this.age = 29;
}
var instance = new SubType1();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

//組合繼承（組合繼承避免了原型鏈和借用構造函數的缺陷，融合了它們的優勢，成爲 JavaScript 中最經常使用的繼承模式。並且，instanceof 和 isPrototypeOf()也可以用於識別基於組合繼承建立的對象）
function SuperType2(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType2.prototype.sayName = function(){
alert(this.name);
};
function SubType2(name, age){
//繼承屬性
SuperType2.call(this, name);
this.age = age;
}
//繼承方法
SubType2.prototype = new SuperType2();
SubType2.prototype.constructor = SubType2;
SubType2.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType2("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType2("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

//寄生式繼承

//在 object()函數內部，先建立了一個臨時性的構造函數，而後將傳入的對象做爲這個構造函數的原型，最後返回了這個臨時類型的一個新實例。從本質上講，object()對傳入其中的對象執行了一次淺複製
function object(o){
function F(){}
F.prototype = o;
return new F();
}
function createAnother(original){
var clone = object(original); //經過調用函數建立一個新對象
clone.sayHi = function(){ //以某種方式來加強這個對象
alert("hi1212");
};
return clone; //返回這個對象
}
var person_org = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
//這個例子中的代碼基於 person 返回了一個新對象——anotherPerson。新對象不只具備 person的全部屬性和方法，並且還有本身的 sayHi()方法
var anotherPerson = createAnother(person_org);
anotherPerson.sayHi(); //"hi"
//alert(anotherPerson.name);

//寄生組合繼承（開發人員廣泛認爲寄生組合式繼承是引用類型最理想的繼承範式）

//原來的寫法（是有問題的）
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); //第二次調用 SuperType()
this.age = age;
}
SubType.prototype = new SuperType(); //第一次調用 SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
alert(this.age);
};

//用寄生組合重構
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //建立對象
prototype.constructor = subType;//加強對象
subType.prototype = prototype;//指定對象
}

<!-- 面向對象之函數表達式篇
<script>
//建立函數
//var compareNames = createComparisonFunction("name");
//調用函數
//var result = compareNames({ name: "Nicholas" }, { name: "Greg" });
//解除對匿名函數的引用（以便釋放內存）
//compareNames = null;

//閉包與變量
function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
//result[i] = function(num){
//return function(){
//return num;
//}
//}(i) //能夠經過建立另外一個匿名函數強制讓閉包的行爲符合預期，返回各自的索引值
}
return result;
}
alert(createFunctions()); //返回函數數組
var a = createFunctions();
alert(a[3]()); //即閉包只能取得包含函數中任何變量的最後一個值，返回都是10

//關於this對象（this 對象是在運行時基於函數的執行環境綁定的：在全局函數中，this 等於 window，而當函數被做爲某個對象的方法調用時，this 等於那個對象。不過，匿名函數的執行環境具備全局性，所以其 this 對象一般指向 window①。但有時候因爲編寫閉包的方式不一樣，這一點可能不會那麼明顯）
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
//把外部做用域中的 this 對象保存在一個閉包可以訪問到的變量裏，就可讓閉包訪問該對象了
//var that = this; //這個時候的this是指向My Object的，接着把他賦給了that
return function(){
return this.name;
//return that.name; //因此這裏輸出的是My Object
};
}
};
alert(object.getNameFunc()()); //"The Window"（在非嚴格模式下）

//內存泄漏
function assignHandler(){
//這個變量沒法銷燬，那樣會致使下面的匿名函數沒法運行
var element = document.getElementById("someElement");
//var id = element.id; //解決辦法，經過建立一個副本，這樣就能夠銷燬HTML元素element了，
element.onclick = function(){
alert(element.id);
//alert(id);
};
//element = null;
}

//模仿塊級做用域
function outputNumbers(count){
(function(){
for (var i=0;i<count;i++){
alert(i);
}
})();
//alert(i); //error 由於上面的匿名函數是一個私有做用域，這個地方的i是訪問不到的
}
outputNumbers(2);

//私有變量
function MyObject(){
//私有變量和私有函數
var privateVariable = 10;
function privateFunction(){
return false;
}
//特權方法
this.publicMethod = function (){
privateVariable++;
return privateFunction();
//return privateVariable;
};
}
var aa = new MyObject();
alert(aa.publicMethod()); //利用特權方法把MyObject裏的變量和方法取出來，

//靜態私有變量
(function(){
//私有變量和私有函數
var privateVariable = 10;
function privateFunction(){
return 100;
}
//構造函數
MyObject = function(){};
//公有/特權方法
MyObject.prototype.publicMethod = function(){
privateVariable++;
return privateFunction();
};
})();
var b = new MyObject();
alert(b.publicMethod());

//構建特權方法實例
function apple(){
//私有變量和函數
var name = "orage";
function color(){
return name;
}
//構建特權方法
//apple.prototype.method = function(){
this.method = function(){
return color();
}
}
var app = new apple();
alert(app.method());

//模塊模式
</script>
-->

<!-- 面向對象之客戶端檢測篇

<!-- 面向對象之DOM篇
<div id="myDiv"><!-A comment -></div>
<ul id="myList"></ul>
<script>
var element = document.createElement("div");
element.className = "message";
element.id = "msg";
element.title = "message11";
element.lang = "en";
element.dir = "dir";
var textNode = document.createTextNode("Hello world, ");
element.appendChild(textNode);
var anotherTextNode = document.createTextNode("EverBody!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length);
element.normalize();//合併文本節點
alert(element.childNodes.length);
alert(element.firstChild.nodeValue);

var newNode = element.firstChild.splitText(5);//分割文本節點
alert(element.firstChild.nodeValue);
alert(newNode.nodeValue);
alert(element.childNodes.length);

//comment
var myDiv = document.getElementById("myDiv");
var comment = myDiv.firstChild;
//alert(comment.data);
alert(comment.nodeValue);

//建立文檔片斷
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
for(var i=0;i<3;i++){
li = document.createElement("li");
li.appendChild(document.createTextNode("Item" + (i+1)));
fragment.appendChild(li);
}
ul.appendChild(fragment);

//引用外部JS文件
function loadScript(url){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
//script.appendChild(document.createTextNode("111")); //給標籤添加內容
script.text = "function sayHi(){alert('hi');}" //檢測腳本是否加載完成
document.head.appendChild(script);
}
loadScript("client.js");

//引用外部CSS文件
function loadStyle(url){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
//var head = document.getElementsByTagName("head")[0]; //getElementsByTagName返回的是nodeList對象列表，索引值從0開始
//head.appendChild(link);
document.head.appendChild(link);
}
loadStyle("style.css");

</script>
-->

<!-- 面向對象之DOM擴展篇
<div style="padding: 20px; overflow:hiddle; position: absolute; left: 200px;">
<div id="offleft" style="width: 100px; height: 100px; margin: 25px; padding: 20px;">saafds</div>
</div>

<div id="div1">
<p><b>Hello</b> world!</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>

function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current != null){
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
var offtop = getElementTop(offid);
alert(offtop);

//封
function getElementOffSet(element){
var actualLeft = element.offsetLeft;
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current != null){
actualLeft += current.offsetLeft;
actualTop += current.offsetTop;
current = current.offsetParent;
}
return {
offsetLeft:actualLeft,
offsetTop:actualTop
}
}
var offset = getElementOffSet(offid);
alert(offset.offsetLeft+" + "+offset.offsetTop);

//取得元素的客戶區大小(封)
function getViewport(element){
if(document.compatMode == "BackCompat"){
return {
width:element.clientWidth,
height:element.clientHeight
};
}else{
return{
width:element.clientWidth,
height:element.clientHeight
}
}
}
var getViewport = getViewport(offid);
alert(getViewport.width + "+" + getViewport.height);

//取得滾動條的位置
function scrollToTop(element){
if(element.scrollTop != 0){
element.scrollTop = 0;
}
}
var scrolltop = scrollToTop(offid);

//遍歷全部元素的標籤
var div = document.getElementById("div1");
/* 用來過濾，只遍歷出li標籤
var filter = function(node){
return node.tagName.toLowerCase() == "li" ?NodeFilter.FILTER_ACCEPT :NodeFilter.FILTER_SKIP;
};
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT,filter, false);
*/
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode();
while(node != null){
alert(node.tagName);
node = iterator.nextNode();
}
</script>
-->

<!-- 面向對象之事件篇
<div id="myBtn">button</div>
<a href="http://www.baidu.com" id="link">baidu</a>
<ul id="nav">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<div style="width: 150px; height: 150px; background: #ccc;" id="parentid">
<div style="width: 100px; height: 100px; background: #ff5200;" id="childrenid">stopPropagation</div>
</div>
<div id="eventPhase">eventPhase</div>
<div id="div_position" style="width:150px; background: #ccc; height: 150px; margin:50px;">客戶區位置</div>
<div id="divedit">divedit</div>
<div id="myrelate" style="background-color:red;height:100px;width:100px;">relatedTarget</div>
<br/><br/>
<input id="myText" name="text" type="text">
<br/><br/>
<ul id="myList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

<div id="myDiv">Right click or Ctrl+click me to get a custom context menu.
Click anywhere else to get the default context menu.</div>
<ul id="myMenu" style="position:absolute;visibility:hidden;background-color:
silver">
<li><a href="http://www.nczonline.net">Nicholas’ site</a></li>
<li><a href="http://www.wrox.com">Wrox site</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>

<div id="output" style="width: 100px; height: 100px;">output</div>

<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi" title="sayhi" class="sayhi" type="121212">Say hi</li>
</ul>

btn.removeEventListener("click",function(){
alert("hello world"); //這種取消綁定事件是無效的，
},false);

//EventUtil 方法之二：getTarget()，它返回事件的目標
getTarget: function(event){
return event.target || event.srcElement;
},

//EventUtil 方法之三：preventDefault()，用於取消事件的默認行爲
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},

//EventUtil 方法之四：stopPropagation()，首先嚐試使用 DOM 方法阻止事件流，不然就使用 cancelBubble 屬性
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
} else{
event.cancelBubble = true;
}
}

//EventUtil 方法之五：relatedTarget 屬性提供了相關元素的信息
/*getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
}*/
};
//EventUtil.addHandler(btn,"click",handler);
//EventUtil.removeHandler(btn,"click",handler); //移除事件

//事件
btn.onclick = function(event){
alert(event.type);
};
btn.addEventListener("click",function(event){
alert(event.type);
},false);

/* //DOM中的事件對象
document.body.onclick = function(event){
alert(event.currentTarget === document.body);
alert(this === document.body);
alert(event.target === document.getElementById("myBtn"));
}
*/
//阻止事件執行
var link = document.getElementById("link");
link.onclick = function(event){
event.preventDefault(); //阻止事件執行
}

//阻止事件往上冒泡
var parentid = document.getElementById("parentid");
parentid.onclick = function(event){
alert(this.id);
event.stopPropagation();
}
var childrenid = document.getElementById("childrenid");
childrenid.onclick = function(event){
alert(this.id);
event.stopPropagation(); //阻止事件往上冒泡
}
document.body.onclick = function(event){
//alert("body");
}

/* //監測事件處在事件流的哪一個階段
var eventPhase = document.getElementById("eventPhase");
eventPhase.onclick = function(event){
alert(event.eventPhase); //處於目標對象上 2
};
document.body.addEventListener("click",function(event){
alert(event.eventPhase); //處於捕獲階段 1
},true);
document.body.onclick = function(event){
alert(event.eventPhase); //處於冒泡階段 3
}
*/
//
EventUtil.addHandler(window,"load",function(){
var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
alert("loading");
});
script.src = "example.js";
document.head.appendChild(script);
})
EventUtil.addHandler(window,"resize",function(event){
//alert("resizing");
})

//取得客戶區座標位置
var my_position = document.getElementById("div_position");
EventUtil.addHandler(my_position,"click",function(event){
event = EventUtil.getEvent(event); //這一行代碼添加到事件處理程序的開頭，就能夠確保隨時都能使用 event 對象，而沒必要擔憂用戶使用的是什麼瀏覽器
alert("Client coordinates: " + event.clientX + "," + event.clientY);
event.stopPropagation();
});

//修改鍵
var divedit = document.getElementById("divedit");
EventUtil.addHandler(divedit,"click",function(event){
event = EventUtil.getEvent(event);
var keys = [];
if(event.shiftKey){
keys.push("shift");
}
if(event.ctrlKey){
keys.push("ctrl");
}
if(event.altKey){
keys.push("alt");
}
if(event.metaKey){
keys.push("meta");
}
console.log("Keys " + keys.join(","));
})

//相關元素
//EventUtil 方法之五(擴展方式)：relatedTarget 屬性提供了相關元素的信息
EventUtil.getRelatedTarget = function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
}

var myrelate = document.getElementById("myrelate");
EventUtil.addHandler(myrelate,"mouseout",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
console.log("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});

EventUtil.getButton = function(event){
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
};
EventUtil.addHandler(myrelate,"mousedown",function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getButton(event));
})

//按下keyup,都會顯示keycode的值
var myText = document.getElementById("myText");
EventUtil.addHandler(myText,"keyup",function(event){
event = EventUtil.getEvent(event);
console.log(event.keyCode);
});

//EventUtil 方法之getCharCode 檢測charCode屬性是否可用，若是不可用，則用keyCode
EventUtil.getCharCode = function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}

EventUtil.addHandler(myText,"keypress",function(event){
event = EventUtil.getEvent(event);
console.log(EventUtil.getCharCode(event));
});

/* //變更事件之刪除節點
EventUtil.addHandler(window,"load",function(event){
var myList = document.getElementById("myList");
EventUtil.addHandler(document,"DOMSubtreeModified",function(event){
console.log(event.type);
console.log(event.target);
});
EventUtil.addHandler(document,"DOMNodeRemoved",function(event){
console.log(event.type);
console.log(event.target);
console.log(event.relatedNode);
});
EventUtil.addHandler(myList.firstChild,"DOMNodeRemovedFromDocument",function(event){
console.log(event.type);
console.log(event.target);
});
myList.parentNode.removeChild(myList);
})*/

//H5事件之contextmenu
EventUtil.addHandler(window, "load", function(event){
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "contextmenu", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
var menu = document.getElementById("myMenu");
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
menu.style.visibility = "visible";
});
EventUtil.addHandler(document, "click", function(event){
document.getElementById("myMenu").style.visibility = "hidden";
});
});

//H5事件之beforeunload
EventUtil.addHandler(window,"beforeunload",function(event){
event = EventUtil.getEvent(event);
var message = "I'm really going to miss you if you go.";
//event.returnValue = message;
return message;
});

//H5事件之DOMContentLoaded
EventUtil.addHandler(document,"DOMContentLoaded",function(event){
alert("content loaded");
});

//readystatechange
EventUtil.addHandler(document,"readystatechange",function(event){
if(document.readyState == "interactive"){
console.log("處在交互階段！"); //判斷事件所處的階段
}
});

//H5事件之pageshow
(function(){
var showCount = 0;
EventUtil.addHandler(window,"load",function(){
console.log("load fired");
});
EventUtil.addHandler(window,"pageshow",function(event){
showCount++;
console.log("show has been fired " + showCount + "times. Persisted? " + event.persisted);
})
})();

//H5事件之hashchange
EventUtil.addHandler(window, "hashchange", function(event){
//alert("old url: " + event.oldURL + "\nNew Url: " + event.newURL);
//alert("Current hash: " + location.hash);
});
EventUtil.addHandler(window,"click",function(){
location.hash = "mao and i shi da niu";
});

//device事件之orientationchange
EventUtil.addHandler(window,"load",function(event){
var device = document.getElementById("device");
//要在手機或者平板上測試
device.innerHTML = "Current orientation is " + window.orientation;
EventUtil.addHandler(window,"orientationchange",function(event){
device.innerHTML = "Current orientation is " + window.orientation;
});
});

//device事件之MozOrientation
EventUtil.addHandler(window,"MozOrientation",function(event){
var output = document.getElementById("output");
//當設備的加速計檢測到設備方向改變時，就會觸發這個事件
output.innerHTML = "X=" + event.x + ", Y=" + event.y + "Z=" + event.Z + "<br/>";
});

//device事件之deviceorientation
EventUtil.addHandler(window,"deviceorientation",function(event){
var output = document.getElementById("output");
output.innerHTML = "Alpha=" + event.alpha + "Beta=" + event.beta + ", Gamma =" + event.gamma + "<br/>";
output.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
});

//device事件之devicemotion
EventUtil.addHandler(window,"devicemotion",function(event){
var output = document.getElementById("output");
if(event.rotationRate !== null){
output.innerHTML +="Alpha=" + event.rotationRate.alpha + ", Beta=" + event.rotationRate.beta + ", Gamma=" + event.rotationRate.gamma;
}
});

//device事件之touch

//跟蹤用戶對屏幕的觸摸操做
function handleTouchEvent(event){
//只跟蹤一次觸摸
if(event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止滾動
output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document,"touchstart",handleTouchEvent);
EventUtil.addHandler(document,"touchend",handleTouchEvent);
EventUtil.addHandler(document,"touchmove",handleTouchEvent);

//手勢事件 iOS 2.0 中的 Safari 還引入了一組手勢事件。
function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

//事件委託/事件代理
var lists = document.getElementById("myLinks");
EventUtil.addHandler(lists,"click",function(event){ //lists能夠用document替代
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//console.dir(target); //查看該事件的詳細信息包括屬性，方法等

switch (target.id){
case "doSomething":
document.title = "I changed the document's title";
break;

case "goSomewhere":
location.href = "http://www.baidu.com";
break;

case "sayHi":
console.log("hi");
break;
}
});

//移除事件處理程序
var myInputs = document.getElementById("myInputs");
myInputs.onclick = function(event){
//alert(event.target.id);
myInputs.onclick = null //移除事件處理程序
//注意，在事件處理程序中刪除按鈕也能阻止事件冒泡。目標元素在文檔中是事件冒泡的前提。
document.getElementById("myInput").innerHTML = "Processing...";
}

//採用事件委託方式來實現上個例子的功能
var myInput = document.getElementById("myInput");
EventUtil.addHandler(myInput,"click",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.id == "myInputs") {
document.getElementById("myInput").innerHTML = "Processing...";
};
})

//模擬事件
var myInputs = document.getElementById("myInputs");
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
myInputs.dispatchEvent(event); //模擬對鼠標進行點擊

/*錯誤的寫法
function element_li(){
var elementArray = [];
var nav = document.getElementById("nav");
var nav_list = nav.getElementsByTagName("li");
for(var i=0;i<nav_list.length;i++){
elementArray.push(i);
}
return elementArray;
}
var i = element_li();
var li = document.getElementsByTagName("li")[i];
li.addEventListener("click",function(){
alert(i);
},false);*/

//綁定事件
//nav_list[i].addEventListener("click",function(){
//alert(this._index + 1);
//console.log(this._index + 1);
//},false);
}*/
}
</script>
-->

<!-- 面向對象之表單腳本篇
<form id="myForm">
<input type="text" autofocus>
<input type="text" name="input" value="111">
<input type="text" name="blurs" value="blur">
<input type="submit" name="submit_btn">
<p><input type="text" size="25" maxlength="50" value="max" name="maxinput"></p>
<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>
<select name="location1" id="selLocation1">
<option value="1111, CA">1111</option>
</select>
</form>
<div class="editable" onclick='document.execCommand("createlink",false,"http://www.baidu.com");' id="richedit" contenteditable>11212</div>
<div class="editable" onclick='document.execCommand("italic",false,null);' contenteditable>333502</div>
<iframe name="richedit" style="height:100px;width:100px;" src="111.html"></iframe>
<script>
//
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;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
}

var form = document.getElementById("myForm");
var field = form.elements[1]; //替代寫法form.elements['input'];
field.value = "Another value";
field.focus();
field.disabled = true;
//field.type = "checkbox"; //動態修改type屬性

//避免屢次提交表單
EventUtil.addHandler(form,"submit",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var btn = target.elements["submit_btn"];
btn.disabled = true;
});

EventUtil.addHandler(window,"load",function(event){
var element = document.forms[0].elements[0];
//element.focus();
if (element.autofocus !== true) {
element.focus();
console.log("JS focus");
};
})

var maxinput = document.forms[0].elements['maxinput'];
//console.log(maxinput.value);
//maxinput.value = "abcde";
//maxinput.select();
EventUtil.addHandler(maxinput,"select",function(event){
console.log("Text selected: " + maxinput.value);
});

//取得選擇的文本
var maxinput = document.forms[0].elements['maxinput'];
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
};
//方法一：封裝一個回調函數
function printSelectedText(){
var text = getSelectedText(maxinput);
console.log(text);
}
//EventUtil.addHandler(maxinput,"select",printSelectedText);

//方法二：內部函數調用方式
EventUtil.addHandler(maxinput,"select",function(event){
function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
};
var text = getSelectedText(maxinput);
console.log(text);
});

//方法三：普通調用方式
/*EventUtil.addHandler(maxinput,"select",function(event){
console.log(maxinput.value.substring(maxinput.selectionStart, maxinput.selectionEnd));
});*/

//選擇部分文本的方法 setSelectionRange
maxinput.value = "Hello world!";
//var text2 = maxinput.setSelectionRange(0,maxinput.value.length);
//var text2 = maxinput.setSelectionRange(0,3);
var text2 = maxinput.setSelectionRange(3,6);
console.log(text2);

/*//IE8- 選擇部分文本的方法 createTextRange
var range = maxinput.createTextRange();
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",maxinput.value.length);
range.select();

//跨瀏覽器
function selectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){
var range = textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
textbox.focus();
}
textbox.value = "Hello world!";
selectText(textbox,0,textbox.value.length);
selectText(textbox,0,3);
selectText(textbox,3,7);*/

//輸入框之屏蔽字符
EventUtil.getCharCode = function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
};
EventUtil.addHandler(maxinput,"keypress",function(event){
event = EventUtil.getEvent(event);
//EventUtil.preventDefault(event); //屏蔽了全部按鍵操做
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
//alert(charCode);
if(!/\d/.test(String.fromCharCode(charCode)) && charCode<9 && !event.ctrlKey){
EventUtil.preventDefault(event);
}
});

//自動切換焦點
(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if(target.value.length == target.maxLength){
var form = target.form;
var len =form.elements.length;
for(var i=0;i<len;i++){
if(form.elements[i] == target){
if(form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");

EventUtil.addHandler(textbox1,"keyup",tabForward);
EventUtil.addHandler(textbox2,"keyup",tabForward);
EventUtil.addHandler(textbox3,"keyup",tabForward);
})();

//select
var selectbox = document.forms[0].elements["location"];
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
//alert("Select index: " + selectedIndex + "\nSelected text: " + selectedOption.text + "\nSelected value: " + selectedOption.value);
function getSelectedOptions(selectbox){
var result = [];
var option = null;
var len = selectbox.options.length;
for(var i=0;i<len;i++){
option = selectbox.options[i];
if(option.selected){
result.push(option);
}
}
return result;
}

var selectbox = document.getElementById("selLocation");
var selectedOptions = getSelectedOptions(selectbox);
var len = selectedOptions.length;
var message = "";
for(var i=0;i<len;i++){
message += "Selected index: " + selectedOptions[i].index +
"\nSelected text: " + selectedOptions[i].text +
"\nSelected value: " + selectedOptions[i].value + "\n\n";
}
alert(message);

//動態建立option
//方法一：dom方法，
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value","Option value");
selectbox.appendChild(newOption);

//方法二：構造函數在IE8-中有問題，
var newOption1 = new Option("Option text1","Option value1");
selectbox.appendChild(newOption1);

//方法三：add()方法，最佳方案
var newOption2 = new Option("Option text2","Option value2");
selectbox.add(newOption2,undefined);

//動態移除option
//selectbox.removeChild(selectbox.options[0]); //方法一
//selectbox.remove(0); //方法二
//selectbox.options[0] = null; //方法三
//清除全部選項
function clearSelectbox(selectbox){
for(var i=0,len=selectbox.options.length;i<len;i++){
selectbox.remove(i);
}
}

//動態移動
var selectbox = document.getElementById("selLocation");
var selectbox1 = document.getElementById("selLocation1");
selectbox1.appendChild(selectbox.options[0]);

//移動到任意位置
var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);

//富文本編輯之打開關閉
var editDiv = document.getElementById("richedit");
editDiv.contentEditable = "true";

EventUtil.addHandler(window,"load",function(){
frames["richedit"].document.designMode = "on";
});

//編輯富文本
document.execCommand("bold",false,null);
document.execCommand("italic",false,null);
//frames["richedit"].document.execCommand("italic",false,null);
document.execCommand("createlink",false,"http://www.baidu.com");

</script>
-->

<!-- 面向對象之html5編程篇

<div class="mediaplayer">
<div class="video">
<video id="player" src="movie.mov" poster="mymovie.jpg"
width="300" height="200">
Video player not available.
</video>
</div>
<div class="controls">
<input type="button" value="Play" id="video-btn">
<span id="curtime">0</span>/<span id="duration">0</span>
</div>
</div>

duration.innerHTML = player.duration;
EventUtil.addHandler(btn,"click",function(event){
if(player.paused){
player.play();
btn.value = "Pause";
}else{
player.pause();
btn.value = "Play";
}
});

setInterval(function(){
curtime.innerHTML = player.currentTime;
},250);

//檢測編解碼器的支持狀況
var audio = document.getElementById("audio-player");
if(audio.canplayType("audio/mpeg")){
//進一步處理代碼
}

if(audio.canplayType("audio/ogg; codecs=\"vorbis\"")){
//進一步處理代碼
}

//Audio 自帶一個原生的構造函數
var audio = new Audio("sound.mp3");
EventUtil.addHandler(audio,"canplaythrough",function(event){
audio.play();
});

//歷史狀態管理
//先要用pushState建立一個假的utl，不然單擊刷新按鈕會致使404錯誤
history.pushState({name:"Nichilas"},"Nicholas'page","nicholas.html");
EventUtil.addHandler(window,"popstate",function(event){
var state = event.state;
if(state){
processState(state);
}
})
//更新當前狀態
history.replaceState({name:"Greg"},"Greg's page");
</script>
-->

<!-- 面向對象之canvas篇
<img src="image/sp1.png">
<canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
<canvas id="times" width=" 200" height="200">A drawing of something.</canvas>
<canvas id="images" width=" 200" height="200">A drawing of something.</canvas>
<canvas id="filter" width=" 400" height="400">A drawing of something.</canvas>
<script>
var drawing = document.getElementById("drawing");
//導入畫布中的圖像
/*if(drawing.getContext){
var imgURI = drawing.toDataURL("image/png");
var image = document.createElement("img");
image.src = imgURI;
document.body.appendChild(image);
} */

if(drawing.getContext){
var context = drawing.getContext("2d");
//context.strokeStyle = "red";
context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);
context.fillStyle = "rgba(0,0,255,0.5)";
context.fillRect(30,30,50,50);
//清除一個小矩形
context.clearRect(40,40,10,10);

context.strokeStyle = "red";
context.strokeRect(100,10,50,50);
context.strokeStyle = "rgba(0,0,255,0.5)";
context.strokeRect(120,30,50,50);

/*//restore
context.fillStyle = "red";
context.save();

context.fillStyle = "#00ff00";
context.translate(100,100);
context.save();

context.fillStyle = "#0000ff";
context.fillRect(10,150,50,50);

context.restore();
context.fillRect(20,170,50,50);

context.restore();
context.fillRect(30,180,50,50);*/

//設置陰影
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = "rgba(0,0,0,0.5)";

context.fillStyle = "#ff0000";
context.fillRect (10,100,50,50);

context.fillStyle = "rgba(0,0,255,1)";
context.fillRect(80,100,50,50);

}

var times = document.getElementById("times");
if(times.getContext){
var context = times.getContext("2d");
//繪製一個不帶數字的時鐘錶盤
context.beginPath();
//繪製外圓
context.arc(100,100,99,0,2*Math.PI,false);
//繪製內圓
context.moveTo(194,100);
context.arc(100,100,94,2*Math.PI,false);
//繪製分針
context.moveTo(100,100);
context.lineTo(100,25);
//繪製時針
context.moveTo(100,100);
context.lineTo(35,100);
//描邊路徑
context.stroke();

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);
context.fillText("3",180,100);
context.fillText("6",100,180);
context.fillText("9",20,100);
}

//繪製圖像
var images = document.getElementById("images");
if(images.getContext){
var context = images.getContext("2d");
var image = document.images[0];
context.drawImage(image,10,10);
context.drawImage(image,50,10,20,30);
context.drawImage(image,0,10,50,50,0,100,40,60);
}

//漸變
var filter = document.getElementById("filter");
function createRectLinearGradient(context, x, y, width, height){
return context.createLinearGradient(x, y, x+width, y+height);
}
if(filter.getContext){
var context = filter.getContext("2d");
var gradient = createRectLinearGradient(context,30,30,50,50);
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

context.fillStyle = "#ff0000";
context.fillRect(10,10,50,50);

context.fillStyle = gradient;
context.fillRect(30,30,50,50);

context.fillStyle = gradient;
context.fillRect(50,50,50,50);

//徑向漸變
var gradient = context.createRadialGradient(55, 55, 10, 55, 55, 30);
gradient.addColorStop(0, "white");
gradient.addColorStop(1, "black");
//繪製紅色矩形
context.fillStyle = "#ff0000";
context.fillRect(10, 10, 50, 50);
//繪製漸變矩形
context.fillStyle = gradient;
context.fillRect(30, 30, 50, 50);
}

</script>
-->

<!-- 面向對象之錯誤處理與調試篇
<script>
function CustomError(message){
this.name = "CustomError";
this.message = "message";
}
//CustomError.prototype = new Error();
//throw new CustomError("My message");

function process(values){
values.sort();
for(var i=0,len=values.length;i<len;i++){
if(values[i]>100){
return values[i];
}
}
return -1;
}
//process("message"); //拋出錯誤
process([1,2,3,4]);

//處理圖像錯誤

var image = new Image();
EventUtil.addHandler(image,"load",function(event){
alert("Image loaded!");
});
EventUtil.addHandler(image,"error",function(event){
alert("Image not loaded");
});
//image.src = "add.png"; //加載成功
image.src = "smilex.gif"; //拋出錯誤

function reverseSort(values){
if(values instanceof Array){ //基本類型的值應該使用 typeof 來檢測，而對象的值則應該使用 instanceof 來檢測
values.sort();
values.reverse();
}
}

//通訊錯誤
function addQueryStringArg(url,name,value){
if(url.indexOf("?") == -1){
url += "?";
}else{
url += "&";
}
url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
return url;
}
var url = "http:www.somedomain.com";
var newUrl = addQueryStringArg(url,"redir","http://www.somedomain.com?a=b&c=d");
alert(newUrl);

//躊瀏覽器javascript控制檯接口
function log(message){
if(typeof console == "object"){
console.log(message);
}else if(typeof opera == "object"){
opera.postError(message);
}else{
java.lang.System.out.println(message);
}
}

function sum(num1,num2){
log("Entering sum(),arguments are " + num1 + "," + num2);
log("Before calculation");
log("After calculation");
log("Exiting sum()");
var result = num1 + num2;
return result;
}

//輸出調試消息
function log(message){
var console = document.getElementById("debuginfo");
if(console === null){
console.id = "debuginfo";
console.style.background = "#dedede";
console.border = "1px solid silver";
console.style.padding = "5px";
console.style.position = "absolute";
console.style.right = "0px";
document.body.appendChild(console);
}
console.innerHTML += "<p>" + message + "</p>";
}

//檢測每一個參數是否數值（若是有一個不是數值則返回NAN）
function divide(num1,num2){
if(typeof num1 != "number" || typeof num2 != "number"){
thorw new Error("divide():both argument must be number!");
}
return num1/num2;
}

//對於大型應用程序來講，自定義的錯誤一般都使用 assert()函數拋出
function assert(condition,message){
if(!condition){
throw new Error(message);
}
}

//assert()函數的應用
function divide(num1,num2){
assert(typeof num1 == "number" && typeof num2 == "number"),
"divide():both argument must be number!";
return num1/num2;
}
</script>
-->

<!-- 面向對象之XML篇

//跨瀏覽器處理XML

//應用到案例
var xmldom = null;
try{
xmldom = parseXml("<root><child/></root>");
}catch(ex){
alert(ex.message);
}
//接下來開始對XML進行處理

//序列化xml的另外一種跨瀏覽器寫法
function serializeXml(xmldom){
if(typeof XMLSerializer != "undefined"){
return (new XMLSerializer()).serializeToString(xmldom);
}else if(typeof xmldom.xml != "undefined"){
return xmldom.xml;
}else{
throw new Error("Could not serialize XML DOM");
}
}

//跨瀏覽器使用Xpath
//命名空間對象的字面量表達形式
{
prefix1:"url1",
prefix2:"url2",
prefix3:"url3"
}

//解析針對特定瀏覽器的命名空間格式
function selectSingleNode(context, expression, namespaces){
var doc = (context.nodeType != 9 ? context.ownerDocument : context);
if (typeof doc.evaluate != "undefined"){
var nsresolver = null;
if (namespaces instanceof Object){
nsresolver = function(prefix){
return namespaces[prefix];
};
}
var result = doc.evaluate(expression, context, nsresolver,
XPathResult.FIRST_ORDERED_NODE_TYPE, null);
return (result !== null ? result.singleNodeValue : null);
} else if (typeof context.selectSingleNode != "undefined"){
//建立命名空間字符串
if (namespaces instanceof Object){
var ns = "";
for (var prefix in namespaces){
if (namespaces.hasOwnProperty(prefix)){
ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";
}
}
doc.setProperty("SelectionNamespaces", ns);
}
return context.selectSingleNode(expression);
} else {
throw new Error("No XPath engine found.");
}
}

//應用新案例
var result = selectSingleNode(xmldom.documentElement, "wrox:book/wrox:author",
{ wrox: "http://www.wrox.com/" });
alert(serializeXml(result));
</script>
-->

<!-- 面向對象之E4X(XML擴展)篇
<script>
var employees = new XML();
employees =<employees>
<employee position="Software Engineer">
<name>Nicholas C. Zakas</name>
</employee>
<employee position="Salesperson">
<name>Jim Smith</name>
</employee>
</employees>;

var firstEmployee = employees.employee[0];
alert(firstEmployee);
alert(employees.employee.length());
</script>
-->

<!-- 面向對象之JSON篇

var bookcopy = JSON.parse(jsonText);
//console.log(bookcopy);

//帶數組參數的序列化
var jsonText1 = JSON.stringify(book,["title","edition"]);
alert(jsonText1);

//帶函數參數的序列化
var jsonText2 = JSON.stringify(book,function(key,value){
switch(key){
case "authors":
return value.join(",");

case "year":
return 5000;

case "edition":
return undefined;

default:
return value;
}
});
alert(jsonText2);

//縮進同時也會換行
//var jsonText3 = JSON.stringify(book,null,4);
var jsonText3 = JSON.stringify(book,null,"--");
alert(jsonText3);

//parse()方法解析選項
var book1 = {
title:"TOM",
authors:[
"Nicholas"
],
edition:3,
year:2011,
releaseDate:new Date(2011,11,1)
};

var jsondata = JSON.stringify(book1);
var book1copy = JSON.parse(jsondata,function(key,value){
if(key == "releaseDate"){
return new Date(value);
}else{
return value;
}
});

//console.log(book1copy);
alert(book1copy.releaseDate.getFullYear());

</script>
-->

<!-- 面向對象之AJAX與Comet篇

//XHR的用法
var xhr = createXHR();
xhr.open("get","example.php",false);
xhr.send(null);
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}

/*
XHR對象的屬性簡介
一、responseText：做爲響應主體被返回的文本。
 二、responseXML：若是響應的內容類型是"text/xml"或"application/xml"，這個屬性中將保
存包含着響應數據的 XML DOM 文檔。
 三、status：響應的 HTTP 狀態。
 四、statusText：HTTP 狀態的說明。
*/

/*
XHR對象的readyState屬性，表示請求/響應過程的當前活動階段
0：未初始化。還沒有調用 open()方法。
 1：啓動。已經調用 open()方法，但還沒有調用 send()方法。
 2：發送。已經調用 send()方法，但還沒有接收到響應。
 3：接收。已經接收到部分響應數據。
 4：完成。已經接收到所有響應數據，並且已經能夠在客戶端使用了。
*/

//跨瀏覽器兼容性
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert("Request was unsuccessful: " + xhr.status);
}
}
};
xhr.open("get","example.txt",true);
xhr.setRequestHeader("MyHeader","MyValue"); //成功發送頭部信息要在open以後，send以前
xhr.send(null);

//xhr.abort() //取消異步請求

//XHRHttpRequest2(FormData、超時設定、OverrideMimeType()方法)
//進度事件(load事件、progress事件)

//跨源資源共享(CORS)

//跨瀏覽器CORS請求(通用)
function createCORSRequest(method,url){
var xhr = new XMLHttpRequest();
if("withCredentiais" in xhr){
xhr.open(method,url,true);
}else if(typeof XDomainRequest != "undefined"){
var xhr = new XDomainRequest();
xhr.open(method,url);
}else{
xhr = null;
}
return xhr;
}

//絕對路徑是跨源請求，相對路徑是同源請求
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
request.onload = function(){
//對request.responeText進行處理
}
request.send();
}

//XMLHttpRequest和XDomainRequest(IE)兩個對象被普遍使用，他們共的方法和屬性有
//一、abort():用於中止正在進行的請求，
//二、onerror():用於替代onreadystatechange檢測錯誤，
//三、onload:用於替代onreadystatechange檢測成功,
//四、responseText:用於取得響應內容，
//五、send():用於發送請求，
//以上成員都包含在createCORSRequest()函數返回的對象中，在全部瀏覽器中都能正常使用

//圖片Ping 經過偵聽事件實現跨域通訊
var img = new Image();
img.onload = img.onerror = function(){
alert("Done");
}
img.src = "http://www.example.com/test?name=tom";

//JSONP(有兩個選項，回調函數和數據，他的優勢是能夠直接響應和訪問數據,缺點是由於訪問別的域，全部存在安全性問題，請求失敗也沒法跟蹤)
function handleResponse(response){
alert("You're at IP address " + response.ip + ", which is in " + response.city + "," + response.region_name);
}
var script = document.createElement("script");
script.src = "http://freegeoip.net/json/?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

//Comet(長輪詢和HTTP流)

//一、HTTp流的案例
function createStreamingCilent(url,progress,finished){
var xhr = new XMLHttpRequest(),
received = 0;

xhr.open("get",url,true);
xhr.onreadystatechange = function(){
var result;
if(xhr.readyState == 3){
//只取得最新數據並調整計數器
result = xhr.responseText.substring(received);
received += result.length;

//調用progress回調函數
progress(result);
}else if(xhr.readyState == 4){
finished(xhr.responseText);
}
}
xhr.send(null);
return xhr;
}
var client = createStreamingCilent("streaming.php",function(data){
alert("Received: " + data);
},function(data){
alert("Done!");
})

//Comet的兩個新接口

//接口一服務器發送事件(SSE)
var source = new EventSource("myevents.php");
/*EventSource實例有一個readystate屬性:
0表示正在接到服務器，
1表示打開連接，
2表示關閉鏈接,

EventSource實例三個事件:
一、open:在創建鏈接時觸發，
二、message:在從服務器接收到新事件時觸發，
三、error:在沒法創建連接時觸發，
*/
source.onmessage = function(event){
var data = event.data;
}
source.closed //關閉連接

data:foo //數據行後面有空行時，纔會觸發message事件，所以在服務器上生成事件流時添加這一行，
id:1 //讓服務器知道下次該觸發哪個事件，確保瀏覽器以正確的順序收到鏈接的數據段

//web socket
var socket = new WebSocket("ws://www.example.com/server.php");
socket.send("Hello world"); //創建好連接以後，就能夠向服務器發送任意字符串了，

//數據序列化
var message = {
time:new Date(),
text:"Hello world",
clientId:"asdfp8734rew"
}
socket.send(JSON.stringify(message));
socket.onmessage = function(event){
var data = event.data;
//處理數據
}

//websocket 還有其餘三個事件，三鏈接生命週期的不一樣階段觸發
//一、open:在成功創建鏈接時觸發，
//二、error:在發生錯誤時觸發，鏈接不能持續，
//三、close:在鏈接關閉時觸發，

//這三個事件案例的應用
var socket = new WebSocket("ws://www.example.com/server.php");
socket.onopen = function(){
alert("Connection established.");
};
socket.onerror = function(){
alert("Connection error.");
};
socket.onclose = function(){
alert("Connection closed.");
};

//這三個事件中只有close事件有三個額外屬性
socket.onclose = function(event){
console.log("Was clean? " + event.wasClean + "Code=" + event.code + "Reason=" + event.reason);
};
</script>
-->

<!-- 面向對象之高級技巧篇
<div id="my_btn">button</div>
<div class="draggable" style="position:absolute; background:red; height:50px; width: 50px;"> </div>
<script>
//函數綁定
var handler = {
message:"Event handled",
handleClick:function(event){
alert(this.message);
}
};

var handler1 = {
message:"Event handled",
handleClick:function(event){
alert(this.message + ":" + event.type);
}
};
EventUtil.addHandler(btn,"click",bind(handler1.handleClick,handler1));
//ECMAScript5爲全部函數定義了一個bind()方法，
EventUtil.addHandler(btn,"click",handler1.handleClick.bind(handler1));

//不可擴展對象(preventExtensions)
var person = {name:"TOM"};
//person.age = 29; //添加屬性
Object.preventExtensions(person); //不能再給對象添加屬性和方法
person.age = 30;
alert(person.age); //undefined

//密封的對象(seal)
Object.seal(person);
person.age = 31;
alert(person.age);

//已有的成員屬性也不能夠修改或者刪除
delete person.name;
alert(person.name);

//凍結的對象(freeze)
Object.freeze(person);
person.age = 23;
alert(person.age);//undefined
delete person.name;
alert(person.name);//TOM
person.name = "still";
alert(person.name);//TOM

//高級定時器
//定時器對隊列的工做方式是，當特定時間過去後將代碼插入。注意，給隊列添加代碼並不意味着對它馬上執行，而只能表示它會盡快執行。設定一個 150ms 後執行的定時器不表明到了 150ms代碼就馬上執行，它表示代碼會在 150ms 後被加入到隊列中。若是在這個時間點上，隊列中沒有其餘東西，那麼這段代碼就會被執行，表面上看上去好像代碼就在精確指定的時間點上執行了

var btn = document.getElementById("my_btn");
btn.onclick = function(){
setTimeout(function(){
document.getElementById("message").style.visibility = "visible";
},250);
//其餘代碼
}

//Yielding Processes(數組分塊)
function chunk(array,process,context){
setTimeout(function(){
var item = array.shift();
process.call(context,item);

if(array.length > 0){
setTimeout(arguments.callee,100);
}
},100);
}

var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342];
function printValue(item){
var div = document.getElementById("my_btn");
div.innerHTML += item + "<br/>";
}
//chunk(data,printValue);

//函數節流
function throttle(method,context){
clearTimeout(method,tId);
method.tId = setTimeout(function(){
method.call(context);
},100);
}
//這段很是簡單的例子有兩個問題可能會形成瀏覽器運行緩慢。首先，要計算 offsetWidth 屬性，若是該元素或者頁面上其餘元素有很是複雜的 CSS 樣式，那麼這個過程將會很複雜。其次，設置某個元素的高度須要對頁面進行迴流來令改動生效。若是頁面有不少元素同時應用了至關數量的 CSS 的話，這又須要不少計算
window.onresize = function(){
var div = document.getElementById("my_btn");
div.style.height = div.offsetWidth + "px";
}

//用throttle()函數來解決(節省瀏覽器計算)
function resizeDiv(){
var div = document.getElementById("my_btn");
div.style.height = div.offsetWidth + "px";
}
window.onresize = function(){
throttle(resizeDiv);
}

//自定義事件
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor:EventTarget,
addHandler:function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},

fire:function(event){
if(!evnt.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length;i<len;i++){
handlers[i](event);
}
}
},

removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[type];
for(var i =0, len=handlers.length;i<len;i++){
if(handlers[i] === handler){
break;
}
}
handlers.splice(i,1);
}
}
};

//拖放
var DragDrop = function(){
var dragdrop = new EventTarget(),
dragging = null,
diffX = 0,
diffY = 0;

function handleEvent(event){
//獲取事件和目標
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);

//肯定事件類型
switch (event.type){
case "mousedown":
if(target.className.indexOf("draggable") > -1){
dragging = target;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mousemove":
if(dragging!==null){
//指定位置
dragging.style.left = (event.clientX - diffX) + "px";
dragging.style.top = (event.clientY - diffY) + "px";
DragDrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});
}
break;
case "mouseup":
dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});
dragging = null;
break;
}
};
//公共接口
dragdrop.enable = function(){
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
};

dragdrop.disable = function(){
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
};
return dragdrop;
/*return {
enable:function(){
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
},
disable:function(){
EventUtil.removeHandler(document,"mousedown",handleEvent);
EventUtil.removeHandler(document,"mousemove",handleEvent);
EventUtil.removeHandler(document,"mouseup",handleEvent);
}
}*/
}();
</script>
-->

<script>
//離線檢測
if(navigator.onLine){
//正常工做
}else{
//執行離線狀態時的任務
}
EventUtil.addHandler(window,"online",function(){
alert("Online");
});
EventUtil.addHandler(window,"Offline",function(){
alert("Offline");
});

//應用緩存
EventUtil.addHandler(applicationCache,"updateready",function(){
applicationCache.swapCache();
});

//數據存儲
var CookieUtil = {
get: function (name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
+ cookieName.length, cookieEnd));
}
return cookieValue;
},
set: function (name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" +
encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};

//設置cookie
CookieUtil.set("name","Nicholas");
CookieUtil.set("book",professional JavaScript);

//讀取cookie的值
alert(CookieUtil.get("name"));
alert(CookieUtil.get("book"));

//刪除cookie
CookieUtil.unset("name");
CookieUtil.unset("book");

//設置cookie，包括它的路徑，域，失敗日期
CookieUtil.set("name","Nicholas","/books/projs/","www.qq.com",new Date("January 1,2010"));

//刪除剛剛設置的cookie
CookieUtil.unset("name","/books/projs/","www.qq.com");

//設置安全的cookie
CookieUtil.set("name","Nicholas",null,null,true);
</script>

//js實現相似於add(1)(2)(3)調用方式的方法 function add(x){ var sum = x; var tmp = function(y){ sum = sum + y; return tmp; }; tmp.toString = function(){ return sum; }; return tmp; } console.log(add(1)(2)(3)); //6 console.log(add(1)(2)(3)(4)); //10</script>