【javaScript】備忘録:onloadの使い方

asaba 著者:asaba

【javaScript】備忘録:onloadの使い方

javascriptのフレームワークを触っていると、どうしてもプレーンなjavaScriptの組み方がいい加減になってしまうので、これではまずいと

思い備忘録で残しておくことにしました。本題ですが、onloadメソッドについての使い方を備忘録として残します。onloadと聞くとカメラ

などのapiで呼び出されるコールバックのイメージが強いですが、従来だとbodyタグに挟んで使うこともできますよということを今更思い出しました。

具体的に説明すると、タイマーなどの時間を利用するコンテンツを作る場合は、ブラウザを表示したら一秒一秒をその時にメソッドを使っ

て呼び出しても良いのですが、bodyタグに挟んでおくと疑似的なメソッドの役割をしてくれるようになり、余計なメソッド定義をするこ

とがなくなるのでコードがみやすくなったりメンテナンスが少し楽になるなどの恩恵を受けることができます。他にも、ブラウザで

setTimeOutと組み合わせてローディング機能を作れたりとバリアフリーなアプリを作りたいなと思った時にも役に立つので覚えておくと

捗るかと思います。

が最近だとvue.jsとかreactなどのフレームワークが普及しているので、大規模な開発だとあまりお目にかかることはないかもしれません。

</pre>
<script type="text/javascript">
<!--

var start = new Date();

var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;

function timer(){

now = new Date();

datet = parseInt((now.getTime() - start.getTime()) / 1000);

hour = parseInt(datet / 3600);
min = parseInt((datet / 60) % 60);
sec = datet % 60;

if(hour < 10) { hour = "0" + hour; }
if(min < 10) { min = "0" + min; }
if(sec < 10) { sec = "0" + sec; }

document.form1.field1.value = hour;
document.form1.field2.value = min;
document.form1.field3.value = sec;

setTimeout("timer()", 1000);

}

// -->
</script>

<body onLoad="timer()">
<pre>
  • この記事いいね! (0)

著者について

asaba

asaba author

helloWorld!!!!