php - 外部 JavaScript 文件的正确语法

Question

这是一个相当长的文件，但由于我无法隔离其中的问题，所以我别无选择，只能将其完整包含在内。

实际文件中提到的问题是有两个主要部分，一个涉及几个函数的“Canvas 绘图技术”，以及一个验证部分。我根本无法让它们都在同一个 JS 文件中工作，尽管说实话，我最终可能会将它们分开，但我仍然想知道我在哪里犯了错误。

我已经翻阅了无数页的 javascript 函数语法教程。 http://www.w3schools.com/js/js_functions.asp等等

并不是说我认为这很重要，但该文件是“script.php”，以便我的网络服务器能够识别，这样我就可以更轻松地提取 PHP 变量以在 Canvas 绘制中使用。再次感谢您的所有帮助。

编辑:最后，有人可以推荐一个好的 IDE 来在脚本语言/Javascript 中完成这样的工作，它会通知我简单的语法错误吗？

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

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

发生这样的事情时是否需要 else ？我认为如果“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，它也为 true。

你想要的是:

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

但这可能不是导致您所看到的问题的原因，因为即使在语义上错误，它在语法上也是正确的。抱歉，这并不是您问题的真正答案，但它太长了，无法合理地写为评论。

编辑:有一点更接近答案:代码中最后一个语句之前缺少一个分号。

编辑2:此外，某些浏览器不喜欢在数组声明结束之前添加最后的逗号。无论如何，当我只是在编码时，我通常会这样做，但是与我一起工作的一个人(他比我做的 JavaScript 多得多)总是坚持要求我在出现问题时清理它们，以防与原因有关。