关闭

Javascript学习笔记

标签: javascriptinputfunctiontablebuttonhtml
736人阅读 评论(0) 收藏 举报
分类:

 

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

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

 

 

 

0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:91595次
    • 积分:1330
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:10篇
    • 译文:0篇
    • 评论:31条
    文章分类
    最新评论