正確的外部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是你的朋友！