moshuchao的专栏

.net 学习园地 人过留名 雁过留声,请留下你的看法和想法

Javascript学习笔记

 

<html>
    
<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()" />&nbsp;&nbsp;</td>
            
</tr>
        
</table>
    
</body>
</html>

         虽然,学习asp.net 有几个月了,但对Javascript(以下简为js)还是一点不懂,还苦于不知如何学起。很东西能看得懂,但自己无法控制并运用或者运用起来,不是这里出错就是那里不对。前些日子得益于一位高手指点一下。现把学习经验写下就,以免以后查阅,也可以为那些刚学习js的朋友做个参考。

         首先,要确定一个目标,就是要做些什么?

         那就从简单的东西做起,做一个登录页面。然后做一个用户管理的页面吧。这里考虑的是学习Js,所以就没有写后台的数据库及管理代码,全部在客户端实现。

        第一步,做一个登录的页。

 

<html>
    
<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>

      里面放一个表格,用于定位,一个用户代码输入框,一个密码输入框,一个登录按钮。

具体的登录代码如下:

 

 

function logon(){
    
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)。下面来做用户管理的面面。

<html>
    
<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()"/>&nbsp;&nbsp;</td>
            
</tr>
        
</table>
    
</body>
</html>

这个也有一个table,一个修改按钮,一个删除按钮。一个增加按钮。且体的JS代码如下:

 

 

//add accout
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);
}

然后就做一个增加用户的页面。

 

<html>
    
<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()" />&nbsp;&nbsp;</td>
            
</tr>
        
</table>
    
</body>
</html>

下在是add()

 

function 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="修改" onclick="openEdit()" >");
    var oNewNode = document.createElement("LI");

    
var btnTd = row.insertCell();
    btnTd.innerHTML 
= "<input type="button" value="修改" onclick="openEdit()" >";
    btnTd.innerHTML 
+= " <input type="button" value="删除" onclick="deleteUser(this)" >"
    
    window.close();
}

下面是Edit:

 

<html>
 
<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()" />&nbsp;&nbsp;</td>
   
</tr>
  
</table>
 
</body>
</html>



相应的JS:

 

function editLoad(){
    
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页面。上面有注解。这里就不具体的说了。

这样就完成一个登录,用户管理功能了。虽然简单,但是内容还是有一定的参考学习价值。

 

 

 

阅读更多
个人分类: asp.net
想对作者说点什么? 我来说一句

javascript 学习笔记

2009年04月21日 40KB 下载

JavaScript学习笔记

2011年11月13日 272KB 下载

个人Javascript学习笔记 精华版

2009年05月27日 71KB 下载

js 笔记 javascript 学习笔记

2011年11月28日 3KB 下载

没有更多推荐了,返回首页

不良信息举报

Javascript学习笔记

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