今回もJavaScriptの続きです
100日後にエンジニアになるキミ - 21日目 - Javascript - JavaScriptの基礎4
頑張って着いて来てくださいね。
関数(function)
関数とはプログラムの中で処理をまとめる機能のことです。
プログラム言語の中では始めから機能として備わっている
「組み込み関数」を用いる方法と
自分で関数を定義して使う方法があります。
ここでは自分で定義して使う関数のことを説明していきます。
関数宣言の書き方
function 関数名 (引数) {
処理;
}
宣言をした関数を使うには
関数名 (引数)
と書いて関数を実行します。
function log_text(text){
console.log(text)
}
log_text(10);
10
関数式の書き方
JavaScriptでは関数を変数として書くことができます。
この場合は関数名が不要になります。
var 変数名 = function(引数){
処理;
}
使い方も関数の宣言と同様です。
var tex = function(text){
console.log(text);
}
tex(11);
11
アロー関数の書き方
ES2015からは独特の書き方で関数を定義できます。
var 変数名 = (引数) => {
処理
}
使い方は通常の関数などと同様です。
var arrow1 = (text) =>{
console.log(text);
}
arrow1(12);
12
その他の関数の書き方
1行であれば{}も不要です。
var 変数名 = (引数) => 処理;
var arrow2 = (text) => console.log(text);
arrow2(13);
13
引数が1つであれば()も不要です。
var 変数名 = 引数 => 処理;
var arrow3 = text => console.log(text);
arrow3(14);
14
関数の定義の仕方はたくさん書き方があるので
ソースコードの中では読み取れるようにしておきましょう。
戻り値
関数で処理をした結果を戻り値として戻すことができます。
関数は戻り値使わなくても定義できますが
戻り値を使えば、関数内の結果を使いまわすことができます。
returnの右側の値が戻り値となります。
戻り値の書き方
function 関数名 (引数) {
処理;
return 戻り値;
}
戻り値を関数内で定義した場合は
function return_num(num){
return num * num;
}
console.log(return_num(10));
100
上記関数では計算した結果を戻しています。
戻された結果をconsole.logで表示させています。
関数の戻り値を関数にすることもできます。
function sample(num) {
return function(num) {
return num * 2;
}
}
var result = sample();
console.log( result(3) );
6
関数の呼び出し
HTML側で関数を呼び出す際には
どのタイミングで関数を実行させるかを書かないといけません。
HTMLのロード時に関数を実行する
window.onload = function() {
処理;
}
この例では、HTMLのファイルを開いた際に実行されます。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
console.log( 'コンソールに文字出力' );
}
</script>
</head>
<body>
</body>
</html>
コンテンツ要素は何もないですが、コンソールに出力されます。
クリック時に関数を実行する
ボタンなど、クリックできる要素を用意しておくと、クリック時に実行できるようになります。
<button onclick="関数名()">aa</button>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var f1 = function() {
console.log( 'クリックしたよ' );
}
</script>
</head>
<body>
<button onclick="f1()">aaa</button>
</body>
</html>
コンテンツにはボタンを用意しました。
ボタンをクリックするとコンソールに文字が出力され
クリックした回数の分だけ実行回数が増えていきます。
イベントで実行する
addEventListener(type,関数名)では
様々なイベント(マウス、キー操作)を受け取って関数を実行させることができます。
document.getElementById(id名)はHTMLのid名にマッチした要素を取得し
取得した要素は変数に格納でき , イベント処理などに利用できます。
まずはどの要素をイベントのキーにするかをgetElementByIdなどで取得しておき
addEventListenerでどのイベントで実行させるかを決めることが出来ます。
var 変数名 = document.getElementById(id名);
var 関数変数名 = function(){処理;}
変数名.addEventListener("イベント" , 関数変数名);
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function(){
var button = document.getElementById('mybutton');
var myfunc = function(){
console.log("addEvent");
}
button.addEventListener('click',myfunc,true);
};
</script>
</head>
<body>
<button id="mybutton" value="Check">Check</button>
</body>
</html>
はじめにどのbuttonの要素をとるのかをdocument.getElementByIdで取得しておきます。
addEventListenerでclickイベントを受け取った際に関数を実行するということを定義します。
イベントハンドラ
JavaScript関数はイベントを受け取って実行させることが出来ます。
イベントハンドラは動作・操作に対して特定の処理を与えるための処理のことです。
イベントハンドラは作動させたい要素に対して指定をします。
<button イベントハンドラ="関数名">要素</button>
イベントハンドラの種類
| イベントハンドラ名 | 操作内容 |
|---|---|
| onBlur | ページやフォーム要素からフォーカスが外れた時に発生 |
| onFocus | ページやフォーム要素にフォーカスが当たった時に発生 |
| onChange | フォーム要素の選択、入力内容が変更された時に発生 |
| onSelect | テキストが選択された時に発生 |
| onSelectStart | ページ内の要素が選択されようとした時に発生 ※IEのみ |
| onSubmit | フォームを送信しようとした時に発生 |
| onReset | フォームがリセットされた時に発生 |
| onAbort | 画像の読み込みを中断した時に発生 |
| onError | 画像の読み込み中にエラーが発生した時に発生 |
| onLoad | ページや画像の読み込みが完了した時に発生 |
| onUnload | ウィンドウを閉じ,他ページに切替え,ページリロード時に発生 |
| onClick | 要素やリンクをクリックした時に発生 |
| onDblClick | 要素をダブルクリックした時に発生 |
| onKeyUp | 押していたキーをあげた時に発生 |
| onKeyDown | キーを押した時に発生 |
| onKeyPress | キーを押してる時に発生 |
| onMouseOut | マウスが離れたした時に発生 |
| onMouseOver | マウス乗った時に発生 |
| onMouseUp | クリックしたマウスを上げた時に発生 |
| onMouseDown | マウスでクリックした時に発生 |
| onMouseMove | マウスを動かしている時に発生 |
| onDragDrop | マウスでドラッグ＆ドロップした時に発生 |
| addEventListener() | object に対してイベントを設定 |
| removeEventListener() | addEventListener()で登録したイベントハンドラを削除 |
まとめ
関数は処理をまとめるのにプログラミングでは多様される機能です。
WEBサイトではHTMLと組み合わせて作動させるのに使うため
どの場合に処理をさせるか、どういう処理をさせるのかなどを
把握しておく必要があります。
イベントも数多くあるので色々試しながら覚えていきましょう。
君がエンジニアになるまであと78日
作者の情報
乙pyのHP：
http://www.otupy.net/
Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw
Twitter：
https://twitter.com/otupython