JavaScript代碼

JavaScript代碼

 

 

JavaScript的組成

ECMAScript           一種由Ecma國際經過ECMA-262標準化的腳本程序化設計語言。                                                                         

BOM             提供瀏覽器交互的方法和接口

DOM             提供訪問和操做網頁內容的方法和接口

      

1.全部js代碼必須寫在script標籤裏，結尾必須帶英文的分號(;)

2.爲了代碼規範，script標籤都是寫在head標籤中。

3.能夠引入多個script標籤，多個script標籤之間，順序執行。

4.js能夠外部引入，src引入外部文本

5.若是script標籤做用引入外部文件，這個標籤就不能再寫代碼了。

  

       <script type="text/javascript">

       //這裏寫js代碼，將script標籤寫在head標籤裏面。

       <script>

      

       <script type="text/javascript" src="js代碼文件絕對路徑"></script>    導入外部js代碼

 

       &lt 是" < "     &gt 是" > "

             

       //單行註釋，/*多行註釋*/

 

 js數據類型分爲兩大類

       1.基本數據類型

              <1>數字(整數，浮點數float) number             100 3.14

              <2>字符型  string      全部帶雙引號/單引號  "hell"  'hello'

              <3>布爾值 Boolean    true  false

              <4>特殊數據類型        null空   undefined未聲明       NaN非數值性

       2.複合數據類型

              <1>Object 對象

              <2>array       數值

              <2>function          函數

      

       變量

       1.聲明變量 經過關鍵字(系統定義又特殊功能的單詞)var

              <1>聲明變量的時候，同時給變量賦值，叫作初始化。

       2.能夠同時定義多個變量，變量之間要使用逗號隔開。

      

       標識符用戶自定義全部名字叫作標識符。變量名規律：

       1.必須是由數字、字母、下劃線和美圓符組成。

       2.不能以數字開頭。

       3. 標識符區分大小寫，age和Age這是兩個變量。

       4.標識符必須見名思意，取有意義的變量名。

       5.js是弱語言，賦值是什麼類型，就是什麼類型。不要在後續代碼修改改變量的數據類型，不然容易出錯。

 

運算符

算術運算符：

加(+)      減(-)     除(/)    乘(*) (%)取模一兩個數相除的餘數  (++)自加1(一元運算)  (--)自減1

 

注意：任何數據類型和字符類型的數據相加(+)其餘數據類型會自動轉換爲字符串類型，此時的相加再也不是數學意義上相加，而是"拼接"的意思。

 

          任何其餘數據類型除了字符串類型作相加操做外，與數字類型作運算都會自動轉換成數字，再運算。

      

複合賦值運算符：+= *=  /=  %= 例：tmp+=10; //tnp=tmp+10;

 

關係運算符：

//用於進行比較的運算符稱做爲關係運算符：小於（<）、大於（>）、小於等於（<=）、大於等於（=）、相等（==）、不等（=）、全等（恆等）（===）、不全等（不恆等）（l==）

 

注：1.若是兩個都是字符串，則比較兩個字符對應的ASCII碼錶。

2.若是有一個是數值，則把另一個轉換成數值，再進行比較。

3.一個操做數爲NaN,則==返回false，!=返回true，而且NaN和NaN自身等於

4.在全等和全不等，若是值和類型都相等，才返回true，不然返回false           ===              !==

 

邏輯運算符： 與(&&)        或(||)              非(!)

 

JavaScript代碼

       var age = 18;  聲明一個變量

       var name="王明",age=18,sex="男";   同時聲明幾個變量

       alert("Hello world!");     在頁面彈出警告框

       alert(typeof name);              輸出當前變量或者常量是什麼類型

       document.write("Hello world!");         在當前文本輸出內容

       document.write("<h1>This is a heading</h1>");

       var tmp = Boolean(1);  將數字轉換爲布爾值true    數字0、null、undefined和空字符都爲false，其餘都爲true。

       Number("200");     將字符串轉換爲數字，布爾值true=1;false=2;非純數字字符串爲NaN

       parseInt()       兼容Number，取整

       parseFloat()    取浮點數

       if（判斷條件){

             語句代碼

       }

 

       if（判斷條件){

              語句代碼

       }else{

       語句代碼2

       }

 

       if（判斷條件){

              語句代碼

       }else if{

            語句代碼2

       }

       ......

       else{

             語句代碼3

       }

 

       switch(表達式){

                   case 常量1:

                                語句1

                            break;

                      case 常量2:

                               語句2

                            break;

                      case 常量3:

                          語句3

                            break;

             default:

                      若是上訴的條件不成立則運行這裏的語句;

                      break;

       }

 

       while(表達式){

          循環語句;

       }

      

       do{

            循環語句;

       }

       while(表達式);

      

       for（表達式1；表達式2；表達式3）{

           循環語句；

       }

 

       break;       跳出循環

       continue;只能在循環語句中使用，使本次循環結束，即跳過循環體中下面還沒有執行的語句，接着進行下次是否執行循環的判斷

 

       function print(){

       函數塊;

       }                //定義一個函數

      

       print();    //調用函數

 

