JavaScriptの読み込み方2選「どこで読み込むのが正しいの?」

JavaScriptで出来ることは下の記事でも紹介しているのでご参照ください。

WEBプログラミングを始めるために初心者は何から勉強すればいいのか?

JavaとJavaScriptって似てるけど違うの?

 

基本はJavaScriptではなくJQueryを使うでしょうが、JQueryはJavaScriptを簡単に使うために作られたものなのでやはりJavaScriptの基礎から勉強するほうがよいでしょう。

JavaScriptはHTMLやCSSと違い、もっとプログラミングっぽい言語になります。

if や for などといった条件分岐やループも使います。

変数という概念も出てきますが、これが出来れば書き方の問題だけで他の言語でも同じ部分が出てきますので後が楽になるはずです。

逆にPHPやRubyなどを勉強された方には今回の内容は少し物足りないかもしれません。

JavaScriptの読み込み方

JavaScriptの読み込み方には2通りあり、HTMLヘッダー内に書く方法と、別ファイルを読み込む方法です。

一般的には別ファイルを読み込む方法を使うことが多いですが、HTMLヘッダー内に書いても間違いではありません。

ただ、HTMLヘッダー内に書くとHTMLファイルが混雑して見難くなります。

 

ちなみに「HTMLヘッダー内に」と説明しましたが、HTMLファイル内ならばどこに書いても問題ありません。

JavaScriptファイルを読み込むのも body の締めタグ直前に書くことも多いです。

「各場所はどこが正しいのか」については、何を実行するかによって変わってきます。

(良い例えが思い浮かびませんが)例えば、メイン画像を画面いっぱいに表示したい場合は画面サイズを取得し、それに合わせてHTMLロード後にサイズを設定する必要があります。
この場合は body 閉じタグ前に書くことでHTMLが読み込まれた後に実行することが出来ます。

HTMLのヘッダー部に書く

これはHTMLファイルの head タグ内に書く方法です。

7~9 行目のように script タグを定義し、type に text/javascript と書きます。

これで script タグ内がJavaScriptであることを定義します。

HTML5では type=”text/javascript” は不要です。しかし、書いてあっても問題無いため書いておいた方が無難かと思います。

 

そして、~ の部分にJavaScriptコードを書きます。

別ファイルにし読み込む

JavaScriptのファイルをHTMLファイルとは別に作成し、読み込む方法です。

7行目のように script タグを定義し、type に text/javascript と書きます。

HTML5では type=”text/javascript” は不要です。しかし、書いてあっても問題無いため書いておいた方が無難かと思います。

 

src プロパティで読み込むファイルを指定します。

JavaScript のコードは読み込むファイル内に定義します。

読み込みのサンプル

実際に読み込んだサンプル画面を用意しました。

HTMLがこちらです。

不要なコードは省略しています。

そして、JavaScriptファイルがこちら

画面を開くと、ボタンAとボタンBの二つのボタンがあります。

ボタンAはHTMLヘッダ内のJavaScript「btna()」を実行します。

ボタンBは外部ファイルのJavaScript「btnb()」を実行します。

 

alert() というのはメッセージのポップアップが表示されます。

ボタンAを押すと「ボタンA」というメッセージで、ボタンBを押すと「ボタンB」というメッセージが表示されます。

まとめ

JavaScriptを書く場所は、HTMLのヘッダー内に書くか、別ファイルに記述し読み込む。

HTMLヘッダー内はあくまで基本でありHTML内ならばどこに書いても問題ない。

どこに書くかは、何を実行するかで決まる。

開発していく中で読み込む順番などでバグが出ることがあります。そのときにはご質問ください。

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA