javascript学习历程

来源：互联网发布：java 毫秒编辑：程序博客网时间：2024/06/06 01:33

一直做后台开发的我，一直觉得WEB前端开发很神秘，便打算花上一个月业余时间学习了Node.js和Javascript。至于为什么选择Node.js，主要是考虑到Node.js是服务器端的Javascript脚本语言，这对于我一个对浏览器客户端开发毫无经验的人来说，学习更容易些，不需要再学一门服务器端脚本语言，可以节省学习时间。同时在Node启动的很短时间内，社区就已经贡献了大量的扩展库（模块）。其中很多是连接数据库或是其他软件的驱动，这也可以节省开发成本。

这里我想和大家分享一下我零基础学Javascript的学习历程。

一. 初探Javascript

· 下面是w3cschool提供的关于javascript和html学习链接，很通俗易懂，可以先浏览一遍。

http://www.w3school.com.cn/js/index.asp

http://www.w3school.com.cn/html/index.asp

下面网站介绍了OOP(Object oriented programming)和BOM(Browser object model):

http://www.dreamdu.com/javascript/

· 在看node.js的例子时发现有很多类似这样的调用:

     db.query('select * from todo order by finished asc, id asc limit 50', function(err, rows) {        if(err) return next(err);        res.render('index', {todos: rows});    });

这是使用了javascript里面的callback function(回调函数)的概念，我们可以看Client.query()的定义:

Client.prototype.query = function(sql, params, cb){....

其中参数db便是一个回调函数。

网站http://recurial.com/programming/understanding-callback-functions-in-javascript/较好的解释了callback function.

二. 表格控件

· 怎么使用javascript将数据库的某个表呈现给用户呢？带着这个问题，我了解了一些常用的表格控件:

http://recurial.com/programming/understanding-callback-functions-in-javascript/

http://www.hotscripts.com/blog/15-javascript-data-grids-enhance-html-tables/

其中DataTables（http://datatables.net/）是一个常用的表格控件，它基于JQuery.

若要使用DataTables,需要先下载JQuery:D:\Study_2012\jquery\jquery-1.7.1.js, 它只是一个文件，若要使用它，可以将下列语句加入到<head></head>

其中src=<relative location of jquery-1.7.1.js>

然后下载DataTables.然后将下列语句加入到<head></head>

· 下面是使用DataTables的一个例子：

Reference: http://www.codeproject.com/Articles/194916/Enhancing-HTML-tables-using-a-JQuery-DataTables-pl

首先我们定一个一个table:

    <table id="myDataTable" class="display">      <thead>             <tr>                 <th>engine</th>                 <th>browser</th>                 <th>platform</th>                 <th>version</th>                 <th>grade</th>             </tr>      </thead>      <tbody>       </tbody>    </table>

然后我们使用下面DataTables API $('table#myDataTable').dataTable()来初始化这个表格：

    <script type="text/javascript">                $(document).ready(function() {                        $('table#myDataTable').dataTable( {                                bJQueryUI: true,                                sPaginationType: "full_numbers",                                "sAjaxSource": 'arrays.txt',                                "aoColumns": [                                        { "mDataProp": "engine" },                                        { "mDataProp": "browser" },                                        { "mDataProp": "platform" },                                        { "mDataProp": "version" },                                        { "mDataProp": "grade" }                                ]                        } );                } );        </script>

· 然后我学习了如何更好的理解javascript的OOP

http://blog.jobbole.com/11691/

http://killdream.github.com/blog/2011/10/understanding-javascript-oop/

· 是否可以使用DataTables将MongoDb里面的数据以表格的方式展现给用户？

首先MongoDb是使用了BSON, 而DataTables使用了JSON。我感觉很困难。

三. 弹出式窗口

1. 如果弹出式窗口很简单，只是一个提示信息的功能，那么可以使用prompt方法：

var name=prompt( "提示文字 ", "预设值 ");

</script>

2. 如果prompt无法满足您的要求，比如您想要一个能够输入用户名/密码的弹出式窗口，那么可以使用window.open()方法，比如：

window.open ('page.html')

首先您需要先完成page.html, 然后调用window.open().

3. 而通常我们并不使用window.open(), 因为弹出式窗口和父窗口之间的通信很不便。比如在node.js中我们使用ejs作为view engine，如果弹出式的窗口中某个控件也需要ejs传入值进行渲染，使用window.open()是无法实现的。这时可以考虑使用css z-index属性。

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

比如我将弹出式窗口定义于下面form中：

通过style="display:none..."来初始化此form最初不显示，并且定义它的z-index为1，即它如果显示时将显示在最前面。

<style>.assign_user{    position:absolute;    z-index:1;    width:700px;    height:500px;    background-color:blue;}</style>

我们通过一个下面label实现当单击"Assign a New User"时，将弹出显示editform。

<label class='control-label' ><a href="javascript:void(null);" onclick="assign_user_show();">Assign a New User</a></label>

下面方法将修改editform的display为空，即显示editform。

function assign_user_show(){  document.getElementById("editform").style.display="";}

四. 修改HTML中部分页面

1. 如果你想修改HTML中部分页面，但不希望刷新整个页面，可以使用HTML DOM相关技术。

比如我们页面中有下面这个表格，初始时表格里没有任何内容。

<table id="UserListTable" name="UserListTable" class="UserListTable"> <thead>  <tr>   <th class = single-form-content>Username</th>   <th class = single-form-content>First Name</th>   <th class = single-form-content>Last Name</th>  </tr> </thead> <tbody> </tbody></table>

我们可以通过下面的javascript来在上面的表格中增加几行记录。

  for (var i=0; i<selectedList.getLength(); ++i){  var x=document.getElementById("UserListTable").insertRow(1);  var username=x.insertCell(0);  var first_name=x.insertCell(1);  var last_name=x.insertCell(2);  username.innerHTML=selectedList[i].name;  first_name.innerHTML=selectedList[i].first_name;  last_name.innerHTML=selectedList[i].last_name;  }

参考：HTML DOM http://www.w3school.com.cn/htmldom/index.asp

2. 还可以使用AJAX更新部分网页

a) 例子1：

