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

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