
スキルアップ
2021.01.27
給料が高い仕事の特徴や年収を調査。高収入を目指す方法も紹介
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
JavaScript
2017.11.29
関数は、プログラムで行う処理を記述して 一つのまとまりにしたもので、JavaScript では、function というキーワードを使って記述します。
今回は、プログラムの中核をなす関数の作り方を紹介します。
1.関数とは
2.onClick で関数を呼び出す
3.onload イベントで関数を呼び出す
関数は、プログラムで行う処理を記述して 一つのまとまりにしたものです。
例えば、実行ボタンをクリックした際に 入力値の合計額を計算するようなプログラムは、次のように組み立てます。
入力値を全て加算する関数を作成
↓
実行ボタンクリック時に、作成した関数を呼び出す
上記のように関数を作成すると、実行ボタンが複数の場所に設置された場合でも、各実行ボタンのクリック時に 同じ関数を呼び出せば良いことになります。
関数は、一連の処理を記述するものもありますが、サイトの中で共通する処理を記述した関数を作成して、必要な各場面で使い回すようなものもあります。
プログラムが大きくなると、同じ内容の処理をあちこちで行うことがありますが、その都度 同じ処理を記述すると、長くて読みづらいプログラムになってしまいます。
そのような場合には、同じ処理を 1 つの関数で定義して、必要に応じて その関数を呼び出すという形で記述すると、プログラムがシンプルで読みやすくなります。
また、処理内容に変更が生じた際にも、修正が 1 カ所で済むという 運用上のメリットもあります。
同じような処理が何度も出てくる場合は、関数の記述方法を工夫して、シンプルで運用し易いプログラムを考えることが重要です。
JavaScript では、function キーワード使って、関数を次のように記述します。
function 関数名(引数1,引数2,・・・){
//処理内容
return 返り値;
}
function キーワードに続けて、任意の関数名を記述します。
関数を呼び出す際に 関数で使用する値を渡したい場合は、カッコ内に 引数を指定します。
引数は数に制限がなく、複数の引数を指定する場合は、カンマ( , )で区切って指定します。
引数を指定しない場合は、関数名の後に 空のカッコを記述します。
また、関数を実行して処理を行った結果、呼び出し元に必要な値を返したい場合は、return というキーワードを使って、返り値を記述します。
特に返り値がない場合は、return の記述は不要です。
function キーワードを使って作成した関数は、必要な場所で呼び出して使用します。
ボタンをクリックしたタイミングで JavaScript の関数を呼び出す場合は、HTML の input 要素内で、次のように記述します。
<input type=”button” onClick=”関数名( )”>
input 要素の OnClick 属性に、関数名を指定します。
下のサンプルは、ボタンがクリックされた時に アラートでメッセージを表示するプログラムです。
表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { alert("表示ボタンがクリックされました!"); } //--> </script> <div style="background-color : #CCC; padding : 20px;"> <input type="button" value="表示" onClick="disp()"> </div>
上のサンプルを少し変えて、引数のある関数を呼び出します。
各表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp(arg) { alert(arg + "ボタンがクリックされました!"); } //--> </script> <div style="background-color : #CCC; padding : 20px;"> <div style="display:inline-flex;"> <input type="button" value="表示1" onClick="disp('表示1')"> <input type="button" value="表示2" onClick="disp('表示2')"> <input type="button" value="表示3" onClick="disp('表示3')"> </div> </div>
関数も、引数を 1 つ指定して定義しています。
「 arg 」は 引数名で、任意に名付けます。
そして、「 onClick=”disp2(‘表示1’)” 」として関数を呼び出しています。
「 表示1 」が引数として関数に渡す値です。
文字列のため、引用符で囲んで記述します。
ここでは、関数を指定するために ダブルコーテーション( ” )を使用しているので、シングルコーテーション( ‘ )で囲んでいます。
(ダブルコーテーションとシングルコーテーションが逆になってもOKです。)
Webページを読み込むタイミングで JavaScript の関数を呼び出す場合は、onload イベントを使用します。
HTML の body 要素内で、次のように onload イベントを記述すると、Webページが表示される時に関数を呼び出すことができます。
<body onload=”関数名( )”>
また、script 要素内で、次のように onload イベントを記述しても、同様に関数を呼び出すことができます。
window.onload = function( ){
//処理内容
}
下のサンプルのテキストボックスには、Webページが表示された時の日時データが表示されています。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- window.onload = function() { document.getElementById("dat").value = new Date(); } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="dat"> </div>
日時データの取得については、JavaScript【 Date 】1~Dateオブジェクトで日付を取得をご参照下さい。
スキルアップ
2021.01.27
「給料が高い仕事に就きたい」「今の給料に不満がある」など、給料についての願望や悩みは、多かれ少なかれ、持っている方も多いのではないかと思います。この記事では、給料が高い仕事の業界や特徴、年収を上げるための具体的な取り組み […]
スキルアップ
2021.01.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
INTERNOUS,inc. All rights reserved.