在<script>中调用内容或使用JavaScript

Calling things in <script> or using JavaScript?

本文关键字：JavaScript script 调用      更新时间：2023-09-26

我一直在看很多不同的教程，学习我一直在做的编码，我注意到一个共同的区别。基本上，有些人纯粹使用 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 文件更好？

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

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

现在，当你说var canvas = document.getElementById('gamecanvas');时，你会得到null(因为元素还不存在(。

(看起来你已经把它移到了巴比伦.js之前，所以你也会出错，因为BABYLON.Engine还不存在(。

扩展@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 BODY的底部，就在结束</body>之前。此外，如果它们在此时无法正常工作，请确保它们按顺序排列。从您的原始内容来看，上面的列表不正确，因为您需要在游戏前拥有巴比伦.js.js最有可能。

另外作为旁注：不要多次导入jQuery，因为这可能会有问题。

以下是我加载 JavaScript 的方式...

从 HTML 中：

其中包括：

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

电话：

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

加载器类

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

}

}

此外，我使用类来处理我所有的东西。这意味着引用的每个文件都包含/all-it-is-是一个类。

我从来没有遇到过这样的空引用错误。

相关文章：