HTML上にいろいろ書き出してみる

document.writeを使えば、HTML上に様々なものを書き出す事ができます。

 
  <script type="text/javascript">
	 document.write('JavaScriptで文字を書き出しています。');
  	 document.write(10+5);
  	 document.write('10+5の答えは、' + (10+5) + 'です');
  </script>
  

アラートを表示

 
  <script type="text/javascript">
    function alertTest(){window.alert('アラートが出てきました。');}
    //windowは省略可。以後省略します。
  </script>
  

確認ダイヤログボックスを表示

 
  <script type="text/javascript">
  function comfirmTest(){
    if(confirm('これで良いですか？')) {alert('良かったです。');}
    else{alert('ダメでしたか。。');}}
  </script>
  

確認ダイヤログボックスを表示2

 
  <script type="text/javascript">
    function comfirmTest2(){
		var kakunin = confirm('これで良いですか？ 2');

		if (kakunin) {alert('良かったです 2');}
		else {alert('ダメでしたか。。。 2');}}
  </script>
  

入力欄を表示

 
  <script type="text/javascript">
    function promptTest(){
    if(prompt('何か入力してください。')) {alert('OKです。');}
    else{alert('何か入力してくださいよ');}}
  </script>
  

現在時刻に応じたメッセージを書き出す 1

朝、昼、晩でそれぞれ違うメッセージを表示する

 
  <script type="text/javascript">
	var current = new Date();
	var hour = current.getHours();
	hour = 15;

	if		(hour < 12)		{document.write('おはようございます！' + hour + '時です');}
	else if	(hour === 12)	{document.write('こんにちは！お昼ですよ！');}
	else if (hour > 18)		{document.write('一日お疲れさまでした！' + hour + '時です');}
	else					{document.write('午後もがんばってください！' + hour + '時です');}
  </script>
  

現在時刻に応じたメッセージを書き出す 2

出社前、昼休み、退社後は会社にいない旨を書き出す。

 
  <script type="text/javascript">
	var current = new Date();
	var hour = current.getHours();
	hour = 9;

	if(hour < 9 || (hour >= 12  && hour < 13) || hour >= 18)
		{document.write('この時間は会社におりません。');}
	else
		{document.write('現在会社におります。');}	
  </script>  

○番目まで数字を繰り返す(while文)

10代から80代までを、10づつ飛ばして表記させる

 
  <script type="text/javascript">
	var i = 10;
	while (i <= 80){
　　　	document.write(''+i+'代 | ');
　　　	i += 10;		//i = i + 10; ということ。
	}
  </script>
  

○番目まで数字を繰り返す(for文)

上述と同じ内容ををfor文で書いてみます。

 
  <script type="text/javascript">
	for(var i=10; i<=80; i+=10){
		document.write(''+i+'代 | ');
		}
  </script>
  

任意の言葉を入れたリストを作る (Array)

 
  <script type="text/javascript">
	var drink = new Array('ビール', 'ワイン', 'カクテル', 'お茶');

	for (var i=0; i < drink.length; i++) {
		document.write('
' + drink[i] + '
');
	}
  </script>
  

任意の言葉を入れたリストを作る (for in)

上述のリストに個々にURLなどをつけたい場合、配列を二つかいて組み合わせれば良いのだが、 別の方法ですっきりさせられる。

 
  <script type="text/javascript">
	var drink = {
		'beer.html':'ビール',
		'wine.html':'ワイン',
		'cactail.html':'カクテル',
		'tea.html':'お茶'
		}
	for (var i in drink){
			document.write('
' + drink[i] + '
');
		}
  </script>
  

ウィンドウを閉じる

ウィンドウを閉じるというプログラムですが、ブラウザの仕様として、プログラムで開いたウィンドウでないものはプログラムで閉じられないという ことがあるようです。

IDを取得することにより動作させる

ここではhtmlをスクリプトの前に書いておかないと動かない模様。

 
<script type="text/javascript">
	document.getElementById('btnClose').onclick = function() {
		alert('IDを取得することにより動作しました。');
	}
</script>
  

IDを取得することにより動作させる 2

Aの場合は○○、Bの場合は××、など、ケースバイケースで分別したい場合。

 

 あなたの血液型は？
 A型
 B型
 C型
 O型

 
<script type="text/javascript">
document.getElementById('Btype').onchange = function() {　// onchange : 値が変化したときに発動するイベント
	var Btype = document.getElementById('Btype').value;
	
	switch (Btype) {
	case 'A':
		alert('A型：あなたはまじめで神経質です。');
		break;
	case 'B':
		alert('B型：あなたは気分屋です。');
		break;
	case 'C':
		alert('C型？？新人類？');
		break;
	case 'D':
		alert('O型：大らかで争いを避けるタイプ。');
		break;
	}
}
</script>