HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでbodyタグにonLoad属性を使う方法について解説しています。onLoad属性を使うことでページを読み込んだときの処理を実装することができます。onLoad属性の書き方と使い方の例を学びましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

HTMLでbodyタグにonLoad属性を使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

bodyタグにonLoad属性を使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

活用場面

onLoadはブラウザがページを読み込むときに行う処理を実装するときに使用します。

例えばブラウザを読み込んだときにアニメーションをページ上で実行したり、サーバーの実行結果をページで表示させるときに使用可能です

Gmailをブラウザで起動するときをイメージするとわかりやすいでしょう。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

onLoad属性について

onLoad属性はブラウザからページを読み込むときに実行する処理を呼び出す仕組みです。

具体的には、下記のようにbodyタグの中にonLoad=”実行する関数”と記述すると実行できます。

<body onLoad="startFunc()">

上記の例であれば、ブラウザ起動時にstartFunc関数を実行するという仕組みであり、ScriptタグstartFunc関数の中身を記述すれば実行します。

ちなみに、現在のページから他のページに遷移するときに処理を実行するときはonUnLoad属性を指定すると、遷移する前に該当の処理を実行することができるでしょう。

 

onLoad属性を使ってWebサイトのページ読み込み時に処理を行おう

実際に読み込み時の処理を実装してみましょう。

今回はブラウザを立ち上げたらダイアログにメッセージを表示させるサンプルを作ってみましょう。

以下のサンプルコードを任意のフォルダに保存します。

<html>
    <head>
        <meta charset="utf-8">
        <title>onLoadサンプル</title>
    </head>
    <body onload="loadFunc()">
        <h1>これはサンプルです</h1>
    </body>
    <script>
        function loadFunc() {
            alert("Hello World");
        }
    </script>
</html>

HTMLをダブルクリックしてHTMLを開くと、開いた瞬間に以下のようにアラートでメッセージが表示されたら成功です。

 

執筆してくれたメンター

メンター 三浦

モバイルゲームを運用している会社のエンジニアをしています。

趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。

TechAcademyジュニアではPythonロボティクスコースを担当しています。

好きな言語はpython, Node.js

 

大石ゆかり

HTMLでbodyタグにonLoad属性を使う方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。