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物件
}
};
接著來呼叫person中add屬性來增加新屬性
person.add("Mary","girl","15","10000");
因此person物件就多新屬性
person={
...
Mary:{type:girl,age:15,money:10000}
};
留言列表
線上遊戲 (4)