JS HTML DOM部分：

       document.getElementById('myimage') //得到標籤的id

　　getElementsByTagName("p");            //經過標籤名查找HTML元素

　　this.parentNode.className ='cur';   //返回或設置class的屬性樣式

       x.style.color="#ff0000";           //改變樣式

       err.message                        //獲取報錯代碼

       document.getElementById("p1").innerHTML="New text!";  //改變HTML 內容

       document.getElementById("p2").style.color="blue";         //改變css屬性

       var para=document.createElement("p");           //建立p元素

var node=document.createTextNode("這是新段落。");          //建立文本節點

para.appendChild(node);            //向元素添加節點

parent.removeChild(child);          //從父元素中刪除子元素

child.parentNode.removeChild(child);        //找到父元素並刪除本身

node.cloneNode();　　//克隆標籤 注：添加true參數複製所有，默認爲false，複製除子標籤以外的所有東西。

box.nodeType       //返回值1，得到nodeType屬性

box.childNodes            //得到所有子元素   //兼容性問題 注意：在chrome，IE9 IE10高版本的瀏覽器裏面的回車都認爲是節點，IE6，7，8低版本的瀏覽器不算，高版本瀏覽需遍歷篩選

元素的首個子元素      firstChild

元素的最後一個子元素      lastChild

document.documentElement - 所有文檔的節點

document.body - 文檔的主體的節點

js的事件：

<button type="button" onclick="alert('Welcome!')">點擊這裏</button>　　 //點擊事件

<body onload=」checkcookies()」>             //js進入頁面時觸發的事件

<body onunload=」checkcookies()」>             //js離開頁面時觸發的事件

<input type=」text」 id=」fname」 onchange=」uppercase()」>            //標籤內容改變時觸發的事件

       onMouseOver="this.innerHTML='鼠標觸摸'"          //鼠標移到觸發的事件

       onMouseOut="this.innerHTML='鼠標離開'"            //鼠標離開觸發的事件

       首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

 

BOM：

       window.innerHeight - 瀏覽器窗口的內部高度 //兼容Internet Explorer、Chrome、Firefox、Opera 以及 Safari

　　window.innerWidth - 瀏覽器窗口的內部寬度

 

　　document.documentElement.clientHeight //兼容Internet Explorer 八、七、六、5

　　document.documentElement.clientWidth

或者

　　document.body.clientHeight      

　　document.body.clientWidth

 

獲取瀏覽器窗口屏幕寬高的兼容性寫法：

　　var w=window.innerWidth

　　|| document.documentElement.clientWidth

　　|| document.body.clientWidth;

 

　　var h=window.innerHeight

　　|| document.documentElement.clientHeight

　　|| document.body.clientHeight;

 

　　window.open("https://www.baidu.com");//打開新窗口

　　window.close();//關閉當前頁面

　　window.resizeTo(500,500); //設置當前窗口的尺寸，像素爲單位

　　window.moveTo(500,500); //移動當前窗口

　　screen.availWidth - 可用的屏幕寬度(不算任務欄)

 

　　screen.availHeight - 可用的屏幕高度(不算任務欄)

 

       location.href;        //返回當前頁面的url

 

       location.pathname;      //返回 URL 的路徑名

 

       location.assign("https:www.baidu.com");           //加載頁面 

• history.back() - 與在瀏覽器點擊後退按鈕相同
• history.forward() - 與在瀏覽器中點擊按鈕向前相同

 　　document.location.href = "新的url";　　//跳轉到新url

 

　　alert("Hello word!");      //提示框

　　confirm("Hello word!");//帶確認按鈕的提示框

　　prompt("Hello",""); //帶輸入框的提示框

       setTimeout(aleart(「Hello」),1000);         //暫停1秒運行（計時事件）

       clearTimeout(st);           取消暫停

　　console.log("sss");　　//控制檯輸出內容，通常用於調試

       var oDate=new Date();

       oDate.setDate(oDate.getDate()+3);

       document.cookie = 「username=root; expires」+oDate;           //設置cookie 並設置三天後到期

 

ES6基礎語法

　　let的使用：　　let a=10;

　　用來聲明變量。它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。
　　存在塊級做用域{}
　　不存在聲明提高
　　不容許重複聲明（包括普通變量和函數參數）

　　可使用  `${a}`   的方式調用他

 

　　const的使用：
　　用來聲明常量，不要試圖改變常量的值，其餘語法參照let

 

 

　　set結構
　　let set=new Set([1，2，3，4，4]);/構造函數，值不重複
　　[..set] //...擴展運算符，將類數組對象轉換以逗號分割的序列for of//遍歷
　　set.size//長度 set.add(0)set.delete(0)set.has(0)set.clear0;keys0:返回鍵名的遍歷器for(let
　　item of set.keys0){console.log(item);}
　　values():返回鍵值的遍歷器
　　entries():返回鍵值對的遍歷器
　　forEach():使用回調函數遍歷每一個成員setforEach((value，key)=>console.log(value*2))

　　

