一個demo學會js

時間 2019-11-21

原文原文鏈接

快捷連接：
js系列教程1-數組操做全解
 js系列教程2-對象和屬性全解
 js系列教程3-字符串和正則全解
 js系列教程4-函數與參數全解
 js系列教程5-容器和算法全解
 js系列教程6-BOM操做全解
 js系列教程7-DOM操做全解
 js系列教程8-事件全解
 js系列教程9-表單元素全解
 js系列教程10-canvas繪圖全解
 js系列教程11-json、ajax、comet全解
 js系列教程12-離線應用與存儲全解javascript

這篇demo較長，包含了js基本的內容，若不是出於校驗本身js能力的朋友，建議按照上面的連接分章節學習。本demo包含了js的數組、對象、對象屬性、字符串、正則表達式、函數、參數、容器、算法、BOM、DOM、事件、表單、cancas繪圖、json、ajax、comet、離線應用、客戶端存儲等方面的知識，能夠全面檢驗你的js學習效果。php

此demo除了必須的連接文件外，主要包括文件：index.html和index.js、index.css、index1.js、index2.js、index3.js、index4.js、index5.js文件css

index.html文件爲一個簡單的演示頁面。包括js代碼的打印輸出和js與css的嵌入代碼。html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsdemo</title> <meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <!--適應移動屏幕--> <link rel="stylesheet" href="index.css" /> <style type="text/css"> .hintclass{ display: inline; float: left; left: 30%; height: 35%; width: 70%;color: white;overflow: auto} /*設置樣式類樣式*/ #hint1{display:inline;float:left;height: 25%;width: 70%;left:30%;background-color: aqua;color: white} /*設置指定id樣式*/ /*background-image:url('chaoxian.jpg');background-size: cover*/ </style> <style type="text/css"> body div{background-color: green} /*設置元素類別樣式，多重限定，使用空格鏈接，樣式的計算以最新的設置爲主*/ div input{width: 200px;height: 40px} </style> </head> <!--當遇到<body>開始呈現內容--> <body> <div style="width: 100%;height: 900px;" id="hintdiv"> <label style="display:inline;float:left;height: 100%;width: 30%;">id="hint" name="tity"></label> <label id="hint1" name="tity"></label> <!--name是元素被包含在集合中時的key--> <label class="hintclass" style="" id="hint2" name="tity" title="label text" lang="en" dir="ltr" myatt="age" data-myname="luanpeng"></label> <!--id惟一標識，title元素附件說明，lang語言，dir語言方向，class特性，myatt自定義屬性，data-myname自定義數據屬性--> </div> <div style="width: 100%;height: 600px" id="hintdiv1"> <!-- onclick="alert('div接收到事件')"--> <input type="button" id="input1" value="點擊1" onclick="alert('點擊了')" > <!--能夠在事件中直接輸入函數表達式--> <input type="text" id="input2" value="輸入內容" name="mytext" oninput="printf(event.type.toString()+this.value)" ><!--事件中自動具備event時間對象和this表示的元素自己，名稱name的值就表明了當前元素對象的引用--> <br> <!--換行--> <textarea rows="2" cols="25">textare初始化值</textarea> <!--rows行數，cols列數--> <form accept-charset="GBK" action="" method="post" name="hello" id="myform" novalidate><!--novalidate表單不用驗證--> <input name="text1" type="text" size="15" maxlength="20" placeholder="提示字" value="input初始化值" id="text1" autofocus required> <!--autofocus自動聚焦，pattern="\d+"輸入模式，placeholder提示字,size顯示的字符數目，maxlength能存放的字符數目，required必填屬性--> <input type="email" value="123456@qq.com"> <input type="url" value="http://www.baidu.com"> <input type="number" min="0" max="100" step="5" value="2"> <!--min最小值，max最大值，step步進--> <input type="range"> <input type="file" id="myfile"> <br> <input type="detetime"><input type="date"> <input type="month"><input type="week"><input type="time"> <br> <select id="myselect" name="myselect"> <option id="option1" value="myoption1">第1個選項</option> <option id="option2" value="myoption2">第2個選項</option> </select> <br> <input type="button" value="點擊2" onclick="printf(mytext.value.toString())" /> <!--在form元素中經過name值能夠訪問其餘元素--> <input type="submit" value="提交"> </form> <canvas style="width: 500px;">id = "mycanvas"> </canvas> </div> <!--script腳本放在body後面爲了不瀏覽器空白，</script>不要省略，不然容容易出錯--> <script src="index.js"></script> <!--引入外部文件或網絡文件，src表示要包含的文件，type表示腳本語言內容類型，默認爲text/javascript,charset代碼所屬字符集，async表示當即下載腳本，defer腳本能夠延遲到文檔徹底被解析後再解析--> <!--html文件中內嵌javascript，到文件遇到下一個</script>認爲腳本結束，不管他出如今什麼位置，儘可能使用外部js文件實現--> <script type="text/javascript">//至關於一個外部js文件。一個h5文件引用的全部js文件會自動合併成一個js文件，實現變量函數共享。但每一個文件又有獨立的活動空間，同名函數和變量會先在本身空間查詢，再向前查詢 hint = document.getElementById("hint"); //定義變量，供js函數調用。 hint1 = document.getElementById("hint1"); //定義變量，供js函數調用。 hint2 = document.getElementById("hint2"); //定義變量，供js函數調用。 hintdiv = document.getElementById("hintdiv"); //定義變量 hintdiv1 = document.getElementById("hintdiv1");//定義變量 printf("===========欒鵬調試==========="); //調用在js文件中定義的函數，先再當前js文件查詢，再在以前的js文件查詢，再向以後的js文件查詢 </script> <script src="index1.js"></script> <script src="index2.js"></script> <script src="index5.js"></script> </body> </html>

index.css文件爲一個簡單的樣式頁面，爲了學習js操做外部樣式文件而存在的前端

body div{background-color: green} /*設置元素類別樣式，多重限定，使用空格鏈接*/ .hintclass{ display: inline; float: left; left: 30%; height: 35%; width: 70%;color: white} /*設置樣式類樣式*/ #hint1{display:inline;float:left;height: 20%;width: 70%;left:30%;background-color: aqua} /*設置指定id樣式*/

index.js文件包含js的數組、對象、字符串、正則表達式、函數、容器的知識java

