=========================================
JavaScript入門
=========================================

Hello, World!
=======================

| それではJavaScriptについて勉強していきたいと思います。
| JavaScriptはHTML内に記述することができます。
| headタグ内、もしくはbodyタグ内に下記のような記述をしたHTMLファイルを作成してみてください。

    .. code-block:: html
	
	   <script type="text/javascript">
	   <!--
	   document.write("Hello, World!");
	   // -->
	   </script>
	   
| 作成したHTMLファイルをブラウザで確認してみましょう。
| Hello, World! と表示されたら成功です。
|  

外部JavaScriptファイル(.js)
------------------------------

| JavaScriptもCSSと同様に、基本的にHTMLファイルから分離させます。
| 以下の１行を書いたファイルをsample.jsという名前で作成してください。

    .. code-block:: js
	
	  document.write("It Works!!");
	  
	  
| そして、このjsファイルを読み込むためのHTMLファイルを作成します。
| sample.jsと同じ階層に以下のようなファイルを作成してください。

     .. code-block:: html
	 
	   <script type="text/javascript" src="sample.js"></script>
	
| うまく外部ファイルを読み込めましたでしょうか？
| It Works!!と表示されたら成功です。


コメント
==========

コードを記述する中で、「何の処理なのかメモしたい」とか「他の人が見たときに分かり易いようにコメントを書こう」ということがよくあります。
JavaScript中にコメントを記述するには、コメントにしたい文章の頭に「//」を書きます。


.. code-block:: javascript

   //ここは表示されません。



| 「//」以降はコメントとして認識され、javascriptの実行時に無視されます。行の途中からコメントを記述することもできます。


.. code-block:: javascript

   alert("Hello World"); //ハローワールド



| 上記の場合、「alert("Hello World");」は実行されますが、「//ハローワールド」はコメントとして扱われ無視されます。
| また、複数行に渡るコメントも設定可能です。


.. code-block:: javascript

   /*
   ここの領域は
   コメントとして
   扱われ
   無視されます
   */


| /\*と\*/で囲まれた部分はコメントとなります。
| Javascriptに限った話ではなく、後々のためにも、そして他の人のためにもプログラムには適時コメントを書き残しておきましょう。



行末
========

| プログラムを書く際、「ココからココまでが1つの処理だよ！」ということを認識させてあげる必要があります。日本語の文章で言うところの句点です。
| 言語によっては改行が1つの処理を表すこともありますが、JavaScriptでは『;(セミコロン)』を使います。

.. code-block:: javascript

   document.write("Hello World!!");


| は、「Hello World!! と表示します。」という意味のプログラムで、document.write("Hello World!!")で1つの処理が終わる事を意味していました。
| 複数行のプログラムを記述する際、セミコロンが抜けてしまったら


.. code-block:: javascript

   document.write("Hello World!!")document.write("Hello Japan!!");


| document.write("Hello World!!")document.write("Hello Japan!!"); で一つの処理と認識されてしまい、文法エラーとなってしまいます。
| 日本語で考えてみると「Hello World!! と表示しますHello Japan!! と表示します。」です。
| 慣れないうちはセミコロンを忘れてしまいがちです。エラーが出たら先ずセミコロンがもれていないか確認してみるとよいでしょう。

関数
=========


| 数学で関数を学習されたことがあると思います。例えば「f(x)」。これはxにある値を入れたら、値が変換されて返ってくるというものです。
| プログラムにおける関数も基本的には数学の関数と同じ理解で問題ありません。

.. code-block:: javascript

    document.write(x);


| 先ほどから登場しているdocument.write(x)、これも関数です。xに入れた値をHTML本文中に表示します。
| 
| 他にも

.. code-block:: javascript

    alert(x);     // xに入れた値をアラートウィンドウで表示する
    print();      // 印刷を実行する
    scroll(x, y); // 座標x,yの位置まで画面をスクロールする


| など、いろいろな関数がありますので調べて実行してみましょう。
| 
| 


課題1
-----------

| document.write()、及びalert()を使って、自由に文章を表示してみましょう。
| 文章を表示することが出来たら、文章内にHTMLタグを打ち込んでみましょう。

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>



データ型
==========


**文字列型**

    | JavaScriptに『文字列(String)』を記述する場合、文字列全体を『"(ダブルクオート)』あるいは「'(シングルクオート)」で括ります。

    .. code-block:: javascript

       document.write("Hello World!!");


    | はwrite関数に「Hello World」という文字列を渡したいから「"」で括られていたことがわかりますね。

    .. code-block:: javascript

       document.write('Hello World!!');


    | でも同じ挙動になります。
    | 
    | ひとつ注意しなければならないのが、文字列の中でシングルクオートやダブルクオートを使いたい場合です。

    .. code-block:: javascript

       document.write("<a href="index.html">リンクだよ</a>");


    | と書きたくなりますが、""の間が文字列と認識されるので、「<a href=」と「>リンクだよ</a>」という2つの文字列、そして間のindex.htmlというナニかである、と解釈されてしまいます。
    | 後述のエスケープシーケンスを使うか、或いは

    .. code-block:: javascript

       document.write("<a href='index.html'>リンクだよ</a>");
       document.write('<a href="index.html">リンクだよ</a>');


    | のように、ダブル(シングル)クオート中でシングル(ダブル)クオートを使うことで回避できます。


**数値型**

    | JavaScriptに『数値』を記述する場合は括る必要性はありません。

    .. code-block:: javascript

       var a = 5;
       var b = 3;

**論理型**

    | 論理型はtrue,もしくはfalseであらわされる2項の型です。これも括る必要性はありません。

    .. code-block:: javascript

       var flag_a = true;
       var flag_b = false;

**ヌル型**

    | nullは有効な値が存在しないということを表すための値です。これも括る必要性はありません。

    .. code-block:: javascript

       var num = null;



デバッガの使い方
==================

| デバッガは、何行目にどういうエラーが出ているかを教えてくれるツールです。
| これを使いこなせるととても便利なので、使う習慣を身につけましょう。

.. image:: /_static/error.png


**Google Chrome、IEの場合**
    F12キーでデバッガを立ち上げることができます。


**FireFoxの場合**
    | FireFoxにはFirebugというアドオンがあります。下記のURLから入手できます。
    | https://addons.mozilla.org/ja/firefox/addon/1843/ これを使うと、構文のエラー等、エラーの内容を表示してくれます。


| また、デバッガにはプログラムを特定に位置で中断するブレークポイント機能や、一段階ごとに実行するステップ実行などがついています。



変数
=======

| 先ほどのプログラムでは、コンピュータに指示をする関数の勉強をしました。関数と並んでプログラムで重要なのが、変数です。
| 変数はコンピュータである値を保管しておくための器です。数学でも'x'という変数がよく定義されます。xにはいろいろな数字が入ります。それを拡張して、データなら何でも入れられるようになっているのが変数です。
| 試しに、1つ変数を作ってみましょう。

.. code-block:: javascript

   var text = "Hello, World!";

| varというのは以下の文字が変数であることを示すものです。JavaScriptの場合、varをつけて変数であるという宣言をする必要はありませんが、変数を定義した場所が分かるので、varをつけておくことをお勧めします。
| =の意味ですが、この場合は数学のように等号を示すものではなく、代入を示すものです。つまり、textという変数の中に、"Hello, World!"という文字列を入れるということを意味しています。 このテキストの中身を表示するには、

.. code-block:: javascript

   document.write(text);

| で可能です。先ほどと違うのは、ダブルクオーテーションがありません。これは、textという変数の中身を示しているからです。これを動かしてみると、

.. code-block:: none

   Hello, World!


| と表示されるはずです。このtextに入れる文章の値をさまざまに入れ替えてみてください。
| 変数の名前も自由です。さまざまな名前の変数を作ってみてください。


演算子
===========

これらの数値は、演算子を使うことで計算することが出来ます。


========  ===========================
 演算子    説明
========  ===========================
  \+        加算
  \-        減算
  =        乗算
  /        除算
  %        剰余(割ったあまりを返す)
========  ===========================

これとは別に、定型的な演算子もあります。


========  ==================================================
 演算子    説明
========  ==================================================
 ++        インクリメント(整数型の値に1を足す)
 \- -      デクリメント(整数型の値から1を引く)
========  ==================================================

