javascript  瀏覽器指令碼語言

1) 基本資料型別：數字，字串， 布林值， null， undefined

2) 複雜資料型別：

 陣列 

var array = new Array();

var array = [1,2,3,4];

訪問元素  array[下標]

for(var i = 0; i < array.length; i++) {
       array[i]
    }

push(值); .pop();

unshift(值);  .shift();

splice(下標, 個數);

sort(); // 對陣列進行排序，但會把元素視為字串型別

sort( (a,b)=>{ a - b } );

物件

var obj = new Object();

var obj = {name:"值", age:17};

obj.sex = "男";

delete obj.sex;

函式
 

   function 函式名(形參名1, 形參名2, ... 形參名n) {
       return
   }

函式名(實參1, ... 實參 n)

js中函式沒有過載特性，同名函式只能有一個，後定義的會覆蓋前面定義的

日期

var date = new Date();

var date = new Date(毫秒值);

getFullYear();

getMonth();
   ..
   
   正則表示式
 

 var reg = /正則表示式/;
   
   [0-9] [a-zA-Z]
 

? , +, *, {m,n}
   

reg.test("目標字串"); // true, false

字串物件.replace(reg , "替換內容");
  
3) html網頁中使用js

<script>
    js程式碼
</script>

F12 控制檯視窗

js配合html實現網頁程式設計

DOM API  (用js來操作html的一套api)

document 文件 Object 物件 Model 模型

可以把整個html視為一個樹狀結構，html中的每個標籤都是樹上的一個節點

document 
    |- html
        |-head
            |-meta 
            |-title
            |-style
            |-script
        |-body
            |-p
            |-form
            |-table
            |-ul

1.1 查詢元素

document.getElementById(標籤id值); // 在設計id時要避免重複，id的取值應當唯一

document.getElementsByTagName(標籤名字); // 根據標籤的名字查詢多個元素

父元素.getElementsByTagName(標籤名字); // 查詢從屬於此父元素的所有與標籤名稱符合的子標籤, 縮小了查詢範圍

通過選擇器語法進行查詢

#id， .class值,  元素

document.querySelector("選擇器");     // 查詢與選擇器匹配的標籤， 匹配第一個

document.querySelectorAll("選擇器");     // 查詢與選擇器匹配的標籤, 匹配所有

1.2 修改

修改內容

innerText  在賦值時，把字串當做普通文字處理，如果字串中包含了html標籤，那麼這些標籤會照原樣輸出

innerHTML  在賦值時，把字串當做html程式碼處理，會解析html標籤再顯示

修改屬性
    .屬性名 = "新值";

修改樣式

className="新class" // 對應訪問class屬性 (推薦使用class屬性修改樣式)

style.具體樣式名="新值"; // 注意style 優先順序較高，會覆蓋其它樣式

1.3 刪除

父元素.removeChild(子元素);

1.4 新增

父元素.appendChild(子元素);  // 建立父子元素關係

document.createElement("標籤"); // 建立新的標籤元素

2. DOM事件

事件型別

滑鼠單擊事件 onclick

滑鼠雙擊事件 ondblclick

滑鼠移入事件 onmouseover

滑鼠移出事件 onmouseout  

滑鼠點選事件 onmousedown
    window.event 有一個buttons屬性
     取值為1表示 左鍵被按下
     取值為2表示 右鍵被按下
     取值為4表示 中間滾輪被按下
游標移入事件(獲得焦點) onfocus
失去焦點事件  onblur
值改變事件 onchange
鍵盤   onkeydown   按下按鍵時
       onkeypress  按下按鍵時
       onkeyup     鬆開按鍵時
       
       keydown先發生  >    onkeypress  再發生 > onkeyup 最後發生
       
       keyCode不區分大小寫  keyCode區分大小寫
       可以識別特殊字元     只能識別可列印字元

 3. 事件物件

window.event 事件發生時的所有跟事件相關聯的資訊

可以簡寫為event

event.preventDefault();  // 阻止標籤的預設行為

設計一個文字框，只能輸入數字 (可以利用 event.preventDefault())

event.stopPropagation(); // 停止事件冒泡

事件冒泡就是指：在子標籤上觸發的一個事件，會沿著標籤的包含關係，逐級向上傳播

4. this
class A {
    private int a;
    public void test() {
        this.a = 33;
    }
}
A x1 = new A();
x1.test();

A x2 = new A();
x2.test();

在javascript中， this代表觸發了事件的標籤物件
例如

<input type="button" value="刪除" onclick="del(this)">

這裡的this就代表當前的input按鈕

5. BOM

Browser object model

window 代表整個瀏覽器視窗物件
    .alert("提示的文字"); // 彈出對話方塊視窗
    .confirm("提示的文字"); // 彈出確認框視窗 如果點選了確定，返回true，點選了取消返回false
    .setTimeout(函式名稱, 毫秒值); //  延時執行一個函式
例如：

function delay() {
    console.log("ok");
}
var n = window.setTimeout(delay, 10000); // 執行會返回一個數字

window.clearTimeout(n); // 根據setTimeout返回的數字，可以使用clearTimeout清除延時效果

setInterval(函式名稱, 毫秒值); // 根據時間間隔執行函式

clearInterval() // 取消間隔執行

location 對瀏覽器位址列的抽象

location.href 用來獲取或改變位址列的值

location.reload(); // 重新整理頁面

history.back(); // 上一個網頁

history.forward(); // 下一個網頁