JavaScript基本操作
阿新 • • 發佈：2018-12-17
一、基礎語法與簡介
說明：js和html可以寫在一起，但javascript的程式碼不屬於html語言，所以為了便於維護，所以將js和html分開寫。
練習用軟體：Intelli Idea（推薦，帶檢查）、pycharm（無法檢查script部分的語法）、editplus、sublime等等
二、基礎語法
1、輸出
- 彈窗：alert("hello world");
- 在瀏覽器中輸出：document.write("<h2> 輸出 <h2>");
- 後臺輸出（可除錯用）：console.log("這是後臺輸出");
2、定義變數
- 語法：var 變數名=變數值
- 特點：不用特地說明是什麼型別的資料，引數的型別由值來決定，和python很像，不用var也可以建立一個變數，不過是個全域性變數，用的少。
- 資料的型別有：number類、boolean、string類
- 如何檢視資料的型別：
var num=10;
console.log(typeof num);
3、定義函式
function 函式名（引數）{
[return 返回值]
}
4、定義類（瞭解）
- 規範的方式：
var myTitle; var myPrice; function Book(title, price){ myTitle=title; myPrice=price; function getInfo(){ return "title:"+myTitle+", price:"+myPrice; } return getInfo; } var book=new Book("java",19.9); alert(book());
- 原生的方式
function Book(title, price){
this.title=title;
this.price=price;
}
Book.prototype.getInfo=function(){ //prototype屬於對原生的操作擴充套件
return "title:"+this.title+", price:"+this.price;
}
var book=new Book("java",19.9);
alert(book.getInfo());5、判斷字串相等：==
4、陣列的初始化：var result=new Array();
可以是混合型別，沒有長度限制，是動態陣列
三、前端事件處理-核心
事件源的命名往往是onXxx() 的方式，例如：onClick()
有靜態和動態兩種方式，見下文：
1、開啟頁面（onload）、關閉頁面（onunload）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 第二課</title>
<script type="text/javascript">
function loadHandle(){
alert("welcome!");
}
function closeHandle(){
alert("goodbye");
}
</script>
</head>
<body onload="loadHandle();" onunload="closeHandle()">
</body>
</html>注意：onunload在IE中能看出來，但是在谷歌瀏覽器中體現不出來。
2、滑鼠事件：onmousedown（滑鼠按下時觸發）、onmouseenter（滑鼠進入時觸發）、等等一堆
具體處理函式就用上例中的彈窗。
<img src="image/dog.jpg" onmousedown="loadHandle()">3、普通按鈕點選事件：分為單擊、雙擊
按鈕還有submit和reset等type，暫時沒用到。
單擊：<button type="button" onclick="loadHandle()">按我鴨</button>
雙擊：<button type="button" ondblclick="loadHandle()" >雙擊我鴨</button>4、令表格在滑鼠經過時變顏色
方法一：靜態的方式——在標籤元素的旁邊直接寫事件對應的函式（實踐中是不推薦這種的）
<head>
<meta charset="UTF-8">
<title>滑鼠經過變色</title>
<script>
function changeColor(obj,color){
obj.bgColor=color;
}
</script>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="0" bgcolor="F2F2F2">
<tr onmousemove="changeColor(this,'white')" onmouseout="changeColor(this,'#F2F2F2')">
<td>部門編號</td>
<td>部門名稱</td>
<td>部門主管</td>
</tr>
<tr onmousemove="changeColor(this,'#FFFFFF')">
<td>10</td>
<td>技術部</td>
<td>黑黑</td>
</tr>
<tr onmousemove="changeColor(this,'#FFFFFF')">
<td>20</td>
<td>美工部</td>
<td>樂樂</td>
</tr>
</table>
方法二：動態的方式——與標籤元素的id繫結，在函式中響應該元素的事件，為元素寫上唯一的id 值是核心所在！！
script部分的程式碼：
window.onload=function(){ //這是一個匿名函式
<!--loadHandle();-->
var imageElement=document.getElementById("image1"); //取得元素物件(不能有多餘的空格，會報錯)
imageElement.addEventListener("click",loadHandle,false); //觸發型別（去掉on）、處理函式名稱、觸發時機（一般設定為false，表示在事件的觸發過程進行處理，阻止事件冒泡）
}5、例子：圖片瀏覽器
html部分：
<img id="imgShow" src="jsList/image/dog.jpg" height="400">
<div>
<button id="preImg">上一張</button>
<button id="nextImg">下一張</button>
</div>script部分：
window.onload=function(){ //這是一個匿名函式
var preBut=document.getElementById("preImg");
var nextBut=document.getElementById("nextImg");
var imgEle=document.getElementById("imgShow");
preBut.addEventListener("click",function(){
if(foot<=0){
foot=imgName.length-1;
}
imgEle.src="jsList/image/"+imgName[foot--];
},false);
nextBut.addEventListener("click",function(){
if(foot>=imgName.length){
foot=0;
}
imgEle.src="jsList/image/"+imgName[foot++];
},false);
}6、例子改進：圖片定時播放瀏覽器—— setTimeout( )
html部分：
<span id="info">
<img id="imgShow" src="jsList/image/dog.jpg" height="400">
</span>script部分：
var imgName=new Array("dog.jpg","dog2.jpg","dog3.jpg","pig.jpg");
var foot=0;
function setPic(){
var imgEle=document.getElementById("imgShow");
imgEle.src="jsList/image/"+imgName[foot++];
if(foot>=imgName.length){
foot=0;
}
setTimeout(setPic,1000); //每隔一秒更新一次
}
setPic();