JavaScript（一）變數、基本語法、資料型別、呈現資料的三種方法、匯入指令碼、運算子、指令碼迴圈生成、型別轉換、函式呼叫、事件驅動機制
什麼是JAVASCRIPT：
JAVASCRIPT是網景(NetScape)公司推出的基於面向物件和事件驅動機制，緩解伺服器端壓力的客戶端指令碼語言
JS是執行在客戶端（瀏覽器）上的，JS是解釋型（及時編譯）的語言（編譯一次多次應用，且是執行在客戶端上的，訪問頻率低，所以有提升效能）
JS可以內嵌在頁面中，也可以以獨立的.js檔案的形式進行訪問。伺服器將包含js指令碼的頁面或js檔案響應傳送回客戶端（瀏覽器），瀏覽器接收後再通過直譯器對js進行解釋
JS的特點：
1.面向物件的設計
2.基於事件驅動機制
3.弱型別語言
4.簡單易學
Java是標準的強型別語言，直譯器在解釋執行資料時，必須要明確該資料的型別（效能更好）
JavaScript是弱型別語言，所有資料不需要明確標識型別，在解釋過程中可以即時辨識該資料的型別（靈活性更高）
綜合來看JS效能還是不如Java
基本語法：
變數：
string型別是小寫的（JavaScript也是嚴格區分大小寫的），且值可以用雙引號也可以用單引號
陣列可以一維也可以二維，且不需要指定陣列型別，更類似於Java中的集合
JavaScript語法規範：
1.嚴格區分大小寫
2.變數名與方法名使用駝峰命名法
定義變數：var
可以隨時隨地通過這個變數記錄各種各樣型別的值，分號結尾
//單行註釋
/**/塊註釋
//宣告變數，由於JS是弱型別，因此聲變數是不需要關注變數的型別
//字元型別
var name="tom"; //數值型別是number var name=10； alert(typeof(name)); //boolean型別 var name=true; //array型別,屬於object物件型別 var name=new Array("a","b","c")
//Object物件
var name=new Object();
在瀏覽器中呈現資料的三種方式：
方法一：
//在瀏覽器中呈現變數資料的方式：具備生成功能 //在瀏覽器中重新編寫其資料內容，之前的內容將會丟失 document.write(name);
方法二：
//彈出對話方塊呈現內容（單執行緒機制，只有關閉彈出的對話方塊才能對其他內容進行操作）//在JS中，window物件是預設呼叫的物件，因此window.方法名可以預設window
//只是在對話方塊中顯示，不具備生成功能 window.alert(name)； alert(name)
方法三：
//在控制檯中記錄呈現 console.log(name);
JavaScript的使用：
1.在頁面中通過內嵌<script>標籤直接寫入指令碼
2.編寫js檔案，再通過<script>標籤將指令碼匯入至頁面中
一般將匯入的指令碼或者CSS樣式都寫在head中：
<head> <title></title> <!-- 匯入外部的js檔案 --> <script type="text/javascript" src="myJavaScript.js"> </script> --> </head>
typeof(變數)：用於獲得變數的型別
//獲取值得型別： alert(typeof(name)); document.write(typeof(name)); console.log(typeof(name));
變數如果未賦值，再使用時該變數的值為undefind
變數不使用var也同樣允許宣告使用：但是使用不合適，因為沒法區分什麼時候開始建立的
var obj = "hello"; //變數不使用var也同樣允許宣告使用 obj = "hello";
js中允許允許宣告同名的變數，後宣告的變數將會覆蓋之前的變數，如果不是在同一個區域
匯入指令碼的區域內不允許再寫js程式碼，寫了也不會生效
<script type="text/javascript">
var obj = "hello";
//變數不使用var也同樣允許宣告使用
obj = "hello";
//變數如果未賦值，再使用時該變數的值為undefind
//js中允許允許宣告同名的變數，後宣告的變數將會覆蓋之前的變數
var obj = "geekhome";
console.log(obj);
</script>
<script type="text/javascript">
//頁面中可以內嵌多個script標籤，多個script標籤中的指令碼是在同一個作用域內的，所以此處的obj是延續上一個script中的值
//此處就是覆蓋掉原有的值
obj = "geekhome";
console.log(obj);
</script>
判斷是運算子：
算術運算子
+ - * / % ++ --
比較運算子
> < >= <= == !=
邏輯運算子
&& || !
賦值運算子
=
控制語句：
if條件語句
switch多分支語句
for、while迴圈語句
switch (表示式) { case 常量1 : JavaScript語句1; break; case 常量2 : JavaScript語句2; break; ... default : JavaScript語句3; }
for(初始化; 條件; 增量) { 語句集; }
while(條件) { 語句集; }
迴圈生成多個div層
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.d1{
width: 100px;
height: 100px;
background-color: gray;
margin: 10px;
}
</style>
<script type="text/javascript">
//動態生成指定數量的div
var count = 4;
var i = 1;
while(i <= count){
//三種方式表示字元內容內嵌入內容
//class表示應用的樣式
//document.write("<div class=\"d1\"></div>");
//document.write("<div class='d1'></div>");
document.write('<div class="d1"></div>');
i++;
}</script>
<body>
</body>
</html>
動態顯示15張圖片，每行顯示5張：
方法一：迴圈
方法二：陣列
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
//顯示5個頭像,每行呈現3張圖片
for(var i = 1; i <= 5; i++){
document.write("<img src='image/meixi.jpg'>");
//判斷當前圖片是否是3的倍數
if(i%3 == 0){
document.write("<br>");
}
}
var array = new Array("A","B","C","D");
//遍歷陣列 變數i表示遍歷中的索引
//Java中遍歷是用：，JS中遍歷使用in，且Java中迭代的直接是內容，但是此處如果迭代i則是迭代的是下標，所以迭代的內容要寫array[i]
for(var i in array){
console.log(array[i]);
}
</script>
<body>
</body>
</html>
例子：在一行表格中顯示15張圖片
//表格只有一張
<table border="1">
//行只有一行 <tr> <script type="text/javascript">
//在JS中對td進行迴圈 for(var i = 1; i <= 15; i++){ document.write("<td>");
//在每一個td迴圈生成的過程中，同步生成圖片 document.write("<img src='image/"+i+".gif'"); document.write("</td>"); } </script> </tr> </table>
例子：
將15張圖片動態呈現，每行呈現5張圖片
方法一：用迴圈，迴圈變數i取餘5==0換行
方法二：用陣列，下標取餘5==0換行
方法三：用表格，對tr和td進行迴圈，td迴圈的過程中生成圖片
<script type="text/javascript"> //方法一：動態呈現15個頭像，要求每行呈現5張圖片 for(var i = 1; i <= 15; i++){ document.write("<img src='image/"+i+".gif'>"); //先生成在換行 if(i%5 == 0){ document.write("<br>"); } } document.write("<hr>"); //方法二：陣列實現該效果 var imgs = new Array("1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif"); console.log(imgs[imgs.length-1]); for(var i = 0; i < imgs.length; i++){ //先換行在生成 if(i%5 == 0){ document.write("<br>"); } document.write("<img src='image/"+imgs[i]+"'>"); } document.write("<hr>"); </script> //方法三（1）：巢狀迴圈生成tr、td //方法三（2）：迴圈生成td 需要換行時生成</tr><tr> <script type="text/javascript"> document.write("<table border=1>"); document.write("<tr>"); for(var i = 1; i <= 15; i++){ document.write("<td><img src='image/"+i+".gif'></td>"); if(i%5 == 0){
//每五行生成完整一行 document.write("</tr>"); document.write("<tr>"); } } document.write("</tr>"); document.write("</table>"); </script>
型別轉換：int和float主要看轉換後的字元是否有小數
parseInt ("字串")：將字串轉換為整型數字
如: parseInt ("86")將字串“86”轉換為整型值86
parseFloat("字串")：將字串轉換為浮點型數字
如: parseFloat("34.45")將字串“34.45”轉換為浮點值34.45
var num1=10; //結果是1010，加號起拼接作用 console.log(num1+10); //將字元轉化後(因為是弱型別，所以可以接收所有型別的數值)，打印出來的就是數字 //如果num=10.7,則parseInt的結果是10 //如果num=10.7,則parseFloat的結果是10.7 num1=parseInt(num1)； //轉換後打印出的結果是20 console.log(num1+10); //parseInt以及parseFloat可以忽略變數數字後的非數值內容 var num1 = "10.7hello"; //此處結果是10.7,後面的字元會忽略 num1=parseFloat(num1)； //但是如果是數字前存在字母，則轉換失敗 //可以用isNaN判斷變數是否是數字 console.log(isNaN(num1));
函式：函式類似於JAVA中的方法，是完成特定任務，提高程式碼複用性的語句塊
建立函式：
沒有修飾符，沒有返回值（如果需要返回值就直接加上return）
function 函式名(引數) { //JS程式碼 }
函式呼叫：
方法一：直接用方法名進行呼叫
方法二：用驅動機制進行呼叫
<input type=“submit” name=“Submit” value=“顯示HelloWorld” onClick=“函式名( )">
方法使用例子：
<script type="text/javascript">
//宣告函式 相當於Java中的方法
function myFunction1(){
alert("呼叫了myFunction函式");
}
//帶有返回值的函式
function myFunction2(){
var a = 10;
var b = 20;
var c = a+b;
//使用return返回資料
return c;
}
//帶有引數的函式
function myFunction3(num1,num2){
var result = num1+num2;
return result;
}
//呼叫函式方式一
//如果用返回值接收了沒有返回值的方法，則會出現undefind
myFunction1();
//接收函式的返回值
var c = myFunction2();
//此處的var c和方法中的c作用域是不同的，所以不衝突
var c = myFunction3(15,20);
alert(c);
</script>
事件驅動機制：
常用的事件動作：
1.onclick 滑鼠單擊
2.ondbclick 滑鼠雙擊
3.onmousemove 滑鼠移動
4.onmousedown 滑鼠按下
5.onmouseup 滑鼠鬆開
6.onmouseenter 滑鼠進入 （進入這個區域）
7.onmouseleave 滑鼠離開 （離開這個區域）
8.onkeydown 鍵盤按下 （區分大小寫）
9.onkeyup 按鍵鬆開
10.onkeypress 按鍵事件 （不區分大小寫）
11.onfocus 滑鼠聚焦 （出現游標）
12.onblur 失去焦點 （移走游標）
13.onchange 選項變更事件 （選項變更：單選框，複選框，下拉列表框）
14.onload window物件的載入事件，當前頁面載入時
函式的呼叫：
1.在script標籤內直接通過函式名呼叫
2.在標籤的事件中呼叫函式
3.通過js繫結標籤的事件動作呼叫
可以直接在標籤裡面呼叫程式碼，但是不建議這麼寫，因為可能指令碼中可能會出現大量程式碼，所以分離比較方便清晰
<input type="button" value="press" name="" onclick="alert('press');">
document.getElementById();：
表示在整個頁面中查詢id,返回一個object物件
//編寫的方法
<script type="text/javascript">
function buttonClick(){
alert("點選了press按鈕");
}
</script>
/**************呼叫方法一：在script標籤內直接通過函式名呼叫*****************/
//id是唯一的，新增ID方便方法中進行精確查詢，要先生稱標籤 <input id="btn" type="button" value="press" name="" onclick="buttonClick()"> //要將標籤生成以後才能訪問到這個物件 <script type="text/javascript"> //獲取按鈕物件 var button = document.getElementById("btn"); //列印顯示 console.log(button); </script>
為按鈕繫結事件動作進行呼叫
繫結事件動作的方法有兩種：
1.通過button.onclick = buttonClick
2.通過匿名類函式（如果只使用一次）
//建立一個方法
<script type="text/javascript"> function buttonClick(){ alert("點選了press按鈕"); } </script> //建立按鈕 <input id="btn" type="button" value="press" name=""> /**************呼叫方法三：.在標籤的事件中呼叫函式*****************/ <script type="text/javascript"> //獲取按鈕物件 var button=document.getElementById("btn"); //方法一：為按鈕物件繫結事件動作（直接寫名稱，不用寫括號） button.onclick = buttonClick;
//方法二：通過匿名函式為標籤繫結事件
button.onclick = function(){
alert("使用匿名函式呼叫了方法");
}
</script>
窗體的載入事項：是在頁面中所有的標籤都已經建立完成且渲染之前，進行執行的一塊內容
window.onload = function(){
//要執行的JS程式碼
}
<script type="text/javascript">
function buttonClick(){
alert("點選了press按鈕");
}
//窗體的載入事件
window.onload = function(){
//alert("頁面載入了");
//獲取按鈕物件：在窗體的載入事件中執行，就算是先寫了接收，後寫了建立按鈕，也會訪問到，
var button = document.getElementById("btn");
//為按鈕繫結單擊事件
button.onclick = buttonClick;
}
</script>
//建立按鈕
<input id="btn" type="button" value="press" name="">
指令碼事件的運用：
將滑鼠的座標顯示在文字框中
//建立文字框 <input id="txt" type="text" name=""><br> <script type="text/javascript"> //文件的滑鼠移動事件 //獲取文字框 var txt = document.getElementById("txt");
//建立匿名方法 document.onmousemove = function(){ //獲取滑鼠的座標 //console.log(event.clientX+","+event.clientY); //將滑鼠的座標顯示在文字框內 txt.value = event.clientX+","+event.clientY; } </script>
指令碼事件的運用：
點選文字框，通過對話方塊顯示該文字框當前的值
//建立文字框2 <input id="txt2" type="text" name="" onclick="showTextValue()"><br> <script type="text/javascript"> //獲取txt2文字框 var txt2 = document.getElementById("txt2"); function showTextValue(){ //獲取文字框的值 alert(txt2.value); } </script>
<!-- this表示事件源物件，顯示事件源的值 --> <input id="txt3" type="text" name="" onclick="alert(this.value)">
將圖片作為按鈕
//建立一個方法 <script type="text/javascript"> function buttonClick(){ alert("點選了press按鈕"); } </script> //建立按鈕 <img src="image/meixi.jpg" onclick="buttonClick()">