JavaScript 從零開始

JavaScript 從零開始
Adam Hung
magic.music@gmail.com

關於變數 (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 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

JavaScript 從零開始

Related slideshows

More Related Content

JavaScript 從零開始