< title > 增加一个帐号 </ title >
< head >
< script language ="javascript" type ="text/javascript" src ="common.js" ></ script >
</ head >
< body >
< table width ="80%" align ="center" border ="1" >
< tr >
< td > 用户名: </ td >
< td >< input type ="text" name ="user" /></ td >
</ tr >
< tr >
< td > 密码: </ td >
< td >< input type ="password" name ="pw" /></ td >
</ tr >
< tr >
< td colspan ="2" align ="right" >< input type ="button" value ="Add" onclick ="add()" /> </ td >
</ tr >
</ table >
</ body >
</ html >
虽然,学习asp.net 有几个月了,但对Javascript(以下简为js)还是一点不懂,还苦于不知如何学起。很东西能看得懂,但自己无法控制并运用或者运用起来,不是这里出错就是那里不对。前些日子得益于一位高手指点一下。现把学习经验写下就,以免以后查阅,也可以为那些刚学习js的朋友做个参考。
首先,要确定一个目标,就是要做些什么?
那就从简单的东西做起,做一个登录页面。然后做一个用户管理的页面吧。这里考虑的是学习Js,所以就没有写后台的数据库及管理代码,全部在客户端实现。
第一步,做一个登录的页。
< title > javascript test logon page! </ title >
< head >
< script language ="javascript" type ="text/javascript" src ="common.js" ></ script >
</ head >
< body >
< table align ="center" >
< tr >< td height ="150" ></ td ></ tr >
< tr >
< td >
< table align ="center" border ="1" >
< tr >
< td > 用户名: </ td >
< td >< input type ="text" name ="user" /></ td >
</ tr >
< tr >
< td > 密码: </ td >
< td >< input type ="password" name ="pw" /></ td >
</ tr >
< tr >
< td align ="center" colspan ="2" >< input type ="submit" value ="登陆" onclick ="logon()" /></ td >
</ tr >
</ table >
</ td >
</ tr >
</ table >
</ body >
</ html >
里面放一个表格,用于定位,一个用户代码输入框,一个密码输入框,一个登录按钮。
具体的登录代码如下:
var userObj = document.getElementsByName("user")[0];
var pwObj = document.getElementsByName("pw")[0];
if(userObj.value == "")...{
alert("用户名不能为空!");
return;
}
if(userObj.value == "admin" && pwObj.value == "admin")...{
//alert("success!");
window.open("main.html", "_self");
}
else...{
alert("用户名或者密码错误!");
}
}
这里有两个知识点,
1、就是如何取用户输入的用户代码及密码的值。
var userObj = document.getElementsByName("user")[0];
//document.getElementsByName("user"); 是取ID为"user"的页面控件对像,因为它取得的是一个对象数组所以要用下标取得。
这里还可以用:document.getElementsById("user"); //取到的是一个对象(不存在数组,不用带下标)
userObj.value == ""
//userObj.value 取对像的value属性的值。
2、登录成功后如何进行页面跳转。
window.open("main.html", "_self");
//main.html为要跳转的目标地址,"_self"为要本窗口打开,具体的用法可以去查帮助。
这里顺便说一下,因为现在的技术实在太多了,光凭一个人的头脑不可能记下所有的东西,所以我们学东西的时候可以只记有这样的功能,需要这样的功能,可能用什么样的技术实现,而具体的细节,比如各个函数的参数取值及含义,没有必要全部记下来(当然如果有能力的话,全部记下来肯定是最好的),这样只要我们用到的时候就懂得去查帮助,知道什么问题查什么帮助,怎样去查。这样既省心又省力。这里我个人学习的一个方法。
这样就完成了登录面页的设计(当然,这对于真正的登录没有什么实用性,而且密码全放在原文件中,前面已交待,这里意不在安全及具体实现,而在学习JS)。下面来做用户管理的面面。
< title > 帐号管理 </ title >
< head >
< script language ="javascript" type ="text/javascript" src ="common.js" ></ script >
</ head >
< body >
< table id ="users" width ="50%" align ="center" border ="1" >
< tr >
< td > 用户名 </ td >
< td > 密码 </ td >
< td > 操作 </ td >
</ tr >
< tr >
< td > admin </ td >
< td > admin </ td >
< td >
< input type ="button" value ="修改" onclick ="openEdit()" />
< input type ="button" value ="删除" onclick ="deleteUser(this)" />
</ td >
</ tr >
< tr >
< td colspan ="3" align ="right" >< input type ="button" value ="Add" onclick ="openAddWindow()" /> </ td >
</ tr >
</ table >
</ body >
</ html >
这个也有一个table,一个修改按钮,一个删除按钮。一个增加按钮。且体的JS代码如下:
function openAddWindow()... ... {
window.open("add.html", "_blank", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
function openEdit()... ... {
var trObj = event.srcElement.parentElement.parentElement; //行
var index = trObj.rowIndex
var userName = trim(trObj.cells(0).innerText);
var pwd = trim(trObj.cells(1).innerText);
var url = "edit.html?userName="+userName+"&pwd="+pwd + "&index=" + index;
window.open(url, "_blank", "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
function deleteUser(btnDelete)... ... {
var index = btnDelete.parentElement.parentElement.rowIndex;
//alert(index);
var tableObj = document.getElementById("users");
tableObj.deleteRow(index);
}
这段对于如何删除一行表格内容,可以学习:
function deleteUser(btnDelete)......{
var index = btnDelete.parentElement.parentElement.rowIndex;
//alert(index); //这里是调试的时候加入的,可以测试是否到到内容。对于JS的脚本调试alert是很有用的。
var tableObj = document.getElementById("users");
tableObj.deleteRow(index);
}
然后就做一个增加用户的页面。
< title > 增加一个帐号 </ title >
< head >
< script language ="javascript" type ="text/javascript" src ="common.js" ></ script >
</ head >
< body >
< table width ="80%" align ="center" border ="1" >
< tr >
< td > 用户名: </ td >
< td >< input type ="text" name ="user" /></ td >
</ tr >
< tr >
< td > 密码: </ td >
< td >< input type ="password" name ="pw" /></ td >
</ tr >
< tr >
< td colspan ="2" align ="right" >< input type ="button" value ="Add" onclick ="add()" /> </ td >
</ tr >
</ table >
</ body >
</ html >
下在是add()
var userObj = document.getElementsByName("user")[0];
var pwObj = document.getElementsByName("pw")[0];
//check
if(userObj.value == "")...{
alert("用户名不能为空!");
return;
}
if(pwObj.value == "")...{
alert("密码不能为空!");
return;
}
if(pwObj.value.length < 6)...{
alert("密码长度必须大于或者等于6位!");
return;
}
//add to table
//alert(window.opener.document);
var tableObj = window.opener.document.getElementById("users");
//window.alert(tableObj.id);
var row = tableObj.insertRow(1);
var userTd = row.insertCell();
userTd.innerText = userObj.value;
var pwTd = row.insertCell();
pwTd.innerText = pwObj.value;
//var btnEdit = document.createElement("<input type="button" value="修改" οnclick="openEdit()" >");
var oNewNode = document.createElement("LI");
var btnTd = row.insertCell();
btnTd.innerHTML = "<input type="button" value="修改" οnclick="openEdit()" >";
btnTd.innerHTML += " <input type="button" value="删除" οnclick="deleteUser(this)" >"
window.close();
}
下面是Edit:
< title > 修改一个帐号 </ title >
< head >
< script language ="javascript" type ="text/javascript" src ="common.js" ></ script >
</ head >
< body onload ="editLoad()" >
< input type ="hidden" name ="rowIndex" />
< table width ="80%" align ="center" border ="1" >
< tr >
< td > 用户名: </ td >
< td >< input type ="text" name ="user" /></ td >
</ tr >
< tr >
< td > 密码: </ td >
< td >< input type ="password" name ="pw" /></ td >
</ tr >
< tr >
< td colspan ="2" align ="right" >< input type ="button" value ="edit" onclick ="saveEdit()" /> </ td >
</ tr >
</ table >
</ body >
</ html >
相应的JS:
var argvs = new Object();
var argvs = getURLParms();
var userObj = document.getElementsByName("user")[0];
var pwdObj = document.getElementsByName("pw")[0];
var indexObj = document.getElementsByName("rowIndex")[0];
userObj.value = argvs["userName"];
pwdObj.value = argvs["pwd"];
indexObj.value = argvs["index"];
}
function getURLParms()
... {
var argvs = new Object();
var requry = location.search.substring(1);
var pairs = requry.split("&");
for (var i = 0; i < pairs.length; i++)
...{
var pos = pairs[i].indexOf("=");
if (pos == -1)
...{
continue;
}
var argsName = pairs[i].substring(0,pos);
var argsValue = pairs[i].substring(pos+1);
argvs[argsName] = argsValue;
}
return argvs;
}
// javascript去空格函数
function trim(str) ... {
var i;
for(i=str.length-1;i>=0;i--)...{
if(str.charAt(i)!=" ")
break;
}
str = str.substring(0,i+1);
return str;
}
function getURLParms()
... {
var argvs = new Object();
var requry = location.search.substring(1);
var pairs = requry.split("&");
for (var i = 0; i < pairs.length; i++)
...{
var pos = pairs[i].indexOf("=");
if (pos == -1)
...{
continue;
}
var argsName = pairs[i].substring(0,pos);
var argsValue = pairs[i].substring(pos+1);
argvs[argsName] = argsValue;
}
return argvs;
}
// javascript去空格函数
function trim(str) ... {
var i;
for(i=str.length-1;i>=0;i--)...{
if(str.charAt(i)!=" ")
break;
}
str = str.substring(0,i+1);
return str;
}
上面有如果用地址栏传参数及取参数的方法,还是值得去学习的。
还有,就是如何把值再传加main.html页面。上面有注解。这里就不具体的说了。
这样就完成一个登录,用户管理功能了。虽然简单,但是内容还是有一定的参考学习价值。