JavaScriptプログラミング入門講座

引数の設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザー定義関数を実行する際に、特定のデータ(引数)を関数に渡して、それに応じた処理を行うための方法について、解説致します。
講師:
09:12

字幕

このレッスンでは JavaScript で ユーザー定義関数に引数を設定するための 方法について解説いたします まずは ダウンロードしてきた ファイルの中にある argument という名前のついた HTML ファイルと JavaScript ファイル これらのファイルを エディタで開いておいてください そしてこの画面が それらのファイルを開いた状態です このファイルは外部ファイル化された JavaScript を こちらの HTML で 読み込んでいる状態になります そして JavaScript の方には まだ何も書いていない状態となっています これらのファイルを使いながら 今回のレッスンを進めていきたいと思います それでは 早速レッスンを始めていきましょう まず引数とは何かですが 引数とは 他の JavaScript の 関数でも利用しますが その関数に対して こちらから指定した パラメータを渡して そのパラメータの内容によって 処理を変えるといった性質を持つものです それでは実際にコードで書いていきたいと思います JavaScript のファイルを開きます さて まず引数を与えるためには ユーザー定義関数を 先に作っておく必要がありますので そちらを先に作ります 今回はこのようなユーザー定義関数を サンプルとして作りたいと思います まずユーザー定義関数の funcition そして関数の名前ですね sayHello としておきましょう そして ( ) { } この波括弧の間を1行空けておきましょう そして ユーザー定義関数 sayHello の実際の処理を書いていきます 今回はまず変数を作ります 変数の名前は text とします そして = 文字列を格納するための " " そして ; (セミコロン)を作っておきます そして この文字列の中を "こんにちは、ジョンさん" としておきましょう そして この変数 text に入った文字列を ブラウザのアラートダイアログに 出力させてみたいと思います window.alert ( ); この alert の括弧の中には そちらの変数 text と書いておきましょう そして sayHello というユーザー定義関数を 実行するプログラムを書いておきます それでは1度この状態でブラウザで 確認してみたいと思います ファイルを保存して HTML ファイルを開きます こちらの HTML ファイルですね こちらを開くと「こんにちは、ジョンさん」と 出てきましたね OK ボタンを押してエディタに戻ります さて 今回アラートで出す内容として 「こんにちは、ジョンさん」という内容にしましたが 例えば こちらの文字列の内容を その時々で指定したものに変えたい といった状況が発生するとします そういった場合に今回の引数を利用します 今回 こちらの「ジョンさん」を その時々で変えたいとします そのような場合には このようにやります まず こちらの sayHello の括弧の中に 引数のパラメータ 要するに与えたいデータを 格納するための変数を書きます ここでは 例えば who としておきましょうか このように書くと この function sayHello の{ }(波括弧)の中 この波括弧の中で この who という変数が 使えるようになります これを この「ジョンさん」のところを 差し替えます まず「ジョンさん」を消して 「こんにちは」という文字列の後に + して ここに変数 who を入力します これでユーザー定義関数側での 実装は完了しました 次はこちらの関数を呼び出す方です 関数を呼び出すこちらの sayHello の ( ) の中に この who に入れたい内容を記入します 今回はここに " " の文字列で "ジョンさん" としておきます これで 呼び出す方の設定も完了しました このように書くことで この「ジョンさん」という文字列が この who に引数として渡されて ここの who に入ってくるわけです それでは実際にファイルを保存して ブラウザで確認してみたいと思います ファイルを保存して ブラウザで確認します すると このように 「こんにちは、ジョンさん」と出てきましたね それではエディタに戻ります ちなみにこの引数ですが 複数設定する事も可能です 1度試してみましょう 今回は「こんにちは」の部分をその都度 指定できるようにしてみましょう こちらの引数 who の後に , (カンマ)をおきます そして ここに what と書きましょう そして この「こんにちは」の部分を削除して その前に + を書きます そして さらにその前に what と書きます こうする事によって この引数 what の中に入ってきた値が ここに反映されてくるわけです それでは 呼び出し元の方も設定しましょう ここですね この「ジョンさん」の後に, (カンマ) そして " " "こんにちは" と書きましょう このようにすることで "こんにちは" が what に格納されて こちらで出力されてきます ちなみに この "ジョンさん" と "こんにちは" という並びー who と what の並びは両方とも 一致していなくてはなりませんので そこだけは注意してください それではこの状態でファイルを保存して ブラウザで開いてみたいと思います こちらを開きますと 「こんにちは、ジョンさん」と出てきましたね エディタに戻りまして 別のパターンを書いてみましょうか こちらの1文をコピーして ここに貼り付けます そして例えばこちらを  "たけしさん" こちらを "こんばんは" とします そしてこの状態でファイルを保存して ブラウザで確認してみると まずは「こんにちは、ジョンさん」と出て その次は「こんばんは、たけしさん」と 出てきました エディタに戻ります このように引数を設定する事で その時々に応じて ユーザー定義関数の動き方を 変えることができるわけですね 以上で今回のレッスンは終了です 今回は JavaScript で 自分で作成したユーザー定義関数に 引数を設定する方法について解説しました ユーザー定義関数で 引数を設定できるようになると さまざまなシチュエーションに応じて 柔軟に関数での処理を変えることができ 大変便利です ぜひともマスターしておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

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

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

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

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