　　map結構
　　let map=new Map(["name"，"john'"]，["age"，30]]);
　　map.set(1，1);
　　map.size//長度
　　map.set(key，value);map.get(key);map.delete(keywmap.has(key);map.clear();
　　keys()：返回鍵名的遍歷器
　　values()：返回鍵值的遍歷器
　　entries()：返回鍵值對的遍歷器for(let[key，value]of map.entries0){console.log(key，value);}
　　forEach()：使用回調函數遍歷每一個成員map.forEach((value，key)=>console.log(value*2))

 

 

生成器函數(generator)
　　function*foo(x){
　　　　yield x+1; //yield的做用和return很像，只是return只能有一次，即表明程序結束，yield能夠進行屢次 表明暫停
　　　　yield x+2;
　　　　return x+3;
　　}
　　var f=foo(1);
　　fnext();

 

　　類(class)

　　例: class person(){　　　//定義一個類
　　　　　　constructor(name){ 　　 //定義構造函數，es6新增長
　　　　　　　　this.name=name;
　　　　　　}
　　　　　　sayHello(){　　 //定義方法

　　　　　　}
　　　　}

 

js面向對象編程：
　　function Person(name,age){ //建立一個類
　　　　this.name =name; //屬性
　　　　this.age=age;
　　　　this.sayHello = function(){ //方法
　　　　alert("this.name");
　　　　}
　　}

　　var p =new Person(); //生成一個Person的實例

　　function Student(name ,age,id){
　　Person.apply(this,[name,age]); //使用apply調用父類的構造函數，指針並指向子類，從而實現繼承 第二個參數以數組方式的參數傳遞給父類
　　//Person.call(this,name,age); call方法與aooly相似，不過第二參數是以單個參數的方式傳遞
　　this.id =id;
　　}

js原型鏈繼承：

//1. js的原型鏈屬性與方法是用__proto__的方式指向
//2. 想要繼承原型鏈，可使用Object.create()方法生成一個空的對象指向父類的原型鏈，從而達到繼承
//3.js __proto___指向問題，proto先是指向自己，若是沒有則繼續往原型的原型上查找，最終到Objcet爲止

　　function Person(name,age){ } //建立一個類

　　Person.prototype.name =name;
　　Person.prototype.age=age;
　　Person.prototype.sayYes() = function{ //使用原型鏈的方式添加一個方法，一樣也能夠添加一個原型鏈的屬性
　　　　alert("this.name");
　　}

　　function Student(name ,age,id){
　　}
　　Student.prototype = Object.create(Person.prototype); //生成一個空對象，指向父類的原型類

 

 

AJAX

       Ajax核心類：XMLHttpRequest

       var xhr =new XMLHttpRequest(); //建立ajax對象

      

       xhr.onreadystatechange =function(){

              //當xhr對象的readyState屬性發生了改變，這個事件就會觸發

              //readyState：

              //0 ===>xhr對象已經建立，可是尚未進行初始化操做

              //1===>xhr對象已經調用了open

              //2===>xhr已經發出ajax請求

              //3===>已經返回了部分數據

              //4 ===>數據已經所有返回

             

              xhr.readyState       //返回一個數值

       }

      

       xhr.status              //返回一個狀態碼 例如：404

      

       xhr.open("get","/test.txt",true);     //規定請求的類型 url和同步(false)和異步(true)

      

　　xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //定義HTTP頭，用於post提交數據時候定義

      

       xhr.send();      //發送請求

 

　　xhr.responseText   //得到字符串形式的響應數據。

 

　　xhr.responseXML  //得到 XML 形式的響應數據。

      

　　JSON數據與JS對象的轉換

　　1.JSON→JS： JSON.parse(data)

　　2.JS→JSON：JSON.stringify(JSObj)

 

　　resp.result      JSON的返回值

 

xhr.timeout= 5000;       //設置請求超時的時間，單位爲毫秒，這裏設置爲5秒

xhr.ontimeout =function(){

//當延遲生效將會調用本函數，表明ajax請求已經結束

console.log("請求超時，頁面加載失敗，請刷新重試！");

}

      

//上傳文件的進度回調，上傳進度只要發生變化，本函數就會自動執行

upload.onprogress =function(eve){

       if(eve.lengthComputable){  

       //eve.lengthComputable表示文件是否上傳進度爲100%，默認是true，表示沒有100%，進度爲100%自動變成false

              eve.loaded     //表示已經上傳

              eve.total  //表示所有上傳的長度

       }

}

 

 

       同源策略：便是兩個url域名，協議與端口爲同樣的相同則表示他們同源，若是有一個不同則表示他們跨域，通常來講不容許跨域。

       解決跨域問題：1.JSONP     2.CORS