.. code-block:: none

   注：表記上見難いですが、デクリメントはマイナス2つ連続して表記します。


| 
| 
| これらの演算子は、

.. code-block:: none

   ++a;
   a++;


| のように使います。この場合、aが整数であれば、aに1が加算されます。


.. code-block:: javascript

   var a = 0;
   document.write(++a);


| で試してみてください。これは、一見必要性がわかりにくいですが、後の単元で行う繰り返し処理などで非常に活躍します。
| ちなみに、++aとa++の違いですが、先に++を書いた場合、aに1を足してから処理が実行されます。あとに++を書いた場合、処理を実行してからaに数が足されます。


.. code-block:: javascript

   var a = 0;
   document.write(a++);
   document.write(a++);
   document.write(a);

   var b = 0;
   document.write(++b);
   document.write(++b);
   document.write(b);


| を実行して、その挙動の違いを確かめてみてください。
| 
| 

課題2
---------


    - 2つの変数を作成し、一通り四則演算を行いましょう。
    - 次に、変数に代入する値にダブルクオーテーションをつけ、文字列型に変更し、その結果を数列型と比較してみましょう。

        例えば、

    .. code-block:: javascript

       var a = 100+100;
       var b = "100"+"100";


    と入力し、それぞれどういう違いがでるか確かめてみてください。

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>


条件分岐
==========

**if文**

if文は以下のように記述します。

.. code-block:: none

   if (条件) {
   　処理A;
   } else {
   　処理B;
   }


条件に合致した場合は処理Aを、合致しなかった場合は処理Bを実行します。else節以降を外して、

.. code-block:: none

   if (条件) {
   　処理A;
   }


| とすれば、条件に合致したときにのみ実行する処理を記述可能です。
| 「**もし条件ならば、処理Aを実行する。条件でなければ、処理Bを実行する**」ということです。
| 例として、与えられた数字が偶数であるかを判定するプログラムを作成します。



   .. code-block:: javascript

       var a = 10;          // 変数aを定義し、10を代入
       if ( a % 2 == 0 ) {        // もし変数iを2で割った余りが0であれば、以下の処理を実行
           alert("偶数");     // アラートで「偶数」と表示
       } else {               // 上記条件に当てはまらなければ、以下の処理を実行
           alert("奇数");     // アラートで「奇数」と表示
       }



この条件式の中に含まれている==ですが、これは等しいことを表す演算子です。左右の値が同じであれば、条件に合致したと見なされます。
この場合、条件式が真であるといいます。


**比較演算子**

これらの演算子は比較演算子と呼ばれ、以下のようなものがあります。


====== ========
 符号   説明
====== ========
 \==    等しい
 !=     異なる
 <      小なり
 >      大なり
 <=     以下  
 >=     以上  
====== ========


**論理演算子**

さらに複雑な条件式を組むために、論理演算子が使用できます。

===== =====
 &&    AND 
 \||   OR  
===== =====

例えば、aが偶数かつ100より大きい、という条件を作る場合は、

.. code-block:: none

   a % 2 == 0 && a > 100


と書くことが出来ます。


**elseif文**

if文をさらに高度にさせた文に、elseif文があります。if文のelseの場合、さらに条件分岐をさせるものです。

.. code-block:: none

   if (条件式A) {
     処理A;
   } else if (条件式B) {
     処理B;
   } else {
     処理C;
   }


条件式Aが真の場合は処理A、条件式Aが偽の場合で条件式Bが真の場合はB、どちらも偽の場合はCが実行されます。else ifをたくさんつなげて、より高度な処理を行なうことも可能です。


インデント・字下げ
===================

| プログラムを記述するときに注意しなければいけない事のひとつにインデント(字下げ)があります。
| HTMLやJavaScriptの構造を分かりやすくするために空白を入れたり、適切な所で改行することが求められます。
| 例えば以下の2つのプログラムは全く同じ働きをします。

  .. code-block :: js
  
          if(a== b){document.write("aとbは等しい");
	          }
			  else  
	     {document.write("aとbは等しくない");
	    }
	  
.. code-block :: js
  
    if (a == b) {
        document.write("aとbは等しい");
    } else {
        document.write("aとbは等しくない");
    }

