在中调用东西还是使用JavaScript？_Javascript_Html_Babylonjs

在中调用东西还是使用JavaScript？

javascript html

在中调用东西还是使用JavaScript？,javascript,html,babylonjs,Javascript,Html,Babylonjs,我一直在看很多不同的教程，学习我一直在做的编码，我注意到了一个共同的区别。基本上，有些人使用HTML纯粹是为了编写脚本，使用脚本标记，有些人使用JavaScript并引用脚本。我的问题在于两个代码。第一个： <!DOCTYPE html> <html> <head> <script src='babylon.js'></script> <title>game or some shit&

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

并在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中工作？还有，你更喜欢用哪一种？是使用更好的还是使用JavaScript文件？

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

您还将脚本元素从gameCanvas下方移动到其上方，这一点更为重要

现在，当您说var canvas=document.getElementById'gamecanvas'时；因为元素还不存在，所以得到null

看起来您已经将其移动到了babylon.js之前，因此您也会出错，因为babylon.Engine也不存在。

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

您还将脚本元素从gameCanvas下方移动到其上方，这一点更为重要

现在，当您说var canvas=document.getElementById'gamecanvas'时；因为元素还不存在，所以得到null

看起来你已经把它移到了bebylon.js之前，所以你也会出错，因为bebylon.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>

这些脚本标记放置的位置很重要，顺序也很重要。当它们处于“头部”时，它们将在渲染过程的早期执行。HTML是自上而下呈现的，每个脚本在调用时都会执行。如果您不想担心DOM主体标记中的所有内容都没有准备好，那么您需要在结束之前将所有脚本标记放置在HTML主体的底部。此外，如果此时它们不能正常工作，请确保它们处于正常状态。从您的原始内容来看，上面的列表是不正确的，因为您很可能需要在game.js之前使用babylon.js

另请注意：不要多次导入jQuery，因为这可能会产生问题。

扩展@Quentin提到的内容

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

另请注意：不要多次导入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");


}

}

而且，我所有的东西都使用类。这意味着引用的每个文件都包含/全部是一个类

这样做我从未遇到过空引用错误。

下面是我加载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");


}

}

而且，我所有的东西都使用类。这意味着引用的每个文件都包含/全部是一个类

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

所以要修复它，可以将文件引用移动到正文。我想你也可以等到dom加载完毕。所以，顺序很重要。很高兴知道。我会记住这一点，所以为了修复它，您可以将文件引用移动到主体。我想你也可以等到dom加载完毕。所以，顺序很重要。很高兴知道。我会记住这一点，以澄清，我没有导入jQuery两次，该文件只是命名为jQuery。谢谢你的信息！所以我知道这没什么大不了的，但如果你介绍AMD模块的名称，我建议不要使用“jQuery”。为了澄清，我没有两次导入jQuery，文件名只是jQuery。谢谢你的信息！所以我知道这没什么大不了的，但是如果你介绍AMD模块的名字，我建议你不要使用jQuery。我通常不是很有条理，我应该养成这个习惯。谢谢我通常不是很有条理，我应该养成这种习惯。谢谢