ブログのロゴ

scriptタグの使い方

鳥 りんご りんご りんご
鳥
鳥

何をするためのタグなのか

 scriptタグとは、簡単に言うとHTMLの文書内にJavaScriptなどの実行可能なコードを埋め込むために使用されています。そうすることで、Webサイト上でJavaScriptなどのプログラムを実行できます。JavaScriptを起動させることでHTMLの構造を動的に操作したり、アニメーションを表示したりなどができます。

埋め込み方

 sccriptタグには複数の埋め込み方があります。

HTML内にコードを直接記述する方法(インラインスクリプト)

 これが最も簡単な方法で、<script>タグの中に直接JavaScriptのコードを記述していく方法です。例えば、下のようにコードを書きます。※alertとはアラートを表示するためのコードでユーザーにメッセージを簡単に伝えるための方法です。

See the Pen Untitled by 後藤匠 (@espancgx-the-sans) on CodePen.

外部ファイルを読み込む方法

 JavaScriptコードを別の`.js`ファイルに記述して、src属性でそのファイル名を指定してHTMLで読み込む方法です。※consoleとはブラウザやNode.jsに組み込まれているデバッグ用のオブジェクトで、開発者がプログラムの途中経過を確認したり、エラーを調べたりするときに使用するコードです。

See the Pen Untitled by 後藤匠 (@espancgx-the-sans) on CodePen.

 このようにファイルをHTMLファイルとJSファイルの2つに分ける方法です。

実際に使ってみます

 それでは、外部ファイルを読み込む方法を使用して鳥の画像をボタンを押したら動くようにしてみましょう。

See the Pen Untitled by 後藤匠 (@espancgx-the-sans) on CodePen.

 ※今回こちらのサイト(https://bel-itigo.com/js-transform-image-web-animations-api)のコードを少し参考にさせていただきました。

まとめ

 scriptタグのことは理解していただいたでしょうか。結論として、このタグはつまりJavascriptを使用する際は必須となります。これから自分はJavaScriptの勉強をしていくつもりでいるので新しいコードを勉強していくたびに記事を投稿していこうと思っているので、よろしくお願いします。

コメント

コメントする