<html><head><script type="text/javascript">function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.open("GET","/ajax/test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button></body></html>

b)例子2

<html><head><script type="text/javascript">var xmlhttp;function loadXMLDoc(url){xmlhttp=null;if (window.XMLHttpRequest)  {// code for IE7, Firefox, Mozilla, etc.  xmlhttp=new XMLHttpRequest();  }else if (window.ActiveXObject)  {// code for IE5, IE6  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }if (xmlhttp!=null)  {  xmlhttp.onreadystatechange=onResponse;  xmlhttp.open("GET",url,true);  xmlhttp.send(null);  }else  {  alert("Your browser does not support XMLHTTP.");  }}function onResponse(){if(xmlhttp.readyState!=4) return;if(xmlhttp.status!=200)  {  alert("Problem retrieving XML data");  return;  }txt="<table border='1'>";x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");for (i=0;i<x.length;i++)  {  txt=txt + "<tr>";  xx=x[i].getElementsByTagName("TITLE");    {    try      {      txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";      }    catch (er)      {      txt=txt + "<td> </td>";      }    }  xx=x[i].getElementsByTagName("ARTIST");    {    try      {      txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";      }    catch (er)      {      txt=txt + "<td> </td>";      }    }  txt=txt + "</tr>";  }txt=txt + "</table>";document.getElementById('copy').innerHTML=txt;}</script></head><body><div id="copy"><button onclick="loadXMLDoc('/example/xmle/cd_catalog.xml')">Get CD info</button></div></body></html>

参考：http://www.w3school.com.cn/ajax/index.asp

五. 通过一个Link实现修改部分页面和提交表单两个功能

目前我是在node.js的server端检查某些字段是否为空，若某个字段为空，将使用类似下面的语句传入所有用户输入的值来渲染页面，即保证用户在页面上已经输入的字段不会丢失：

 if(method == 'post'){  res.render('project/edit', { action:'/project/edit', error:'Incomplete information.', title: 'Edit a Project', project_name: project_name, project_leader: project_leader,  project_desc: project_desc, project_id: project_id, assign_users:assign_users, user_list:user_list}); }

可惜这种方法有些弊端：
1. 需要页面返回所有的需要渲染页面的信息，并且服务器端需向客户端传入所有用户已经输入的信息，并且需要从新刷新整个页面
2. 如果传入的信息是个数组，比如上面例子中的user_list就是一个数组，那么如何使页面返回这个数组，也是个问题，因为它无法像Text控件一样直接返回字符串，它需要返回的是一个数组，而页面是无法返回这个数组的，只能你在页面端将这个数组按照某个格式拼装成一个字符串，比如以'|'分割每个记录。然后服务器端再将这个字符串转换成数组。这种方法显然也比较复杂。

HTML DOM可以在页面端实现修改部分页面，而不需要重新刷新整个页面，它通过onclick="functionCall()"来描述某个link：如下：
<label class='control-label' ><a href="javascript:void(null);" onclick="functionCall();">Save</a></label>

然后我们通过functionCall()来检验字段是否为空，若检验失败，可以设置显示error的label的值为相应的error message。

如果检验成功，我们应该提交post，那么这时我们又需要使用提交表单的功能如下：
<form action='/project/edit' method='post'>
<input type='submit' class='btn' value='Save'/>
</form>

问题是怎么将修改部分页面和提交表单这两个功能统一实现在某个link或者button上呢？
学了AJax,不知道下面的Ajax方法是否可行：

var xml = XMLHttpRequest();xml.open("POST", "url", true);//-------app.jsapp.get('/', routes.index);app.post('/', routes.index);app.get('/page1', routes.page1);app.post('/page1', routes.page1);//-------routes/index.jsexports.index = function(req, res){  var method = req.method.toLowerCase();  if(method == 'get'){ res.render('index', { title: 'Express' });  }  if(method == 'post'){    console.log("In post /");    res.redirect('/page1');  }};exports.page1 = function(req, res){  console.log("In get page1");  res.render('page1', { title: 'page1' });};//-------index.ejs<h1><%= title %></h1><script language="Javascript">function functionCall(){ var project_name = document.getElementById("project_name").value; if(project_name){  var xml = XMLHttpRequest();  xml.open("POST", "/", true);   xml.send(); }else{  document.getElementById("error_message").value = 'Incomplete information';   }}</script><p>Welcome to <%= title %></p> <input class='input-xlarge' id='project_name' name='project_name' size='30' /> <label class='control-label' ><a  id='href_id' onclick="functionCall();">Save</a></label> <input id='error_message' name='error_message'/>//-------page1.ejs<h1><%= title %></h1><p>Welcome to <%= title %></p>

测试的功能是界面上有个输入框，当输入为空时，在屏幕上显示错误消息，如果不为空，则在后台打印一条消息"In post /"，并跳转到page1页面。

测试后发现当输入不为空时，node.js后台打印了下面的消息：
In post /
In get page1
说明node.js尝试了跳转到page1页面，但是页面上却一直hang在"GET http://localhost:3000/page1"，而无法打开页面page1

有个解决方法是在index.ejs的代码'xml.send();'之后添加代码：

function functionCall(){ var project_name = document.getElementById("project_name").value; if(project_name){  var xml = XMLHttpRequest();  xml.open("POST", "/", true);   xml.send();  document.getElementById("href_id").href = '/page1'; }else{  document.getElementById("error_message").value = 'Incomplete information'; }}

经过测试Save链接可以实现修改部分页面和提交表单。现在问题是目前是使用一个输入框显示的error message：
<input id='error_message' name='error_message'/>
我尝试使用Label，可是无法修改内容。

转载本站文章请注明作者和出处:http://blog.csdn.net/crazy_samba ，请勿用于任何商业用途