JavaScriptでbody内にonloadイベントを埋め込む方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでbody内にonloadイベントを埋め込む方法について解説しています。onloadイベントはページ読み込みの際に処理を行うものです。記述の方法と実際に実行した場合の動作について、サンプルコードで見てみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでbody内にonloadイベントを埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
body内にonloadイベントを埋め込む方法について詳しく説明していくね！
お願いします！
onloadイベントとは
onloadイベントは、bodyタグに配置することにより、ページの読み込みがあったときに処理を実行できます。
onloadイベントの記述方法
bodyタグ
onloadイベントをbodyタグで扱うには、ここでは関数を使用します。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body onload="func()">
<script>
function func(){
alert("onloadが実行されました。");
}
</script>
</body>
</html>
window.onload
window.onloadを使うと以下のようになります。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScript</title>
</head>
<body>
<script>
window.onload=function func(){
alert("onloadが実行されました。");
}
</script>
</body>
</html>
onloadイベント利用時の注意点
onloadによるイベントハンドラは、同一要素の同一イベントに対して、複数設定できません。
まとめ
JavaScriptでbody内にonloadイベントを埋め込む方法を現役エンジニアが解説しました。これ以外にもイベントを発生させる方法は色々あるので、そちらも参照してみるといいかもしれません。
監修してくれたメンター
| メンターTK
大学院でVBAを扱う研究を行い、プログラミングの素晴らしさに目覚める。 その後、建設系企業のシステム担当として従事。JavaScriptやPHP、Processingなどに没頭中。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
