您當前位置：
首頁 >
互聯網 > 靜態網頁如何實現動態交互?-JavaScript
靜態網頁如何實現動態交互?-JavaScript
來源：程序員人生 發布時間：2014-11-12 08:18:54 閱讀次數：3641次
在Html基礎上，javascript可以開發交互式web網頁。javascript的出現使得網頁和用戶之間實現了1種實時性的、動態的、交互性的關系，javascript短小精悍，又是在客戶機上運行的，大大提高了網頁的閱讀速度和交互能力。同時它又是專門為制作web網頁而量身定做的1種簡單的編程語言。
- Javascript:1種腳本語言(scripting
language),或稱描寫性語言。
- 主要用處在表單驗證：大多數是通過彈出對話框來與用戶交互的
- 在程序運行進程中逐行地進行解釋，是1種解釋性語言，
- 解釋性語言：邊運行,邊編譯
- 編譯性語言：借助之前的履行進程以增強當次履行的效力
- 基于對象的語言：javascript是1種基于對象的語言，同時也能夠看作1種面向對象的語言。這意味著它能應用自己已創建的對象。因此，許多功能可以來自于腳本環境中對象的方法與腳本的相互作用
- 變量類型是弱類型，并未使用嚴格的數據類型
- javascript是1種安全性語言，它不允許訪問本地硬盤，其實不能數據存數到http://www.vxbq.cn/server/上，不允許對網絡文檔進行修改和刪除，只能通過閱讀器實現信息閱讀或動態交互，從而有效避免數據的丟失。
- javascript是依賴于閱讀器本身，與操作環境無關，只要能運行閱讀器的計算機，并支持javascript的閱讀器就能夠正確履行
- javascript的兩大機制：面向對象，事件處理機制。
舉1個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⑻" />
<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()
{
//順序結構（用關鍵字var聲明關鍵字，說明javascript是弱數據類型）
var username=document.form1.txtUserName.value;
var userpwd=document.form1.txtUserPwd.value;
if(username==""||username=="")//選擇結構
{
alert("用戶名不能為空！");
document.form1.txtUserName.focus();
return;
}
//利用http://www.vxbq.cn/help/zz/表達式判斷輸入的用戶名是不是正確
var reg=/^[u4E00-u9FA5uF900-uFA2Dw]+$/g;
if(!reg.test(username))
{
alert("用戶名格式不正確！請重新輸入");
return;
}
if (userpwd==""||username=="")
{
alert("密碼不能為空！");
document.form1.txtUserPwd.focus();
return;
}
//利用http://www.vxbq.cn/help/zz/表達式判斷輸入的密碼是不是正確
reg=/^[u4E00-u9FA5uF900-uFA2Dw]+$/g;
if(!reg.test(userpwd))
{
alert("密碼格式不正確！請重新輸入");
return;
}
document.form1.submit();
}
</script>
相信以后的學習會對Javascript有更深的理解
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
------分隔線----------------------------
------分隔線----------------------------
