Question

这是一个非常冗长的文件，但看到我无法隔离其中的问题，我别无选择，只能将其全部包含在内。

实际文件中提到的问题是有两个主要部分，一个涉及几个函数的“Canvas绘图技术”，还有一个验证部分。我只是不能让他们都在同一个JS文件中工作，虽然老实说，我可能最终会将它们分开但我仍然想知道我在哪里弄错了。

我已经倾倒了无数页面的javascript函数sytax教程。 http://www.w3schools.com/js/js_functions.asp等。

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

编辑：最后，任何人都可以推荐一个好的IDE，用于在Scripting Languages / 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

您在代码中尾随逗号，会停止某些浏览器。

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是你的朋友！

Answer 3

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

除非您将变量包含在函数中，否则在脚本之间或相同脚本中使用任何内容都不会有问题。

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

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

正确的外部JavaScript文件的语法

3 个答案: