js跟css一樣都在head中載入,只是開頭稍微有點不同

首先來說明相對路徑不同寫法意義

例:網頁放在A資料夾,js放在B資料夾,兩個資料夾放置在H總資料夾,用 ../ 表示要往上一層找

<script src="../B資料夾/XXX.js"></script>

例:網頁放在A資料夾,專用js放在A資料夾中a資料夾下,用 / 表示要往下一層找

<script src="a資料夾/XXX.js"></script>

link參考網址:https://helpx.adobe.com/tw/dreamweaver/using/linking-navigation.html


以下是js常見格式

var 變數=值;

function 方法名稱(參數1,參數2...) {
     ....
     return XXXX;
}

變數命名規則

1.不能中途空白
2.不能數字開頭


彈出視窗種類

Yes按鈕的彈出視窗
window.alert(XXXX);
Yes,No按鈕的彈出視窗
window.confirm(XXXX);
Yes,No按鈕和輸入框的彈出視窗
window.prompt(XXXX);


幾乎哪家都一樣if格式

if(條件為true) {
   ...
}else if(條件為true) {
   ...
}else {
   ...
}

判斷式常用

&&:And

||:Or

!:Not

連迴圈格式都差不多

while(條件為true) {
   ...
}

for(var 變數=初值;變數條件為true;變數增減值) {

   ...
}

當然少不了好用的陣列

var 陣列名稱=[index0內容,index1內容...];
陣列名稱.push(XXX);從後面增加一個
陣列名稱.pop(XXX);從後面減少一個
陣列名稱.unshift(XXX);從前面增加一個
陣列名稱.shift(XXX);從前面減少一個

搭配陣列方法

length:長度
charAt(index):index值對應內容,index以0開始


接著來提一下關於全域和區域變數需注意範例

Var變數名稱相同時,對網頁來說是全域跟區域差別

以下為範例和結果

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="con"></p>
<script>
var x=1;
function doa(a, b) {
     var x=a+b;
     return x;
}
document.getElementById("demo").innerHTML = doa(4, 2); <<顯示為6
document.getElementById("con").innerHTML = x; <<顯示為1
</script>
</body>
</html>


在方法中用到全域變數並改變,因而影響全域變數值

以下為範例和結果

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="con"></p>
<script>
var x=1;
function doa(a, b) {
     x=a+b;
     return x;
}
document.getElementById("demo").innerHTML = doa(4, 2); <<顯示為6
document.getElementById("con").innerHTML = x; <<顯示為6
</script>
</body>
</html>

在宣告和使用變數時真的要很小心,稍不注意就會悲劇

因此要全域"慎用",區域"隨意"((疑

其實宣告愈多變數會吃不少資源,因此還是省著點用,別爽開N後宮((炸


js最特別之處是能把方法存入變數中,接著當成傳入參數

var a變數;

a變數=function (){

   ...

   return ...;

};

function b變數(傳入參數...){

   傳入參數();

}

b變數(a變數...);   <<傳入參數部分,可以是function

因此b方法會執行a方法內容

 

變數存方法參考網址:http://www.w3schools.com/js/js_function_definition.asp


上方那些學完後會覺得js很簡單,但其實真正主角是物件

小迷老師說過:不會寫物件你以後一定會碰到瓶頸

var 物件={屬性1:,屬性2:...};

物件.屬性名;  <<顯示此屬性的值

物件["屬性名"];  <<顯示此屬性的值

js物件很靈活,可以在中途增加新屬性

物件.新屬性=;

物件["新屬性"]=;

也可以中途刪除屬性

delete 物件.屬性;

 

前面說了老半天還是感覺不出來,以下舉個例子來說明會寫js物件是真的很重要,不然會GG

小迷創個Books物件,而且增加addBook方法

var Books={

  height:6,

  length:10,

  width:12,

  "num of Books":0

  ...

};

function addBook(books,name,writer) {

  books["num of Books"]++;

  books["book"+books["num of Books"]]={title:name,author:writer};

}

呼叫addBook

addBook(Books,"Happy Boter","J K");

接著他會開始找addBook方法,並把傳入參數代入,Books就會新增一個屬性

Books={

  ...

  "num of Books":1,

  book1: {title:"Happy Boter",author:"J K"}

};

Books.book1.title;  <<顯示為Happy Boter

Books ["book1"]["title"];  <<顯示為Happy Boter

 

提到物件,當然跟this也有關係,意思是這區塊的物件

var person={

  add:function(name,type,age,money){

     this[name]={type:type,age:age,money:money};  <<this是指person物件

  }

};

接著來呼叫personadd屬性來增加新屬性

person.add("Mary","girl","15","10000");

因此person物件就多新屬性

person={

  ...

  Mary:{type:girl,age:15,money:10000}

};

創作者介紹
創作者 o迷苓o 的頭像
o迷苓o

~米漿牛奶~

o迷苓o 發表在 痞客邦 留言(0) 人氣()