var konggestr="&nbsp; &nbsp; &nbsp; &nbsp; "; //空格 printf(konggestr+"===========數組===========") //變量是鬆散型的，能夠指向任意類型的數據 var name = "student",age=12; //underfined、null、boolean、string、number爲基本數值類型。逗號一併定義初始化多個變量。基本包裝類型String、Boolean、Number經過valueOf()能夠獲取基本數值類型，能夠實現自動裝箱和拆箱操做。 var names=[];//定義數組並初始化爲空 names = ["小明","小紅","小剛"]; //賦值，能夠在定義時賦值 names=new Array(names.length); //數組基類爲Array，屬性length爲數組長度 names = new Array('小明','小紅','小剛'); //字符串不區分單雙引號，只要配對使用就行 names[4]="小胡"; //經過設置，直接添加了兩項null和「小胡」 printf(names.join(",")); //使用間隔字符串鏈接數組 names.unshift("小李","小蘭"); //首部添加 names.push("小李","小蘭"); //末尾添加 var item = names.pop();//刪除獲取最後一項 item=names.shift();//刪除獲取第一項 names.reverse(); //數組取反 printf(names); names = names.slice(-4,6); //讀取數組段，不修改源數組，複數表示從右向左數，-1表示末尾第一個元素，0表示首部第一個元素。只有一個參數時表示直到末尾。讀取包含第一個參數不包含第二個參數 printf(names); names.splice(2,1,"小季","小明"); //刪除添加數據，修改源數組，刪除添加參數第一個參數表示開始刪除的位(包含),第二個參數表示要刪除的位數目，後面參數表示在刪除位置處添加元素 printf(names); names=names.concat("小王",["小明","小黑"]); //不修改源數組，因此要賦值 names.sort(); //數組排序sort(compare)，參數可爲排序函數,空元素將排到最後 printf(names); names.indexOf("小明"); //查找匹配元素的位置，沒有返回-1，lastindexof表示匹配的最後位置。 var boolresult = names.every(function(item,index,array){ //對數組中元素每一項進行布爾運算，返回false和true。every函數，所有元素返回true時返回true。some函數某一元素返回true時返回true return (index>2); }); var nameresult = names.filter(function(item,index,array){ //返回數組，filter函數獲取知足條件的項，map獲取每一項計算值的集合，不改變原數組，forEach函數等價於for語句，對每項處理 return (index>2); }); printf(nameresult); nameresult = names.reduce(function(prev,cur,index,array){ //reduce從前向後迭代，reduceRight從後向前迭代。 return prev+"+"+cur; //迭代從第二項開始，prev初始值爲第一項，cur初始值爲第二項。計算值自動傳給下一函數的prev，返回最後一次迭代產生的值 }); printf(nameresult); function compare(student1,student2){ //比較函數，返回-1,0,1 //return student1.age<student2.age?-1:(student1.age==student2.age?0:1); //-1表示前對象小，1表示後對象小，0表示相等 return student2.age-student1.age; //正數自動轉化爲1，負數轉化爲-1 } ages=[]; for(var i=0;i<7;i++){ //js沒有塊級做用域，for if塊內定義的變量，在塊外能夠訪問，函數內定義的局部變量外部不能夠訪問。可使用let i定義臨時做用域，定義的變量和對外部變量的修改均不保留， ages.push(Math.floor(Math.random()*10+1)); //floor向下取整，random()生成0-1之間的隨機數 } printf(i); printf(Math.max.apply(Math,ages)); //max取最大值，min取最小值。還有不少數學運算 printf("===========對象===========") var student1 = new Object(); //定義對象引用，或者var student1 = {},new Object()。全部的包裝類都派生於Object。Object基類包含hasOwnProperty、isPrototypeOf、propertyIsEnumerable、toLocaleString、toString、valueOf方法 student1.name = "student1"; //直接設置同時添加對象屬性 student1["age"]=12; //直接設置同時添加對象屬性 student1.getname = function(){ //設置添加對象方法。函數表達式，只有在執行到本行才解析 return this.name; //this表示做用對象，這裏爲student1 }; //var {name:personname, age:personage} = student1; //解構賦值，對應項使用副本賦值，如[value1,value2]=[value2,value1];可實現兩個基本數據交換 printf(JSON.stringify(student1)); //JSON.stringify把對象轉化爲JSON字符串表示 student1 = { name:"student1", _age:12, //前面有下滑線是一種經常使用的標記，用於表示只能經過對象方法訪問的屬性,只是對開發者的一種標記習慣，並非真的私有變量 getname:function(){ return this.name; } }; Object.defineProperty(student1,"name1",{ //能夠用於定義新數據屬性，也能夠修改原有數據屬性。也能夠不使用defineProperty能夠直接定義數據屬性。也可使用defineProperties同時定義多個數據或訪問器屬性 writable:true, //對象屬性的數據屬性，是否可修改 enumerable:true,//對象屬性的數據屬性，經過for-in遍歷到 configurable:true, //對象屬性的數據屬性，可否經過delete刪除屬性，configurable屬性在定義爲false之後，就不能再被設置 value:"sst" //對象屬性的值屬性，默認爲underfined }); Object.defineProperty(student1,"age",{ //訪問器屬性，不能直接定義，必須經過defineProperty定義，不包含數據值，設置時調用set函數，讀取時調用get函數。訪問器屬性名稱不要和數據屬性名稱相同 get:function(){return this._age}, set:function(newvalue){this._age=newvalue;this.name="xxt";} }); student1.age=22; //age不是數據屬性，而是訪問屬性。這裏是調用了set函數， Object.preventExtensions(student1); //設置對象不可被擴展，之後再添加屬性都是underfined，防止被篡改 Object.seal(student1); //密封對象，對象不能添加刪除屬性。 Object.freeze(student1); //凍結對象，屬性不可修改。只能經過set訪問器修改 printf(JSON.stringify(student1)); //將JSON格式轉化爲字符串。JSON格式即KEY-VALUE格式 for(var myproperty in student1){ //for in遍歷對象屬性 console.log(myproperty,":",student1[myproperty]); } function Student(name,age){ //自定義函數，構造函數，等同於java中的自定義類。全部的類型派生於Object var sex="男"; //函數內部爲私有屬性 this.name=name; //經過this建立的是能夠被實例對象訪問的 this.age=age; this.getName=function(){ return this.name; //函數內部this表示此函數引用的擁有者，不是傳入參數。看成爲全局函數時，this表示window }; this.setName= function(name){ //函數不關心傳入或者定義的參數數量和類型，所以全部函數沒有重載 if(typeof name=="string") //基本數據類型，作類型檢驗，避免參數傳遞錯誤 this.name = name; //沒有指定返回值，實際返回的是undefined }; this.getAge =function (){ if(this.age.toFixed(2)<<2) //轉化爲false的值："",0,NaN,null,underfined。其餘轉化爲true，類型首字母大寫，變量首字母小寫，<<按位移動，<<<無符號按位移動,toFixed(2)表示保留2位小數 return -~this.age; //~按位取非，&按位取與，|按位取或 ^按位取異或，一元減號，表示取負 return this.age; //保證全部路徑都有返回值，雖然不加也不會出錯，由於有默認返回值undefined }; this.setAge= function(age){ //函數參數老是按值傳遞，不管基本類型仍是引用類型，引用類型傳遞引用的值，不傳遞指向對象的值 if(age instanceof Number){ //包裝類型，作類型檢驗，避免參數傳遞錯誤 this.age = parseInt(age.toString(16),16);//parseInt將字符串化爲整數，支持識別多進制和轉化爲多進制，toString()轉化爲字符串，支持多進制轉化 } //typeof判斷基本類型，underfined聲明未定義(underfined類型只有一個值)，boolean布爾型，string字符串，number數值，object對象或null(null類也只有一個值)，function函數 //instanceof判斷包裝類型，基本類型對象的包裝類型爲Underfined,Boolean,String,Number,Object, typestr = typeof("getAge"); //省略var的變量爲全局變量 } } student1=new Student("小明",12); //new是建立了一個新對象，構造函數將屬性和方法綁定到這個新對象上 Student("小紅",13); //做爲全局函數。經過構造函數將屬性綁定到window上 var student2 = new Object(); Student.call(student2,"小剛",14);//call和apply經過構造函數，將屬性綁定到以存在對象student2上 if(student2 instanceof Student) //instanceof判斷變量是不是某個類型或其派生類型實例的，student1是Student類，同時也是Object printf(student2.name); //js的繼承有多重方式。每種方式的內存操做都是不一樣。下面展現其中一種。 // js的類型繼承原理和java、c#相同。派生類繼承基類時，會實例化(淺複製)一個基類對象和保留引用在派生類空間。派生類內的實例的基類和派生類自定義的函數分別操控各自的屬性。在函數和屬性操做中時，會自動先派生後基類的順序查找，不用手動查找 //關於實例化：只複製且所有複製在構造函數中開闢了內存的變量，包括引用變量。派生類實例化時基類對象進行淺複製。 function Monitor(){ //自定義函數，至關於自定義一個類，類名Monitor。在文件中多稱爲構造函數，至關於c++和java中的自定義類。每一個函數類，都有基類Object this.task=["學習"]; } Monitor.prototype.data = "原型數據"; //prototype獲取派生類的基類對象引用，經過基類對象引用直接爲基類添加屬性。系統會爲派生類提供默認原型，也能夠經過繼承自定義原型 person1 = new Monitor();//經過函數類實例化對象 person2 = new Monitor(); //實例化對象 Object.getPrototypeOf(person1).data="原型數據1"; //經過實例修改原型。Object.getPrototypeOf()獲取對象原型。實例對象包含對原型的引用，但須要使用getPrototypeOf函數獲取 person1.data="派生數據"; //修改派生類屬性，這樣當查找data數據會先自動搜索派生類，再自動搜素基類。 printf(person1.hasOwnProperty("data")); //是否擁有指定屬性(不算基類屬性)。true由於自定義了該屬性 printf(person1.data);//讀取自定義屬性 var keys = Object.keys(Monitor.prototype); //獲取對象所擁有(不包括繼承的)的可枚舉實例，Monitor是類，Monitor.prototype是基類實例。若是換成person1，則只能獲取派生類的自定義屬性。getOwnPropertyNames可獲取對象擁有的全部屬性 printf(keys); delete person1.data;//刪除派生類自定義的屬性 printf(person1.hasOwnProperty("data")); //是否擁有指定屬性。false，由於該屬性在派生類中被刪除了，只有基類中存在，雖然能夠訪問，可是是繼承過來的，不是本身擁有的 printf("data" in person1); //是否包含指定屬性。true包含，只是不擁有 printf(person1.data);//基類屬性 Monitor.prototype.sex=["男"]; //經過派生類向基類添加數組引用變量 person1.sex.push("女"); //在實例對象中保留了基類的引用和淺複製了基類對象。這裏的sex是通過了一次從派生類到基類的向上查詢。 printf("基類中的引用:"+person2.sex); //實例對象連帶更新。因此構造函數用於指定專屬屬性，原型用於存放共享屬性 person1.task.push("工做"); //修改構造函數中引用指向的對象 printf("派生類中的引用:"+person2.task); //實例對象不連帶更新構造函數中的數據。由於實例化時會深複製構造函數中的全部數據，在實例化時爲每一個對象都建立 Monitor.prototype=new Student("組長",12); //繼承，派生類Person設置基類爲Student。在繼承中會爲淺複製一個基類實例放在派生類空間中，同時將引用存儲爲prototype，放在派生類Person中 //student1=null; //經過設置引用的值爲空，切斷引用於對象之間的關聯，便於垃圾回收器收回內存 //constructor構造函數 //isprototypeof(object) 檢測傳入對象是不是當前對象的原型 printf("===========字符串、正則表達式==========="); name = " Muaneng Tuanpeng ".trim().toLowerCase().replace("eng","ing"); //trim()刪除字符串先後空格。toLowerCase轉化爲小寫。replace替換第一個eng， name1 = name.substring(name.indexOf("t",3),name.lastIndexOf("g",0));//slice、substring參數爲首尾下標，substr爲起點下標和長度。都不改變源字符串。indexOf和lastindexOf查詢子字符串的位置,第二個參數表示從哪一個字符開始向對面搜索 name1 = name.substr(-4);//傳入負值時，slice將負值加上字符串長度，substr將第一個負值加上字符串長度，第二個負值轉爲0，substring將負值都轉爲0 name1="muaneng tuanpeng".replace(/eng/g,"ing").split(" ",2)[0]; //replace接收正則表達式，/g替換所有，split分割字符串，並限定返回的數組個數。[0]讀取返回數組的第一個元素。 //正則表達式 = /pattern/flags 其中flags中g表示匹配所有，i表示不區分大小寫，m表示匹配多行 //pattern包含 ([{\^$|)?*+.]}元字符，若匹配的字符串中包含元字符，使用\轉義。 .表示任一字符，()表示捕捉字符 var patter1 = /(.)u/gi; //正則表達式，標誌沒有可爲空，也可使用var patter1 = new RegExp("pattern","flags");使用new是建立對象 if(patter1.test(name)){ //test查找符合要求的子串是否存在,返回true printf(RegExp.input); //原始字符串 printf(RegExp.leftContext);//捕捉到的位置的左邊字符串 printf(RegExp.rightContext);//捕捉到的位置的右邊字符串 printf(RegExp.lastMatch);//返回最近一次與整個正則表達式匹配的字符串 mu printf(RegExp.lastParen); //返回最近一次捕捉的字符 printf(patter1.global);//返回正則是否包含全局標誌g } var matches = patter1.exec(name); //查找符合要求的子串。matches.index表示查找到的起始下標，matches.input表示輸入字符串。patter1.lastIndex表示查找到的結束下標，matches[0]表示查找到的第一個匹配項，若匹配項爲全局模式，則每次調用返回下一個匹配項。 printf(matches.index);printf(patter1.lastIndex);printf(matches[0]); String.prototype.startwith = function(text){ //設置字符串引用的原型，爲String、Object、Array等添加方法 return this.indexOf(text)==0; }; printf(name.startwith("mu")); printf("===========函數==========="); //自定義函數，函數聲明，會優先加載。調用函數時會先在本機活動對象中查詢，即當前js文件中查詢，若是沒有才會向上查詢，因此在兩個js文件中定義相同函數名，js文件內調用各自的函數，其餘文件中調用最後聲明的函數 function printf(str){ //var hint = document.getElementById("hint"); //根據id獲取元素 hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量。hint會先在當前文件中查詢，而後向以前引用的js文件查詢，再向以後引用的js文件查詢 } function callfunction(myfunction,myargument){ //向函數傳輸函數引用 return myfunction(myargument); //調用回調函數 } callfunction(printf,new Date().toDateString());//Date無參數，表示獲取當前時間。toDateString()顯示星期年月日，toTimeString顯示時分秒，toLocaleDateString以特定地區的格式顯示星期年月日。還能夠分別獲取時間的各類參數。 function getproperty(propertyname){ // printf("外層函數"); return function (object1){ //內部函數，返回函數引用，一個函數能夠訪問另外一個函數的變量，叫作閉包。函數的this和arguments變量只搜索到活動對象中（活動上下文），不會一直向外層搜索 printf("內層函數"); var getnamefun = getproperty("name"); //執行外部函數，getnamefun是一個函數引用變量 printf(getnamefun.length); //函數但願的參數個數 return object1[propertyname]; //內部函數返回值，內部函數能夠讀取外部函數的變量，包括外層函數的arguments對象 } } var getnamefun = getproperty("name");//獲取內部函數引用。外層函數的做用域鏈沒有銷燬，由於有內部函數的引用存在。有引用指向對象，因此對象不會被銷燬，這也是垃圾回收的機制 printf(getnamefun(student1)); //執行內部函數 //函數參數 function printname() { //定義參數和傳入參數能夠不一致，因此函數沒有重載，爲了使用明確，最好設定成一致模式。 var name="內部變量"; //函數內定義變量爲私有變量 //arguments.callee.caller.toString(); //arguments.callee.caller、getname.caller表示調用當前函數的函數的引用 if(arguments.length>0 && arguments[0]=="曉明") //函數內部arguments表示參數數組 printf(this.name); //arguments.callee("小明"); //函數內部arguments.callee表示arguments的擁有者函數的引用，也就是當前函數的引用。實現遞歸調用 } printname("曉明"); printname.apply(this,["曉明"]); //函數至關於一個類，函數名至關於類的一個引用，函數類擁有參數apply,傳入調用者和參數數組。全局this至關於window printname.call(student1,"曉明"); //call屬性傳入調用者和逐個參數。是將函數綁定到對象上，而後在經過對象調用此函數。 printname.bind(student1)("曉明"); //printname.bind(student1)返回函數綁定到對象上的函數引用，經過引用()調用此函數 //內置對象 Object，Array，String。。。Global(其餘零散函數的合集)，Math var url = "http://www.baidu.com"; printf(encodeURI(url)); //網址編碼，對應decodeURL驛碼， var diftime = new Date()-new Date(Date.UTC(2005,4,5,17,55,55)); //UTC參數，年月日，小時分鐘秒毫秒，其中月和小時從0開始，年月參數必須有。Date沒有參數表示當前時間，時間相減獲取時間相差時間毫秒數 eval("printf(diftime)"); //eval翻譯執行js代碼字符串 //===========================容器====================================== var map = new Map(); //映射，不重複的鍵，以鍵值對的形式存在 map.set("name","mapluanpeng"); //添加設置映射 if(map.has("name")) //判斷映射是否存在 printf(map.get("name")); //讀取映射 map.delete("name"); //刪除映射 var set = new Set(); //集合。不重複的元素集合，不存在鍵值對 set.add("name"); //添加集合 if(set.has("name")){ //檢測集合是否存在指定元素 set.delete("name"); //刪除集合元素 printf("刪除集合元素name"); }

