有人可以解释这个JavaScript的工作原理吗？

所以我设法把一些JavaScript（来自其他人的帮助）放在一起，这基本上是一个表单，它允许你改变一个项目的数量，并将其值添加到总数，如果其复选框被打勾文本字段在底部）。有人可以解释这个JavaScript的工作原理吗？

我明白其中的一些，它只是让我困惑的更复杂的部分（比如逻辑）。有人可以通过我的代码或者评论我的代码的主要部分，这样可以帮助我理解代码是如何工作的。

<script type="text/javascript"> 
    function bump(which, bywhat) { 
     var form = document.items; 
     var qty = form["qty" + which]; 

     qty.value = Number(qty.value) + bywhat; 
     TotalCheckedValues(); // in case user bumped an already checked line 
    } 

    function TotalCheckedValues() { 
     var form = document.items; 
     var total = 0; 

     for (var n = 1; n <= 4; ++n) 
     { 
      if (form["cb"+n].checked) // if the checkbox of the item is ticked 
      { 
       total += form["cb"+n].value * form["qty"+n].value; // 
      } 
     } 

     form.Total.value = total.toFixed(2); 
    } 

    function validate(evt) { 
     var theEvent = evt || window.event; 
     var key = theEvent.keyCode || theEvent.which; 
     var regex = /[0-9]|\./; 

     key = String.fromCharCode(key); 

     if(!regex.test(key)) { 
      theEvent.returnValue = false; 
      if (theEvent.preventDefault) { 
       theEvent.preventDefault(); 
      } 
     } 
    } 
</script> 

</head> 

<body> 

<form name="items"> 

Item <input type="text" onkeypress='validate(event)'name="qty1" value="0"/> 
<input type="button" onclick="bump(1,1)" value="+"/> 
<input type="button" onclick="bump(1,-1)" value="-"/> 
<input type="checkbox" name="cb1" value="20.00" 
onClick="TotalCheckedValues()" />Service 1 (£20.00) <br /> 

Item <input type="text" onkeypress='validate(event)' name="qty2" value="0"/> 
<input type="button" onclick="bump(2,1)" value="+"/> 
<input type="button" onclick="bump(2,-1)" value="-"/> 
<input type="checkbox" name="cb2" value="20.00" 
onClick="TotalCheckedValues()" />Service 2 (£20.00) <br /> 

Item <input type="text" onkeypress='validate(event)' name="qty3" value="0"/> 
<input type="button" onclick="bump(3,1)" value="+"/> 
<input type="button" onclick="bump(3,-1)" value="-"/> 
<input type="checkbox" name="cb3" value="20.00" 
onClick="TotalCheckedValues()" />Service 3 (£20.00) <br /> 

Item <input type="text" onkeypress='validate(event)' name="qty4" value="0"/> 
<input type="button" onclick="bump(4,1)" value="+"/> 
<input type="button" onclick="bump(4,-1)" value="-"/> 
<input type="checkbox" name="cb4" value="10.00" 
onClick="TotalCheckedValues()" />Service 4 (£10.00) <br /> 

Total: <input type="text" name="Total" readonly size="5" /> 

<input type="reset" name="reset" value="Clear Selected"> 

</form> 

</body> 
</html>

来源

2012-02-15 Mat UK

那么你想解释哪个部分？如果它明智地缩进，它也会更容易。 – 2012-02-15 13:51:27

对不起，我不熟悉使用这个网站，所以在发布时我有点困惑。基本上这三个函数，代码中的“凹凸”部分是我最困惑的部分。 – 2012-02-15 14:00:43

首先，我不知道这是那种javascript中，你应该学习的。但是，我会尽力给你一些提示

有3个功能：validate，bump和TotalCheckedValues

Validate是最容易理解的。请注意每个onkeypress属性中对此函数的调用。调用Validate来验证刚被按下键入输入的键是0到9（包含）还是点。（正则表达式检查）