| 上のようにインデントを無視してしまうと、文法エラーを起こしやすくなったり、他の人が読みにくいコードになってしまいます。
| 単語や括弧の間には1つスペースを空ける。4つスペースを空ける等といったルールがあります。
| プログラミング言語によってはこのインデント自体がプログラム構造の解釈を決定づけるものもあります。
| 最初のうちは戸惑ってしまいがちですが、大事なことなので学習する時からしっかりと注意してみてください。


switch文
=================

| 条件分岐の項目でif文について理解したと思います。
| switch文は与えられた変数の値によって処理を分岐する方法です。
| caseの後に想定する変数の値を記述し、case毎に処理を記述します。
| 実行時に変数に渡された値と、caseの後に記述した値が一致すると処理が実行されます。
| それぞれの処理の終了部分には「break;」を記述します。「break;」が記述されていないと以下に続く処理が続いて実行されてしまいますので気をつけましょう。

 .. code-block:: js

    var science = 'chemistry';                            // 変数scienceを定義し、chemistryという文字列を代入
    
    switch (science) {
        case 'physics':                                   // 変数scienceの値がphysicsであれば以下の処理を実行
            document.write("私は物理が好きです。");          // 「私は物理が好きです。」と表示する
            break;                                       // switch文を終了
        case 'biology':                                  // 変数schienceの値がbiologyであれば以下の処理を実行
            document.write("私は生物が好きです。");         // 「私は生物が好きです。」と表示する
            break;                                       // switch文を終了
        case 'chemistry':                                // 変数schienceの値がchemistryであれば以下の処理を実行       
            document.write("私は化学が好きです。");         // 「私は化学が好きです。」と表示する
            break;                                      // switch文を終了
        default:                                        // 変数scienceの値がphysicsでもbiologyでもchemistryでもない場合、以下の処理を実行
            document.write("私は理科が好きです。");        // 「私は理科が好きです。」と表示する
            break;                                      // switch文を終了
    }

| 上記の例では変数scienceにchemistryが代入されているので「case 'chemistry':」の処理が実行され、「私は化学が好きです。」と表示されます。
|   

課題3
---------

| 数値を入れ、100以上200未満の場合は、その数を3で割った余りを「漢数字」で表示するプログラムを作りましょう。
| if文とswitch文の両方を使ってください。


.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>


繰り返し文
==========================

| プログラムを書いていると、ループ(繰り返し)をさせて複数の項目の表示を行いたいことがあります。
| 例えば1～99までの連番を表示させたいとき、いちいち手入力で入力するよりもループさせた方が確実に早いです。
| 繰り返し文の表記にはwhile文とfor文の2種類があります。

while文
------------

| while文は条件式が真の間だけ、処理を繰り返し実行するものです。

 .. code-block:: js
 
     while (条件式) {
         処理;
     }
	 
	 
| 以下は"ありがとう"を100回表示するプログラムです。

 .. code-block:: js
 
   var i = 0;                         // 変数iを定義して0を代入
   while (i < 100) {                   // 変数iが100未満であれば処理を実行、100より大きければ処理を実行せずループを終了
       document.write("ありがとう");    // 「ありがとう」と表示する
       i++;                           // 変数iに1を加算する
   }                                  // 条件式へ戻る



| 処理を実行する度に変数iを1ずつ増やして、変数iが100未満の間だけ処理を実行するようにしています。

 .. code-block:: js
 
    while (1 == 1) {
        document.write("ありがとう");
    }
	
| 上記のように必ず真になる条件式を設定してしまうと、永遠に"ありがとう"を表示し続けるプログラムが作成されてしまいます。
| こういった場合は、どこかでif文を組み込み、「break」という命令を入力することで処理を中断させることができます。

 .. code-block:: js

    var i = 0;                   // 変数iを定義して0を代入
    while (1 == 1) {               // 1 == 1 は真となるので必ず処理を実行
        document.write("ありがとう");    // 「ありがとう」と表示する
        i++;                       // 変数iに1を追加する
        if (i > 100) {               // もし変数iが100より大きければ以下の処理を実行
            break;                   // ループを終了
        }
    }                            // 条件式へ戻る
	
| while文は無限ループの原因になりやすいので、条件式をきちんと設定するように気をつけましょう。


