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

配列(array)を作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
効率良くプログラミングするために、データをグループ分けする方法を学びます。
講師:
06:15

字幕

このレッスンでは JavaScript による配列を学びます。それでは Chapter02 Lesson08のフォルダを開いてbegin の HTML をChrome とSublime に落とします。そして2つのファイルを並べてSublime の方で記述をしていきましょう。まずは配列とは何かというと異なるデータを1つのグループに纏めてしまおうという考え方です。通常通り、例えば商品が3つあるとして商品、例えばprice0 という1つの価格を持った商品が= 480 円としてそしてこれをちょっと複製しますのでCommand+CWindows では Ctrl+C の、ペースト、Command+V かCtrl+V で複製を2つ作ります。では Commad+V、Ctrl+Vで2つ複製をとってprice0 から始まってるのを1 と 2 と別々の変数として扱い価格をちょっと別物にしたいと思います。2500 とか 980 とかこの様にしてみました。ただ毎回この様に商品の数だけ変数を宣言するというのは結構大変です。そこで今回は宣言を1つprice というものを宣言して=そして配列を扱う場合は [ ]の方を使います。 そしてこの中に 480,そして 2480,そして 980そして行末にはセミコロンとこれでいままでやった price0・1・2を纏めて宣言したという状態になっています。正確には price という配列を作ってその中に3つ格納した、という感じです。ではこれを HTML に表示させたいと思いますのでdocument.writeそして () の中には変数 price の [ ]この中に 0 これは1つ目となりますがプログラム上、1つ目の数字が0となっているのでここは 0 と入れてあげます。そして、文字列を足してみましょう。+ でシングルクォテーションを作って「円」という文字を足しました。そして上書き保存をしてブラウザに移り、更新Command+R、Ctrl+R で更新をすると1つ目の価格である 480 が呼びだされています。では price0 ではなくて2 とするとどうなるかというと上書き保存、そしてブラウザを更新3つ目の価格である 980 円が呼びだされるということになっています。また、この仕組みは数字だけではなく文字列にも応用が可能です。それでは、今まで書いたこの変数名、一度全部選択をしてCommand を押しながら /Windows の方は Ctrl+/ でコメントアウトしておきます。 それでは新しく配列を作っていきましょう。今度は「部活」という配列を作ってなので club という変数名にして =そして [ ] を打って文字列の場合は必ずシングルクォテーションでもしくはダブルクォテーションなんですがクォテーションを作って文字列を格納します。1つ目が「野球部」そして配列の分割はカンマで分けます。そしてまたクォテーションを作って「パソコン部」そしてカンマそしてクォテーション「吹奏楽部」ととりあえず3つの部活を用意しました。ではこの配列から変数を取り出してみましょう。document.writeそして () の中にクォテーションそしてメッセージを入れたいと思うのでまず文字列、「私の部活は」とそして +ここに配列 club の中の [ ]3番目のオブジェクトを呼びだしてほしいそして +そして文字列また連結してみましょう。クォテーションを打って「です。」としてみました。そして、この状態で上書き保存そしてブラウザにフォーカスして、更新。そうすると「私の部活は」「です。」というのは文字列そのままですがclub の 2 つまり3番目のオブジェクトがこの様に表示されたということになります。 配列をうまく使うことでやはり効率よく少ない文章量でプログラムを記述できるようになります。このレッスンでは JavaScript の配列を学びました。

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

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

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

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

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

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