正确的外部JavaScript文件的语法

Question

这是一个相当长的文件，但看到我无法隔离其中的问题，我别无选择，只能将其包含在其中。

在实际文件中提到的问题是，有两个主要部分，一个涉及一对函数的“画布绘制技术”以及一个验证部分。我根本无法让他们都在同一个JS文件中工作，虽然老实说，我很可能最终将他们分开，我仍然想知道我在哪里犯我的错误。

我倒过无数页的JavaScript函数sytax教程。 http://www.w3schools.com/js/js_functions.asp等

不是我认为它很重要，但该文件是“script.php”，以便被我的网络服务器识别，所以我可以更容易地拉动PHP变量以用于画布绘制。再次感谢所有的帮助。

编辑：最后，任何人都可以推荐一个好的IDE做这样的工作在脚本语言/ JavaScript，会告诉我简单的语法错误吗？

编辑2：控制台消息说...

canvas is null 
[Break On This Error] if (canvas.getContext){ 

是，当这样的事情正在发生的其他要求？我认为如果“registeredUsers”那么canvas = null，它将IF设置为false，并且它应该在IF条件内跳过所有内容。

$(document).ready(function(){ 

    <?php 
    include '../functions.php'; 
    PrintRecentRegistrations(); 
    // this merely prints three variables as follows. 
    //var oneWeek = 0; 
    //var oneMonth = 1; 
    //var oneDay = 1; 
    ?> 

    var base = 141; 
    var top = 0; 

    function GetRelativeSize(a) 
    { 
     if (a <= 10) 
     { 
     a = a * 2; 
     a = 140-a; 
     return a; 
     } 
     if (10 < a <= 50) 
     { 
     a = 40 + a; 
     a = 140-a; 
     return a; 
     } 
     else 
     { 
     a = 40 + a * .8; 
     a = 140-a; 
     return a; 
     } 
    } 

    /***** If I comment out this canvas work, the Validation below works. 
    If I don't, the canvase works but the Validation doesn't. ******/ 
    var canvas = document.getElementById("registeredUsers"); 
    if (canvas.getContext){ 
     var ctx = canvas.getContext("2d"); 

     var img = new Image(); 
     img.onload = function() { 
     ctx.drawImage(img, 0, 0); 

     ctx.beginPath(); 
     ctx.moveTo(52, base); 
     ctx.lineTo(52, GetRelativeSize(oneDay)); 
     ctx.lineTo(82, GetRelativeSize(oneDay)); 
     ctx.lineTo(82, base); 

     ctx.moveTo(112, base); 
     ctx.lineTo(112, GetRelativeSize(oneWeek)); 
     ctx.lineTo(142, GetRelativeSize(oneWeek)); 
     ctx.lineTo(142, base); 

     ctx.moveTo(172, base); 
     ctx.lineTo(172, GetRelativeSize(oneMonth)); 
     ctx.lineTo(202, GetRelativeSize(oneMonth)); 
     ctx.lineTo(202, base); 

     ctx.fillStyle = "#00FF00"; 
     ctx.fill(); 
     ctx.stroke(); 
     } 
     img.src = "/img/chart-background.png"; 
    }; 

    $('#started-raining').delay(16500).fadeOut('slow', function() { 
    $('#finished-raining').fadeIn('slow'); 
    }) 

$(':input:visible:enabled:first').focus(); 

// validate signup form on keyup and submit 
$("#signupForm").validate({ 
    rules: { 
     firstname: { 
      required: true, 
      minlength: 3 
     }, 
     tosagree: { 
      required: true, 
     }, 
     lastname: { 
      required: true, 
      minlength: 3 
     }, 
     username: { 
      required: true, 
      minlength: 5 
     }, 
     password: { 
      required: true, 
      minlength: 5 
     }, 
     phonenumber: { 
      required: true, 
      minlength: 10 
     }, 
     confirm_password: { 
      required: true, 
      minlength: 5, 
      equalTo: "#password" 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     topic: { 
      required: "#newsletter:checked", 
      minlength: 2 
     }, 
     agree: "required" 
    }, 
    messages: { 
     firstname: { 
      required: "Required", 
      minlength: "3 Characters Minimum" 
     }, 
     phonenumber: { 
      required: "Required", 
      minlength: "10 digit numbers only" 
     }, 
     lastname: { 
      required: "Required", 
      minlength: "3 Characters Minimum" 
     }, 
     tosagree: { 
      required: "Resistance is futile", 
     }, 
     username: { 
      required: "Required", 
      minlength: "5 Characters Minimum" 
     }, 
     password: { 
      required: "Please provide a password", 
      minlength: "5 Characters Minimum" 
     }, 
     confirm_password: { 
      required: "Please provide a password", 
      minlength: "5 Characters Minimum", 
      equalTo: "Does not match" 
     }, 
     email: "Invalid E-mail", 
    } 
}) 

// propose username by combining first- and lastname 
$("#username").focus(function() { 
    var firstname = $("#firstname").val(); 
    var lastname = $("#lastname").val(); 
    if(firstname && lastname && !this.value) { 
     this.value = firstname + "." + lastname; 
    } 
    }); 
}); 

Answer 1

一个东西棒，出来，这是错误的：

if (10 < a <= 50) 

这句法很好，但使用Javascript将其解释是这样的：

((10 < a) <= 50) 

第一个表达式为1或0 ，它总是小于50，所以即使a小于10也是如此。

你想要的是：

if (10 < a && a <= 50) 

这可能不是什么导致你所看到的问题，不过，因为它的语法正确，即使它的语义错误。对不起，这不是你的问题的答案，但是合理编写评论太长了。

编辑：更接近答案的一件事：你刚刚在代码中的最后一条语句之前丢失了一个分号。编辑2：另外，有些浏览器不喜欢在数组声明结束之前的最终逗号。无论如何，当我只是在编写代码时，我通常会这样做，但是我工作的一个人（他的Javascript比我做的要多得多）始终坚持我会在有些事情没有正确工作时清除它们，以防与事件相关。

Answer 2

JavaScript中的所有内容都是全局的，只有函数内部有闭包。因此，导入脚本将使您可以访问这些脚本中的变量，函数等。

在脚本之间或相同的脚本中使用任何东西都不应该有问题，除非您将函数中的变量括起来。

请注意，如果您在脚本中使用相同的变量名（除非它们在函数内部），这可能会导致变量冲突。

就IDE而言，为什么不直接使用您的Web浏览器和Web检查器。如果您使用Firefox，请下载名为firebug的插件。 Chrome和我相信Safari已经建立了检查员。网络检查员是网络开发的必备工具。它允许你查看DOM中的每个元素，所有资源，脚本，cookies，并且它们也有一个控制台。控制台会为您提供语法错误输出，DOM异常和其他错误。你也可以使用JSLint，这是一个非常挑剔的语法检查器。

Answer 3

您的代码中将会停止逗号，以阻止某些浏览器。

required: "Resistance is futile", <-- trailing comma 
email: "Invalid E-mail", <-- trailing comma. 

此外，你真的可以简化GetRelativeSize所以它没有太多重复的代码！

function GetRelativeSize(a){ 
    if (a <= 10){ 
     var b = a * 2; 
    } 
    else if (a <= 50){ 
     b = 40 + a; 
    } 
    else{ 
     b = 40 + a * .8; 
    } 
    return 140 - b; 
} 

非常干净，小巧！ if/else if/else是你的朋友！