JavaScript 從零開始
28
-
Upload
adam-hung -
Category
Technology
-
view
451 -
download
2
Transcript of JavaScript 從零開始
關於變數 (variable)
var 變數名 ;
變數名要用英文開頭 ( 函數名也是 )
沒打 var 就是全域變數 ( 函數內外皆可用 )
字串要用’’或””包住
字串轉數字前面放 +
數字轉字串後面放””
JavaScript 以 ; 做為陳述的結尾
註解方式 // 單行註解方式
/* 多行註解方式多行註解方式 */
宣告一個變數 var nickName = “ 小花” ;
globalInt = 35+””; // 等同於 globalInt = “35”;
var num = -10; // 等同於 var num = +”-10”;
var weight = 123.45;
var start = true; // 相反就是 start = false;
關於函數 (function)
宣告一個函數 function ona_fun() { // 這是沒有參數的函數
alert(”Hello”); // 彈出 Hello 文字}
ona_fun(); // 執行
var flower_fun = function (word) {alert(word); // 彈出 Hello 文字
};
flower_fun(‘Hello’); // 執行
var adam_fun = new Function(‘alert(“Hello”)’);
執行一個匿名函式 (function() {
alert(“Hello”);
})(); // 這樣寫可以馬上執行
(function() {
alert(“Hello”);
}()); // 也可以這樣寫，一樣馬上執行
函數中的 return
return 表示結束目前函數，並傳回值 ( 也可傳回函數 )
舉個例，順便綜合練習
function doWork() {
return function calculate(y) { return y + 1; };
// 以下不管寫任何東西都不會被執行
}
var func = doWork();
var x = func(5);
alert(x); // 會彈出數字 6
變數的作用範圍<script type=“text/javascript”> // 也可以簡寫成 <script>
var rain = 1; // 定義全域 ( 局 ) 變數 rain
function check(){
var rain = 100; // 定義私域 ( 局部 ) 變數 rain
alert( rain ); // 會彈出數字 100
}
check();
alert( rain ); // 會彈出數字 1
</script>
算數運算子 + 加
- 減
* 乘
/ 除
% 取餘數 (mod) 例： 5%3 為 2
++ 例： x++; 等同 x = x+1;
-- 例： x--; 等同 x = x-1;
指定運算子 += 例： x+=2; 等同 x = x+2;
*= 例： x*=3; 等同 x = x*3;
/= 例： x/=4; 等同 x = x/4;
%= 例： x%=5; 等同 x = x%5;
字串運算子 + 字串相加
+= 字串相加後返回
舉個例子
var word = "alpha";
word += "bet";
alert(word); // 會彈出 alphabet
邏輯運算子 && (AND, 交集 ) 兩者皆為 true 才返回 true
true&&true 為 true, false&&false 為 false
true&&false 為 false
|| (OR, 聯集 ) 其一為 true 就返回 true
true||true 為 true, false||false 為 false
true||false 為 true
!(NOT) 例： !true 為 false 例： !false 為 true
三元運算子 ? :
條件 ? 條件成立時做的事 : 條件不成立時做的事
舉個例子
var sex = "m";
sex_full = (sex == "m") ? "Male" : "Female";
alert(sex_full); // 彈出 Male
流程控制 if
If ( 條件 ) {
// 執行內容
}
流程控制只要執行內容只有一行， {} 可省略
舉個彈出 Hello 的例子
var i = 1;
If (i===1) alert(“Hello”); //== 寫成 === 執行比較快
流程控制 if … else
If ( 條件 ) {
// 條件成立時執行的內容
} else {
// 條件不成立時執行的內容
}
如果執行內容只有一行，效果就跟 ?: 一樣
流程控制 for
for ( 起始 ; 條件 ; 執行後做什麼 ) {
// 條件成立時執行的內容，直到條件不成立才停止
}
// 印出 1 到 10 的平方
for (i=1; i<=10; i++) {
alert(i*i);
}
流程控制 while
while ( 條件 ) {
// 條件成立時執行的內容，直到條件不成立才停止
}
// 印出 1 到 10 的平方
var i = 1;
while ( i<=10) {
alert(i*i);
i++;
}
流程控制 break 終止 for 與 while 迴圈時用
// 從 1 至 10 ，印出平方數小於 50 的所有平方數
var i = 1;
while ( i<=10) {
if(i*i >= 50) {
break;
}
alert(i*i);
i++;
}
流程控制 continue 終止 for 與 while 迴圈某次執行，檢查如果條件成立，繼續下一次執行
// 從 1 至 10 ，印出所有奇數的平方數
var i = 1;
while ( i<=10) {
if(i%2===0) {
continue;
}
alert(i*i);
i++;
}
Object(物件 )
// 如何宣告
var smallflower = new Object();
// 設定屬性與賦值
smallflower.living = true;
smallflower.age = 19;
smallflower.gender = 'male';
smallflower.getGender = function() {return smallflower.gender;};
// 一次宣告屬性與賦值
var smallflower = {
// 設定屬性與賦值
living:true,
age:19,
gender:'male',
getGender:function() {return smallflower.gender;
};
// 印出物件
console.log(smallflower);
// 印出物件的所有屬性的值
for (key in smallflower) {
if (smallflower.hasOwnProperty(key)) {
console.log(key);
}
}
// 印出特定屬性的值
console.log(smallflower.gender);
Array(陣列 )
// 宣告與賦值
var colorArray = ['blue', 'green', 'orange', 'red'];
// 依照索引印出內容
console.log(colorArray[0]); //0 為第一個索引值
// 物件 ( 又稱關聯陣列 )
var colorObject = {
'blue':'blue',
'green':'green',
'orange':'orange',
'red':'red'
};
// 印出某物件的鍵值
console.log(colorObject['blue']);
. 語法和 ['']存取資料的不同
編譯器檢查正確性 (. 語法 )
可使用運算子 ([""] 語法 )
// 宣告並直接賦值
var colorArray = new Array('blue', 'green', 'orange', 'red');
// 先宣告後賦值
var colorArray(4);
colorArray[0] = 'blue';
colorArray[1] = 'green';
colorArray[2] = 'orange';
colorArray[3] = 'red';
// 常用陣列屬性
length
// 常用陣列操作方法
pop
push
reverse
shift
sort
splice
unshift
contact
join
slice
