HTML5手習い

HTML5のテンプレート

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTML5アプリケーション開発のテンプレートとして使用するHTMLの基本的な構造について学びます。また、scriptタグの記述位置と、ロード順序の関係についても学びます。
講師:
06:22

字幕

このレッスンでは HTML5 による アプリケーション開発のテンプレートになる 基本的な HTML の構造について 説明します それではアセットの template.html を テキストエディタで開いて下さい このコースではソースコードの編集は 基本的にターミナルから Vim で行っていきますが もしお気に入りのテキストエディタが あるのであれば そちらでソースコードを開いても構いません ソースコードを開くと このようにシンプルな HTML 構造が 表示 されます ソースコードの先頭には このように DOCTYPE 宣言を 記述します HTML 4.01 以前ではもう少し煩雑な DOCTYPE 宣言が必要でしたが HTML5 では このように簡素化されました また style 要素や script 要素を見ると type 属性が記述されていません HTML 4.01 以前では type 属性の 記述が必要でしたが HTML5 では これらに対して デフォルトの type 属性の値が 規定されたので 省略することが可能になりました style 要素の type の デフォルト値は CSS script 要素の type のデフォルト値は JavaScript となっています HTML をブラウザで開くと このように 見出し要素が表示されています また Command + option + I Windows の方は Ctrl + Shift + I で Javascript コンソールを開くと このように Hello, world! という 文字が出力されています これは HTML に記述されている JavaScript のコードが実行された結果です script 要素は 基本的にこのように body 要素の末尾に 記述する場合が多いです これは全ての HTML 要素が 読み込まれた後に コードが実行されることを保証するためです script 要素の中に 記述されているコードは 読み込まれると即時に実行されます 例えば script 要素を このように head 要素の中に移動したとすると head 要素が読み込まれた段階で コードが実行され その後に body 要素の読み込みが続くー という流れになります 従って この段階で まだ読み込まれていない HTML 要素を 参照した場合には エラーが発生する可能性があります 実験してみましょう まずは h1 要素に id 属性を付与します title という id にしておきましょう そして document の getElementById スペルが間違っていますね getElementById で title を参照してみます そしてこれを console.log で 出力してみましょう console log document getElementById の title こちらの log は コメントアウトしておきます この状態で実行してみます ブラウザをリロードしましょう 関数名が間違っているようですので 関数名を修正します getElementById では再度実行してみましょう このように null が出力されました これはまだこちらの h1 要素が 読み出されていない段階で getElementById を実行して title id を持った要素を 検索したためです この時点ではまだ こちらの h1 要素は存在していないので null が返ってきました では script を再度 body タグの末尾に戻してみましょう そうして再度実行すると このように h1 要素が取得できました body の末尾に script を 記述することによって 全ての html 要素がロードされた後に script が実行されることを 保証することができますが この段階ではまだ画像などの リソースのデータは ロードされていない可能性があります html 要素から参照されている 画像データなどの 読み込みも保証するためには ウィンドウのロードイベントを使用します window.addEventListener の load この中に script を記述することによって 全てのリソースのロードが完了して いることを保証することができます この書き方であれば 必ずしも末尾に記述しなくても 先頭の方に記述しておいても リソースのロードの保証をすることができます 実行してみましょう title 属性が取得されています このレッスンでは HTML5 による アプリケーション開発のテンプレートになる 基本的な HTML 構造について 説明しました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

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

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

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

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