HTML入門トレーニング

HTMLとJavaScript

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLとJavaScriptの関係、JavaScriptの役割について学びます。
講師:
06:48

字幕

このレッスンではHTMLと JavaScriptの関係 JavaScriptの役割について学びます JavaScriptは HTMLやCSSなどと同様に ウェブ制作において 欠かせない言語です JavaScriptは数多くのウェブクライアントで サポートされており ウェブページの動きを 制御するために使われます JavaScriptの全てを語り尽くすには 膨大な時間が必要となりますので ここではHTMLと関連づけて どのように機能するのか 基本的な部分を紹介します まず今日のウェブサイトにおいて JavaScriptはどのような働きを 果たしているのか 確認していきたいと思います 既に画面ではGoogle Chromeで 様々なウェブサイトを タグで開いているところです ブラウザの設定を変更して JavaScriptは 動作しないようになっています 現在開いているのは lynda.comというウェブサイトです このウェブサイトでは 様々なコースが表示されるはずですが ここではBrowse the Library というリンクから リンクをクリックして その様々なコースの リストの一覧から 希望するコースを探し そしてそのコースをクリックする このような手順が 必要になります 少し面倒な手順ですが これは現在 JavaScriptが オフになっているためです JavaScriptを使うと もっと快適に スムーズに コースを探すことができます たとえばもうひとつ ツイッターに行ってみましょう ツイッターの画面でもJavaScriptが 様々な箇所で使われています ツイートを画面に 表示することはできますが たとえばそれを お気に入りに入れたり ツイートの詳細を 表示したりということが JavaScriptがオフになっていると できません また新しくツイートをしようとしても こちらも動作しないように なっています 全てJavaScriptが オフになっているためです 次に新しいタグに開いている Adobe.comを開いてみました ここではJavaScriptを有効にして 素晴らしいユーザー体験を 確認してくださいとあります このように JavaScriptが有効でないと 全く機能しないウェブサイトさえ あるのです 現代のウェブサイト環境では JavaScriptは非常に大きな 役割を担っています それでは実際に 今度はブラウザの設定を変更して JavaScriptをオンにした状態で 確認してみましょう 既に別のタグに開いている Chromeの設定から JavaScriptをオンにして 再度lynda.comを 確認してみましょう 先ほどはこの Browse the Libraryというリンクに ロールオーバーしても 何も起きませんでしたが JavaScriptをオンにした結果 ロールオーバーすると このように タグでメニューを 切り替えられるようになりました カテゴリーから 好きなコースを探して それを選んで 希望のコースを すぐ探すことができます このような感じです またツイッターも見てみましょう リロードすると JavaScriptは有効になり 先ほどは表示されなかった 画像が表示されたり 新しいツイートも 機能するようになりました 同じように Adobe.comを見て リロードしてみると 先ほどとは全く別のような ウェブサイトが表示されました ここまで紹介したように JavaScriptの有効無効によって ウェブサイトの挙動がずいぶん変わることがある ということがわかりました ここでサンプルファイルを 別のタグで開いています これはコースの サンプルファイルです 少し下にスクロールすると ここにタブのインターフェースがあり HTMLとCSSそしてJavascriptを 切り替えて表示できるようになっています 現在はJavaScriptはオフの状態で このページを表示しています そのため タブを実際に切り替えることはできませんが このHTMLとCSS Javascriptの タブの3つの内容は すでにこの下の部分に 縦に並んで表示されています そしてたとえば CSSのタブをクリックすると その該当の箇所までページが スクロールするようになっています このようにJavaScriptがオフであっても JavaScriptの機能で 提供している機能と 同等のような機能を 別の手段を使って提供する このような取り組みを プログレッシブ・エンハンスメント と呼びます ウェブを閲覧するユーザーの環境には 様々な環境があります CSSがオフの環境や JavaScriptがオフの環境 また両方がオフになっている可能性もあります このような環境でも 最低限の機能を提供できるよう 用意すること そういうことが重要になってきます JavaScriptがオンのときと 全く同じ体験や機能を 提供する必要はありませんが 最低限の情報にアクセスできるように しておくとよいでしょう それではページをリロードして JavaScriptをオンにしてみます 先ほどは3つのタブの内容が 縦に並んで表示されていましたが JavaScriptがオンになると HTMLの内容だけが つまり今開いているタブの内容だけが 表示されるようになりました そしてタブを切り替えると 実際にタブの内容が 切り替わっていることがわかります さて ここまで紹介してきたように JavaScriptを使うと HTMLやCSSで作られた静的なページに 動きを設定 制御することができます 要素をアニメーションしたり 非表示にしたり クリックすると整理整頓されたり といった動きをつけられるのです このレッスンではHTMLとJavaScriptの関係 JavaScriptの役割について学びました

HTML入門トレーニング

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

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

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

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

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