動きのあるページを作るには、JavaScript、perl、TIMEなどと呼ばれるプログラム用言語を使います。
このページでは、一番簡単なJavaScriptを解説します。

文字を表示する

計算させる

仮定式を作る

データを入力し、仮定式を試す

くり返しを作成する

くり返しを入力によって制御する

文章を他から独立させる

文章をコントロールする

関数を利用して文章をコントロールする

JavaScriptの注意点

JavaScriptをONにしてください。
以下のように記述します。

<script language="JavaScript">
<!--
document.write("JavaScript、はじまります");
//-->
</script>

以下のように表示されます。

「document.write("〜");」は文字を表示するために使用します。
下の例のようにいくつでも書き込むことができます。

<script language="JavaScript">
<!--
document.write("JavaScript");
document.write("、");
document.write("はじまります");
//-->
</script>

表示は上のものと全く同じになります。HTMLタグを使用することができます。

数字を計算して表示させます。

<script language="JavaScript">
<!--
var num=10+5;
document.write("10+5は"+num+"です");
//-->
</script>

以下のように表示されます。

「var」とは変数を作成するときに使用するものです。
変数と予約語(もともと使用される単語)は同じにしてはいけません。

予約語一覧
abstract	boolean	break	byte	case	catch	char	class	const	continue
default	delete	do	double	else	extends	false	final	finally	float
for	function	goto	if	implements	import	in	instanceof
int	interface		long	native	new	null	package	private	protected
public	return	short	static	super	switch	synchronized	this	throw
throws	transient		true	try	typeof	var	void	while	with

変数は大文字、小文字を区別しますので「num」と「Num」は別ものということになります。

<script language="JavaScript">
<!--
var num=0;
if( num > 0){
document.write("0より大きい");
}else{
document.write("それ以外");
}
//-->
</script>

変数「num」の値によって表示が変わるように作成します。
現時点で表示すると、以下のようになります。

上のプログラムにデータを入力できるようにします。

<script language="JavaScript">
<!--
var num=prompt("数字を入れてください","");
if( num > 0){
document.write("0より大きい<br>");
}else{
document.write("それ以外<br>");
}
document.write("入力した数字は"+num+"です");
//-->
</script>

そのプログラムをブラウザで表示するとこのページのようになります。
「prompt」は数字を入力させるときに使います。

「for」によってくりかえしを作成します。

<script language="JavaScript">
<!--
for(i=1;i<=5;i++){
document.write(i+"回目<br>");
}
//-->
</script>

現時点では、以下のように表示されます。

何回でもくり返すことはできますが、ブラウザに負荷がかかるためおすすめできません。

上で作成したくり返しをブラウザからの入力で制御します

<script language="JavaScript">
<!--
function number(num){
	for(i=1;i<=num;i++){
	document.write(i+"回目<br>");
	}
}
//-->
</script>
<form name="form1"><input type=text name="num1" size=5 value="1">
<input type=button value="くり返す" onClick="number(document.form1.num1.value)">
</form>

そのプログラムをブラウザで表示するとこのページのようになります。

文章を他から独立させます。次の説明で独立させる意味がわかると思います。

<div id="test1">文章を独立化させる</div>

表示すると以下のようになります。(通常となにも見た目では変わりません)

文章を独立化させる

独立させた文章をコントロールしてみましょう。

<div id="test2">文章をコントロールする</div>
<input type="button" value="消す" onClick="document.all('test2').style.visibility='hidden'"><br>
<input type="button" value="つける" onClick="document.all('test2').style.visibility='visible'">

表示すると以下のようになります。触ってみてください。

文章をコントロールする

「onClick」を「onMouseOver」にすると面白いことが起こります。以下のようになります。

文章をコントロールする

それらに「onMouseOut」を組み合わせてみましょう。

<div id="test4">文章をコントロールする</div>
<input type="button" value="つける・消す"
onMouseOver="document.all('test4').style.visibility='hidden'"
onMouseOut="document.all('test4').style.visibility='visible'">

表示すると以下のようになります。

文章をコントロールする

ほかのタグでも使用可能です。

<div id="test5">文章をコントロールする</div>
<div onMouseOver="document.all('test5').style.visibility='hidden'"
onMouseOut="document.all('test5').style.visibility='visible'">つける・消す</div>

表示すると以下のようになります。

文章をコントロールする
つける・消す

まずは関数を作っておきましょう。

<script language="JavaScript">
<!--
function Show(ts){
document.all(ts).style.visibility='visible';
}
function Delete(ts){
document.all(ts).style.visibility='hidden';
}
//-->
</script>

消したり、つけたりされる文章を作成しましょう。

<div id="on1">つけたり消したり１</div>
<div id="on2">つけたり消したり２</div>

消したり、つけたりできるようにボタンを作成しましょう。

<input type="button" value="１をつける" onClick="Show('on1')">
<input type="button" value="２をつける" onClick="Show('on2')">
<input type="button" value="１を消す" onClick="Delete('on1')">
<input type="button" value="２を消す" onClick="Delete('on2')">

すべてをまとめてブラウザで表示するとこのページのようになります。
同じページのどこからでも文章が操作できるので便利です。
上の関数は汎用性(どこでも使える)があるのでおすすめです。

JavaScriptを使っていても、ファイルサイズが大きくなりにくいのも特徴です。

JavaScriptにはいくつかの注意点があります。

JavaScriptをシャットダウン(使用禁止)しているブラウザ設定がある
JavaScriptは使い方を変えると危険性が高いので、使用禁止の場合があります。

エラーを起こしてしまうとそのサイトの信頼性が落ちる
JavaScriptだとHTMLとは違い、見ているPCまでも被害がある場合がありますので、スペルミス等には注意してください。