御隠居のJavaScript入門
２. JavaScriptへの第一歩
まずは、「JavaScriptって何？」で作成したJavaScriptと同じXHTML文書を作成してみよう。
-
最初にXHTML文書のひな形（プロトタイプ）を作成する。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>はじめてのJavaScriptサンプル</title> </head> <body> </body> </html> -
ここではスクリプト言語としてJavaScriptを使用するわけだが、 他にも様々なスクリプト言語があるので、使用するスクリプト言語の種類をmeta要素で指定する。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>はじめてのJavaScriptサンプル</title> </head> <body> </body> </html> -
フォームコンテンツとして、ボタンを１つだけ持ったform要素を記述する。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>はじめてのJavaScriptサンプル</title> </head> <body> <form action=""> <p><input type="button" value="JavaScriptのテスト" onclick="" /></p> </form> </body> </html> -
ボタンをクリックした時の動作（JavaScriptのプログラム）をonclick属性の属性値として記述する。 ここでは、「alert('JavaScriptで表示したダイアログです');」がJavaScriptのプログラムになる。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>はじめてのJavaScriptサンプル</title> </head> <body> <form action=""> <p><input type="button" value="JavaScriptのテスト" onclick="alert('JavaScriptで表示したダイアログです');" /></p> </form> </body> </html>ここで注意することは、form要素のaction属性が省略不可属性であることだ。 そのため上のサンプルでは空属性としている。 ただ、通常は、自分自身が処理するプログラムを持っているので、自信のファイル名を記述することがある。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>はじめてのJavaScriptサンプル</title> </head> <body> <form action="test.html"> <p><input type="button" value="JavaScriptのテスト" onclick="alert('JavaScriptで表示したダイアログです');" /></p> </form> </body> </html>