Sat >うぇぶらぼ >JavaScript

JavaScriptは、現在最も利用されているスクリプト言語です。Javaと似ていますが、全く異なる言語です。JavaScriptの非同期通信を利用した技術は「Ajax」と名付けられ、代表的なアプリケーションに「Googleマップ」があります。この技術を使うと、アプリケーションのような画面遷移を伴わないウェブアプリケーションの開発が可能になります。

このページでは、そのJavaScriptの基本を紹介しています。

見出し >ファイルの更新日時更新日時の表示形式現在日時の取得文字列の表示非表示

ファイルの更新日時

JavaScriptの一番簡単な構文です。そのファイルの更新日時を取得表示します。
 ↓

実行画面:

ソース画面:
<script>
<!--
/*	●ここから注釈文です。
	ブラウザは基本的に自分の知らないタグを無視します。
	そのためJavaScriptに未対応のブラウザの場合スクリプトが丸見えになります。
	これを防ぐために一行目と最終行を挿入します。
<!--	一行目             
	JavaScriptを記述します。       
//-->	最終行

	document.write(文字列)  JavaScriptで文字列を書き出す。
	document.lastModified   ファイルの更新日時を取得する。

*/	●ここまで注釈文です。

document.write("Last update ",document.lastModified)

//-->
</script>
		

▲ページの先頭へ

更新日時の表示形式

JavaScriptで、ファイル更新日時の表示フォーマット( yyyy/mm/dd hh:ff )に変更するスクリプト、月日時分はすべて2桁表示
 ↓

実行画面:

ソース画面:(関数)
function update2(){
	update = new Date(document.lastModified);
	yy = update.getFullYear();
	mm = update.getMonth()+1;
	dd = update.getDate();
	hh = update.getHours();
	ff = update.getMinutes();
	if (mm < 10) { mm = "0" + mm; }
	if (dd < 10) { dd = "0" + dd; }
	if (hh < 10) { hh = "0" + hh; }
	if (ff < 10) { ff = "0" + ff; }
	document.write("Last update ");
	document.write( yy + "/" + mm + "/" + dd + " " + hh + ":" + ff );
}
		
ソース画面:(関数呼び出し)
<script type="text/javascript">
<!--
	update2()
//-->
</script>

▲ページの先頭へ

現在日時の取得

JavaScriptで関数hiduke2()を定義、その関数を呼び出して現在日時を表示します。
定義部は<HEAD>内で、呼び出し部は必要な箇所にそれぞれ記述します。
 ↓

実行画面:

ソース画面:(関数)
<script>
<!--
/*
	●関数hiduke2()の定義
	new Date()      マシンのシステム時計から現在の時刻を作成する。
	getFullYear()   西暦4桁の数値
	getMonth()      1月を0として、12月が11となる数値
	getDate()       1~31の数値
	getHours()      0~23の数値
	getMinutes()    0~59の数値
*/
function hiduke2(){
	now=new Date();
	document.write(now.getFullYear(),"年");
	document.write(now.getMonth()+1,"月");
	document.write(now.getDate(),"日");
	document.write(now.getHours(),"時");
	document.write(now.getMinutes(),"分");
	}
//-->
</script>
		
ソース画面:(関数呼び出し)
<script type="text/javascript">
<!--
	hiduke2()
//-->
</script>
		

JavaScript1.3で、西暦を4桁で表示する「getFullYear()」が追加されました。

▲ページの先頭へ

文字列の表示非表示

ここをクリックすると、表示・非表示を繰り返します。(初期値は表示です。)

実行画面: 表示・非表示が繰り返される箇所です。

ソース画面:(関数)
function disp2(id){
	if(document.all){
		if(document.all(id).style.display == "block"){
			document.all(id).style.display = "none";
		}else if(document.all(id).style.display == "none"){
			document.all(id).style.display = "block";
		}
	}else if(document.getElementById){
		if(document.getElementById(id).style.display == "block"){
			document.getElementById(id).style.display = "none";
		}else if(document.getElementById(id).style.display == "none"){
			document.getElementById(id).style.display = "block";
		}
	}
}
		
ソース画面:(関数呼び出し)
<a href="javascript:disp2('POPUP1')">表示・非表示</a>
→ function disp2(id)を呼び出す。

ソース画面:(表示・非表示部)
<div id="POPUP1" style="DISPLAY:none">
 <p>ここに説明文を入れる。</p>
</div>
→ 呼び出し部がdisp2('POPUP1')なら、id="POPUP1"となる。
→ "DISPLAY:none"なら最初は非表示、"DISPLAY: block"なら最初は表示
		

▲ページの先頭へ