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="修改" ο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:

 

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

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值