bump已记录每个项目上的+和 - 按钮的点击次数（以跟踪数量）。它依靠对document.items表格的呼叫，该表格的items以升序排列，并以其名称中的号码（第一项为name="qty1"）标识。该函数将参数指定为项目的索引和增加或减少其值的数量（bump(3,1)用于第3项的+按钮，即：取第3项并将其值加1）。该功能与所述第三功能

TotalCheckedValues一个呼叫结束是否有重新计算的总量（sum(quantity*price)每个项目，如果该复选框被选中用于此项目）。此功能retriver的项目，重复这些，如果选中该复选框检查，如果是，采取价格和数量，繁殖它们，并将它们添加到总

来源

2012-02-15 14:11:46 Grooveek

// Also going to be cleaning up the code a little - no offense, I'm just anal 
// One more note: I'll be specifying types in my function documentation - but remember 
// that JS doesn't really *do* types 


/** 
* Grab a quantity and increase it by a given value 
* @param int which Number of the field to target (comes out as 'qty1/2/3/4/etc') 
* @param int bywhat Number to increase the value found with 'which' by 
*/ 
function bump(which, bywhat) { 
    // Find the form child named 'qtyn', where n is a number 
    // Notice only one var definition here - no need to define form if 
    // you can just get to your target element/attribute/etc. 
    var qty = document.items['qty' + which].value; 

    qty = Number(qty) + bywhat; // Add bywhat to the form value 
    TotalCheckedValues(); // in case user bumped an already checked line 
} 

/** 
* Iterate through all check boxes (cb) on the form and multiply quantities (qty) 
* against values on checked boxes. 
*/ 
function TotalCheckedValues() { 
    // Some consider it best practice to put all vars in the top of the method, 
    // in a comma-separated list using one "var" keyword. 
    var form = document.items, 
     total = 0, 
     checkbox = null, 
     n = 1; 

    for(n; n <= 4; ++n) 
    { 
     checkbox = "cb"+n; // make your code easier to read 
     if(form[checkbox].checked) // if the checkbox of the item is ticked 
     { 
      // If the checkbox is checked, multiply it's value to that of each qty field 
      total += form[checkbox].value * form["qty"+n].value; 
     } 
    } 

    form.Total.value = total.toFixed(2); // Shorten 'total' to 2 decimal places 
} 

/** 
* Test for a valid key 
* @param event evt The key-related event 
*/ 
function validate(evt) { 
    /* 
    * In javascript, the OR operator || is used as a way of setting defaults. So, 
    * keep trying values until one that's considered "true" is found: 
    * var something = false; 
    * var foo = null; 
    * var bar = 'abc'; 
    * var which = something || foo || bar; // value of 'which' is 'abc' 
    */ 
    var theEvent = evt || window.event, 
     key = theEvent.keyCode || theEvent.which, 
     regex = /[0-9]|\./; // Regex that matches 0-9 and '.' 

    key = String.fromCharCode(key); // Convert from key code to something usable 

    // I almost think you could do... 
    // var ... key = String.fromCharCode(theEvent.keyCode || theEvent.which) 
    // but I'm not sure. 

    // If our key event's code doesn't pass our regex test 
    if(!regex.test(key)) { 
     theEvent.returnValue = false; 

     if(theEvent.preventDefault) 
      theEvent.preventDefault(); 
    } 
}

其他一些建议

一些其它指针我想与大家分享，也许只是一些建议考虑：

