JavaScript

JavaScript とは

JavaScript とは Netscape社によって Netscape 上に実装されたスクリプト言語である。
JavaScript を使用することによって、文字や画像などをレイアウトして表示するだけだったHTMLファイルに GUIによる対話的な処理や、計算や条件によって動的に表示するデータを変更したりする処理を付け加えることができるようになる。

JavaScript の特徴

JavaScript プログラムの作り方

  1. エディタで JavaScript を含んだ HTML ファイルを作る。
  2. その HTML ファイルを Netscape で読み込んで実行する。

例1

最も簡単な JavaScript プログラムとして、ブラウザー上に Hello World と表示するプログラムを作ってみる。

  1. 以下の内容の HTML ファイルを適当なエディターで作る。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE> Hello World </TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
document.write("Hello World")
// -->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
  2. 上の HTML ファイルを Netscape で読み込むと

    と表示される。

例2

ダイアログを表示するプログラム。

  1. 以下の内容の HTML ファイルを適当なエディターで作る。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
event handler
</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function show_alert()
{
	alert(document.testform.testButton.value);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "testform">
<INPUT TYPE = "button" NAME = "testButton" VALUE = "click me" onClick = "show_alert()">
</FORM>
</BODY>
</HTML>
  2. 上の HTML ファイルを Netscape で読み込むと
    とボタンが表示されて、このボタンを押すとダイアログが出てくる。
    (ダイアログの ok ボタンを押すとダイアログが消える)

例3

現在とは別のウインドウを出して、そこに指定されたURLのWebページを表示する。

  1. 以下の内容の HTML ファイルを適当なエディターで作る。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
Simple Search
</TITLE>
<LINK REL = STYLESHEET TYPE = "text/css" HREF = "../style.css" TITLE = "Default css">
<SCRIPT LANGUAGE = "JavaScript">
<!--
function openUrl(url)
{
	window.open(url);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "wform">
URL
<INPUT TYPE = "text" NAME = "url" SIZE = 20 VALUE = "">
<BR>
<INPUT TYPE = "button" VALUE = "open URL" onClick = "openUrl(document.wform.url.value)">
</FORM>
</BODY>
</HTML>
  2. 上の HTML ファイルを Netscape で読み込むと、以下のようにテキストフィールドが表示されるので、適当なURLを入力してボタンを押すと別ウインドウが開いて、そのURLで示されるWebページが表示される。
    URL

例4

JavaScriptで簡単な計算機を作ってみる。

  1. 以下の内容の HTML ファイルを適当なエディターで作る。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
eval
</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function calc(obj)
{
	obj.result.value = eval(obj.calculate.value);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "calcform">
<INPUT TYPE = "text" NAME = "calculate" SIZE = 20>
<INPUT TYPE = "button" NAME = "docalc" VALUE = "do calculate" onClick = "calc(this.form)">
<BR>
<INPUT TYPE = "text" NAME = "result" SIZE = 20>
</FORM>
</BODY>
</HTML>
  2. 上の HTML ファイルを Netscape で読み込むと、 テキストフィールドとボタンが表示される。

    上のテキストフィールドに数式を入力してボタンを押すと、 下のテキストフィールドに計算結果が表示される。
    (入力例)

例5

JavaSciptで簡単なサーチエンジンを作ってみる。

  1. 以下の内容の HTML ファイルを適当なエディターで作る。 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
Simple Search
</TITLE>
<LINK REL = STYLESHEET TYPE = "text/css" HREF = "../style.css" TITLE = "Default css">
<SCRIPT LANGUAGE = "JavaScript">
<!--
function search()
{
	self.location = "http://search.yahoo.co.jp/bin/search?p=" + document.sform.query.value;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "sform">
Search words
<INPUT TYPE = "text" NAME = "query" SIZE = 20 VALUE = "">
<BR>
<INPUT TYPE = "button" VALUE = "start search" onClick = "search()">
</FORM>
</BODY>
</HTML>
  2. 上の HTML ファイルを Netscape で読み込むと、以下のようにテキストフィールドが表示されるので、サーチしたい文字を入力してボタンを押すとYahooからの結果が表示される。 (ただし、検索するキーワードは一つだけ)
    Search words

注意

JavaScriptプログラムを作る時、NetscapeとInternet Explorerでは互換性が無い場合があるので注意が必要である。
つまり、片方で動作するプログラムがもう一方では動作しない場合がある。

参考

Prev | Next
index | home
abe@injapan.net