JavaScriptについて

最終更新日


JavaScriptについて

JavaScriptは、プログラミング言語の一種です。 HTMLの中で使用すると、読込む毎に異なる表示をさせたり、 表が簡単に作成できたりして、HTMLだけでは表現できないような効果が得られます

ブラウザの種類に依存するため、一時期は嫌われていたこともありました が、最近はブラウザへの依存性を回避するための道具が整備され、AJAXという 技術として再び脚光を浴びています。

JavaScriptの例

JavaScriptは文法を Javaという言語に似せて設計された(Javaの文法は Cに似ているので Cに似せた、とも言える)言語ですが、 Javaとは全くの別物です。 Javaは本格的なプログラミング言語ですが、 JavaScriptは、 ちょっとした簡単な作業を記述するための、いわゆるスクリプト言語です。 コンパイルすることはできないので、効率はあまり期待できませんし、 大きなプログラムを作成するのにも向いていません。

しかし、 JavaScriptは Cや Javaに文法が似ているため、 Cや Javaを知っていると、 簡単に JavaScriptのプログラムを書くことができますし、 逆に JavaScriptを知っていると、Cや Javaを容易に習得することができます。

JavaScriptに関する役に立つリンク集

HTMLの中での JavaScriptの使い方

HTML文書の中で JavaScriptを使うケースとしては、次の 2通りがあります。

  1. HTMLを動的に生成させる。
  2. ボタンが押された時などの処理(イベントハンドラ)を記述する。
先ほどの 2つの例は前者のケースに当てはまります。 ここでは前者のケースを主に取り上げます。

(参考)後者のケースの例
2の乗は です。

JavaScriptの書き方

JavaScriptは <script type="text/javascript">〜</script>というタグの間に書きます。

<script type="text/javascript">
 ここにJavaScriptのプログラムを書く。
</script>

出力

実際に HTMLを出力するためには、 document.write() という命令を使います。

JavaScriptは大文字と小文字を区別するので、 注意します。

ソース表示備考
<script type="text/javascript">
 document.write("<b>こんにちは</b>");
</script>
  • 文字列は二重引用符 "〜"で囲む。
  • タグを出力することもできる。
<script type="text/javascript">
 document.write(1+2+3+4+5);
</script>
  • 式を計算することもできる。

もちろん、このような例なら実際にはわざわざ JavaScriptを使うまでもありません。 しかし、次のプログラムは実行時によって出力が変わる例です。

ソース表示備考
<script type="text/javascript">
 document.write(new Date());
</script>
  • new Date()は実行時の時刻を表すオブジェクトを生成する。

関数呼出し

document.writeのようにデータ(上の例では "こんにちは"など)を渡すとデータに応じてある処理をしてくれるものを、 関数と呼びます。関数に渡すデータを 引数(ひきすう)と言います。 関数を呼出す時、引数は括弧の中に書きます。引数が複数ある場合はコンマ 「,」で区切ります。

セミコロン「;」は文の終りを示します。 document.write(new Date())のような形(関数の呼出し)は、 と言って文の構成要素でしかありません。 式のあとにセミコロンをつけて文として完結します。

文は上(左)から順に実行されます。 普通は 1行に 1文を書きますが、1行に いくつも文を書くことも可能です。 JavaScriptは C言語と同様、特別な場合(二重引用符の途中など)を除いて、好きな場所で改行することができます。

うまく動かない時

プログラムは、最初はどこかに間違いがあってうまく動かないのが普通です。 うまく動かないときは、Firefoxの場合は、Firebug などのデバッガを使うと良いのですが、使い方が難しいので、最初は少し書き足してはチェック を繰り返しましょう。

注釈

JavaScriptプログラムの中にも注釈(コメント)を書くことができますが、 HTMLのコメントとは書き方が異なります。 プログラムを実行する時にはコメントの部分は無視されます。 (空白と同じと見なされます。)

JavaScriptのコメントは /**/の間、もしくは //からその行の終りまでです。


変数

プログラミング言語で "変数" (variable )と言う時は、 計算結果を一時的に記憶しておくための、 記憶領域を指します。(数学の方程式の"未知数"とは全く異なる概念です。)

変数を使うためにはまず、変数を "宣言" しておく必要があります。 JavaScriptは変数は次のように宣言します。

var 変数 = 初期値;

変数が複数の場合は、

var 変数1 = 初期値1, 変数2 = 初期値2, ..., 変数n = 初期値n;
のようにコンマで区切ることもできます。