for文
------------

| while文以外のもうひとつの繰り返し処理の例が、for文です。
| for文は継続条件式が真の間繰り返し実行されるというものです。定義は以下の通りです。

 .. code-block:: js
 
    for(初期化式; 継続条件式; 再初期化式){
        処理;
    }
	
	
| こう書くととても難しいように見えますが、実際的には、限られた回数だけ処理を行ないたい場合、while文より便利です。
| 処理の流れを見てみましょう。
| 
| 1.「初期化式」を実行
| 2.「継続条件式」で真と判定された場合に内部の処理を実行、判定結果が偽の場合ループを終了
| 3.「再初期化処理」を実行 
| ※以降2,3の繰り返しとなります。
| 
| 例えばwhileの例であった、「ありがとう」を100個表示するプログラムをfor文で記述してみましょう。

 .. code-block:: js

                                       // 変数iを定義し0を代入 ※ループの初回のみ実行される
    for (var i = 0; i < 100; i++) {      // 変数iが100未満だったら以下の処理を実行、変数iが100より大きければ処理を実行せずにループを終了
        document.write("ありがとう");    // 「ありがとう」と表示する
    }                                  // 変数iに1を加算し、継続条件式へ再び「i < 100」が真となるか判断する。
	

ネスト
---------------

| if文の中にif分を書き込むことができるように、
| 繰り返し処理も、何重にも記述することができます。

 .. code-block:: js

    for (var i = 0; i < 100; i++) {
        for (var j = 1; j <= 100; j++) {
            document.write(j);
        }
    } 

| この場合、1から100までの連番が100セット表示されます。


課題4
------------ 

| ①while文を使って、xの3乗の値を表示させて下さい。xの定義域は-10以上10以下とします。
| 
| **出力例**
| x = -10のとき, y = -1000
| x = -9のとき, y = -729
| ~~~~~~~~省略~~~~~~~~
| x = 10のとき, y = 1000

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

| 
| ②for文をネストさせて、使って九九の表を作ってください。

.. code-block:: js

    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= 9; j++) {
        }
    }

.. note::

  | 適切なHTMLタグと文字を出力する処理を書き込めば、tableで表を出力できます。
  | tableの作り方を思い出してみてください。テーブルは行の場合は<td>、列の場合は<tr>を使います。
  | つまり、改行したい時には<tr>タグで囲んでいる部分が新しくなればいいわけです。

| **出力例**
  
.. raw:: html
   
    <script> 
    document.write("<table>");
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= 9; j++) {
                document.write("<td>" + i*j + "</td>");
            }
            document.write("</tr>");
        }
    document.write("</table>");
    </script>
	
	
.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>



配列
=======

| それでは **配列** というものを学習しましょう。
| varを使った変数が1つのデータを入れる箱だとすれば、配列は仕切りを作って複数のデータを入れられるようにした箱、と考えてください。

  .. image:: /_static/array_1.gif


| データを入れる領域を「要素」と呼びます。上記配列は3つの領域に分けられているので、要素が3つの配列となります。
| 

配列の定義法
----------------

| **配列の要素の個数を設定する**
| 配列を定義するには、変数におまじない「new Array(要素数)」を代入します。
| 深く考えずに「おまじない」を書くと配列ができると覚えてください。JavaScriptの理解が進んだら調べてみましょう。

  .. code-block:: js
    
	  var array = new Array(5);

| 配列の要素には0から順に番号が振られます。1番目のデータは0、2番目のデータは1という具合です。
| これを「添え字」または「キー」と呼び、配列のデータを操作する際に利用します。

  .. image:: /_static/array_2.gif

| 配列のデータを操作するには、「変数名[添え字]」の様に記述します。例えば、配列の2番目の要素に値を代入するには

  .. code-block:: js

      array[1] = 5;
	  
| 代入した値を表示するには

  .. code-block:: js

      document.write(array[1]);
	  
| となります。


配列の中身を設定する
---------------------

配列の値を設定する方法には

  .. code-block:: js

    var array = new Array(5);
    array[0] = 'a';
    array[1] = 'b';
    array[2] = 'c';
    array[3] = 'd';
    array[4] = 'e';
   
