學習javascript的目的是什麼？當然是爲方便用戶和提升用戶體驗，好的交互性造就瞭如今熱門的前端；現在，我們就開始講解和分析一下javascript中簡單的用戶交互。
1.使用javascript輸出內容
document.write("javascript入門");//輸出內容用雙引號括起來，建議用單引號可以避免很多問題的發生
document.write('I love' + str);//變量加字符串，內容之間用+連接
document.write(str + "<br>");//輸出HTML標籤，並起作用，標籤使用""括起來。該語句的功能是向HTML流中寫內容，也可以理解爲向網頁中輸出內容；
2.三種彈出框的學習
（1）alert-警告消息對話框，在訪問網頁的時候彈出的一個小窗口，上面寫着一段提示文字，如果不點擊確定就不能進行任何操作。
語法:alert(字符串和變量)
key:用於調試程序，其輸出的內容是字符串或變量，與document.write相似
（2）confirm-確認新消息對話框，通常用於允許用戶做選擇操作，包括一個確認按鈕和一個取消按鈕
語法:confirm(str);//str,在對話框中需要選擇的文本；返回值(boolean)，用戶點擊了確認按鈕返回值爲true,否則爲false
key:確認消息對話框具有排他性，在完成當前操作前同樣不允許執行下一步操作
（3）prompt-彈出消息對話框，通常用於詢問一些需要與用戶進行交互的信息（包含一個確認按鈕，輸出按鈕和一個文本輸入框）
語法:prompt(str1,str2);//str1,顯示在消息對話框中的文本,str2,文本框中的內容，返回值，
//點擊取消返回null，點擊確認返回文本輸入框中的內容
key:彈出消息對話框在完全當前操作之前不允許執行下一步操作
3.打開新窗口-用於查找或新建一個瀏覽器窗口，例子如下
window.open('http://www.csdn.net','_top','left=0,top=100,width=600,height=400,menubar=no,toolbar=no,statu=no,scrillbar=yes')語法:window.open([URL],[窗口名稱],[參數字符串]);
URL:可選參數,需要訪問的網址或路徑,如果省略這個參數，或者它的值是空字符串，那麼窗口就不顯示任何文檔。
窗口名稱:可選參數，默認爲_blank
_blank:生成一個新窗口顯示目標網頁
_top:框架網頁中在上部窗口中顯示目標網頁
_self:在當前窗口訪問指定路徑或目標頁面
key：相同 name（URL） 的窗口只能創建一個，要想創建多個窗口則 name（URL） 不能相同;name（URL） 不能包含有空格。
參數字符串:可選參數，設置窗口參數，各參數用逗號隔開。
參數值描述
topNumber窗口頂部離開屏幕頂部的像素數
leftNumber窗口左邊離開屏幕左邊的像素數
widthNumber窗口的寬度
heightNumber窗口的高度
menubaryes,no窗口有沒有菜單
toolbaryes,no窗口有沒有工具欄
scrollbarsyes,no窗口有沒有滾動條
statusyes,no窗口有沒有狀態欄
4.關閉窗口
語法:window.close();
(窗口對象).close();
使用例子如下
<script type="text/javascript">
var index = confirm("確認打開新網頁？");
if(index){
if(confirm("確認關閉當前網頁?")){
var mywin=window.open("http://www.csdn.net","_top");
window.close();
} else {
var mywin=window.open("http://www.csdn.net,"_blink");
}
}
</script>javascript的事件響應機制
使用javascript創建動態頁面的時候,事件是可以被javascript檢測到的,網頁中的每個元素都可以產生某個觸發javascript函數的事件。
具體使用例子
<form>
<input name="點擊我" type="button" value="點擊我" onclick/onload等="函數名()"/>
</form>key:
onload事件會在頁面加載完成後，立即發生，同時執行被調用的程序。
注意：1. 加載頁面時，觸發onload事件，事件寫在<body>標籤內。
2. 此節的加載頁面，可理解爲打開一個新頁面時。
如下代碼,當加載一個新頁面時，彈出對話框“加載中，請稍等…”
①目前試了Firefox、Google Chrome、IE三個瀏覽器，該事件只對IE起作用。
②onunload事件對於刷新頁面和超鏈接跳轉其他頁面情況有效，對於關閉頁面無效。
③onbeforeunload事件，在離開頁面和關閉當前頁面的時候都有效果，顧名思義，就是在onunload被執行之前，就被調用
window.onunload = onunload_message;
function onunload_message(){
alert("您確定離開該網頁嗎？");
}