JavaScriptの関数を使いこなす

関数をメソッドとして定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトにブロバティで定めた関数をメソッドと呼びます。その機能と使い方をご説明します。
講師:
07:04

字幕

このレッスンでは オブジェクトに定めた関数― これをメソッドと呼びますが その機能と役割 使い方について説明します 今 Dreamweaver で開いているのは― まだ script 要素だけで― JavaScript コードの書いていない HTML ドキュメントです ここにまず オブジェクトを定めます 変数は簡単に obj ということで― オブジェクトは 中括弧の始まりと閉じで定めることができます これでは空っぽですが プロパティを入れます x y という2つの座標にします x が 1 y も 1 ということにします そして このオブジェクトに― プロパティ getDistance と というプロパティを定めます イコールで 例えば何か値を代入してもいいわけです どんな値でも入れられます そして そのどんな値の中には 関数も含まれるんですね ですから関数を入れます function そして プロパティというのは 変数と役割は同じです ただ オブジェクトの中に入っている変数 ということです ですから変数に入れてしまうのであれば 関数は名前を付ける必要がありません 名前のない関数ということで 処理を書きます getDistance 距離を測ろう ということです どこからの距離か というと 原点 0 0 から― 今 x y を 1 1 にしていますから― 0 0 から 1 1 までの距離を 計算して返す という関数にします ではまず― 処理は三平方の定理ですね x の2乗と y の2乗を足して 平方根取ります まず平方根を取る前に 2乗と2乗の足したものを求めましょう 2乗なので― square という変数名にしておきますが 2乗ですね Math.pow です そして― x の2乗ですが オブジェクトの x です ということを示すためには― 必ず this. を付けてください 単に x というと どの x だろうということになり これは実は仕様は結構複雑です オブジェクトの x ということを 示すためには― this x とつけます 2乗ですね そして足すことの― Math.pow ― pow というのは power の略ですが またここも this.y ですね 2乗 と― これで 2乗の合計が出ましたので return と返します ただ square を いきなり返してしまうと― これはまだ2乗ですから 平方根でないといけないので Math.sqrt square root 日本語に直せば 文字通り 平方根です square は平方 root は根なので― そこに今の平方 square を― 入れてあげればいい と これでオブジェクトに対する 関数 つまり メソッドの定義ができました 後はもちろん 関数というのは 呼び出さないといけませんので 呼び出します それはもう console.log の中に 入れてしまいましょう console.log そして― オブジェクトに対してですから obj. も必ず必要です obj. コピーを持ってきて getDistance ― 呼び出しは 括弧 括弧 丸括弧が必要です ではこれで 保存して確認しましょう ブラウザでプレビューします JavaScript コンソールを出しましょう 「開発/管理」から 「JavaScript コンソール」 そうすると 1.414 これはルート 2 ですね x y が 1 1 ということは― 三角定規の あの直角二等辺三角形と同じ形になりますので 1 対 1 対 ルート 2 と いうことになりますから ルート 2 が出たら これは正しい ということになります コンソールは 一旦クリアしておきます オブジェクトをもう1つ定めましょう 改行して var obj2 ということで― その後は中括弧ですね x y のプロパティを定めます x は 1 ― y は 勿論数字一緒ではつまらないので Math.sqrt の― 3 と つまり ルート 3 ですね 1 対 ルート 3 これは― 三角定規のもう1つの形になります そしてこの obj2 にも 同じ getDistance という― メソッドを定めたいと思いますが ここは不精をして― obj の getDistance を そのままもらって代入します これで定義ができたので やはり 呼び出しが必要ですね コピーして― ペーストして 勿論名前は obj2 に変えます ここでのポイントは― obj2 に対して getDistance 呼び出しました でも そこに代入されている getDistance というのは― obj からもらってきたものですね obj に入っているものを代入しています すると getDistance で this といった時に― それは obj2 の x y 座標なのか obj の x y 座標なのか― これは実は書き方や言語などによっても 違うので 迷って当然です JavaScript ではこうだ という事を ご理解ください 確認しましょう ファイルを保存して ブラウザで見てみます では ページをリロードします この1行目は obj のほうですね ルート 2 です そして2行目 こちらが obj 2 のほうですが― 数字が違う ということは obj2 の数字が使われました 1.9999 と ありますが これは誤差があるので 2 です ちょっと HTML ドキュメントのほうに 戻って 確認してみましょう JavaScript で オブジェクトのプロパティに関数を代入― つまり メソッドを定めると そのメソッドの中で this といった場合には― その関数が代入されたプロパティの持ち主も this として計算することになります そして obj2 の方は x が 1 そして y が ルート 3 ということですので 三角定規のもう1つのほうの形― 1 対ルート 3 ということは 斜辺が 2 ですので 2 という数字が出たわけです このレッスンでは オブジェクトに定める関数― メソッドの機能 使い方についてご説明しました

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

2時間22分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月28日

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

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

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