靜態網頁怎樣實現動態交互?-JavaScript
阿新 • • 發佈：2017-07-18
middle doc 處理機制 用途 net 數據 alignment name 硬盤
在Html基礎上，javascript能夠開發交互式web網頁。javascript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系，javascript短小精悍，又是在客戶機上執行的。大大提高了網頁的瀏覽速度和交互能力。同一時候它又是專門為制作web網頁而量身定做的一種簡單的編程語言。
- Javascript:一種腳本語言(scripting language),或稱描寫敘述性語言。
- 主要用途在表單驗證：大多數是通過彈出對話框來與用戶交互的
- 在程序執行過程中逐行地進行解釋，是一種解釋性語言。
- 解釋性語言：邊執行,邊編譯
- 編譯性語言：借助之前的運行過程以增強當次運行的效率
- 基於對象的語言：javascript是一種基於對象的語言，同一時候也能夠看做一種面向對象的語言。這意味著它能運用自己已經創建的對象。
因此，很多功能能夠來自於腳本環境中對象的方法與腳本的相互作用
- 變量類型是弱類型，並未使用嚴格的數據類型
- javascript是一種安全性語言。它不同意訪問本地硬盤，並不能數據存數到server上。不同意對網絡文檔進行改動和刪除，僅僅能通過瀏覽器實現信息瀏覽或動態交互。從而有效防止數據的丟失。
- javascript是依賴於瀏覽器本身，與操作環境無關。僅僅要能執行瀏覽器的計算機，並支持javascript的瀏覽器就能夠正確執行
- javascript的兩大機制：面向對象，事件處理機制。
舉一個Javascript的小樣例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>博客小樣例</title> <style type="text/css"> #btnLogin, #btnExit{ width:70px; height:30px; font-family:幼圓; font-weight:bold; font-size:18px; } #form1 p strong { font-family: "幼圓"; font-size:18px; } #txtUserPwd, #txtUserName { width:200px; height:25px; font-family:幼圓; font:bold; font-size:18px;} #usermessagee { border-width:0px;} #form1 { alignment-adjust:middle; } </style> </head> <body> <center> <form id="form1" name="form1" method="post" action="http://blog.csdn.net/tgbsqliuying" > <p><strong>用戶名：</strong> <input type="text" name="txtUserName" id="txtUserName" /> </p> <p><strong> 密 碼：</strong> <input type="text" name="txtUserPwd" id="txtUserPwd" /> </p> <p> //利用onclick實現事件驅動 <input type="button" name="btnLogin" id="btnLogin" value="登陸" onclick="LogIn()"/> </p> </form> </center> </body> </html> <script language="javascript" type="text/javascript"> function LogIn() { //順序結構（用keywordvar聲明keyword，說明javascript是弱數據類型） var username=document.form1.txtUserName.value; var userpwd=document.form1.txtUserPwd.value; if(username==""||username=="")//選擇結構 { alert("用戶名不能為空。"); document.form1.txtUserName.focus(); return; } //利用正則表達式推斷輸入的用戶名是否正確 var reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g; if(!reg.test(username)) { alert("用戶名格式不對。請從新輸入"); return; } if (userpwd==""||username=="") { alert("password不能為空！"); document.form1.txtUserPwd.focus(); return; } //利用正則表達式推斷輸入的password是否正確 reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g; if(!reg.test(userpwd)) { alert("password格式不對！請從新輸入"); return; } document.form1.submit(); } </script>
相信以後的學習會對Javascript有更深的理解
靜態網頁怎樣實現動態交互?-JavaScript