依靠硬编码的限制（在对TotalCheckedValues循环“4”（））使你的代码少重用。相反，你应该遍历所有匹配的子节点到父节点。有了jQuery，它就像$('#MyFormId input[type="checkbox"]).each(...)这使得代码更加灵活，并且不需要仅仅因为添加了另一个复选框而进行更新。
在您的表单元素上使用ID来使选择更明显 - 依靠文档[名称]是好的，但可能无法在任何地方播放。
其中，bywhat，EVT - 变量名是伟大的，因为他们可以是任何东西，所以决定要打电话给你的变量时，记住这一点。描述性名称1）帮助您记住当您在2个月后回到代码时发生的情况，以及2）帮助任何必须通过您的代码（无论出于何种原因）了解正在发生的事情的人。
一致性是关键：你的函数名在风格混合：bumb VS TotalCheckedValues VS 验证 - 你应该选择适合您的代码的一种方式，并坚持下去。
如果你真的想要挑剔你的代码并让你哭泣，请访问JSLint。但只是阅读“JSLint如何工作？”关于如何以及为什么他们挑选代码的某些部分可能对于学习Javascript和JS的一些最佳实践©有价值。

来源

2012-02-15 14:17:40 phatskat

注意：我通过写这个得到了大约一半的时间，并且发现人们已经回答 - 对任何重复都道歉，但我想完成我开始的任务！

1. '凸点' 功能

该函数接受两个参数：

'其中' 是一个数字，这有助于识别特定文本字段。
'bywhat'是一个数字，表示该字段的数量增加/减少的数量 - 或使用此处使用的术语 - “颠簸”。

var form = document.items;

该函数首先获取全局文档对象中的所有项目，您可以从任意位置访问该项目。

var qty = form ['qty'+ which];

此代码然后尝试该阵列，其具有“数量”的名称在访问特定项加其中参数。当你在这种情况下使用'+'运算符时，你要向一个数字（，其中）添加一个字符串（'qty'），你最终会得到一个字符串;例如'qty3'。

qty.value = Number（qty.value）+ bywhat;

的“的值数量+ 其中”输入元件然后被设置，通过取当前值，将其转换为一个数字，然后加入bywhat参数到它。在这种情况下，当您使用'+'运算符时，您需要在数字中添加数字，然后执行数学计算;例如1 + 2 = 3.

TotalCheckedValues（）;

然后代码调用TotalCheckedValues函数，该函数似乎计算总数（我们将在下面介绍）。

2。'TotalCheckedValues'函数

该函数在每个'bump'函数调用之后调用，每调用一个复选框也被调用/取消选中。

var form = document.items;

功能再次得到一个数组的所有全球文档对象的项目，你可以从任何地方访问的开始。

var total = 0;

然后，该函数定义了一个“总”变量，它被设置为零。

的“for”循环

该代码随后循环四次，一次用于每个HTML中的输入/按钮/复选框组。它会尝试获取每个组的复选框元素，然后检查该复选框是否被选中。如果是，则复选框值（这是价格）乘以文本字段的数量值，并添加到“总计”变量。 '+ ='操作符在此将右侧的值添加到现有值，而不是覆盖现有值。

form.Total.value = total.toFixed（2）;

然后函数尝试在document.items数组中使用名称'Total'查找元素，使用点符号而不是您之前见过的括号符号（例如form ['qty']）。该元素的值使用上面for循环生成的总数来设置。的toFixed（2）函数可以在数字被用来返回与小数位的给定数目的数目的字符串表示 - 在这种情况下，2。

3.“验证”功能

var theEvent = evt || window.event;

创建包含已提出的事件对象的变量。它检查传入的evt参数是否有事件对象 - 如果它为空或未定义，则使用window.event事件对象。

var key = theEvent.keyCode || theEvent.which;

试图确定按下哪个键来触发变量的事件，并将其存储。

var regex = /[0-9]|./;

定义正则表达式模式，这将这些值匹配0到9，和点的字符。

key = String.fromCharCode（key）;

尝试检索关键，这...

如果（！正则表达式的字符串。测试（密钥））

...然后针对正则表达式进行测试。如果test（）函数匹配模式，则返回true;如果不匹配，则返回false。如果正则表达式匹配失败，则运行此'if'语句中的其余代码;它为事件设置一个返回值，并在不停止向其他侦听器传播事件的情况下取消事件（preventDefault）。

希望JavaScript功能的演练有所帮助！

来源

2012-02-15 14:44:35

有人可以解释这个JavaScript的工作原理吗？

回答

相关问题