全国5万人が受講している「サイタ」

JavaScript入門講座

JavaScript入門講座を選ぶ

初回60分無料体験OK

まずは60分の体験レッスンからスタート。
無料で実際のレッスンを体感できます。

月々4,900円〜の低料金

先生ひとりじめの個人レッスンを、この価格でご提供。レッスンは全てプライベート形式の60分間です。

通わない月は0円

曜日と時間を選べるので、
無理なくマイペースに通えます。

詳しくはこちら

Web・デザインスクールJavaScript入門講座東京 優の開発から学ぶJavaScript スクールブログ 関数について

関数について

関数とは、何らかの「手続き」を1つにまとめることが出来るものです。

関数には「引数」というものも存在します。
その引数に何らかの値を入れることで、処理(手続き)を
変更させることができます。


例えば、
<h1>鈴木 太郎<em>Tarou Suzuki</em></h1>
<p>ユーザ1</p>
<h1>木村 太郎<em>Tarou Kimura</em></h1>
<p>ユーザ2</p>
<h1>佐藤 太郎<em>Tarou Sato</em></h1>
<p>ユーザ3</p>
...
と、上記のように毎回入力するのは面倒なので関数に直してみます。

===== 実処理 =====
var cnt = 1;
// 上記の<h1>...</h1>を作成する関数を作成。
// 引数janame(日本語),enname(ローマ字)の2つを取ります。
function create_user(janame, enname) {
  var p = document.getElementById( "div-id" );
  p.innerHTML += "<h1>"+janame+"<em>"+enname+"</em></h1><p>ユーザ"+cnt+"</p>"
}

// 作成した関数を呼び出し、<h1>...</h1>を実際にWebブラウザ上に表示していく。
create_user("鈴木 太郎", "Tarou Suzuki" );
create_user("木村 太郎", "Tarou Kimura" );
create_user("佐藤 太郎", "Tarou Sato" );
create_user("今井 太郎", "Tarou imai" );
create_user("土屋 太郎", "Tarou tsuchiya" );
...
/*
* create_user関数を一番最初に作成しているので、後は呼び出すだけで、
* 下記のようなHTMLコードが自動生成されます。
* <h1>鈴木 太郎<em>Tarou Suzuki</em></h1>
* <p>ユーザ1</p>
* <h1>木村 太郎<em>Tarou Kimura</em></h1>
* <p>ユーザ2</p>
* <h1>佐藤 太郎<em>Tarou Sato</em></h1>
* <p>ユーザ3</p>
* ...
*/
===== 実処理ここで終了 =========================

何度もHTMLを書かなくとも、一度「create_user」という関数を作成して、
後は呼び出すだけでHTMLコードが自動生成されるサンプルを作成してみました。
関数は複雑な処理を書くようになってくると必須です。

他のプログラミング言語でも出てくる最も基本的なことなのでしっかり
やっていきたいと思います。

今回はcreate_userという名前にしましたが、関数名は識別子として好きな名前を
つけることが出来ます。

CSSで言うなら、
.divcls {
 margin: 0;
 padding: 0;
 font-weight: bold;
 background: #101821;
}
...
<div class='divcls'>
...
<div>
<div class='divcls'>
...
</div>
に似ているかもしれません。divclsというスタイルをスタイルシートに一回書いてしまえば、
後はHTML側のタグのclass属性に指定するだけで、指定されたタグ全てにスタイルが適用される。。。つまり、JavaScriptで言う関数がdivclsにあたり、呼び出している箇所が
各タグのclass属性ということになります。
こんな感じですかね。。

今回は以上となります~。

 

(2013年10月23日(水) 10:34)

前の記事

この記事を書いたコーチ

Webアプリ、android開発と実績豊富。簡単なサンプルからスタート

ブログ記事 ページ先頭へ