如何在html中调用javascript函数?

时间:2015-05-08 04:48:13

标签: javascript html

我想了解在html中调用javascript函数的不同方法。我有以下代码:

HTML:

<body>
    <div id="container">
        <canvas height="600" width="600" id="myCanvas">
        </canvas>
    </div>
    <script type="text/javascript" src="js/code.js"></script>
</body>

JS:

//constructs the ball and the snake before the game starts
function init() {
    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);
}

window.addEventListener('load',init(),false);

1)在JS代码中,我必须通过事件监听器对init()方法进行编码,我理解它是调用js方法(通过事件)的方法之一。为什么我不能在没有事件监听器的情况下调用init()方法?我可以通过调用init()在html中调用它吗?像这样:

<body>
    <div id="container">
        <canvas height="600" width="600" id="myCanvas">
              <script>
                     init();
              </script>
        </canvas>
    </div>
    <script type="text/javascript" src="js/code.js"></script>
</body>

2)为什么当我删除函数标题时我只能通过脚本标记和src到js文件自动执行javascript代码? JS中的这样的东西:

    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);

3)在html中调用js方法有哪些其他方法?什么是最佳做法?还有其他方法可以在html中调用javascript方法吗?

2 个答案:

答案 0 :(得分:0)

您可以在HTML加载后调用您的函数,最好是在页脚中 如下。

//put this function anywhere, either in header or footer
function init() {
    var theCanvas = document.getElementById("myCanvas");
    var context = theCanvas.getContext("2d");
    context.fillStyle = "#FFA23F";
    context.fillRect(10,10,10,10);
}

将此代码放在页脚中,因此当它运行时,它将查找您在DOM中指定的元素

init()

另一种方式

您可以在onload事件中的body标记中调用它,如下所示

<body onload="init()" >

答案 1 :(得分:0)

您也可以通过这种方式调用init方法。

HTML

<head>
  <script type="text/javascript" src="js/code.js"></script>
</head>
<body>
  <div id="container">
    <canvas height="600" width="600" id="myCanvas">
    </canvas>
  </div>
</body>

code.js

var _MYJS = _MYJS || {};

_MYJS.canvas = function() {
   var _this = this;

   this.drawCanvas = function(){
       var theCanvas = document.getElementById("myCanvas");
       var context = theCanvas.getContext("2d");
       context.fillStyle = "#FFA23F";
       context.fillRect(10,10,10,10);
   }

   /* Init call */
   this.init = function() {
      _this.drawCanvas();
   }

   return this.init();

}();

JSFIDDLE