在 <script> 中调用东西还是使用 JavaScript？

Question

我一直在看很多不同的教程来学习我一直在做的编码，我注意到一个共同的区别。基本上，有些人使用 HTML 纯粹是为了写脚本，使用脚本标签，而有些人使用 JavaScript 并引用脚本。我的问题在于两个代码。第一个：

<!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>

功能正常，但是当我使用如下外部脚本在脚本中引用它时：

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

并在 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>

它不起作用。谁能告诉我为什么当我在另一个 JavaScript 文件中从外部键入脚本并调用它时该脚本不起作用，但它会在原版 HTML 中运行？另外，您更喜欢使用哪个？使用 <script> 更好还是使用 JavaScript 文件？

Answer 1

您错误地识别了问题。这与将脚本从内联文件移动到外部文件无关。

您还（更重要的是）将脚本元素从 gameCanvas 下方移动到其上方。

现在，当您输入 var canvas = document.getElementById('gamecanvas'); 时，您会得到 null（因为该元素尚不存在）。

（看起来你已经把它移到了 babylon.js 之前，所以你也会出错，因为 BABYLON.Engine 也不存在）。

Answer 2

扩展@Quentin 提到的内容。

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

这些脚本标签放在哪里很重要，顺序也很重要。当它们处于 'HEAD' 时，它们将在渲染过程的早期执行。您的 HTML 是自上而下呈现的，每个脚本在调用时执行。如果您不想担心 DOM（BODY 标签内的所有内容）没有准备好，您需要将所有脚本标签放在 HTML [=11] 的底部=] 就在收盘前 </body>。此外，如果此时它们不能正常工作，请确保它们是有序的。根据您的原始内容，上面的列表不正确，因为您最有可能需要在 game.js 之前有 babylon.js。

另请注意：不要多次导入 jQuery，否则可能会出现问题。

Answer 3

这是我加载 JavaScript...

的方式

来自HTML：

包括：

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

来电：

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

装载机CLASS

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");


}

}

另外，我用 classes 来处理我所有的东西。这意味着这些文件中的每一个都引用了 includes/all-it-is-is a class.

我从来没有运行这样做过空引用错误。

在 <script> 中调用东西还是使用 JavaScript？

Calling things in <script> or using JavaScript?

javascript

html

babylonjs