index1.js文件包含BOM的知識node

function printf(str){ var hint = document.getElementById("hint1"); //根據id獲取元素 hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量 } //=======================================BOM======================================== printf("===========BOM(window窗口信息)==========="); //window對象，窗口信息 var windowinfo = {}; windowinfo["screenLeft"]=(window.screenLeft); windowinfo["screenTop"]=(window.screenTop); //瀏覽器位置 windowinfo["innerWidth"]=(window.innerWidth); windowinfo["innerHeight"]=(window.innerHeight);//瀏覽器大小 windowinfo["clientWidth"]=(document.documentElement.clientWidth); windowinfo["clientHeight"]=(document.documentElement.clientHeight);//瀏覽器大小 windowinfo["clientWidth"]=(document.body.clientWidth); windowinfo["clientHeight"]=(document.body.clientHeight);//頁面大小 printf(JSON.stringify(windowinfo)); window.moveTo(20,20); //moveTo移動到絕對位置，moveBy移動相對距離。好像並無效果 window.resizeTo(200,200); //resizeTo調整大小到指定大小，resizeBy縮放窗口大小 var wroxwin=window.open("http://www.baidu.com","_blank","height=400,width=400"); //打開窗口,參數地址、窗口名或框架名、窗口屬性。返回窗口引用，進而可控制窗口。window就是一個窗口引用。不過有可能彈窗會被屏蔽 //彈框和超時設置 if(wroxwin==null) alert("彈出窗口被屏蔽"); //彈出系統提示框，只有字符串和肯定按鈕 else var timeoutid = setTimeout(function(){ //setTimeout設置超時調用。js是單線程語言。但能夠設置超時調用和間歇調用 wroxwin.close(); //關閉指定窗口 },500); //設定延遲時間爲500ms，這裏至關於建立了新的線程，後面程序不會等待此函數執行完畢。若當前窗口關閉這此線程不會再執行 i=0; /*result = prompt("設定循環執行的毫秒數？","2000"); //prompt帶有輸入框的系統彈出框，第一個參數爲提示字符串，第二個參數爲默認輸入內容。返回用戶輸入內容。 var intervalid=setInterval(function(){ //setInterval間歇執行，設置間隔時間 printf("循環執行"+(i++).toString()+" "+new Date().toTimeString()); if(i==4) { if(!confirm("是否繼續循環")) //confirm帶有肯定和取消按鈕的系統對話框。點擊ok返回true，點擊關閉或取消返回false clearInterval(intervalid); //取消超時調用或間歇調用 } },parseInt(result));*/ printf("===========BOM(location網址信息)==========="); var locationinfo = {}; locationinfo["href"]=(location.href); //打開新網址。location包含關於網址的信息和操做。能夠讀取也能夠設置，設置及表明操做。 locationinfo["hostname"]=(location.hostname);//hostname主機名 locationinfo["hash"]=(location.hash);//網址尾部的#後字符串 locationinfo["pathname"]=(location.pathname);//路徑 locationinfo["port"]=(location.port);//端口 locationinfo["search"]=(location.search);//網址尾部？後字符串 printf(JSON.stringify(locationinfo)); printf("===========BOM(navigator瀏覽器信息)==========="); printf("瀏覽器名稱:"+navigator.appName); //瀏覽器名稱,不少屬性，本身查詢 printf("瀏覽器版本:"+navigator.appVersion); //瀏覽器版本 printf("===========BOM(history上網記錄)==========="); try{ //try嘗試運行 //history.go(-1);//後退或前進n頁， //history.go("525heart");//跳轉到最近的 網址包含指定字符號的網址上 //history.back(); //後退一頁 //history.forward(); //前進一頁 throw "hello world"; //代碼遇到異常會報錯，中止運行，除非try，catch捕獲異常 }catch (err){ //catch錯誤提示 //if(err instanceof TypeError) //異常類型，基類型Error，EvalError，RangeError，ReferenceError，SyntaxError，TypeError，URIError printf("異常："+err); console.log("log將消息記錄到控制檯"); //將消息打印到控制檯，在工具開發者選項中。Console菜單下。error打印錯誤消息，info打印信息消息，log打印通常消息，warn打印警告消息 } finally { printf("始終要運行的語句"); }

index2.js文件包含DOM的知識，包括DOM文檔信息，DOM元素節點信息、DOM元素節點操做、DOM擴展、DOM2\DOM三、遍歷c++

function printf(str){
    //var hint =  document.getElementById("hint2"); //根據id獲取元素，document是一個文件節點，所以document能夠替換成某個節點， //var hint = document.getElementsByName("tity")[2]; //getElementsByName根據name獲取元素集合，經過[]獲取元素 //var hint = document.body.children[0].children[2]; //獲取body的第一個子節點的第三個子節點。有時註釋也會被當成一個節點 //document.anchors包含帶name的全部a，document.forms全部form，document.images全部img，document.links全部帶href的a //var hint = document.getElementsByTagName("label")[2]; //getElementsByTagName根據元素類型獲取元素集合，經過[]獲取元素。參數能夠爲"*"表示所有元素，[]內能夠是元素name。由於返回的是hash集合 var hint = document.getElementsByClassName("hintclass")[0];//能夠添加多個類名 hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量 } printf("===========DOM文檔信息==========="); var docinf={}; docinf["html"]=document.documentElement; //document表示對文件的引用。 docinf["title"]=document.title;//獲取標題節點，可設置標題 docinf["body"]=document.body;//獲取body節點 docinf["url"]=document.URL; //網址 docinf["domain"]=document.domain; //域名，可設置 docinf["referrer"]=document.referrer; //來源頁面的url printf(JSON.stringify(docinf)); //writeln寫入h5代碼並添加換行。document.write在文件加載期間寫入內容，在文件加載後寫入會重寫所有文件。 document.write("<script type='text/javascript' src='index3.js'>"+"</script>"); //write寫入h5代碼(動態加載js代碼index3.js，若在<script>添加內部<script><\/script>) printf("===========DOM元素節點信息==========="); var elementinfo={}; var hint = document.getElementById("hint2"); elementinfo["tagName"] =hint.tagName; //元素標籤名，nodename也是獲取節點標籤名 elementinfo["id"] =hint.id; //惟一標識符，可修改，修改透明 elementinfo["className"] =hint.className;//特性名稱，可修改，修改當即可見 elementinfo["title"] =hint.title;//元素說明，可修改，鼠標通過可見 elementinfo["lang"] =hint.lang;//語言，可修改，修改透明 elementinfo["dir"] =hint.dir;//方向，可修改，屬性重寫可見 hint.setAttribute("myname",hint.dataset.myname);//setAttribute設置或建立屬性。自帶屬性也能夠直接賦值hint.id="xxxx"。dataset元素的數據屬性 elementinfo["myname"] =hint.getAttribute("myname");//getAttribute獲取自定義屬性，也能夠獲取自帶屬性 printf(JSON.stringify(elementinfo)); hint.removeAttribute("myatt"); //刪除屬性 printf("===========DOM元素節點操做==========="); //元素是一種節點。注意區分 //動態建立佈局元素 hint3 = document.createElement("label"); //建立元素，傳入標籤名，元素節點類型值爲1 //label = document.createElement("<label class='hintclass' style='' id='hint3' name='tity'></label>"); //建立元素，傳入h5代碼 //label = document.getElementById("hint2").cloneNode("true");//也可使用cloneNode複製節點，參數爲true表示深層複製，即複製節點內部子節點，false表示淺複製 hint3.id = "hint3"; hint3.className = "hintclass"; hint3.setAttribute("name","tity"); hint3.style.background="#123456";// var computedstyle = document.defaultView.getComputedStyle(hint3,null);//獲取元素計算後樣式，只讀對象，不能經過此對象進行設置 printf(JSON.stringify(computedstyle)); //包含了全部樣式屬性 printf(hint3.style.cssText); //style是經過style設置的，cssText樣式的字符串表示，length樣式屬性的長度，[index]或者item(index)給定位置的樣式屬性名，getPropertyValue(propertyName)給定屬性名的屬性值，removeProperty刪除屬性 //appendChild在父元素內部末尾添加子元素，insertBefore在指定子元素前添加子元素，replaceChild替換子元素 if(!hintdiv.contains(hint3))//contains判斷元素是否包含子元素 hintdiv.appendChild(hint3); //在末尾添加子節點 //子節點多是元素，文本節點，註釋或者處理指令，不一樣的瀏覽器看待不一樣 hint3 =hintdiv.removeChild(hintdiv.lastChild);//removeChild刪除子節點，lastChild最後一個子節點，firstChild第一個子節點 var hint1=hintdiv.children[1];//childNodes父節點的子節點集合,parentNode獲取節點的父節點。children表示子元素集合 var hint2=hint1.nextElementSibling;//nextSibling獲取下一個兄弟節點，previousSBiling得到上一個兄弟節點,nextElementSibling下一個同輩元素,previousElementSibling前一個同輩元素 label = hintdiv.insertBefore(hint3,hint2.nextElementSibling);//hint2.nextSibling爲空，由於最後一個子節點的下一個兄弟節點和第一個節點的上一個兄弟節點均爲空。參數爲空，表示在末尾插入節點。 //動態加載腳本文件和內嵌腳本 var script = document.createElement("script"); script.type="text/javascript"; script.src = "index4.js"; //script.text = "function sayHi(){printf('動態加載內嵌腳本';)}" document.body.appendChild(script); //動態建立樣式文件 var link = document.createElement("link"); link.rel = "stylesheet"; link.type="text/css"; link.href="index.css"; //script.text = "function sayHi(){printf('動態加載內嵌腳本';)}" document.head.appendChild(link); //樣式文件是添加到head中，不是body中 //動態添加內嵌樣式 var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode("body{background:red}")); //非IE瀏覽器 }catch (err){ style.stylesheet.cssText ="body{background:red}"; //IE瀏覽器 } document.head.appendChild(style);//document.head在chrome和safari5中包含。屬於後添加的css樣式，會覆蓋重複樣式 printf("===========DOM文本節點等===========");//另外還有註釋節點、屬性節點、文檔類型、CDATA區域和文檔片斷等一系列，不是隻有元素纔是節點 //文本節點(類型爲3)父節點爲元素，沒有子節點。元素、文本都是節點的一種。文本節點的節點類型值爲3 var textnode = document.createTextNode("<strong>hello</strong>world\r\n");//能夠是h5格式的文本，也能夠直接爲字符串 hint2 = document.getElementById("hint2"); hint2.appendChild(textnode);//將本文節點添加到元素中 textnode.appendData(textnode.nodeValue);//nodeValue文本節點所包含的文本，appendData添加文本。deleteData(offset,count)刪除，insertData(offset,text)插入，replaceData(offset,count,text)替換，splitText分割文本節點 printf("===========DOM擴展==========="); var body = document.querySelector("body"); //取得標籤類別獲取元素 var mydiv = document.querySelector("#hintdiv"); //根據id獲取元素 var hint2 = document.querySelector(".hintclass"); //根據類class獲取匹配的第一個元素。經過文檔document查詢，在整個文檔範圍內查詢。 hint2 = mydiv.querySelector("label.hintclass");//根據元素類別和類名獲取元素。經過元素Element查詢，在元素以後查詢。 var hintarr = document.querySelectorAll("div label"); //querySelectorAll查詢匹配的所有元素。得到div中的label元素 if(hint2==hintarr[2]) printf("同一個元素"); hint2.classList.toggle("user"); //classList元素樣式類控制，add添加樣式，contain是否包含，remove去除，toggle添加或刪除。也能夠經過className設置類字符串 hint2.focus();//focus使元素獲取節點。document.actuveElement獲取當前聚焦元素，文檔加載完畢後，聚焦元素由null轉爲body，hasFocus判斷元素是否聚焦。瀏覽器會自動滾動至聚焦元素 printf(hintdiv.outerHTML.replace(hintdiv.innerHTML,""));//outerHTML獲取和設置元素及其全部子元素字符串表示//innerHTML獲取和設置元素的全部子元素字符串表示,innerText用於獲取元素中的夾雜文本，outerText用於替換子元素成文本節點。不是標準的h5 hintdiv.insertAdjacentHTML("beforeend","<strong>hello</strong> world");//添加了三個節點，<strong>元素、hello、world兩個文本節點。 //insertAdjacentHTML插入元素。beforebegin在元素前插入一個兄弟元素，afterbegin在元素下首部插入子元素，beforeend在元素下尾部插入子元素，afterend在元素後插入兄弟元素 hintdiv1.scrollIntoView();//使元素滾動至視口中，不傳參數或傳入true，保持頂部對齊，傳入false保持底部對齊。 printf("===========DOM2 DOM3==========="); style = document.getElementsByTagName("style")[0]; //獲取第一個style元素 var sheet = style.sheet||style.styleSheet; //經過link或style元素獲取樣式對象。IE瀏覽器支持styleSheet獲取樣式表，其餘瀏覽器支持sheet獲取樣式表CSSStyleSheet對象 if(document.styleSheets[document.styleSheets.length-2]==sheet); //document.styleSheets應用到文檔的全部樣式表，css文件中每一個樣式算一個樣式表，h5中每一個style元素算一個樣式表。 printf(JSON.stringify(sheet)); var rules = sheet.cssRules || sheet.rules; //根據樣式表，獲取規則列表。由於一個樣式表可能有多個規則。 var rule = rules[1];//獲取第2個規則。即hint1的樣式，每一個規則有多個樣式屬性 printf(rule.style.cssText); //與元素的style.cssText相似，不過規則cssText不能重寫 rule.style.color = "black"; //修改樣式規則，添加樣式屬性 sheet.insertRule("#hint{color: #883456}",0);//動態添加樣式規則，第一個參數爲規則爲字符串，第二個參數爲規則數組索引,IE使用addRule。刪除規則使用deleteRule或removeRule printf(hint2.scrollWidth); //即html的包含滾動內容的大小，元素屬性//scrollHeight、scrollWidth包含滾動內容的大小,scrollTop滾動高度，scrollLeft滾動左偏移，屬性可讀取和設置 printf(hint2.clientHeight); //clientWidth和clientHeight包括內邊距，但不包括邊框 printf(hint2.offsetHeight);//offsetLeft、offsetTop、offsetHeight(包括邊框，內邊距)、offsetWidth、offsetParent printf(JSON.stringify(hint2.getBoundingClientRect()));//返回元素的位置矩陣，包含left、top、right、bottom屬性 printf("===========遍歷==========="); if(document.implementation.hasFeature("Traversal","2.0")) //檢查瀏覽器某項功能能力 { var filter = function(node){ //設置查詢過濾器 return node.tagName.toLowerCase()=="label"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP; //在TreeWalker中還有NodeFilter.FILTER_REJECT表示跳過該節點及該節點的子節點 }; var iterator = document.createNodeIterator(hintdiv,NodeFilter.SHOW_ELEMENT,filter,false); //建立NodeIterator迭代器。參數：查詢根節點，查詢節點，過濾器。NodeFilter.SHOW_ELEMENT爲查詢節點類型爲元素節點，可使用|包含多種查詢節點類型， var node = iterator.nextNode(); //第一個節點， while(node!=null){ //最後一個節點的後續節點爲null，第一個節點的前序節點爲null printf(node.id); node = iterator.nextNode(); //向後迭代，previousNode向前迭代 } iterator = document.createTreeWalker(hintdiv,NodeFilter.SHOW_ELEMENT,filter,false); //建立TreeWalker迭代器，迭代器包含nextNode、previousNode、parentNode、firstChild、lastChild、nextSibling、previousSibling等方法 } //範圍 var range = document.createRange(); //建立一個節點範圍 range.selectNodeContents(hintdiv); //selectNode方法包含節點和子節點，selectNodeContents只包含子節點 printf(range.startContainer.id);//startContainer範圍中首節點的父節點，startOffset首節點在父節點中的偏移，endContainer尾節點的父節點，endOffset尾節點在父節點中的偏移。 range.setStart(hintdiv,0);//也能夠經過setStart和setEnd設置範圍。setStart的參數爲startContainer和startOffset range.setStartBefore(hintdiv.lastChild);//也能夠經過setStartBefore，setStartAfter，setEndBefore、setEndAfter設置。這裏獲取hintdiv的最後一個節點，即上面代碼添加的world文本節點 printf(range.toString());//打印範圍的字符串表示 world var fragment = range.extractContents(); //提取範圍成文檔片斷，range.deleteContents刪除文檔，range.cloneContents複製文檔 hintdiv.appendChild(fragment);//添加文檔片斷。 range.detach();range=null; //清理DOM範圍，var newRange = range.cloneRange能夠複製DOM範圍

index3.js文件包含事件的知識，包括事件綁定、事件類型、事件模擬web

function printf(str){ var hint = document.getElementById("hint3"); //根據id獲取元素，document是一個文件節點，所以document能夠替換成某個節點， hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量 } printf("===========事件綁定==========="); //時間能夠在h5代碼中直接添加也能夠在js代碼中添加 var input1=document.getElementById("input1"); input1.onclick = function(event){ //事件也是元素對象的方法屬性，能夠直接設置和調用input1.onclick(),刪除input1.onclick=null; alert("又點擊了"+event.type); //event事件對象，包含屬性bubbles是否冒泡，currentTarget事件執行元素，等價於this，target事件的目標，觸發事件的元素(引發事件的元素)。由於一個事件會向上冒泡 event.stopPropagation(); //阻止事件傳播，不會繼續捕獲或冒泡，可是本元素綁定的其餘事件會繼續執行，preventDefault取消事件默認行爲。eventPhase表示事件的階段，捕獲階段爲1，目標對象上爲2，冒泡階段爲3 }; input1.addEventListener("click",function(event){alert("又又點擊了"+event.target.id)},true); //參數：事件類型，函數引用，false表示冒泡段執行，true表示捕獲段執行。addEventListener函數也能夠爲元素添加事件,不覆蓋已有事件。removeEventListener刪除事件，刪除了必須和添加時是相同的函數引用。(本句中的匿名函數沒法刪除) //IE瀏覽器使用attachEvent何detachEvent設置事件 //IE瀏覽器中event = window.event， printf("===========事件類型==========="); //UI事件：load加載完成事件 unload卸載完成事件，abort取消事件，error錯誤事件，resize大小變化事件，select文本框選擇事件，scroll元素滾動條滾動事件 //焦點事件：blur失去焦點，focus得到焦點(不冒泡)，focusin得到焦點(冒泡)，focusout失去焦點。（執行順序：原元素失去焦點focusout，新元素獲取焦點focusin，原元素失去焦點blur，新元素得到焦點focus） //鼠標事件：click點擊事件、dblclivk雙擊事件，mousedown按下鼠標事件，mouseenter鼠標進入事件(不冒泡，進入子元素不觸發)，mouseleave鼠標離開事件(不冒泡，進入子元素不觸發)，mousemove鼠標元素內移動事件，mouseout鼠標離開事件，mouseover鼠標通過事件，mouseup鼠標彈起事件。//雙擊的執行順序：按下、彈起、點擊、按下、彈起、點擊、雙擊 //鼠標事件信息：event.button鼠標按鈕信息。event.clientX表示點擊點在視口的位置，event.pageX表示在頁面中的位置(視口+滾輪)，event.screenX表示屏幕位置，event.shiftKey表示修改鍵shift是否按下(shift、ctrl、alt、meta鍵(windows鍵或cmd鍵))。event.relatedTarget相關元素，在鼠標跨元素移動時的關聯元素 //滾輪事件：mousewheel冒泡到window對象，event.wheelDelta存儲滾動量 //鍵盤與文本事件：keydown按任意鍵事件，長按重複觸發，keypress按字符鍵事件(影響文本的鍵，刪除鍵觸發)，長按重複觸發，keyup釋放鍵事件。textInput文本輸入事件(實際字符鍵，刪除鍵不觸發)，顯示以前觸發。觸發順序：keydown、keypress、textInput、keyup //鍵盤事件信息：event.keyCode鍵盤碼，event.charCode字符ASCII碼，有些瀏覽器還支持key、keyIdentifier、char屬性 //文本事件信息：event.data用戶輸入的字符，event.inputMethod文本輸入方式(鍵盤，粘貼，拖放，語音...) //DOM結構變化事件：DOMNodeRemoved事件，在removeChild和replaceChild刪除節點前觸發，會冒泡，event.target爲被刪除的節點，event.relatedNode爲目標節點的父節點， //DOM結構變化事件：DOMNodeInserted事件，在appendChild、replaceChild、insertBefore插入節點後觸發，會冒泡，event.target爲被插入的節點，event.relatedNode爲目標節點的父節點， //DOMNodeRemoved刪除節點前觸發，DOMNodeInserted在一個節點做爲子節點插入到另外一個節點時觸發。DOMAttrModified元素屬性被修改後觸發，DOMNodeInsertedIntoDocument節點直接或間接被插入文檔後觸發(不冒泡)。DOMNodeRemovedFromDocument節點直接或間接被刪除前觸發(不冒泡)。DOMSubtreeModified結構改變均觸發，最後執行 //刪除插入節點執行順序：目標節點執行DOMNodeRemoved(冒泡)，目標節點執行DOMNodeRemovedFromDocument(不冒泡)，目標節點在全部子節點執行DOMNodeRemovedFromDocument(不冒泡)，目標節點父節點執行DOMSubtreeModified(不冒泡) //h5事件：contextmenu右鍵菜單事件(取消默認，獲取位置，顯示自定義菜單，左鍵單擊隱藏菜單事件)。 //window事件beforeunload頁面卸載前事件，DOMContentLoaded事件DOM樹造成後觸發，load事件資源文件所有下載完成後觸發 //window事件hashchange，網址#後的全部字符串發生變化觸發。觸發後用location查詢當前參數列表 //剪切板事件 //設備事件：orientationchange屏幕旋轉事件，MozOrientation(deviceorientation)方向旋轉事件，devicemotion移動事件， //觸摸事件，手勢事件 //爲節省內存，優化性能，對子元素含有較多冒泡事件的節點上，能夠設置總事件，總事件中eventTarget獲取目標子元素執行相應函數，進而取消子元素的事件節省內存。 //innerHTML刪除子元素前要取消子元素綁定事件，節省內存 printf("===========事件模擬==========="); //window.addEventListener("beforunload",function(event){event.returnValue = "確認關閉麼？";return "確認關閉麼";});

index4.js文件包含表單、canvas繪圖的知識ajax

function printf(str){ var hint = document.getElementById("hint2"); //根據id獲取元素，document是一個文件節點，所以document能夠替換成某個節點， hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量 } printf("===========表單腳本==========="); myform = document.getElementById("myform"); //acceptCharset服務器可以處理的字符集，action請求地址，elements表單字段input集合，enctype請求的編碼類型，length表單控件數量，method請求方式，name名稱，reset()表單恢復默認值，submit()表單提交，提交前觸發，target請求發送和接收相應的窗口名稱 //表單字段共有屬性：disabled是否可用，form字段所屬表單，name字段名稱，readOnly是否只讀，tabIndex字段切換序號，type字段類型(控件類型)，value字段的值，checkValidity字段是否有效 //表單字段共有方法：focus聚焦，blur失去焦點函數， text1.onkeyup = function(event){ var target = event.target; //獲取事件目標元素，也就是this if(target.value.length == target.maxLength) { //value字段的值，maxLength屬性 var form = target.form; //form目標所屬表單 if(form.elements[1] && !form.elements[1].readOnly){ //elements表單元素集合，readOnly字段屬性 form.elements[1].focus(); //focus字段函數-聚焦 form.reset(); //表單函數-恢復默認 } } }; //文件腳本 myfile = document.getElementById("myfile"); myfile.onchange = function(event){ var files = event.target.files; var reader = new FileReader(); //異步讀取文件 var type = "default"; if(/image/.test(files[0].type)){ //test判斷是否匹配，"名稱"：files[0].name，"類型"：files[0].type，"大小"：files[0].size type = "image"; reader.readAsDataURL(files[0]); //readAsdataURL讀取文件已數據URL的形式保存，readAsText以純文本形式讀取指定編碼形式文件，readAsBinaryString讀取文件成字符串，readAsArrayBuffer讀取文件成數組 }else{ reader.readAsText(files[0]); type="text"; } reader.onerror = function(){alert("讀取文件出錯"+reader.error.code);}; reader.onprogress = function(event){ //每50ms更新一次進度 if(event.lengthComputable) var rate = event.loaded/event.total; alert("加載比例"+rate); }; reader.onload=function(){ switch (type){ case "image":hintdiv.insertAdjacentHTML("beforeend","<img src='"+reader.result+"'>");break; case "text":hintdiv.insertAdjacentHTML("beforeend",reader.result);break; } }; }; //文本框腳本 text1 = document.getElementById("text1"); text1.select();//text和textarea文本內容被所有選擇，會自動聚焦 text1.setSelectionRange(1,4); //選擇部分文本，參數爲起點和終點索引，會選中包含起點，但不包含終點的文本 printf(text1.value.substring(text1.selectionStart,text1.selectionEnd-1)); //selectionStart選擇的文本的起點，selectionEnd選擇的文本的終點 //選擇框腳本 //選擇框屬性：add(newoption,reloption)，multiple是否容許多選,options選項元素合集，remove(index)刪除選項，selectedIndex選中項索引，size選中框可見行數 //選項屬性：index選項索引，label選項標籤，selected是否被選中，text選項的文本，value選項的value值， var myselect = document.getElementById("myselect"); var newoption = document.createElement("option");//建立選項元素 newoption.appendChild(document.createTextNode("第3個選項")); //選項添加文本 newoption.setAttribute("value","myoption3");//選項添加value myselect.appendChild(newoption); //添加選項 newoption = new Option("第4個選項","myoption4"); //建立選項元素 myselect.appendChild(newoption); //插入新選項 newoption = new Option("第5個選項","myoption5"); //建立選項元素 myselect.add(newoption,undefined); //插入新選項 myselect.removeChild(myselect.options[0]); //options選項合集，removeChild刪除子元素 myselect.remove(0);//刪除第一個選項， myselect.options[0]=null;//刪除第一個選項， myselect.insertBefore(myselect.options[1],myselect.options[0]); //調換選項位置 myselect.options[1].selected=true; //設置第二個選項被選中 var selectoption = myselect.options[myselect.selectedIndex];//selectedIndex當前選中項索引 printf(selectoption.text+selectoption.value); printf("===========canvas繪圖==========="); var mycanvas = document.getElementById("mycanvas"); if(mycanvas.getContext){ //判斷瀏覽器是否支持 var context = mycanvas.getContext("2d");//context是畫布，getContext獲取繪圖上下文對象，也有名爲WebGL的3d上下文 //繪製矩形 context.fillStyle = "#0000ff"; //填充顏色 context.fillRect(10,10,70,70); //填充矩形，xy寬高(像素) context.lineWidth = 20; //邊框寬度 context.lineCap = "round";//線條末端形狀，butt平頭，round圓頭，square方頭， context.lineJoin = "round";//線條交叉方式，round圓交，bevel斜交，miter斜接 context.strokeStyle = "red"; //描邊顏色 context.strokeRect(50,50,50,50);//描邊矩形 context.clearRect(50,50,20,20); //清除一塊矩形區域 //繪製路徑 context.beginPath(); //建立路徑 context.arc(200,100,20,0,2*Math.PI,false);//繪製圓參數：圓心座標，半徑，起始角度，是否順時針。 arcTo繪製圓弧 context.moveTo(200,100); //移動繪圖遊標 context.lineTo(200,15); //繪製直線，從遊標位置惠子直線到參數，bezierCurveTo繪製曲線，quadraticCurveTo繪製二次曲線，reac繪製矩形， context.fillStyle = "rgba(0,0,0,1)" context.stroke();//用strokeStyle描邊 context.fill(); //用fillStyle填充 //繪製文本 context.font = "bold 14px Arial"; //設置文本樣式，大小，字體 context.textAlign="center";//文本對齊方式，start、end context.textBaseline = "middle";//上下對齊方式，top、middle、bottom context.fillText("文本",200,15); //fillText使用fillStyle，strokeText使用strokeStyle context.globalAlpha =0.5; //設置全局透明度 //context.save(); //保存當前狀態 context.translate(10,10); //座標平移，transform矩陣變換，setTransform先恢復默認再矩陣變換 context.rotate(1);//旋轉角度，scale縮放比例， //drawImage繪製圖像 //shadowColor、shadowOffsetX、shadowOffsetY、shadowBlur陰影 //createLinearGradient漸變 //createPattern填充描邊模式 //getImageData獲取圖像數據 var imgurl = mycanvas.toDataURL("image/png"); var image = document.createElement("img"); image.src = imgurl; hintdiv1.appendChild(image); //WebGL繪圖3D }

index5.js文件包含JSON、AJAX請求與Comet推送、離線應用與客戶端存儲、storage存儲的知識

function printf(str){ var hint = document.getElementById("hint3"); //根據id獲取元素，document是一個文件節點，所以document能夠替換成某個節點， hint.innerText += str.toString()+"\n"; //設置label顯示的文字，也能夠自動調用其餘js文件中的hint變量 } printf("===========XML,E4X==========="); printf("===========JSON==========="); var person0={name:"person0",age:11}; //定義js對象 var person1 = {"name":"person1","age":12,toJSON:function(){return this.name;}}; //定義一個JSON數據結構下的對象，與js對象的對象字面量的區別在於屬性必須加引號 var person2 = {"name":"person2","age":13,"school":{"name":"school1","age":122}}; //JSON中對象能夠嵌套。key和value內用:鏈接，不一樣key-value用,鏈接，最後一個value後不加符號。每一個JSON對象使用{}包含 var persons = [person0,person1,person2]; //JSON中對象數組 persons[2].age=person0.age; //JSON中數組對象與js對象使用方法相同 var personstr = JSON.stringify(persons); //JSON.stringify將對象(正常的或JSON數據結構下的)轉化爲JSON字符串(稱爲序列化)。能夠序列化對象或對象數組。會自動濾出值爲underfined的屬性 printf(personstr); //調用stringify，執行順序：toJSON虛函數或對象自己，函數過濾器，存在屬性進行序列化，縮進參數進行格式化 person2str =JSON.stringify(person2,["name","age"],"--"); //第二個參數是過濾器，表示只保留name和age兩個屬性。第三個參數是換行縮進，可爲數字縮進空格數目，最大縮進爲10，可爲字符串，表示縮進字符串 printf(person2str); /*personstr = JSON.stringify(person2,function(key,value){ //使用函數爲過濾器 if(key=="name"||key=="age") return value; else return undefined; //返回undefined就不會再被序列化 },4);//因爲在label元素中連續空格會被自動縮減成一個空格*/ persons = JSON.parse(personstr); //JSON.parse將字符串轉化爲js對象或數組 /* person2 = JSON.parse(person2str,function(key,value){ //使用函數控制轉化操做 if(key=="name") return "family"+value; else return value; }); */ printf("===========AJAX請求與Comet推送==========="); //請求 var xhr = new XMLHttpRequest(); //建立XHR對象 xhr.onreadystatechange=function(){//onreadystatechange狀態變化函數， printf("readstate="+xhr.readyState.toString());//readyState的取值0爲未初始化，未調用open，1已open未send，2已send未回覆，3回覆部分，4所有回覆 if(xhr.readyState==3) //在後臺使用推送機制的話，前端會間斷的收到推送數據，狀態爲3。 printf(xhr.responseText); //responseText包含曾經的全部推送數據，因此每次讀取應該根據舊數據長度查找最新的數據的位置。這裏省略了 }; xhr.onload=function(){printf("接收響應完成");}; //響應完成事件，不管什麼響應，接收完成就觸發 //xhr.onerror=function(){printf("響應出錯");}; //響應出錯事件 xhr.onprogress=function(event){ //進度事件 if(event.lengthComputable){ //lengthComputable表示進度信息是否可用 printf("進度"+event.position*1.0/event.totalSize); //position表示已接收數，totalSize表示預期接收數 } }; xhr.open("get","example.php?qunid=12",false); //opet準備啓動請求，參數：請求類型post或get，請求地址，是否異步發送。同步的話會等待程序返回方可繼續 xhr.setRequestHeader("myheader","myvalue"); //自定義頭部信息，發送自定義信息 xhr.send(null); //發送請求，若是是同步，會直到響應完畢纔會繼續運行。參數：請求主體。xhr.abort()取消異步請求 if((xhr.status>200 && xhr.status<300)|| xhr.status==304) { printf(xhr.responseText); //responseText返回數據，responseXML在響應類型爲text/xml和application/xml時返回XML的響應數據 printf(xhr.getResponseHeader("myback")); //讀取服務器返回在自定義頭部信息 printf(xhr.getAllResponseHeaders()); //返回全部信息 } else printf("失敗："+xhr.status);//statusText表示HTTP狀態描述，各瀏覽器不一樣 //請求數據序列化 var data = new FormData(); //序列化表單new FormData(myform)，參數能夠爲空，即空的對象 data.append("qunid","21"); //添加鍵值對 //data.append("file1",files[0]); //能夠在包含file的表單中直接添加文件 //xhr.timeout=1000; //響應超時，僅IE8+支持 xhr.ontimeout = function(){printf("響應超時")}; xhr.open("post","example.php",true); xhr.send(data); //發送序列化數據 //推送（SSE）：長輪訓，短輪訓，http流(響應事件的MIME類型爲text/event-stream)， // 在接收推送數據時可使用onreadystatechange函數中readyState=3時讀取responseText var source = new EventSource("myevent.php"); //參數：入口點。必須與建立對象的頁面同源(url模式，域、端口)。鏈接斷開會自動創建,或者使用source.close()強制斷開 source.onmessage = function(event){ //open在鏈接創建時觸發，message在接收到新數據時觸發，error在沒法創建鏈接時觸發 printf(event.data); //推送數據保存在event.data中 }; source.onerror=function(){printf("鏈接失敗");printf("鏈接狀態"+source.readyState)}; //readyState屬性0表示正在鏈接，1表示打開了連接，2表示關閉了連接 //web sockets使用自定義協議，須要專門服務器支持。 /*var socket = new WebSocket("ws://www.example.com/server.php"); //未加密的連接不使用http，而是ws，加密的使用wss socket.send("hello world"); //發送數據 socket.onmessage=function(event){ //web socket有open、error、close事件 printf(event.data); printf(socket.readyState); //0表示正在創建，1已經創建，2正在關閉，3已經關閉 };*/ printf("===========離線應用與客戶端存儲==========="); if(navigator.onLine) //檢測離線仍是在線。也能夠經過window事件online和offline設置離線或在線。chrome11-即以前的版本始終爲true printf("當前處於在線狀態"); else printf("當前處於離線狀態"); //cookie集成自定義類。cookie會在每次請求綁定網址的時候添加到http頭部。 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,sexure){ 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(sexure) cookietext+="; secure"; document.cookie = cookietext; }, unset:function(name,path,domain,secure){ this.set(name,"",new Date(0),path,domain,secure); } }; CookieUtil.set("name","luanpeng","/books/projs/","www.example.com",new Date("January 1,2020"));//添加設置 CookieUtil.get("name");//讀取 CookieUtil.unset("name","/books/projs/","www.example.com"); //刪除 printf("===========storage存儲===========") //sessionstorage保存到瀏覽器關閉 sessionStorage.setItem("name","luanpeng"); //添加設置存儲key-value sessionStorage.age = 12; //讀取設置數據 for(var key in sessionStorage)//key函數迭代屬性 printf(sessionStorage.getItem(key));//getItem讀取屬性值 delete sessionStorage.name; sessionStorage.removeItem("age"); //localstorage同一個對象訪問必須域名相同。數據保留至用戶刪除或清除緩存 localStorage.setItem("name","luanpeng"); //添加設置屬性 localStorage.age = 12; //添加設置 printf(localStorage.getItem("age")); //讀取 printf(localStorage.name); //讀取

全棧工程師開發手冊 （做者：欒鵬）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。