js變數

1.變數

（1）變數是用於儲存資訊的"容器"，是命名的記憶體空間，可以使用變數名稱找到該記憶體空間。

（2）變數的命名規則：變數必須以字母開頭；雖然變數也能以$和_符號開頭（不過不推薦這麼做）；變數名稱也對大小寫敏感（a和A是不同的變數)。

（3）變數使用var關鍵字宣告：var 名字 = ，後面可以是數字，字串或者一個物件等等。

2.資料型別

資料型別：JavaScript中有5種原始資料型別——Undefined（未定義）、Null（空物件）、Boolean（布林值）、Number（數字）、String（字串）和特殊一個引用型型別——Object（物件）

（1）Undefined（未定義）這個值表示變數不含值。
（2）Null（空物件）可以通過設定這個值清空變數
（3）Boolean（布林值）只有true和false兩個值
（4）Number（數字）不分整數和浮點

（5）String（字串）是儲存字元（用雙引號或單引號括起來的部分）

3.屬性操作

（1）元素.innerHTML：元素的內容屬性，用以讀取頁面中元素的所有html內容

        寫入：元素.innerHTML="新內容"

（2）"[]"的一種用法類似"."；"."後面的值不能變（如.style.width的width不能用變數）。而"[]"裡面的值可以變（如.style.width可以寫成.style["width"]，或者用變數，通過修改變數改變要修改的樣式如：.style[attr]

注意事項：

• 所有的相對路徑 img.src href=’commen.css’
• 顏色值不要拿來做判斷： color:red #f00 rgb(250,0,0)
• innerHTML值不要拿來做判斷
• getElementById:前面只能用document .而其他類似的getElementsByTagName則可以用變數來。
  

練習1：利用字串彈出value的值

<select id="s1" >
	<option value="北京" >北京</option>
    <option value="上海" >上海</option>
    <option value="廣州">廣州</option>
    <option value="西安">西安</option>
</select>
<input type="text" id="text1"/>
<input type="button" value="彈出值" id="btn"/>
 

var oS1=document.getElementById("s1");
var oText1=document.getElementById("text1");
document.getElementById("btn").onclick=function(){
alert(oS1.value+"在"+oText1.value)
}

練習2：讀寫輸入結合，點選按鈕切換圖片

<input type="button" value="圖1" id="btn1"/>
<input type="button" value="圖2" id="btn2"/>
<input type="button" value="圖3" id="btn3"/>
<input type="button" value="圖4" id="btn4"/></br>
<img src="新建資料夾/pic1.png" width="500" height="281" id="img1">

var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oBtn3=document.getElementById("btn3");
var oBtn4=document.getElementById("btn4");
var oImg=document.getElementById("img1");
oBtn1.onclick=function(){
	oImg.src="新建資料夾/pic1.png"
	}
	oBtn2.onclick=function(){
	oImg.src="新建資料夾/pic2.png"
	}

oBtn3.onclick=function(){
	oImg.src="新建資料夾/pic3.png"
	}

oBtn4.onclick=function(){
	oImg.src="新建資料夾/pic4.png"
	}

if判斷

練習3：文字點選變大縮小變色的例子，讓其有個變化範圍12px-28px

<input type="button" value="放大" id="btn1"/>
<input type="button" value="縮小" id="btn2"/>
<p id="p1">我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科
學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學
我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學我愛發明我愛科學</p>

var oBtn1=document.getElementById("btn1");
var oBtn2=document.getElementById("btn2");
var oP=document.getElementById("p1");
var i=18;
oBtn1.onclick=function(){
	if(i<28){
		i++;
	}
	else{i=28}
	oP.style.fontSize=i+"px";	
	
}
oBtn2.onclick=function(){
	if(i>12){
		i--;
	}
	else{i=12}	
	oP.style.fontSize=i+"px";
}