HTML入門トレーニング

外部JavaScriptファイル

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptを外部ファイルにまとめ、それをHTMLに読み込んで使用する方法について学びます。
講師:
04:07

字幕

このレッスンでは JavaScriptを外部ファイルにまとめ それをHTMLに読み込んで 使用する方法について学びます 画面ではコードエディタでサンプルファイルの HTMLを開いているところです 冒頭にはstyleが記述されており bodyタグの中には script要素を使ってJavaScriptが そしてそのJavaScriptを使って メッセージを表示するための "見出し" が定義されています これを実際にブラウザで表示してみましょう ブラウザで同じHTMLを開きました ランダムでこの見出しの部分の メッセージの内容が 変化するように実装されています 頭の hi from という文字列は固定ですが うしろの都市の名前が 様々なものに読み込む度に変わっています このような実装がされています ここでは このJavaScriptのコードを 外部ファイルにして読み込んでみましょう まずこのscript要素の中に書かれている JavaScriptのコードをカットします そしてファイルメニューから 新規作成で新しいファイルを作成します 現在ここでは "ブラケッツ" という コードエディタを使っていますが どのようなコードエディタでも構いません JavaScriptファイルは HTMLファイルやCSSファイルと同様に その中身はただのテキストファイルです 先程カットしたコードをここにペーストします インデントを整えておきましょう そしてこのファイルを JavaScriptファイルとして HTMLファイルと同じ階層に保存します 名前をつけて HTMLファイルと同じ階層に ここでは「app.js」という名前で 保存しましょう JavaScriptファイルの拡張子は .js です 保存ボタンをクリックして HTMLと同階層に JavaScriptファイルが保存されました それでは実際にこのJavaScriptファイルを HTMLファイルに読み込んでみましょう HTMLファイルに戻ります HTMLファイルには先程まで使っていた scriptタグが残されています JavaScriptをHTMLに読み込むには このscriptタグを使います しかし このscript要素の中に コードを記述すると JavaScriptとして扱われますよね 外部ファイルのJavaScriptを読み込むには このscript要素の中身は 何もない状態にして scriptタグの属性の src属性を使って JavaScriptファイルを読み込みます ここではHTMLファイルと同階層に 「app.js」 JavaScriptファイルがありますので そのままファイル名を入力します こうすることで このJavaScriptが 読み込まれたタイミングで このJavaScriptの中にある コードが実行されることになります 保存してブラウザをリロードしてみましょう HTMLの内容は書き換えましたが このように先程と同様に 動作していることがわかります こうして Script要素のソース属性を使って JavaScriptを外部化することで 同じコードを複数のページで使い回すことが 簡単にできるようになります このレッスンでは JavaScriptを外部ファイルにまとめ それをHTMLに読み込んで 使用する方法について学びました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。