JavaScript基礎：

標籤：default   button   script   穿透   文件物件模型   輸出   model   逗號   資訊   

一. JavaScript概述

JavaScript一種直譯式指令碼語言，是一種動態類型、弱類型、基於原型的語言，內建支援類型。

document.write("<h1>這是一個標題</h1>") 在網頁上顯示內容
alert(“你好”) 彈窗，

二. JavaScript變數

var ad = 1; 字母開頭，區分大小寫，不能是關鍵字和保留字

三. JavaScript資料類型用typeof()查看

JavaScript中的資料類型：Undefined、Null、Boolean、Number、String和Object。

1.字串　　 var carname=‘Head teacher‘;
2.Number類型　　 var x1=34.00; //使用小數點來寫
3.布爾類型　　 var x=true;
4.數組 　　 var cars=new Array();   就是Python裡的列表
5.對象 對象由花括弧分隔。    在括弧內部，對象的屬性以名稱和值對的形式 (name : value) 來定義
　　var person={firstname:"John", lastname:"Doe", id:5566};
6.Undefined類型     在使用var聲明變數，但沒有對其初始化時，這個變數的值就是undefined。var box;
7.Null類型       是一個只有一個值的資料類型，即特殊的值null。它表示一個Null 物件引用(指標)，typeof操作符檢測null會返回object。

四. JavaScript運算子

1.ECMAScript定義了5個算術運算子，加減乘除，取餘。遞增++和遞減--
　　前置和後置的區別:沒有賦值操作時，前置和後置一樣。有賦值操作時，前置的運算子會 先累加或累減 再賦值，後置運算子則 先賦值 再累加或累減。
2.比較子：小於(<)、大於(>)、小於等於(<=)、大於等於(>=)、相等(==)(大小相同即可 如true為1)、不等(!=)、全等(恒等)(===)(要求大小和類型都相同)、不全等(不恒等)(!==)。
3.賦值運算子：等於(=) 加等於(+=) 減等於（-=） 乘等於（*=） 除等於（/=） 取餘等於（%=）
4.JavaScript邏輯運算子 ：邏輯與(AND) ：&& ，，邏輯或(OR)：||  ，，邏輯非(NOT)：!
5.逗號運算子：可以在一條語句中執行多個操作。var box = 100, age = 20, height = 178;//多個變數聲明
6.三元條件運算子：var box = 5 > 4 ? ‘a‘ : ‘b‘;//對，5>4返回true則把‘a‘賦值給box，反之把‘b‘賦值給box。
7. 運算子優先順序：

五. JavaScript流程式控制制語句

1.條件分支語句if () {} else {}

if (條件運算式) {語句;}
else if (條件運算式) {語句;} ...
else {語句;}

2.多重分支語句switch () { case n : ...}; switch語句是多重條件判斷，用於多個值相等的比較。

var box = 1;
switch (box) {　　　　//用於判斷box相等的多個值
case 1 :
alert(‘one‘);
break;　　　　　　//break;用於防止語句的穿透
case 2 :
alert(‘two‘);
break;
default :　　　　//相當於if語句裡的else，否則的意思
alert(‘error‘);   }

3.do...while語句：先運行，後判斷的迴圈語句。即不管條件是否滿足，至少先運行一次迴圈體。

var box = 1;　　　　      //如果是1，執行五次，如果是10，執行1次
do {alert(box);box++;}
while (box <= 5);　　　　//先運行一次，再判斷

4. while語句：一種先判斷，後啟動並執行迴圈語句。必須滿足條件了之後，方可運行迴圈體。

var box = 1;　　　　　　//如果是1，執行五次，如果是10，不執行
while (box <= 5) 　　　　 //先判斷，再執行
{ alert(box); box++; }

5. for語句：也是一種先判斷，後啟動並執行迴圈語句。但它具有在執行迴圈之前 初始設定變數和定義迴圈後要執行代碼的能力。

for (var box = 1; box <= 5 ; box++) {alert(box);}

//第一步，聲明變數var box = 1;

//第二步，判斷box <=5

//第三步，alert(box)

//第四步，box++

//第五步，從第二步再來，直到判斷為false

6. for...in語句：是一種精準的迭代語句，可以用來枚舉對象的屬性。

var box = {‘name‘ : ‘Head Teacher’,‘age‘ : 28,‘height‘ : 178};　　//建立一個對象
for (var p in box)
{alert(p); }　　　　//列舉出對象的所有屬性

break和continue語句用於在迴圈中精確地控制碼的執行。

六：JavaScript函數

1.函數是完成某一功能的程式碼片段 ，2.函數是可重複執行的程式碼片段， 3.函數方便管理和維護

function 函數名稱（[參數][ 參數][ 參數]）{
程式碼片段
return 傳回值 }

例如：function PeopleNameAge(name,age){

alert(‘你的姓名:‘+name+‘你的年齡:‘+age);

}

函數注意：
1.函數名稱不要包含特殊字元 ，最好遵循駝峰式的命名方法 ，嚴格區分大小寫 ，如果重複會覆蓋
2.函數可以有參數也可以沒有參數，可以有一個參數也可以有多個參數
3.函數通過return傳回值，如果沒有預設返回undefined
4.函數不調用不執行

七. JavaScript數組

1.使用new關鍵字建立數組，，var box = new Array(‘曹老師‘,‘web‘,‘學神‘);　　//建立一個數組並分配好了元素
2.可以省略new關鍵字。
3.使用字面量方式建立數組 var box = [‘曹老師‘,‘web‘,‘學神‘];　　//建立包含元素的數組

使用索引下標來讀取數組的值，alert(box[2]);　　//擷取第三個元素
使用length屬性擷取數組元素量 alert(box.length)　　//擷取元素個數
box.length = 10;　　//強制元素個數
box[box.length] = ‘JS技術‘;　　//通過length給數組增加一個元素

八.JavaScript對象

JavaScript 中的所有事物都是對象：字串、數值、數組、函數...

1.使用new運算子建立Object

ar people= new Object();　　//new方式
people.name=‘Head‘;　　//建立屬性欄位
people.age=18;　　//建立屬性欄位

2.new關鍵字可以省略

3.使用字面量方式建立Object

4.使用字面量及傳統複製方式

var people ={};
people.name=‘head‘;　　//字面量聲明為空白對象
people.age=18;　　 //點符號給屬性複製

6.兩種屬性輸出方式

alert(people.age);　　//點標記法輸出
alert(people [‘age‘]);　　//中括弧標記法輸出，注意引號

7.給對象建立方法

var people ={

run:function(){
return ‘跑步中！！！‘;}

}
alert(people.run());　　//調用對象中的方法

8.使用delete刪除對象屬性

在實際開發過程中，一般我們更加喜歡字面量的聲明方式。

九.JavaScript BOM

瀏覽器物件模型 (BOM)瀏覽器物件模型（Browser Object Model (BOM)）尚無正式標準。

1.警告框  即：Alert(‘aaa’); 當警告框出現後，使用者需要點擊確定按鈕才能繼續進行操作。用於確保使用者可以得到某些資訊。
2.確認框  用於驗證是否接受使用者操作。

當確認卡彈出時，可以點擊 "確認" 或者 "取消" 來確定使用者操作。點擊 "確認", 返回 true；點擊 "取消", 確認框返回 false。
if(confirm("你喜歡我嗎？"))
{ alert(‘喜歡！‘);}
else{alert(‘不喜歡！‘);}

3.提示框：用於提示使用者在進入頁面前輸入某個值。

當提示框出現後，使用者需要輸入某個值，然後點擊確認或取消按鈕才能繼續操縱。如果點確認，傳回值為輸入的值。如果點取消，傳回值為 null。
var name = prompt("請輸入你的名字","");
if(name){alert("歡迎您"+name);}

十.JavaScript DOM（Document Object Model）即文件物件模型

W3C提供了比較方便簡單的定位節點的方法和屬性，以便我們快速的對節點進行操作。

分別為：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

1.getElementById()方法

document.getElementById(‘box‘);　　//擷取id為box的元素節點

2.getElementsByTagName()方法 ；返回一個對象數組HTMLCollection(NodeList)，儲存著所有相同元素名的節點列表。

document.getElementsByTagName(‘*‘);　　 //擷取所有元素
document.getElementsByTagName(‘li‘);　　 //擷取所有li元素，返回數組

