js初步用法

標籤：confirm   js代碼   Regex   文法   比較   隱式   settime   定時   live   

js
 js引入方式:
  1.方式一
   通過script標籤引入

  2.方式二
   通過script標籤引入 ,src屬性 引入一個外部的js檔案

 注意: 如果你使用了script標籤的src屬性 那麼在其標籤體內的js代碼不起作用了
文法:
 1.ECMAScript文法規範
  livescript
 2.BOM瀏覽器物件模型
  
 3.DOM文件物件模型
  
 1.變數定義:
  var i=1;
  var m;
  js中也有注釋一說:
   單行注釋//
   多行注釋 /**/
  語句結束分號結尾 可以不寫 建議寫上

 2.資料類型
  原始類型:
   Undefined:變數初始值 如果函數沒有傳回值 你卻接收了
   String:用""引起來
   Number:數值
   Boolean:true|false
   Null:null 一個對象的預留位置
   typeof運算子 它會判斷當前變數的資料類型 如果它是原始類型 會返回資料類型的類型值(小寫) 如果不是返回一個object

  參考型別:
   new 對象();
 3.控制語句
  跟java基本一致
  if for
 4.運算子
  跟java基本一致
  關係運算子
   > >= < <=
   1.比較雙方 如果都是number類型  跟java一致
   2.比較雙方 都是一般字元串 它會比較兩者的ascci碼
   3.比較雙方 一方是number 一方是可以轉換成number累性 隱式轉換再比較
   4.比較雙方 一方是number 一方是不可轉化字串 直接返回false

 

 

 

  等性運算子
   ==
   ===
   == 比較兩個變數字面值相同即可返回true
   === 在比較字面值相同的基礎之上 判斷類型是否相同

 5.函數
  定義
   方式一
    function 函數名(參數列表){
     js代碼塊
    }
   方式二 匿名函數
    var f=function (參數列表 ){
    }
   注意:
    調用函數
     函數名(參數列表);
    參數聲明過程 參數列表不寫類型
    如果你想要有傳回值 只需要在函數結束結束用return 關鍵字 返回結果即可

 6.事件
  表單提交事件
  單擊事件 onclick
  頁面載入成功事件 onload
  事件綁定
   方式一
    通過標籤的事件屬性來綁定
   方式二
    派發機制
     元素.事件名=function(){
     
     }
   
    var obj=document.getElementById("ID");   
   
定時器:
 定義:
  方式一
   setInterval(函數名,周期性的間隔的毫秒值);
  方式二
   setInterval("函數名()",周期性的間隔的毫秒值);
  方式三
   setInterval(function(){
    js代碼塊
   },周期性的間隔的毫秒值);
兩種定時器

  定時器定義的函數會有一個傳回值 傳回值就是它的id

  1.周期性定時器
    var intervalId=setInterval(函數名,周期性的間隔毫秒值)
  2.一次性定時器
    var timeoutId=setTimeout(函數名,延遲的毫秒值);
  
 清除定時器:

  1.清除周期性定時器
   clearInterval(周期性定時器的id);
  2.清除一次性定時器
   clearTimeoout(一次性定時器的id);

BOM 瀏覽器物件模型
 Window:
  //如果是你要擷取的是window的屬性 或方法 window可以不寫

  常用屬性:
   用它擷取其他幾個常用屬性
   var history=window.history;
   history===window.history
  常用方法:
   彈出框類:
    alert("資訊");//彈出警告框
    confirm("你確認刪除嗎");//彈出一個確認框
    prompt("輸入資訊的提示資訊",預設值);//彈出一個輸入框 如果你確定 返回你輸入值 如果取消 null
   定時器:
   開啟和關閉:
    open(url);
    close();

 History:
  forward:前進一個頁面
  back:後退一個頁面
  go(1);
   1:前進一個頁面
   -1:後退一個頁面

 Location:
  href:設定值 跳轉
