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

基本的なメソッドを使ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
メソッドはオブジェクトへの命令です。これまでも登場していましたが、その復習+新しいメソッドを試してみましょう。
講師:
09:04

字幕

このレッスンではJavaScript におけるメソッドの基本を学んでいきましょう。それでは、チャプター 02 レッスン 11 のbegin のファイルをブラウザとエディタで開いてみましょう。そして、ウィンドウを並べます。それでは Sublime Text で記述を進めていきましょう。まず、文字列オブジェクトとメソッドについて進めていきます。まず、変数。s という一文字の変数を宣言してその中に new String () と文字列のオブジェクトを代入します。文字列なのでクォーテーションを書いてHello World という文章を宣言してみました。そして、こちらを HTML 上に表示したいのでdocument.write()そして、ここでまず変数名、そして . (ドット)replace というメソッドを宣言します。そして () 。メソッドはオブジェクトの内容を変えたりすることができる仕組みを持っているのでこの replace の後に() が付くのがメソッドの特徴です。そして、文字列を扱うメソッドなのでこの様に' (シングルクォーテーション)を書いてworld を、そして , (カンマ)でもう1つ文字列を書きます。 文字列なので ’ を書いてJapan と入力を変えました。そして、上書き保存をしてブラウザ上で更新をしてみましょう。この様に、元々は Hello Worldとして変数を定義しましたが、この replace のメソッドでworld を Japan にreplace (置き換えた)ということになります。この様に、メソッドはオブジェクトの性質を変化させることが可能です。それでは、日付オブジェクトについても見ていきましょう。まず、変数 d を宣言してその中に new Dateそして (); と打ちます。この様にしないと、日付オブジェクトを使うことができませんので最初に必ず宣言をしておきます。そして document.writeそして () の中身にはまず、文章を入力しましょう。「’今年は」それに加えて + (プラス)そして、ここに変数 dそして .getそして F を大文字で Fullそして Y が大文字で Yearそして ()そして +まだ文章を追加します。' を打って、「 年です。」と入力をしておきます。そして、前の文章とこのままだとつながってしまうのでそれぞれに改行タグの方を追加しておきたいと思います。 Japan の方にも + で連結をして' を作り<br と、HTML の改行タグを追加しておきます。同様なものを次にも入れたいので<br のコピーをとって「 年です。」の後ろにも入れておきます。それでは、上書き保存をしてブラウザ上で更新をしてみましょう。更新は Mac だと Command+RWindows だと Ctrl+R です。そして、この様に 2014 という数字が今、ここには1文字も入っていないのに、表示されました。この様に、getFullYear は西暦の年を引き出してくることが可能です。行末には ; (セミコロン)を打っておきます。そして、最後、数字オブジェクトについてやっていきましょう。m というオブジェクトを宣言して、その中にメソッドを書いていきましょう。まず Math.floorそして (Math.random)そして、もう一回 ()そして、1回 ; で行末を閉じてまず、この Math.floorこれは小数点を整数にならす小数点を切り捨てるメソッドです。そして、この Math.floor の中身に入っている Math.random はランダムな少数を、実は生成するためのメソッドです。 そして、このままだと少数を切り捨てられると0 になってしまうのでこの Math.random で生成された小数に* (かける)ことの 10 をしてあげると整数が取り出せます。実行結果を HTML で見るためにdocument.write を書いて「' ランダムな数字 '」と入力してそして、それに連結で + することの変数 m と書いてあげます。そして、上書き保存をしてブラウザ上で更新。そうすると、今は 6 と出ていますが、何回か更新をすると、違う数字が生成されることが分かります。もしも、これが *10つまり、小数を整数にしただけではなくて更に 100 を掛け算するとどうなるでしょうか?ここで上書き保存。そして、ブラウザ上で更新。そして、何回も更新してみましょう。更新を繰り返す度に2桁のランダムな数字が今度は、取り出せるように変わりました。この様に、ランダムな数字を使うと様々なプログラムに応用が利きます。是非、小数点の切り捨てそして、ランダムな数字の生成のやり方を覚えておきましょう。また、この他にもメソッドというものは非常に沢山あります。ブラウザで MDN js と検索をしてこの様に MDN と出てきたサイトのMOZILLA DEVELOPER NETWORKというサイトですが、こういった検索バーに例えばmath.random などと検索をしてみるとこの様に、メソッドの説明文を読むことができたり.ramdom を省略して検索をするとこの Math に関する様々なメソッドやプロパティを検索することも可能です。 例えば ceilfloor の代わりに ceil を使うと切り上げで小数点を処理することができたりround だと、四捨五入で小数点を処理することが可能です。この様に、メソッドは沢山ありますので興味がある場合は是非、この様なリファレンスサイトを活用してみましょう。このレッスンでは JavaScript のオブジェクトとメソッドについて学びました。

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

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

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月02日
再生時間:2時間49分 (27 ビデオ)

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

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

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