Правильный синтаксис для внешних файлов JavaScript - PullRequest
0 голосов
/ 01 сентября 2011

Это довольно длинный файл, но, поскольку я не могу выделить проблему внутри него, у меня нет иного выбора, кроме как включить его целиком.

Проблема, о которой говорилось в настоящем файле, состоит в том, что есть две основные части: «Техника рисования на холсте», включающая пару функций, а также часть проверки. Я просто не могу заставить их обоих работать внутри одного и того же файла JS, хотя, честно говоря, вполне вероятно, что в итоге я их разделю, и мне все равно хотелось бы знать, где я делаю свою ошибку.

Я пролил бесчисленные страницы учебников по синтаксису функций JavaScript. 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){ 

требуется ли еще, когда происходит что-то подобное? я бы подумал, что если «selectedUsers», то 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;
    }
    });
});

Ответы [ 3 ]

2 голосов
/ 01 сентября 2011

Одна вещь торчит, это неправильно:

if (10 < a <= 50)

Это синтаксически хорошо, но Javascript интерпретирует это так:

((10 < a) <= 50)

Первое выражение будет 1 или 0, которое всегда будет меньше 50, поэтому оно будет истинным, даже если a меньше 10.

То, что вы хотите:

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

Это, вероятно, не то, что вызывает проблему, которую вы видите, хотя, потому что это синтаксически правильно, даже если это семантически неправильно. Извините, это не совсем ответ на ваш вопрос, но это было слишком долго, чтобы разумно написать в качестве комментария.

РЕДАКТИРОВАТЬ: Одна вещь, которая ближе к ответу: вы пропустите точку с запятой перед последним утверждением в вашем коде.

РЕДАКТИРОВАТЬ 2: Кроме того, некоторые браузеры не любят заключительную запятую до конца объявления массива. Я обычно делаю это в любом случае, когда просто кодирую, но парень, с которым я работаю (который делает гораздо больше Javascript, чем я), всегда настаивает, чтобы я убирал их всякий раз, когда что-то не работает, на случай, если это связано с причиной.

1 голос
/ 01 сентября 2011

В вашем коде запятые запятые, которые останавливают некоторые браузеры.

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 ваш друг!

0 голосов
/ 01 сентября 2011

Все в JavaScript является глобальным, единственное замыкание - внутри функций.Поэтому импорт скрипта предоставит вам доступ к переменным, функциям и т. Д. Внутри этих скриптов.

У вас не должно быть проблем с использованием чего-либо между скриптами или внутри тех же скриптов, если вы не заключаете свои переменные в функции.

Обратите внимание, что это может привести к конфликтам переменных, если вы используете одинаковые имена переменных в своих скриптах (опять же, если они не внутри функций).

Что касается IDE, то почему бы не простоиспользуйте свой веб-браузер и веб-инспектора.Если вы используете Firefox, загрузите плагин под названием firebug.Chrome и я полагаю, что Safari имеет встроенных инспекторов.Веб-инспектор является обязательным условием для веб-разработки.Он позволяет просматривать каждый элемент в DOM, все ресурсы, сценарии, файлы cookie, а также они имеют консоль.Консоль выдаст сообщение об ошибке для синтаксиса, исключений DOM и других ошибок.Вы также можете использовать что-то под названием JSLint, которое очень требовательно проверяет синтаксис.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...