I would like to understand the different ways you can call a javascript function in html. I have the following code:
我想了解你可以在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) In the JS code I had to code init() method through an event listener, which I understand it's one of the way to invoke a js method (through events). Why is it that I cant call the init() method without an event listener? Can I just call it in the html by calling init()? Something like this:
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) Why is it that when I remove the function heading I am able to execute the javascript code automatically just by having the script tags and the src to the js file? Something like this in the JS:
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) What are some other ways of calling js methods in html? What are the best practices? Are there other ways in which I can call javascript methods in html?
3)在html中调用js方法有哪些其他方法?什么是最佳做法?还有其他方法可以在html中调用javascript方法吗?
2 个解决方案
#1
you can call your function after your HTML loads, preferably in footer like below.
您可以在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);
}
put this code in footer, so when it will run, it will look for elements you specified in JS in DOM
将此代码放在页脚中,因此当它运行时,它将查找您在DOM中的JS中指定的元素
init()
Another way
you can call it in body tag in onload event, like below
你可以在onload事件中的body标签中调用它,如下所示
<body onload="init()" >
#2
You can call your init method in this way as well.
您也可以通过这种方式调用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();
}();
#1
you can call your function after your HTML loads, preferably in footer like below.
您可以在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);
}
put this code in footer, so when it will run, it will look for elements you specified in JS in DOM
将此代码放在页脚中,因此当它运行时,它将查找您在DOM中的JS中指定的元素
init()
Another way
you can call it in body tag in onload event, like below
你可以在onload事件中的body标签中调用它,如下所示
<body onload="init()" >
#2
You can call your init method in this way as well.
您也可以通过这种方式调用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();
}();