dom操作
 擷取元素
 var obj=document.getElementById("");
 //擷取值
  obj.value
 //設定值
  obj.value=值
 //擷取標籤體內容
  obj.innerHtml;
 //設定
  obj.innerHtml=值
 使用Regex校正資料
  1.編寫Regex
   1.使用者名稱的正則:var reg=/^[a-z0-9_-]{3,16}$/
   2.密碼：/^[a-z0-9_-]{6,18}$/
   3.電子郵箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
   4.Null 字元串: /^\s*$/
  2.使用Regex的test()方法
    reg.test(value);
事件總結:
 必須掌握:
  onsubmit:表單提交事件
  onclick:單擊事件
  onload:頁面載入成功事件
  onfocus:擷取焦點
  onblur:丟失焦點
 需要瞭解:
  跟滑鼠相關:
   onmouseup:滑鼠彈起
   onmousedown:滑鼠按下
   onmouseover:滑鼠移至上方
   onmouseout:滑鼠離開
   onmousemove:滑鼠移動
   
   ondblclick:滑鼠雙擊
  跟鍵盤相關:
   onkeyup:按鍵彈起
   onkeydown:按鍵按下
   onkeypress:按鍵按下並彈起
  跟表單相關:
   onreset:重設表單事件
   onchange:改變事件
DOM
 文件物件模型
  document節點
  元素節點:
  屬性節點:
  文本節點
 查詢操作:
  擷取元素:
  1.document.getElementById("x");//擷取標籤的iD屬性值為x的一個標籤
  2.document.getElementsByTagName("y");//擷取標籤名為y的一組標籤(多個)
  3.document.getElementsByName("z");//擷取標籤的name屬性為z的一組標籤
  4.document.getElementsByClassName("w");//擷取標籤的class屬性為w的一組標籤(多個)
  //擷取值:
   obj.value
  //設定值:
   obj.value=值
  //擷取標籤體的內容
   obj.innerHtml;
  //設定標籤體:
   obj.innerHtml="<a href=‘#‘>點我試試</a>";
  //擷取樣式
   obj.style.css屬性名稱:如果有- 去掉 駝峰式命名
  //設定
   obj.style.css屬性名稱=css屬性值
 擴充-其他的api:
  document: 
   createAttribute(name):建立一個屬性節點
   createElement():建立一個元素節點
   createTextNode(data):建立一個文本節點
  element:
   appendChild():添加子節點
數組:
 文法:
  var arr1=new Array();//建立一個空數組
  var arr2=new Array(size);//建立一個指定長度的數組
  var arr3=new Array(ele1,ele2,ele3...);//建立一個數組 並且初始化資料
 注意:
  js的數組中沒有長度可變
  js數組中可以存放不同類型

 屬性:
  length:長度
  arr.length
 常用方法:
  join();//用指定的風格符 拼接字串

  往數組頭部添加資料
   unshift();
  從數組頭部刪除資料
   shift();

  往數組尾部添加資料
   push()
  從數組尾部刪除資料
   pop()

  會改變數組的結構
   sort();
   reverse();
js的參考型別
 1.Array:數組
  
  在js中 原始類型 string boolean number
  參考型別中  string  boolean number  
  稱之為原始類型的封裝類 原始類型.方法();
 2.String:
  new String(s);//object typeof運算子 object
  String(s);//它是原始類型
  常用屬性:
   length:長度
  常用方法:
   substring(startindex,endindex);[)
   slice(startindex,endindex);
    endindex:取值可以為負數
     -1:倒數第一個
   split();切割字串
   replace(Regex)
   match(Regex);

 3.Number
  new Number();//object
  Number();//原始類型
 4.Boolean
  new Boolean();//object
  Boolean();//原始類型
 5.RegExp:
  /直接量寫法/
  test()
 6.Math:
  Math.PI
  Math.random();
  Math.round();
 7.Date
  var date=new Date();
  常用方法:
   getTime();
   toLocaleString()
 8.全域函數
  嘗試轉換為int整形數值
   parseInt();
  嘗試轉換為float浮點數
   parseFloat();
  
  強制轉換數實值型別
   Number();
  強制轉換成字串
   String();

  encodeURI():編碼
  decodeURI():解碼

  eval()//計算 JavaScript 字串，並把它作為指令碼代碼來執行。

js初步用法