一度宣言しておけば、あとは変数の名前を書くだけで変数に入っている値を利用することができます。

ソース表示備考
 var str = "暑い! "; 
 document.write(str+str+str);
  • JavaScriptでは、文字列は 「+」演算子でつなぐことができる。
    注: Cではできない。

変数名の規則

変数の名前には次の文字が使用できます。

!! 実はこれは、C言語の変数名の規則です。 本当は JavaScriptはこれら以外の文字も使えるのですが、 C言語と同じと覚えておいた方が良いでしょう。

なお、var, if, forなど JavaScriptにとって、 特別な意味をもつ単語(キーワード)は変数名として使用できません。

代入

変数は後でその値を変更することができます。 これを代入といいます。代入は、「=」演算子を使って、

変数 = 式
と書きます。

ソース表示備考
 var str = "暑い! ";
 document.write(str+str+str);
 document.write("<br>");
 str = "涼しい ";
 document.write(str+str+str);
 document.write("<br>");
 str = "めちゃ" +str;
 document.write(str+str+str);
  • str="めちゃ"+str は結局 strの先頭に"めちゃ"を付け加える。

代入も文法的には "式"になるので "文"にするには最後にセミコロン 「;」が必要です。


条件判断(if文)

いつも同じ決まり切ったことをするのでは、 わざわざプログラムを書く意味があまりありません。 ある条件が成り立つかどうかによって処理を切り替えることを 条件判断と言います。

JavaScriptでは条件判断は次のような形で行ないます。

if (式) 文1 else2
または
if (式1) 文1

1が成り立つ時は文1を、さもなくば文2実行します。else〜のない形は式が成り立たない時は、何もしません。

"文"はブロックと呼ばれる形

{ 文12 ... 文n }
(つまり中括弧の中に文を複数並べてひとまとまりにしたもの) でも構いません。(むしろその方が普通です。)

elseのあとにまた if文が来る形:

if (式1) 文1 
else if (式2) 文2
...
elsen
もよく使います。

ソース表示備考
 var date = new Date(); 
 var hour = date.getHours();
 if (hour < 18) {
   document.write("こんにちは");
 } else { // 18以上の時
   document.write("こんばんは");
 }
  • date.getHours()は Dateオブジェクトから"時"成分を取り出す。 (ピリオド「.」は複合オブジェクトから成分を取り出す演算子)
  • 0:00〜17:59までは「こんにちは」、 18:00〜23:59は「こんばんは」と表示する。
 var date = new Date(); 
 var hour = date.getHours();
 if (hour < 12) {
   document.write("おはようございます");
 } else if (hour < 18) {
   document.write("こんにちは");
 } else { // 18以上の時
   document.write("こんばんは");
 }
  • 0:00〜11:59までは「おはようございます」 12:00〜17:59までは「こんにちは」、 18:00〜23:59は「こんばんは」と表示する。

条件式には次のような演算子が使用できます。

演算子分類備考
==(等しい)、!=(等しくない) 等価演算子 x==0代入演算子「=」と混同しないこと
<, <=, >, >=(不等号) 比較演算子x<10 
&&(かつ)論理演算子 0<x && x<10 比較演算子よりも優先順位が低い
||(または)論理演算子 x<0 || 10<x 


繰返しwhile文, for文)

コンピュータは人間ならとてもできないような回数の繰返しを、 一瞬に行なうことができます。 繰返しを使うことにこそプログラムを書く意義がある、 といっても過言ではありません。

JavaScriptでは繰返しは次のような形で書きます。

while (式1) 文1

1が成立つ間、文1の実行を繰返します。 (最初から式1が成立たないときは、文1は 1度も実行しません。)

ソース表示備考
var i=0; 
while (i<10) {
  document.write(i+",");
  i++;  
}
  • i++i=i+1と(ほぼ)同じ意味
    iを 1大きくする。)

なおこの例のように、変数を繰返しの最後で変更するという形はとても良くあるので、

for (式1; 式2; 式3) 文1
という for文も良く使います。これは、まず最初に 式1 を 1回だけ計算し、式2が成立つ間、 文1と式3の実行を繰返します。

``for(i=0; i<N; i++) ''という形は、 iが 0から N-1まで、計 N回、を繰返します。

ソース表示備考
var i;  // 初期値のない変数宣言
for (i=0; i<10; i++) {
  document.write(i+", ");
}
  • 上の while文の例と全く同じ結果になる。

