首頁 > 開發者 > JavaScript
前言：隨著工作了幾個月的時間，我感覺到我們在學校學到的東西真的好少哦，由於現在在公司做一個項目，而這個項目中我的角色是後台代碼的編寫，但是我也在是不是的調試JavaScript代碼，雖然老師當年交了我們，但是現在忘的差不多了。所以我抽時間看視頻重新學習了一下JS,這裡是我的學習筆記，希望對我們想要學習JS初級的同學有用，所以我就產生了這個系列。
(1) Dom就是HTML頁面的模型，將每個標籤都作為一個對象，JavaScript通過調用Dom中的屬性，方法就可以對網頁中的文字框，層等元素進行編程式控制制，比如：通過操作文字框的Dom對象，就可以讀取文字框的值，設定文字框中的值。
JavaScript——>Dom就像C#——>.NET FrameWork
(2) Dom也像Winform一樣，通過事件，屬性，方法進行編程。
(3) CSS+JavaScript+Dom=DHTML。
(1) 事件：<body onmousedown=”alert(‘歡迎您’);alert(‘來訪問’);”>當點擊滑鼠的時候執行onmousedown中的代碼，有時候事件響應的代碼太多，就放到單獨的函數中。
<script type="text/javascript">
function bodymousedown() {
alert('歡迎您');
alert('韓迎龍');
}
</script>
<body onmousedown="bodymousedown()">
bodymousedown()後面的括弧不能丟，因為表示調用bodymousedown函數，而不是onmousedown事件的響應函數是bodymousedown。
(1) 可以在代碼中動態設定事件響應函數,就像.NET中的btnClick+=一樣。
<script type="text/javascript">
function trends1() {
alert("動態建立事件1");
}
function trends2() {
alert("動態建立事件2");
}
</script>
<input type="button" value="事件1" onclick="document.ondblclick=trends1" />
<input type="button" value="事件2" onclick="document.ondblclick=trends2" />
注意：trends1,trends2不要加括弧
(1) window對象代表當前瀏覽器視窗，我們在使用window對象的屬性，方法的時候可以省略window,比如：window.alert(‘a‘)可以省略成alert(‘a’)。
(2) alert方法，彈出訊息對話方塊。
(3) confirm方法，顯示”確定”，”取消”對話方塊，如果按了[確定]按鈕，就返回True,否則就返回False。
function ConfirmDemo() {
if (confirm("是否進入")) {
alert("進入");
}
else {
alert("沒進入");
}
}
<input type="button" value="確定" onclick="ConfirmDemo()" />
(4) 重新導航到指定的地址：navigate(“http://www.baidu.com”);
<input type="button" value="navigate" onclick="navigate('http://www.baidu.com')" />
(5) setInterval每隔一段時間執行制定的代碼，第一個參數為代碼的字串，第二個參數為間隔時間（單位毫秒），傳回值為定時器的標識。
function setInterVal() {
setInterval("alert('Hello')", 1000); //注意被執行的代碼必須是字串形式，也
} 可以寫一個匿名函數
<input type="button" value="SetInterVal" onclick="setInterVal()" />
(6) clearInterval取消setInterval的定時執行，相當於timer中的Enable=false，因為setInterval可以設定多個定時，所以clearInterval要指定清除那個定時器的標識，即SetInterval的傳回值。
var intervalId = setInterVal("alert('Hello')", 5000);
clearInterval(intervalId);
var intervalId;
function startInterVal() {
intervalId = setInterVal("alert('Hello')", 10000);
}
<input type="button" value="SetInterVal" onclick="startInterVal()" />
<input type="button" value="停止InterVal" onclick="clearInterval(intervalId)" />
(7) SetTimeout也是定時執行，但是不像setInterval那樣是重複的定時執行，只執行一次，clearTimeout也是清楚定時，很好區分。Interval;間隔，Timeout逾時。
var TimeoutId = setTimeout("alert('Hi')", 1000);‘
(8) 舉例說明
案例1：實現標題列走馬燈效果，也就是瀏覽器標題列文字每隔5000MS向右滾動一下。提示：標題為document.title屬性。
<title>本網站非常歡迎您</title>
<script type="text/javascript">
function scroll() {
var title = document.title; //擷取標題列的值
var firstCh = title.charAt(0); //擷取標題列的第一個字元
var lastStr = title.substring(1, title.length); //擷取標題列剩餘的字元
document.title = lastStr + firstCh;
}
setInterval("scroll()", 500);
</script>
(1) onload:網頁載入完畢時候觸發，瀏覽器是一邊下載文檔，一邊解析執行，可能會出現JavaScript執行時需要操作某個元素，這個元素還沒有載入，如果這樣就要把操作的代碼放到onload事件中，或者可以把JavaScript放到元素之後。
(2) onunload：網頁關閉（或者離開）後觸發。
注釋：元素的onload事件是元素自己載入完畢時觸發，body的onload才是全部載入完成。
例1： 擷取onload改變某個HTML控制項的值
<!--<script type="text/javascript">
btn.value = "OK"; //報錯，因為btn元素還沒有構建
</script>-->
<body onload="btn.value='OK'">
<input type="button" id="btn" value="Yes" />
例2：實驗onunload的實驗
<body onunload="alert('歡迎你下次訪問')">
(3) onbeforeunload：在網頁中準備關閉（或者離開）後觸發，所以在事件中為：”window.event.returnValue”賦值（要顯示的警告資訊），這樣視窗離開(比如前進，後退，關閉，重新整理)就會彈出確認資訊。
<body onbeforeunload="window.event.returnValue='真的要放棄發帖嗎？'">
舉例：當我們關閉瀏覽器的時候會提示資訊，問我們是否離開本頁面
<body onbeforeunload="window.event.returnValue='文章會被丟失'">
<input type="text" /><br />
<textarea cols="20" rows="20"></textarea>
</body>
(4) 除了有特有的屬性之外，當然還有通用的HTML元素的事件，onclick(單擊)，ondbclick(雙擊)，onkeydown（按鍵按下），onkeyPress（點擊按鍵），onkeyUp（按鍵釋放），onmousedown（滑鼠按下），ommousemove（滑鼠移動），onmouseout（滑鼠離開元素範圍），onmouseover（滑鼠移動到元素範圍），onmouseUp（滑鼠按鍵釋放）。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
