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

ユーザー定義関数の作り方と使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
自分自身で、複数の処理を組み合わせてオリジナルのJavaScriptの命令を作ることができるユーザー定義関数について、その作り方と使い方について解説致します。
講師:
07:34

字幕

このレッスンでは JavaScript での ユーザー定義関数の作り方と 使い方について解説致します まずはダウンロードしてきた ファイルの中にある function という名前のついた HTML ファイルと JavaScript ファイル これらをエディタで開いておいて下さい そしてこれがそのファイルを開いた状態です このファイルはこの HTML ファイルが 外部ファイル化している JavaScript を読み込んでいる状態です そしてその JavaScript ファイルには まだ何も書いていない状態です これらのファイルを使いながら 今回のユーザー定義関数について 説明をしていきたいと思います それではレッスンを始めましょう まずユーザー定義関数とは何かというと ユーザー定義関数とは簡単にいうと 自分で複数の処理を組み合わせて作る オリジナルの命令のことを指します このユーザー定義関数は 一度作ってしまうと 後で自分の好きな場面で 使い回すことができます このユーザー関数の作り方ですが いくつか方法があります ただこのレッスンでは 最も基本なユーザー定義関数の作り方について 紹介していきたいと思います それでは実際に コードで書いていってみたいと思います まずこちらの JavaScript ファイルを開きます そしてこちらにユーザー定義関数を 作成していきます ユーザー定義関数はまずこのように function と書きます そしてその次に半角スペースを空けて 関数の名前を書きます ( ) そしてその後に { } の ; そしてこの { } の間には 一行空けておきましょう そしてこの { } に実行したい処理を 書いていくわけです このような形でユーザー定義関数を 作っていきます それではもう少し具体的に 書いていきたいと思います function そして半角スペース 名前のところですね 今回はサンプルとして英語で showDate と名前を付けておきます そしてこの実行したい処理の部分ですが 本日の日付を取得して それを HTML に吐き出す といった処理を書いてみたいと思います まず日付オブジェクトの作成ですね まず now という変数を作ってその中に new Date とします これで変数 now に日付オブジェクトが 格納されました それでは次に何月何日というのを 取得してみましょう 同様に変数を作って まず月を格納する変数 m を作ります そして日付オブジェクトの now から getMonth( ) そして +1 ; この getMonth では今日の月の数の 1ヶ月前の数値を取得してきますので 今日の月に合わせるためには それに +1をしてあげるわけですね 次に何日の部分です 変数 d というのを作って = (イコール) 日付オブジェクトの now.getDate(); これで変数 d に今日の日付が入りました それではこれらの情報を1つの まとまった書式にしてみましょう まず変数を作ります 名前を tody としておきましょう =(イコール) まずは何月の部分ですね その変数 m+""(ダブルクォーテーション)の "月" と書きます 更に + の 今度は何日の変数 d を入れます そして + ""(ダブルクォーテーション)の "日" そして; (セミコロン) これでこの today という変数の中に 何月何日という情報が入りました 最後にこれをブラウザで 出力するようにしてみましょう document.wirteln(); そしてここに today と書きます そしてわかりやいようにここに タグも 一緒に連結させておきましょう これでユーザー定義関数の作成が完了しました この showDate という関数は 実行すると 本日の日付をブラウザで出力してくれる 処理となります それではここで作成したユーザー定義関数 どのようにして使うかというと このようにして使います 上で決めたこの showDate という名前 そのまま使います showDate(); これで完了です それでは実際にちゃんと動くか この状態でファイルを保存して HTML ファイルを ブラウザで開いてみましょう まずはファイルを保存します そして HTML ファイルを ブラウザで開いてみましょう するとこのように本日の日付が 出てきましたね それではエディタに戻ります このように一度ユーザー定義関数を 作ってしまえば 自分の好きなとき使いたい時に これを利用することができます ですので極端なお話 例えばこれをコピーしてこのように 3つ書いてみたとします 一度この状態で保存をしてブラウザで 見てみましょう 保存をしてブラウザで開きます するとこのように3回出てきましたね このように自分が使いたいときに 簡単に使えるというのは大変便利です このユーザー定義関数の作り方と 使い方 忘れずに覚えておきましょう 以上でレッスンは終了です 今回は JavaScript で自分で複数の処理を 組み合わせて作る ユーザー定義関数の作成と 利用の方法について解説致しました このようにユーザー定義関数は 一度作成すると それを使いまわしていくことができるため 開発のスピードアップにもつながっていきます 積極的に利用していきましょう

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

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

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

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

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

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