WebデザイナーのためのJavaScript & jQuery入門

開発環境を準備する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptは実行結果をブラウザで確認することができます。このコースでは、Sublime Text2(テキストエディタ)で記述、Google Chrome(ブラウザ)で確認する方法を学びます。
講師:
05:03

字幕

このレッスンでは JavaScript の開発ツールについて学びます。まず JavaScript を記述するテキストエディターにはSublime Text2 というアプリケーションを使用します。Sublime Text2 は高性能なテキストエディターです。また HTML・CSS・JavaScript のほか様々な言語にも対応しています。そして実行結果を確認するのにGoogle Chrome ウェブブラウザを使います。Google Chrome も世界中で人気のある軽量なウェブブラウザです。そして標準で開発ツールが備わっておりユーザーが独自に拡張機能を充実させることも可能です。それでは早速レッスンファイルを見てその開発のワークフローを見ていきましょう。まずレッスンファイルのフォルダーchapter01lesson03 のフォルダーを開きます。そしてこの 01_03.html をまずブラウザにドラッグ&ドロップします。そうしますと、このようにブラウザで表示されます。またもう一個 HTML を表示させたいので今度は Sublime Text のほうにファイルをドラッグ&ドロップします。 このようにエディターが立ち上がって中身が表示されます。そしてこの画面を半分半分くらいになるように調整してみましょう。ブラウザの脇をもって調整します。だいたい半分半分にすると作業効率が上がります。今回はこのブラウザ上に実はこの HTML をJavaScript で表示させています。このメッセージがテキストエディター上にもこのように表示されています。そしてもう一つ開発ツールについても見ておきましょう。Google Chrome の表示のメニューから開発 管理 デベロッパーツールを表示してみましょう。このように HTML を調査したりスタイルシートも調査できる便利なデベロッパーツールですがこの矢印のついたボタンのようなものを押すとコンソールというタブがあります。JavaScript の動作結果を示すのにこのコンソールという画面も覚えておいてください。実はここにメッセージが表示されていますがこちらはテキストエディター上のこの命令で表示させることが可能になっています。またエラーを出してみたときにここのコンソールにもそのエラー内容が表示されます。試しにやってみましょう。例えば document write のe だけを消してしまってそして上書き保存しましょう。 ショートカットはMac は Command+SWindows は Ctrl+S です。保存したらブラウザを一度クリックしてブラウザにフォーカスしたらブラウザを更新しましょう。ブラウザの更新のショートカットはCommand+RWindows の方は Ctrl+R です。それでは Command+R を押すとこのようにコンソール上に赤いエラーが出ました。また右上にもエラーが一つありますという印も出ています。そしてエラーの内容を、英語ですが、必ず読むようにしましょう。ここに write ではなくてwrit というメソッドはありませんよと親切に忠告してくれています。ですのでこちらのテキストエディターに戻りt の後に e を戻して上書き保存Command+Sあるいは Ctrl+S を押してブラウザにフォーカス。そしてCommand+Rあるいは Ctrl+R でブラウザを更新。そうしますとエラーメッセージは消えてまた文章も戻ってきました。このようにテキストエディター・ブラウザ・デベロッパーツールをうまく使い分けて開発を進めていきましょう。このレッスンでは JavaScript の開発環境について学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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