Correct syntax for External JavaScript Files

This is quite a lengthy file, but seeing as I cannot isolate a problem within it I have no choice but to include it in it开发者_StackOverflow社区's entirety.

The problem as mentioned in the actual file is that there are two main portions, a "Canvas drawing technique" involving a couple of functions, and also a validation piece. I simply cannot get them both do work inside the same JS file though honestly it's likely I'll end up splitting them up I'd still like to know where I'm making my mistake.

I've poured over countless pages of javascript function sytax tutorials. http://www.w3schools.com/js/js_functions.asp etc.

Not that I believe it matters, but the file is "script.php" so as to be recognized by my webserver so I can more easily pull PHP variables for use in the canvas draw. Thanks again for all the help.

EDIT: Finally, can anyone recommend a good IDE for doing work like this in Scripting Languages / Javascript that will inform me of simple syntax errors?

EDIT 2 : Console message is saying...

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

is an else required when something like this is happening? i would think that if "registeredUsers" then canvas = null, which sets the IF to false and it simply should SKIP everything inside the IF condition.

$(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;
    }
    });
});

One things sticks, out, this is wrong:

if (10 < a <= 50)

It's syntactically fine, but Javascript interprets it like this:

((10 < a) <= 50)

The first expression will be 1 or 0, which will always be less than 50, so it will be true even if a is less than 10.

What you want is:

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

That's probably not what's causing the problem you're seeing, though, because it's syntactically correct even if it's semantically wrong. Sorry, this isn't really an answer to your question, but it was too long to reasonably write as a comment.

EDIT: One thing that's closer to an answer: you're missing a semicolon just before the last statement in your code.

EDIT 2: Also, some browsers don't like a final comma before the end of an array declaration. I usually do it anyway when I'm just coding away, but a guy I work with (who does a lot more Javascript than I do) always insists I clean those up whenever something's not working right, in case that's related to the cause.

You trailing commas in your code that will stop some browsers.

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

Also you can really simplify GetRelativeSize so it does not have so much repeated code!

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;
}

So much cleaner and smaller! if/else if/else is your friend!

Everything in JavaScript is global with the only closure being inside functions. Therefore importing a script will give you access to variables, functions, etc within those scripts.

You shouldn't have a problem with using anything between scripts or within the same scripts unless you are enclosing your variables within functions.

Note that this can lead to variable collisions if you do use the same variable names inside your scripts (again, unless they are inside functions).

As far as an IDE, why not just use your web browser and a web inspector. If you use Firefox, download a plugin called firebug. Chrome and I believe Safari have built in inspectors. A web inspector is a must for web development. It allows you to view every element in DOM, all resources, scripts, cookies, and they also have a console. The console will give you an error output for syntax, DOM exceptions, and other errors. You could also use something called JSLint, which is a very picky syntax checker.