Re: [问题] JavaScript存取表单资料

楼主: mrbigmouth (大嘴先生)   2014-03-24 10:09:51
※ 引述《tingmeow (喵东喵西)》之铭言:
: 看O'REILLY的书 JavaScript深入浅出有点看不懂
: 在这一页 p.293
: 存取表单资料
: 为了取用输入表单的资料,首先需要区分表单中每个字段。这点可利用HTML
: 码的id或name属性(或两者并用)处理。
: <input id="zipcode" name="zipcode" type="text" size="5">
: 表单字段具有两种识别方式的原因,均与取用表单单位的途径有关
: 第一种途径使用getElementById()--可取用网页上任何组件的函式。
: 这个方式没问题,但还有更简单、更针对表单设计的途径。
: 每个表单字段都有一个form物件,可被传给任何验证表单资料的函式。
: <input id="zipcode" name="zipcode" type="text" size="5"
: onclick="showIt(this.form)">
直接在html tag上写onclick、onmousedown等标签事件时
浏览器会将""内的javascript程式以类似eval的方式执行
但此scope内的this不再是指向global物件(window)
而是该tag所代表的元素本身
以上面的语法为例,当使用者点击该input的时候
相当于执行下面的程式码
<script>
showIt(document.getElementById('zipcode').form);
</script>
而几乎所有表单元素,都具有form属性,指向其属于的form元素
因此上面的程式码可以翻译成:
 [这里有一个input元素]:
    点击我的时候,请执行global物件底下的shotIt函式,
    并将我的上层form元素当成函数参数传过去。
: form物件励害的地方,在于它也是个阵列,负责储存表单中所有字段
: 但它的阵列元素并非利用数值索引储存;而是使用字段独有、于name
: 属性设定的识别字。假设form物件以引数theForm为名,传给某个函式,
: 则输入邮递区号字段(ZIP code)的值将以下列方式存取:
: function showIt(theForm) {
: alert(theForm["zipcode"].value);
: }
上面的程式码则可以翻译成:
 [我在这里(global)注册一个名叫shotIt的function(函式)]:
   我假设有人叫我的时候会顺便丢给我一个名叫theForm的变量,
   而且我假设theForm这个变量会是一个物件,
   (如果你没丢给我theForm或你丢给我的theForm不是物件我就爆炸给你看)
   每次有人叫我的时候,我就会去读theForm这个变量的zipcode属性
   我再次假设theForm的zipcode属性也是一个物件,
   (如果theForm的zipcode属性里没东西或不是一个物件我也爆炸给你看)
   然后去读theForm的zipcode的value属性,再alert出来
嗯,翻译完毕,
如果你看得懂的话,看到上面有这么多会爆炸的情况,
就该知道这段程式码不是一个好程式码 XD
等你对javascript有基本认知之后,
请去试着了解Unobtrusive JavaScript,
不然一但开始实作大型专案,就得小心程式天天爆炸给你看了 XD
http://kewang.pixnet.net/blog/post/24177235
:
作者: GoalBased (Artificail Intelligence)   2014-03-24 18:35:00
推推 Unobtrusive JavaScript可是我想问一下 这样会有效率上的差异吗?
楼主: mrbigmouth (大嘴先生)   2014-03-25 11:25:00
如果你说的是performance,那应该没有太大差异主要是为了coding上的debug/变量占用问题等
作者: tingmeow (雪炉喵)   2014-03-26 14:44:00
感激感激,虽然乍看下还看不太懂,慢慢消化中,谢谢指点

Links booklink

Contact Us: admin [ a t ] ucptt.com