3.getElementsByName()方法 ；擷取相同名稱(name)的元素，返回一個對象數組HTMLCollection(NodeList)。

document.getElementsByName(‘add‘)　　//擷取input元素

4.getAttribute()方法 ；擷取元素中某個屬性的值。

document.getElementById(‘box‘).getAttribute(‘id‘);　　//擷取元素的id值

5.setAttribute()方法 ：設定元素中某個屬性和值。它需要接受兩個參數：屬性名稱和值。如果屬性本身已存在，那麼就會被覆蓋。

document.getElementById(‘box‘).setAttribute(‘align‘,‘center‘);　　 //設定屬性和值

6.removeAttribute()方法 ：可以移除HTML 屬性。

document.getElementById(‘box‘).removeAttribute(‘style‘); 　　 //移除屬性

十一.JavaScript事件

事件是 由訪問Web頁面的使用者引起的一系列操作，當使用者執行某些操作的時候，再去執行一系列代碼。  例如：使用者點擊，則執行相應的如下代碼：。
　　//在HTML中把事件處理函數作為屬性執行JS代碼：

<input type="button" value="按鈕" onclick="alert(‘Lee‘);" />    等效於：

var input = document.getElementsByTagName(‘input‘)[0];　　//得到input對象
input.onclick = function () {　　　　//匿名函數執行
alert(‘Lee‘); };

onclick 　　 當使用者單擊對象時 連結、按鈕、表單對象、影像地圖地區
onblur 　　 當焦點從對象上移開時 視窗、架構、所有表單對象
ondblclick 　　當使用者雙擊對象時 連結、按鈕、表單對象
onError 　　 當指令碼中發生語法錯誤時指令碼
onfocus 　　 當單擊滑鼠或者將滑鼠移動聚焦到視窗或架構時視窗、架構、所有表單對象
onkeydown 　　 當按鍵被按下時 文檔、映像、連結、表單
onkeypress 　　當按鍵被按下然後鬆開時文檔、映像、連結、表單
onkeyup　　 當按鍵被鬆開時 文檔、映像、連結、表單
onmouseout 　　當表徵圖移出連結時 連結
onmouseover　　當滑鼠移到連結時 連結
onreset 　　 單擊表單的reset按鈕 表單複位按鈕
onresize 　　 當選擇一個表單對象時 視窗
onselect 　　 當選擇一個表單對象時 表單元素
onsubmit 　　 當發送表格到伺服器時 表單

十二.JavaScript尺寸樣式操作

如需改變 HTML 元素的樣式，請使用這個文法：

document.getElementById(id).style.屬性名稱=新樣式

var box = document.getElementById(‘box‘);　　//擷取box

    box.style.css.style;　　//CSSStyleDeclaration

    box.style.css.style.color;　　//red

    box.style.css.style.fontSize;　　//20px

 　　注意:如果遇到css樣式具有橫杠例：font-size需要改寫成fontSize，去除橫杠並將首字母大寫

1.通過style內聯擷取元素的大小

var box = document.getElementById(‘box‘);　　//擷取元素

box.style.width;　　//200px、空

box.style.height;　　//200px、空

2.scrollWidth和scrollHeight  這組屬性可以擷取滾動內容的元素大小。

box.scrollWidth;　　//200

box.scrollWidth;　　//200

3.offsetWidth和offsetHeight   這組屬性可以返回元素實際大小，包含邊框、內邊距和捲軸。

box.offsetWidth;　　//200

box.offsetHeight;　　//200

4.clientLeft和clientTop    這組屬性可以擷取元素設定了左邊框和上邊框的大小。

box.clientLeft;　　//擷取左邊框的長度

box.clientTop;　　//擷取上邊框的長度

5.offsetLeft和offsetTop    這組屬性可以擷取當前元素相對於父元素的位置。

box.offsetLeft;　　//50

box.offsetTop;　　//50

    scrollTop和scrollLeft

6.這組屬性可以擷取捲軸被隱藏的地區大小，也可設定定位到該地區。

box.scrollTop;　　//擷取滾動內容上方的位置

box.scrollLeft;　　//擷取滾動內容左方的位置

 

JavaScript基礎：