| 上記の様に配列を作成してから値を代入する方法と

  .. code-block:: js
  
    var array = new Array('a', 'b', 'c', 'd', 'e');
	
| 配列作成時にカンマ繋ぎで値を指定することで、値を代入した状態で配列を作成する方法があります。
| 作成するプログラムの内容によって、どちらの方法で配列を作成するかが変わってきますので、適切な定義方法を選ぶようにしましょう。

配列の長さを取得する
---------------------

| 配列の要素の個数を **長さ** といいます。配列の長さは

  .. code-block:: js
   
    配列名.length;
   
| で取得することが出来ます。
| つまり、for文の条件式にこの配列の長さを組み込めば、配列の長さ分だけ処理を行なうことが可能です。

  .. code-block:: js
  
     var programming = new Array('プ', 'ロ', 'グ', 'ラ', 'ミ', 'ン', 'グ');    // 変数aを定義して配列を代入
     for (var i = 0; i < programming.length; i++) {           // 変数iの値が配列aの要素数「7」未満であれば処理を実行
         document.write(programming[i]);                   // 配列の「変数i」番目の値を表示（変数iが3であればdocument.write(programming[3]);となる）
     }
	
| 上記を実行すると

  .. code-block:: js
    
	  プログラミング
	
| と出力されます。

連想配列
------------

| 配列の添え字は数字以外で管理することができます。
| 例えば人物の情報を配列に格納する時、名前があって、性別があって、年齢があって・・・、どの情報が配列の何番目に格納されているか分かり易くしたいですね。
| こういうときは連想配列を用いて配列を定義します。

  .. code-block:: js
  
     var person = new Array(3);
     person["name"] = "のび太";
     person["sex"] = "男";
     person["age"] = "10歳";

  .. image:: /_static/array_3.gif

| 配列の添え字が数字ではなく英字になっています。
| 添え字の文字列を取得することもできますので、変数の変わりに添え字に値を持たせてしまうこともあります。
| 連想配列は下記の二次元配列と組み合わせて配列を生成すると、特定のデータを持つリストとして配列を作成できるので非常に便利です。

二次元配列
--------------

