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通りがあります。

HTMLを動的に生成させる。
ボタンが押された時などの処理（イベントハンドラ）を記述する。

先ほどの 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の場合は、「場所:」にjavascript:と入力します。どの場所で間違いが起こっているかがメッセージとして表示されます。

注釈

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

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

変数

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

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

var 変数 = 初期値;

変数が複数の場合は、

var 変数₁ = 初期値₁, 変数₂ = 初期値₂, ..., 変数_n = 初期値_n;

のようにコンマで区切ることもできます。

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

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

変数名の規則

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

アルファベット（A～Z, a～z）
アンダーバー（_）
数字（0～9）ただし、変数名の先頭の文字にはなれません。

!! 実はこれは、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 (式) 文₁ else 文₂

または

if (式₁) 文₁

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

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

{ 文₁ 文₂ ... 文_n }

（つまり中括弧の中に文を複数並べてひとまとまりにしたもの）でも構いません。（むしろその方が普通です。）

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

if (式₁) 文₁ 
else if (式₂) 文₂
...
else 文_n

もよく使います。

ソース	表示	備考
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度も実行しません。）

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

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

for (式₁; 式₂; 式₃) 文₁

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

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

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

ソース ─ 数表をつくる
```
document.write("<table border>");
document.write("<tr><td>i</td><td>i<sup>3</sup></td></tr>")
var i;
for (i=0; i<10; i++) {
  document.write("<tr><td>"+i+"</td><td>"+i*i*i+"</td></tr>");
}
document.write("</table>");
```
表示

備考
「*」はかけ算の演算子（割り算の演算子は「/」）。数学の記法と異なり、かけ算の演算子は省略できない。
ソース ─ 文字によるグラフ
```
var x, y, i;
for (x=0; x<=16; x++) {
  y = x*(16-x);
  for(i=0; i<y; i++) {
    document.write("&nbsp;");
  }
  document.write("*<br>");
}
```
表示
ソース ─ グラデーション
```
var i, c;
for(i=0; i<64; i++) {
  c = 0xc00000 + i*4;
  document.write("<font color=\"#"+c.toString(16)+"\">*</font>");  
}
```
出力

備考
- 0x何とかは 16進数で表記した数を表す。
- 文字列中に「"」という文字を含めるためには、「\"」と書く必要がある。
- ★.toString(16)は整数★を 16進数表記の文字列に変換する。

配列

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

new Array(要素₀, 要素₁, ..., 要素_n)

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

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

ソース ─ 今日は何曜日？
```
var youbi = new Array("日", "月", "火", "水", "木", "金", "土");
var date = new Date(); 
var day = date.getDay();
document.write("今日は、"+youbi[day]+"曜日です。");
```
出力

関数の定義

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

function 関数名(変数₁, ..., 変数_n) {
 文₁
 ...
 文_n
}

この関数を、式₁, ..., 式_nを引数として呼び出すと、引数の計算結果を順に対応する変数₁, ..., 変数_nの初期値として、文₁, ..., 文_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);		関数と言ってもこの例のように値を持たないことも多い。

ソース

表示

備考

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));

ソース

表示

備考

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ではできません。）

課題

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が日曜
「今から 45分後は？時？分です。」と表示する JavaScriptを書け。例えば現在時刻が 14時30分なら、「今から 45分後は 15時 15分です」と表示する。現在時刻が 23時45分なら、「今から 45分後は 0時 30分です」と表示する。
nが 0～16の範囲の整数の時、2ⁿの値を表にする JavaScriptを書け。（2ⁿは JavaScriptではMath.pow(2, n)と書く。）
30(1+sin(xπ/12)))を xが0～24の範囲でグラフにする JavaScriptを書け。（JavaScriptの書き方では 30*(1+Math.sin(x*Math.PI/12))になる。）
（難）
1. 今年がうるう年かそうでないかを表示する JavaScriptを書け。
2. 今日がその年の 1月 1日から数えて何日目かを表示する JavaScriptを書け。
3. 今日から 2002年 5月 31日まであと何日かを表示する JavaScriptを書け。
4. 今日で自分が生まれてから何日目かを表示する JavaScriptを書け。
5. 今月の 1日が何曜日かを表示する JavaScriptを書け。（2001年 1月 1日は月曜日）
6. （超難）下のような今月のカレンダを表示する JavaScriptを書け。
  
  日月火水木金土
  
  1 2
  
  3 4 5 6 7 8 9
  
  10 11 12 13 14 15 16
  
  17 18 19 20 21 22 23
  
  24 25 26 27 28 29 30

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

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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

function foo(n) {
  var i, kotae=0; 
  for(i=1; i<=n; i++) {
    kotae=kotae+i*i;
  }
  return kotae;
}

document.write(foo(3));

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