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

変数を使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数はプログラムで使われるデータの「いれもの」です。プログラムを効率良く記述するための基本を学びましょう。
講師:
05:59

字幕

このレッスンでは JavaScript における変数について学んでみましょう。では、 02_01 のフォルダーを開いてbegin の HTML をまずブラウザで開きそして、もう一度ドラッグ&ドロップで今度は Sublime Text に落とします。これで同じファイルを Google Chrome とSublime Text の2つのアプリケーションで開いた状態になります。では、このように画面分割をうまく使って半分半分くらいになるように調整をしてみてください。それでは final のファイルも確認しておきましょう。まず Finder から final のファイルを選んでChrome のこのタブの隣の位置にドラッグ&ドロップします。final のファイルを見るとこのように「Hello World」という表記があります。今回は変数を使ってこの位置に、このメッセージを出すことが目的になります。では、begin のファイルに移りエディターの方でコードを打ち込んでいきましょう。さて、18行目に script というものがあります。JavaScript はこの <script と </script の内側に記述することができます。 また、「ファイル名.js」 といったファイルとして保存することで外部から HTML に読み込ませることも可能です。まずは HTML に直接script タグで埋め込むような形で練習をしていきましょう。最初にコメントの書き方も練習しておきましょう。まず、スタイルシートのコメントの書き方と一緒の書き方で実はコメントにすることができます。スラッシュ・アスタリスク閉じは アスタリスク・スラッシュです。これは複数行のコメントが可能です。なので、複数行の所で改行してもコメントが維持されます。また、一行のコメントの場合も練習しておきましょう。一行のコメントはスラッシュを2回打ちます。そして任意の内容を書きますが今回は「変数を宣言」というコメントをしておきましょう。プログラムが長くなるとやはり可読性が悪くなります。その時にメモ書きを残しておくのは勉強上非常に有効です。それでは変数を宣言の後ろにプログラムを記述します。var message =そしてシングルクォーテーションそして「変数を使ってみよう」そして行末にセミコロンです。この意味はvar これは variables 変数の略です。変数は入れ物と思ってください。 この message という名前の入れ物コップにこの「変数を使ってみよう」という文章を流し込んだという意味です。この = は代入演算子と言ってこの右のものを、この入れ物に入れるという意味です。では、これを HTML 上に表示させたいと思いますがここでも一応コメントを打っておきましょう。「HTML に記述」とコメントを打ってここに document.writeそして message と変数つまり入れ物の名前を書いておきます。そして行末にセミコロンを打っておきます。これで上書き保存そしてブラウザにフォーカスしてcommand+R もしくは Ctrl+R でブラウザを更新。そうすると、このように「変数を使ってみよう」という記述がブラウザに表示されました。例えば、またエディターに戻りまして「変数」だけにして上書き保存してブラウザで更新をすれば入れ物の中身が変わったのでこのようにメッセージも変わります。また、なぜ変数変わると書いてあるかと言うとmessage = そしてシングルクォーテーションここに Hello Worldと書きます。そして行末にセミコロン。そして上書き保存をします。そしてブラウザにフォーカスして更新。 これは最初にコップに入れた変数という中身がここでもう一回再定義されています。つまり中身を変えることも可能です。このように変数を使うことで様々なプログラムを効率よく記述することができるとても大事な要素になりますので是非覚えておきましょう。このレッスンでは JavaScript の変数を学びました。

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

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

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

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

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

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