| 二次元配列とは **配列を格納した配列** を指します。

  .. code-block:: js 

      var array = new Array(3);                 // 変数arrayを作成し配列を代入
      array[0] = new Array('A', 'B', ’C');     // 配列arrayの1番目の要素に配列を代入
      array[1] = new Array('D', 'E', ’F');     // 配列arrayの2番目の要素に配列を代入
      array[2] = new Array('G', 'H', ’I');     // 配列arrayの3番目の要素に配列を代入

  .. image:: /_static/array_4.gif

| このとき、

  .. code-block:: js

    document.write(array[0][2]);
    document.write(array[1][1]);
    document.write(array[2][0]);
	
| とすると。

  .. code-block:: js

      CEG
	
| と出力されます。

課題5
---------

| 二次元配列(二次元目は連想配列にする)を用いて、人物のリストを作りなさい。作った配列を、テーブルで表示しなさい。

| **ヒント**
| 配列を表示するには、配列の数だけfor文でループさせれば大丈夫です。
| 配列の個数(長さ)を取得するには、**配列名.length**  で可能なので配列名arrayの配列を表示するには、

  .. code-block:: js
  
    for (var i = 0; i < array.length; i++) {
      document.write(array[i]);
    }

| となります。
| 

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>


関数の作成
=============

関数を定義する
------------------

| JavaScriptにはdocument.write()やalert()等、あらかじめ定義された関数が数多くありますが、自分で定義することもできます。
| プログラム中で何度も出てくる処理をそのたびに記述するのは面倒ですし、
| 変更が必要になった場合に修正箇所が散在してしまい、修正漏れの原因にもなります。
| そこで、よく出てくる処理を関数として定義し、共通利用する方法をとります。

  .. code-block::js
  
    function 関数名(引数)
    {
        処理;
        return 戻り値;
    }
	
| 引数とは、関数に与えるパラメータのことで"ひきすう"と読みます。
| 戻り値とは、関数の実行元に返す値です。

関数の見本
-----------

| それでは見本として、引数として与えた数を2乗した数字を返す関数を作ってみましょう。
| 関数名はquadraticにしてみましょう。もちろん、自分の好きな名前で構いません。

  .. code-block:: js
  
      function quadratic(number)       // 関数名、引数を指定して関数定義の宣言
      {
          answer = number * number;      // 変数answerに「引数number×引数number」の結果を代入
          return answer;               // 変数answerを返す
      }

      // 実行してみる
      var a = 4;                     // 変数aを定義し、4を代入
      var b = quadratic(a);          // 変数bを定義し、引数に変数aを渡して関数quadraticを実行した結果を代入
      alert(b);                      // 変数bの値をアラートで表示

| 関数quadratic(number)は受け取った引数numberを2乗した値を実行結果として返します。
| 実行例では関数quadraticに4を渡しているので、4×4の結果「16」が関数の実行結果として返却され、変数bに代入されます。結果、アラートで16と表示されます。

| もちろん引数にとるのは、数値型に限りません。

  .. code-block:: js
  
      function hello(name)
      {
          answer = "こんにちは、" + name + "さん。";
          return answer;
      }
	  
| nameに"太郎"を渡すと

  .. code-block:: js

      "こんにちは、太郎さん。"
	  
	  
| が返ってきます。
| 関数にはもっと複雑な処理を入れることも可能ですし、引数と戻り値の型が違っていても問題ありません。
| 戻り値を指定しなければ、処理を実行するだけの関数となります。

値の取得
==========

| 何らかのWebサービスを使用したときに、ユーザー情報を記述したことはありませんか?
| ここではJavaScriptを使ってユーザーが入力した情報を取得する方法を解説します。
| 下のJsBinの入力欄に名前を入力し、送信ボタンを押してみてください。

.. raw :: html

    <a class="jsbin-embed" href="http://jsbin.com/uMUJolO/2/embed?output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>

| すると、○○さん、こんにちは！というアラートが出ましたね。
| もちろんこのアラートは最初からあなたの名前を知っていた訳ではありません。
| あなたが入力したテキストを取得、それを変数に格納し、その変数に少し文言を付け加えてアラートしたのです。
| ユーザーの入力した情報を取得するにはgetElementByIdメソッドを使用します。
| その名の通り、idによって取得したい情報を特定します。
| JsBinに書かれたHTMLとJavaScriptを見てみてください。
| 入力欄を用意するinputタグが2つあります。1つ目にはmyNameというidがついており、ユーザーはここに名前を入力します。
| それをJavaScriptではmyNameという変数の中にgetElementById("myName")を格納しています。
| もう一つのinputタグは送信ボタンです。onclick="hello()"と書かれているのが分かりますね。
| これはその名の通りonclick、つまりクリックされたときにJavaScriptのhello関数を呼ぶというものです。
| hello関数は自作した関数であり、取得したあなたの名前をアラートするようになっています。
| ここで注意しなければいけないのが、アラートする名前の部分がmyName.valueとなっていることです。
| myName変数の中にはgetElementById("myName")が格納されており、このままアラートしてしまうと実は[object HTMLInputElement]さん、こんにちは！と表示されてしまいます。
| 次のチャプターで学習しますが、このままではHTMLでインプットした情報の"オブジェクト"が格納されているからなのです。
| ユーザーが入力したテキストを取得するために.valueを付け加えます。

課題6
---------

ユーザーの名字、名前、年齢、性別、出身を入力する欄を作り、
送信ボタンをクリックすると自己紹介文を生成してアラートするプログラムを書きなさい。

出力例) 私の名前は鈴木太郎です。22歳の男性で、東京都出身です。

.. raw :: html

  <a class="jsbin-embed" href="http://jsbin.com/UdAmoKI/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>


オブジェクトの利用
=====================

| オブジェクトとは、とても省略して誤解を恐れずに言ってしまうと **メソッドとプロパティを格納しているもの** です。
| メソッドは"関数"、プロパティは"変数"と考えてください。
| JavaScriptの次に勉強するPHPという言語で詳しく説明します。
| ここ、JavaScriptでは予め定義されたオブジェクトつまり組み込みオブジェクトを簡単に解説します。

 .. code-block:: js
 
      オブジェクト名：document
      メソッド名：write
      引数：文字列

| どこかで見た気がしますね。
| そう、document.write()です。
| document.writeとはdocumentオブジェクトのwriteメソッドです。
| オブジェクト名とメソッド名を.(ピリオド)で繋いで記述します。
| 
| 他にもMath、String、Date等の組み込みオブジェクトがあります。
| まずMathオブジェクトを見てみましょう。

 .. code-block:: js

    var pi = Math.PI;
    document.write(pi);

| 例えばこのようにMathオブジェクトのPIメソッドを使うと円周率を得る事ができます。
| piという変数を用意し、そこにMath.PIを格納し、piを表示すると"3.141592653589793"となります。
| Mathオブジェクトには数字の絶対値を出すabsメソッドや平方根(ルート)を出すsqrtメソッド、三角関数のsinメソッド、cosメソッド、taメソッド等があります。
| 
| 次に、Stringオブジェクトを見てみましょう。Stringオブジェクトでは文字列に関する処理が含まれています。
| まず一番有名なlengthというプロパティを見てみましょう。
| これは文字列の文字数を返します。

  .. code-block:: js
  
    var hello =  new String("Hello,World!");
    //または
    var hello = "Hello,World!";
	
    document.write(hello.length);

| こうすると、Hello,World!という文字列の文字数である12という数字が表示されることになります。
| 他にも指定の開始位置から指定した文字列分だけを抜き出すsubstrメソッドや、
| 文字列を大文字にするtoUpperCaseメソッド、複数の文字列を結合するconcatメソッド等があります。

  .. code-block:: js
  
    var lastName  = "Suzuki";
    var firstName = "Ichiro";

    var text = lastName.substr(2,4);    // 3文字目から文字を4つ抜き取る
    document.write(text);    // zuki

    var Omoji = lastName.toUpperCase();    //文字列を大文字にする
    document.write(Omoji);    // SUZUKI

    var fullName = lastName.concat(firstName);    //文字列を結合する
    document.write(fullName);    // SuzukiIchiro
	
 
| 他にも様々なメソッド等が使えます。
| `Stringオブジェクト 参考サイト <http://memopad.bitter.jp/w3c/jsref/jsref_obj_string.html>`_
| 
| これらを使用することで更に高度なプログラムを作る事が出来ます。
| `JavaScript組み込みオブジェクト 参考サイト <http://www.ibm.com/developerworks/jp/web/library/wa-objectsinjs-v1b/?cmp=dw&cpb=dwwdv&ct=dwrss&cr=dwrss&ccy=jp&csr=091611>`_ 
| 

課題7
-------

 .. code-block:: js

      var date = new Date();
	  
| としたとき、dateにはその時間の情報が入っています。
| Dateでは、日付や時間、曜日などを取り扱うメソッドがあらかじめ用意されています。
| 例えば、

 .. code-block:: js

    date.getYear();
	
| で、その年が引き出せます。
| この機能を使って、dateを引数にとり、文字列で"○年○月○日○時○分○秒(○曜日)"という形で値を表示する関数を作ってください。
| **参考サイト**
| `Dateオブジェクト / JavaScriptリファレンス <http://www.scollabo.com/banban/java/ref_15.html>`_
| `Date - JavaScript | MDN <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date>`_

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>


JavaScript最終課題
===================

今月から半年分のカレンダーを、JavaScriptを使って作成してください。いままで習ったことをフル活用してください。その際、

 * 配列を使うこと
 * Dateオブジェクトを使うこと
 * まとまった処理は関数を使うこと

を守るようにしてください。もちろん直接カレンダーを表示するのは禁止です。

ヒント
-------

関数を作るときは、以下の関数を作ってみて、それぞれで値や配列を渡してみましょう。

 * 今日の日付を取得して、半年後までの年と月を取得し、配列で返す関数
 * 年と月を渡すと、月の日数と最初の曜日を返す関数
 * 月の日数と最初の曜日を渡すと、テーブルにしてくれる関数

参考サイト
`JavaScript による日付・時刻・時間の計算・演算のまとめ <http://www.hoge256.net/2007/08/64.html>`_

.. raw :: html

     <a class="jsbin-embed" href="http://jsbin.com/esEBUBo/3/embed?html">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>