# JavaScript 基本介紹 變數 條件式&迴圈 跳出
###### tags: `JavaScript`
---
## JavaScript 基本認識
1. 英文大小寫不同：
JavaScript 中的結構控制敘述與內建函式名稱都必須是小
寫英文字母
例如 if 判斷式是不能寫成 IF，否則會無法執行功能。
2. 空白字元：
JavaScript 會自動忽略多餘的空白字元。
3. 結尾分號。
JavaScript 是一行行的敘述與陳述式，每一行結式結束時並沒有強制規定要加上「;」分
號，除非是要將多個敘述式寫在同一行中，在每個敘述式之間就必須要加入「;」分號。
4. 註解符號。
在JavaScript 程式碼中，可以利用註解的加入幫助開發人員了解程式的內容，增加維護
與更新時的方便性。您可以使用「//」符號標示單行註解，或是「/* ..... */」加上多行的註
解。
## 保留字
---
## 變數的使用與宣告
變數的命名原則
1.變數名稱的長度並沒有限定字數。
2.變數名稱並不能使用保留字。
3.變數名稱的起始字元不能使用數字，必須為大小寫英文字母，或「_」。
4.變數名稱除了第一個字元外，可以使用大小寫英文字母、數字和「」符號，但不能使用「.」符號，當然也不能使用中文來命名。
5.JavaScript 對於英文字母大小寫是有區隔的。
### 變數的宣告
* 在JavaScript 中變數是使用 var 指令來宣告變數
* 如果是單一變數，只要在單行中用 var 宣告即可。但要在單行中宣告多個變數，可以在一個 var 之後分別將每個變數之間加上「,」符號連接起來。
### 變數的值
* String：字串是由字母、數字、文字、符號所組合而成，在指定時要在前後加上對稱「"」或「'」符號。
* Number：數字是包含了整數及浮點數。
* Boolean：布林值包含了true( 是) 和false( 否)，當答案是真假、是否、開關等二種選擇時可以使用。
* 在宣告變數或是在程式碼中時可以用「=」直接指定變數值，其實在指定的時候就決定了資料的類型。
* 設定變數時，並不一定要用var 來開頭，可以直接用變數指定值即可完成。若在設定變數及值之後再設定了同名的變數與值，那後來宣告的內容會取代原來的變數值。
練習:
```javascript=
<body>
<script>
var myName = "Tina";
var myAge = 26;
var myHeight = 160, myWeight = 48;
document.write("大家好，我是" + myName + ".<br>");
document.write("身高" + myHeight + "公分，體重" + myWeight + "公斤。<br>");
document.write("今年" + myAge + "歲。");
</script>
</body>
```
顯示如下:
---
## 指派運算子
### 邏輯運算符號表示
## 流程控制
跟PHP的邏輯有點像~
### 條件式
#### if ( ){ };
練習:
```javascript=
<script>
var a = prompt("請輸入數字","0");
if (a > 0) document.write("您輸入的值是正數");
</script>
```
顯示如下:
---
#### if/else
練習:
```javascript=
<script>
var a = prompt("請輸入數字","0");
if (a > 0) {
document.write("您輸入的值是正數");
}else{
document.write("您輸入的值是負數");
}
</script>
```
---
#### if /else if /else 多向選擇條件控制
練習:
```javascript=
<script>
var score = prompt("請輸入分數","0");
if(score>=60 && score<70){
document.write('丙等');
}else if(score>=70 && score<80){
document.write('乙等');
}else if(score>=80 && score<90){
document.write('甲等');
}else if(score>=90 && score<=100){
document.write('優等');
}else{
document.write('不及格');
}
</script>
```
---
#### ?:
* ?代表if
* :代表else
練習:
```javascript=
<script>
var a = prompt("請輸入數字","0");
(a > 0) ? document.write("您輸入的值是正數"):
document.write("您輸入的值是負數");
</script>
```
---
#### switch
* 只會提取一次，遇到break會跳出來。
* switch 後的自訂變數與case 後的條件值資料型態要一致，才能用來比較。
* 每個case 最後要加上「 : 」。
* 每個程式區塊最後要以break 指令結束，此時程式會自動跳到程式區塊的結構外繼續完成動作。
* default 當所有條件值與自訂變數都不相等時執行，為非必填條件可不設定。最後不必加上break 指令。
```
switch(){
case " ":
條件句內容;
break;
}
```
練習:
```javascript=
<script>
var payway = prompt("請選擇付款方式:1.ATM匯款<br> 2.刷卡<br> 3.貨到付款","1");
switch (payway){
case "1":
document.write("選擇使用ATM匯款");
break;
case "2":
document.write("選擇使用刷卡");
break;
case "3":
document.write("選擇使用貨到付款");
break;
default:
document.write("請選擇正確的付款方式");
}
</script>
```
---
### 迴圈
#### while
練習:
```javascript=
<script>
var i = 0;
while (i<10){
i++;
document.write(i + " ");
}
</script>
```
顯示如下:
---
#### do/while
> do{ }while( )
:::info
```
do {
先執行內容;
}while(條件)
```
:::
練習:
```javascript=
<script>
var i = 0;
do{
i++;
document.write(i + " ");
}while(i<5)
</script>
```
顯示如下:
---
#### for
:::info
```
for (變數初值;條件式;變數計次方式){
執行內容;
}
```
:::
練習:
```javascript=
<script>
var countI = 0;
for(i=1;i<=10;i++){
countI += i; //count = count + i
}
document.write(countI);
</script>
```
---
### 跳出
#### break
* 控制判斷式或迴圈中跳出的動作
---
#### continue
* continue語句只能用在==while==語句、==do/while==語句、==for==語句、或者==for/in==語句的循環體內,在其他地方使用都會引起錯誤。
* 舉例1:
當==i = 4==、==i = 3==以及==i = 1==的時候，直接跳出for循環。下次繼續執行。至於輸出結果，還希望大家去打印一下。
```javascript=
for(var i = 5; i >=0; i--) {
if(i == 4 || i == 3 || i == 1) {
continue;
}
console.log(i);
alert(i);
document.write(i);
}
//當i = 4、i = 3以及i = 1的時候，直接跳出for循環。下次繼續執行。
```
———
* 舉例2:
該實例我們在循環中使用了continue 語句。
循環代碼塊，在i 的值等於"3" 時跳過當前循環:
```javascript=
var text = "";
var i;
for (i = 0; i < 5; i++) {
if (i == 3) {
continue;
}
text += "The number is " + i + "<br>";
}
```
輸出結果如下:
The number is 0
The number is 1
The number is 2
The number is 4
———
* 舉例3
該實例我們在for 循環中使用了continue 語句。
循環數組，在數組的元素為"Saab" 時跳過當前循環:
```javascript=
var cars = ["BMW", "Volvo", "Saab", "Ford"];
var text = ""
var i;
for (i = 0; i < cars.length; i++) {
if (cars[i] == "Saab") {
continue;
}
text += cars[i] + "<br>";
}
```
輸出結果如下:
BMW
Volvo
Ford
---
#### Return
* return語句就是用於指定函數返回的值。
* return語句只能出現在函數體內，出現在代碼中的其他任何地方會造成語法錯誤。
* 當執行return語句時,即使函數主題中還有其他語句,函數執行也會停止!
舉例：
下面實例裡，當username為空時，就不會再向下執行。
```javascript=
<script type="text/javascript">
if(username == "") {
alert("please input your username: ");
return false;
} else if (qq == "") {
alert("please input your qq number: ");
return false;
}
</script>
```
在一些表單提交中，也可以通過return false來阻止默認的提交方式，改用Ajax的提交方式，如下。
```javascript=
<form id="form" onSubmit="return false">
...
</form>
```
---
<style>
h2 {
color: #2383F8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383F8;
padding:8px;
}
</style>
Sign in with Wallet
Connect another wallet