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

オブジェクトとプロパティを知ろう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptのオブジェクトを作り、基本的な情報(プロパティ)を引き出してみましょう。
講師:
06:27

字幕

このレッスンでは JavaScript のオブジェクトの基本とプロパティの基本について学びます。それでは Chapter02 Lesson10 のbegin のファイルをブラウザとエディタにそれぞれドラッグ&ドロップで開いていきます。そしてウィンドウを並べてそして begin のファイルにはすでに何か文章が書いてありまして「?」の部分があります。この「?」をこれからプログラムで出していきたいと思います。それでは Sublime Text を見てみましょう。既にプログラムが何個か書いてあると思います。まずは文字列オブジェクトです。文字は、この様にシングルクォテーションで囲った形式で宣言をします。今回も new 新しい String オブジェクトStirng が文字列を表しています。そして、この () の中にクォテーションでHello World などと一応文章を打ち込むとこの S に文字列オブジェクトが入ったという状態になっています。そして、この文字数を取り出すのがプロパティというものです。プロパティは特性とか属性とかそういった意味があって今定義したオブジェクトから何かを取り出してくる時にプロパティというものを使うことができます。 では、この「?」の部分を消して S という変数名を書いてドット、そして lengthと打ちましょう。この length が長さという意味ですね。では上書き保存をしてブラウザ上で更新Command+R もしくは Ctrl+Rで表示をさせると「11文字」とでました。つまり Hello、半角スペースカウントをして11文字ということになります。続いて配列オブジェクトとプロパティの組み合わせを試してみましょう。まず変数の a というものに、配列のオブジェクトを宣言していきたいと思います。この () の中に文字列で果物の名前を今回は入れてみたいと思います。「りんご」で配列はカンマで区切ります。そして次が「みかん」でカンマを打ってまたクォテーションで文字列「いちご」と3つの果物を a という配列に格納しました。そして、この「?」を取り去りましてa.lengthというプロパティを付けました。文字の場合は文字数になりましたが配列の場合はどうなるか試してみましょう。上書き保存をしてブラウザで更新です。今度は3ということになりました。つまり、配列オブジェクトに対してlength をかけるとこの配列に入っている数3つの果物を配列に格納したので3つという数字が引き出されるということになります。 続いて数字のオブジェクトも見ていきましょう。数字のオブジェクトは実は宣言しなくてもそのまま使えるプロパティもあります。なので、今回はこの「?」を消していきなり書いてみましょう。Math そしてドットそして大文字で PI と書きます。この Math.PI で円周率を実は呼びだせるというプロパティになっています。上書き保存をしてブラウザをフォーカスして更新をします。そうすると桁数は限られていますがこの様に円周率を表示することができました。では今度は window オブジェクトというものを見ていきましょう。window オブジェクトは今みなさんが見ている、このブラウザウィンドウそのものになります。これもオブジェクトとして扱うことができます。なので変数を d としてwindow というものを格納してみました。そしてこの「?」を消しましてd、そしてプロパティの名前は.innerそして W が大文字の WidthinnerWidth と書きます。そして上書き保存をしてブラウザ上で確かめてみましょう。更新、そうすると685 と入りましたが実はこれはそれぞれの環境で変わります。何故かというと innerWidth というプロパティは今現在のブラウザの横幅を取得するプロパティだからです。 なので、このブラウザの横幅を変えてみた状態でもう一度更新をしてみましょう。更新、そうすると887 と数字が増えました。この様に今現在のブラウザの横幅を取得することで様々なインタラクションが可能になることがありますのでこのプロパティもぜひ覚えておきましょう。このレッスンではオブジェクトの基本とプロパティについて学びました。

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

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

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

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

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

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