トップ
言語
JavaScript
入門編
JavaScriptの関数
JavaScriptの関数の定義方法や引数と戻り値など。JavaScriptの関数についてまとめています。
この記事の目次です。
1. 関数とは
2. JavaScriptでの関数の定義方法
3. JavaScriptの関数の引数と戻り値
4. JavaScriptの関数の戻り値をhtmlに表示する方法
関数とは、いくつかの処理を1つのグループにまとめたもので、 引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返します。
以下では、JavaScriptの関数の定義方法、引数と戻り値について見ていきます。
JavaScriptでの関数の定義方法には以下があります。
以下はJavaScriptでfunction文を用いて関数を定義する方法のサンプルです。
ブラウザに「Hello JavaScript」という文字列を表示するサンプルソースです。
<html> <script type="text/javascript"> function hello(){ document.write("Hello JavaScript"); } </script> <body> <script type="text/javascript"> hello(); </script> </body> </html>
htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。
関数リテラルの構文では必ずしも関数に名前を付ける必要ありません。 このような名前を付けずに定義した関数を「無名関数」や「匿名関数」と呼びます。
以下は関数リテラルを用いる方法のサンプルです。
ブラウザに「Hello JavaScript2」という文字列を表示するサンプルソースです。
<html> <script type="text/javascript"> var hello = function() { document.write("Hello JavaScript2"); }; </script> <body> <script type="text/javascript"> hello(); </script> </body> </html>
htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。
以下はJavaScriptでFunctionオブジェクトを用いて関数を定義する方法です。
ブラウザに「Hello JavaScript3」という文字列を表示するソースです。
<html> <script type="text/javascript"> var hello = new Function('document.write("Hello JavaScript3");'); </script> <body> <script type="text/javascript"> hello(); </script> </body> </html>
htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。
ここでは、JavaScriptの関数の引数と戻り値について見ていきます。
関数を呼び出す際に、呼び出す側から関数に入力値を与えることができます。 この入力値を引数といいます。
関数の引数は以下のコードのnameにあたる部分です。
function hello(name) { document.write("Hello " + name + "!!"); }
関数に対して複数の入力値がある場合は、複数の引数を指定できます。 また、関数に対して渡すべき値が無い場合は、上述の例のように引数を指定せずに関数を呼び出します。
関数での処理の結果を呼び出し側に戻したい場合があります。 その場合に戻り値を設定します。
function hello(name) { return "Hello " + name + "!!"; } document.write(hello("JavaScript"));
関数の処理結果は上の例のようにreturn文を利用すると戻り値として関数の呼出元に設定値を戻すことができます。
以下はJavaScriptの関数の引数と戻り値の例です。
ブラウザに「Hello JavaScript4!!」という文字列を表示するソースです。
<html> <script type="text/javascript"> function hello(name) { return "Hello " + name + "!!"; } </script> <body> <script type="text/javascript"> document.write(hello("JavaScript4")); </script> </body> </html>
htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。
JavaScriptの関数の戻り値をhtmlに表示する方法についてです。
上述のサンプルで示したようにdocument.write()を使用することでdocument.write()の引数に指定した文字列をhtmlに出力することができます。
その他に、htmlのタグのオブジェクトを取得して値に関数の戻り値を設定することでhtmlに出力することができます。
<html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <p id="a">ここに文字列を出力します。</p> <input type="button" value="ボタン" onclick="document.getElementById('a').innerHTML='Hello World!!';"> </body> </html>
以下はhtmlのタグのオブジェクトを取得して値に関数の戻り値を設定することでhtmlに出力する方法に関連した記事です。
JavaScriptでinnerHTMLを操作した書き換えの例など。htmlのタグのテキスト内容の変更の仕方についてまとめています。
innerHTMLプロパティとfor in文を使ってliタグを追加する例など。JavaScriptで箇条書きを生成するやり方をまとめています。
JavaScriptの入門から応用まで。JavaScript言語についてまとめています。
更新履歴になります。
スポンサーリンク
サイト内のページ
言語
C・C++
/HTML
/Java
/JavaScript
/PHP
/シェルスクリプト
開発環境
Ant
/Burp
/Eclipse
/Fiddler
/gcc
/gdb
/Git
/g++
/JDK
/JMeter
/JUnit
/Teraterm
/ZAP
技術・仕様
Ajax
/CORBA
/Jakarta EE(旧称J2EE、Java EE)
/JNI
ライブラリ/Framework/CMS
bootstrap
/jQuery
/FuelPHP
/Lucene
/MyBatis
/Seasar2
/Spring
/Struts
/WordPress
Web API
Google Maps
ITインフラ
OSとミドルウェア
Linux
/Windows
/シェル
ActiveMQ
/Tomcat
/MariaDB
/MySQL
/Nagios
/Redis
/Solr
ITインフラ
セキュリティ
公開サーバーのセキュリティ
SI
ホームページの作り方
スポンサーリンク
関連サイト内検索ツール
zealseedsおよび関連サイト内のページが検索できます。
IPアドレス確認ツール
あなたのグローバルIPアドレスは以下です。
3.14.145.8
HTMLの表示色確認ツール
パスワード生成ツール
文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。
ここに生成されます。
スポンサーリンク
Copyright (C) 2007-2024 zealseeds. All Rights Reserved. Loarding…