配列

配列(Array)とは、(同じ種類の)データを複数集めて、 ひとまとまりにしたデータです。JavaScriptでは配列は次のような式で作成します。 (Cとは全然書き方が異なります。)

new Array(要素0, 要素1, ..., 要素n)
JavaScriptでは(Cでも)配列の最初の要素は 0番目と数えます。n個の要素がある配列は、0番目から n-1番目の要素まであるわけです。

配列の k番目の要素は 配列[k]という式で取り出します。

関数の定義

プログラムの中で同じような処理を何度も行なう必要があるのなら、 その部分を関数にして、再利用できるようにします。 関数の定義は次のような形で行ないます。

function 関数名(変数1, ..., 変数n) {
 文1
 ...
 文n
} 

この関数を、式1, ..., 式nを引数として呼び出すと、引数の計算結果を順に対応する変数1, ..., 変数nの初期値として、 文1, ..., 文n の部分を実行します。 実行が終ると、関数を呼出したところの続きに戻ります。

ソース表示備考
function writeNtimes(str, n) {
  // 文字列 strを n回表示
  var i;
  for(i=0; i<n; i++) {
    document.write(str);
  }
  document.write("<br>");
}
writeNtimes("*", 1);
writeNtimes("*", 2);
writeNtimes("*", 3);
writeNtimes("*", 4);
  • 関数と言ってもこの例のように値を持たないことも多い。
return 式;
値を返す関数を定義する時は return文を使います。 return文は関数の実行を終了し、 式の計算結果を関数呼出しの値として、呼出し側に制御を戻します。
ソース表示備考
function fact(n) { // nの階乗(factorial)
  var i, kotae=1;
  for(i=1; i<=n; i++) {
    kotae=kotae*i;
  }
  return kotae;
}

document.write("4の階乗は " + fact(4));
document.write("<br>");
document.write("6の階乗は " + fact(6));
 

ちなみにJavaScriptでは関数の中で別の関数の定義をすることもできます。 (Cではできません。)


課題

  1. if文を使って、3〜5月なら「あけぼの」、 6〜8月なら「よる」、9〜11月なら「夕暮れ」、 12〜2月なら「つとめて」と表示する JavaScriptを書け。 (現在の月は、

     var date = new Date(); 
     var month = date.getMonth()+1;
    
    で得られる。getMonth()はなぜか 0〜11の値を返すので 1を足す。)

    参考: Dateオブジェクトに対するメソッド

     
    関数getYear()getMonth() getDate()getDay() getHours()getMinutes() getSeconds()
    備考西暦0が 1月  0が日曜   

  2. 「今から 45分後は 分です。」 と表示する JavaScriptを書け。例えば現在時刻が 14時30分なら、 「今から 45分後は 15時 15分です」と表示する。 現在時刻が 23時45分なら、「今から 45分後は 0時 30分です」と表示する。

  3. nが 0〜16の範囲の整数の時、2nの値を表にする JavaScriptを書け。 (2nは JavaScriptではMath.pow(2, n)と書く。)

  4. 30(1+sin(xπ/12)))を xが0〜24の範囲でグラフにする JavaScriptを書け。 (JavaScriptの書き方では 30*(1+Math.sin(x*Math.PI/12))になる。)

  5. (難)

    1. 今年がうるう年かそうでないかを表示する JavaScriptを書け。
    2. 今日がその年の 1月 1日から数えて何日目かを表示する JavaScriptを書け。
    3. 今日から 2002年 5月 31日まであと何日かを表示する JavaScriptを書け。
    4. 今日で自分が生まれてから何日目かを表示する JavaScriptを書け。
    5. 今月の 1日が何曜日かを表示する JavaScriptを書け。 (2001年 1月 1日は月曜日)
    6. (超難)下のような今月のカレンダを表示する JavaScriptを書け。
           12
      3456789
      10111213141516
      17181920212223
      24252627282930

  6. 何を計算する関数かまず考えて、試せ。

    1. function foo(n) {
        var i, kotae=0; 
        for(i=1; i<=n; i++) {
          kotae=kotae+i*i;
        }
        return kotae;
      }
      
      document.write(foo(3));
      
    2. function bar(n) {
        if(n>0) {
          bar(Math.floor(n/2));
          document.write(n%2);
        }
      }
      
      bar(255);
      
      Math.floorは切捨てを計算する関数、m%nは mを nで割った余り)


戻る
Koji Kagawa