Dinge in <script> aufrufen oder JavaScript verwenden?

Ich habe mir viele verschiedene Tutorials angeschaut, um etwas über die Programmierung zu lernen, die ich gemacht habe, und ich habe einen gemeinsamen Unterschied bemerkt. Im Grunde verwenden manche Leute HTML nur zum Schreiben von Skripten, unter Verwendung des Skript-Tags, und manche Leute benutzen JavaScript und verweisen auf das Skript. Mein Problem liegt in zwei Codes. Die erste:Dinge in <script> aufrufen oder JavaScript verwenden?

<!DOCTYPE html> 
<html> 
    <head> 
     <script src='babylon.js'></script> 
     <title>game or some shit</title> 
     <meta charset="utf-8"> 
     <style> 
      .canvas { 
       height: 100%; 
       width: 100%; 
       padding:0; 
       margin:0; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id='gamecanvas'></canvas> 
     <script> 
      var BABYLON; 
      var canvas = document.getElementById('gamecanvas'); 
      var engine = new BABYLON.Engine(canvas, true); 
      var scene = new BABYLON.Scene(engine); 
      var camera = new BABYLON.ArcRotateCamera('camera', 1,2,20, new BABYLON.Vector3(0,0,0), scene); 
      var light = new BABYLON.PointLight('light', new BABYLON.Vector3(0,0,10), scene); 
      var ball = new BABYLON.Mesh.CreateSphere('ball', 10, 1.0, scene); 

      scene.activeCamera.attachControl(canvas); 
      engine.runRenderLoop(function() 
      { 
       scene.render(); 
      }); 
      canvas.height = window.innerHeight; 
      canvas.width = window.innerWidth; 
     </script> 
    </body> 
</html>

Funktionen richtig, aber wenn ich es in einem Skript mit einem externen Skript wie folgt verweisen:

var BABYLON; 
var canvas = document.getElementById('gameCanvas'); 
var engine = new BABYLON.Engine(canvas, true); 
var scene = new BABYLON.Scene(engine); 
var camera = new BABYLON.ArcRotateCamera('camera', 1,2,20, new BABYLON.Vector3(0,0,0), scene); 
var light = new BABYLON.PointLight('light', new BABYLON.Vector3(0,0,10), scene); 
var ball = new BABYLON.Mesh.CreateSphere('ball', 10, 1.0, scene); 

function INIT_GAME() 
{ 
    canvas.height = window.innerHeight; 
    canvas.width = window.innerWidth; 
    scene.activeCamera.attachControl(canvas); 
    engine.runRenderLoop(function() 
    { 
     scene.render(); 
    }); 
}

und nennen Sie es in HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <script src='jquery2.2.2.min.js'></script> 
     <script src='game.js'></script> 
     <script src='jquery.js'></script> 
     <script src='babylon.js'></script> 
     <title>beta af lmaoo</title> 
     <meta charset="utf-8"> 
     <style> 
      .background { 
       position: absolute; 
       height: 100%; 
       width: 100%; 
       top: 0px; 
       left: 0px; 
      } 
      .start { 
       position:absolute; 
       bottom:21%; 
       right:40%; 
      } 
      .canvas { 
       height: 100%; 
       width: 100%; 
       padding:0; 
       margin:0; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id='gameCanvas'></canvas> 
     <menu> 
      <img class='background' src='Images/backgroundImg.jpg'/> 
      <embed src='Audio/backgroundMusic.mp3' autoplay='true' loop='true' width='0' height='0'/> 
      <input class='start' type='image' src='Images/start.jpg' width='275' height='150' onclick='INIT_GAME();'/> 
     </menu> 
    </body> 
</html>

Es spielt keine Funktion nicht. Kann mir jemand sagen, warum das Skript nicht funktionieren wird, wenn ich es extern in eine andere JavaScript-Datei eintippe und es anrufe, aber in Vanilla-HTML? Welche bevorzugen Sie auch zu verwenden? Verwenden Sie <script> besser oder verwenden Sie eine JavaScript-Datei?

Quelle

2016-03-28 Taylor Brown

Sie haben das Problem falsch identifiziert. Dies hat nichts damit zu tun, das Skript von Inline in eine externe Datei zu verschieben.

Sie haben auch (und wichtiger) das Skriptelement von unten gameCanvas nach oben verschoben. Wenn Sie jetzt var canvas = document.getElementById('gamecanvas'); sagen, erhalten Sie null (weil das Element noch nicht existiert).

(Es sieht auch so aus, als hätten Sie es vor babylon.js verschoben, Sie werden also auch einen Fehler haben, weil BABYLON.Engine noch nicht existiert).

Quelle

2016-03-28 22:45:44 Quentin

Um es zu beheben, können Sie den Dateiverweis auf den Körper verschieben. Ich schätze, du könntest warten bis das Dom geladen ist. –

Also, Bestellung ist wichtig. Gut zu wissen. Ich werde das im Hinterkopf behalten –

Um zu erweitern, was @Quentin erwähnt.

<script src='jquery2.2.2.min.js'></script> 
<script src='game.js'></script> 
<script src='jquery.js'></script> 
<script src='babylon.js'></script>

Wo diese Skript-Tags platziert werden, ist wichtig, und auch die Reihenfolge. Wenn sie in "HEAD" sind, werden sie sehr früh im Rendering-Prozess ausgeführt. Ihr HTML wird von oben nach unten gerendert und jedes Skript wird ausgeführt, wenn sie aufgerufen werden. Wenn Sie sich nicht darum kümmern wollen, dass das DOM (alles innerhalb des Tags BODY) nicht bereit ist, sollten Sie alle Script-Tags am Ende Ihres HTML-Codes BODY direkt vor dem Abschluss </body> platzieren. Wenn sie zu diesem Zeitpunkt nicht korrekt funktionieren, stellen Sie sicher, dass sie in Ordnung sind. Von Ihrem ursprünglichen Inhalt ist die obige Liste NICHT korrekt, wie Sie babylon.js vor game.js am wahrscheinlichsten haben müssen.

Auch als Randnotiz: jQuery nicht mehr als einmal importieren, da dies problematisch sein kann.

Quelle

2016-03-28 22:55:04 MattSizzle

Um zu verdeutlichen, habe ich jQuery nicht zweimal importiert, die Datei heißt nur jQuery. Danke für die Information! –

Also ich weiß, es ist keine große Sache, aber namens 'jQuery' würde ich empfehlen, dass in dem Fall Sie Namen AMD-Module einzuführen. – MattSizzle

So lade ich meine JavaScript ...

DER HTML:

Das sind:

<script src="http://js.awwshop.com/render/pub/shkawn/shkawn.js" type="text/javascript"></script>

Der Aufruf:

<body onload="Init.Load();">

der Loader-Klasse

var Init = new function() { 


// POPUP IMAGE SCRIPT 
document.write("<script src='http://js.awwshop.com/render/pub/shared/parse.js' type='text/javascript'></script>"); 
document.write("<script src='http://js.awwshop.com/render/pub/shared/popup-image.js' type='text/javascript'></script>"); 

// GO TO URL SCRIPT 
document.write("<script src='http://js.awwshop.com/render/pub/shared/go-to-url.js' type='text/javascript'></script>"); 


this.Load = function() { 


    PopupImage.LoadPopupImages("http://img.awwshop.com/render/pub/shkawn/progressbar.gif"); 


}

}

Auch verwende ich Klassen für alle meine Sachen. Das bedeutet, dass jede dieser referenzierten Dateien/all-it-is-is eine Klasse enthält.

Ich habe noch nie Null Referenzfehler auf diese Weise getan.

Quelle

2016-03-28 22:56:51

Ich bin im Allgemeinen nicht sehr organisiert, ich sollte wahrscheinlich in diese Gewohnheit kommen. Vielen Dank! –

Dinge in <script> aufrufen oder JavaScript verwenden?

Antwort

Verwandte Themen