ネットワーク 3

WWWとは

WWW( World Wide Web )とはHTTP( HyperText Transfer Protocol )というプロトコルによってデータを送信するシステムのことでです。
ハイパーテキストと呼ばれる、リンクされた情報をたどってゆくことによって情報検索をしてゆくシステムです。
一般にWWWというときはWWWサーバーとWWWクライアント(ブラウザー)から成り立つシステムのことを指します。

ブラウザー

WWWによってホームページを見る時には、ブラウザーと呼ばれるソフトを使用します。
現在、代表的なブラウザーとしては以下のものがあります。

Internet Explorer
Firefox
Opera
Safari
Chrome
w3m

上記のブラウザーでは、メール、ftp、telnet、newsなども利用でき、プラグインやJava、VRML、JavaScript、VBscriptなどの言語によって様々な拡張ができる様になっています。

WWWサーバー

ブラウザーなどから、HTTPプロトコルによって送られてきた要求に応じてデータを送るのがWWWサーバーです。
現在、代表的なWWWサーバーは以下のものがあります。

Apache: インターネット上で最も良く使われているWWWサーバー。
もともとUNIX用だがWindows版もあります。
IIS: Microsoft社のサーバ。イントラネットの使用が多いようです。

WWWサーバーの例

Pythonによって、簡単にWWWサーバを起動することができます。

ポート8000番でサーバを起動
python -m SimpleHTTPServer
ポート8080番でサーバを起動
python -m SimpleHTTPServer 8080
CGIを使用可能にする
python -m CGIHTTPServer

プロトコルとは

プロトコル(通信規約)とはコンピュータ間でデータなどを送受信する時の手順を決めた規則のことです。
インターネットでも用途によって、そのためのプロトコルが定められて使用されています。

プロトコルの種類

インターネットで、よく使われる主なプロトコルの種類は以下の通りです。

HTTP (HyperText Transfer Protocol): Webのページを受信するためのプロトコル。
FTP (File Transfer Protocol): プログラムや画像データなどを送受信するためのプロトコル。
UNIX、Windows(DOS)にはftpというコマンドがあります。
TELNET: TCPのポートに接続するためのプロトコル。
疑似端末にするために使用されることもありますが、どんなソフトのポートにも接続できるのでネットワークのテストによく使用されます。
UNIX、Windows(DOS)にはtelnetというコマンドがあります。
SMTP (Simple Mail Transfer Protocol): メールのデータを送信するためのプロトコル。
POP (Post Office Protocol): メールを受信するためのプロトコル。
POP3という種類のものが最も多く使用されています。
IMAP (Internet Message Access Protocol): メールを受信するためのプロトコル。
POPより多機能です。
IMAP4という種類のものが最も多く使用されています。
NNTP (Network News Transfer Protocol): ニューズを送受信するためのプロトコル。
NTP (Network Time Protocol): コンピュータの時計を正確に合わせるためのプロトコル。
SNTP (Simple Network Time Protocol): コンピュータの時計を正確に合わせるためのプロトコル。
NTPを簡単にしたものです。

HTMLデータの基本

WWWにおけるWebページは、 HTML というフォーマットのテキストファイルとして作られます。
ホームページを制作するためのソフトウエアは色々ありますが、そのようなソフトを使っていても、どうしてもうまく行かないことがあります。そういう時に、HTMLの文法を知っていると、どこが良くないかを見つけることができるので、覚えておいて損は無いでしょう。
さて、基本的に HTML はマークアップという方法で、データを作ってゆきます。
具体的には、タグというラベル( < から > まで)をテキストファイルに追加して作成します。

<タグ>テキスト </タグ>
<タグ>テキスト

上のフォーマットによって、テキストの部分が大文字になったり、リストになったり、他のデータへのリンクになったりします。
タグは、大文字・小文字を区別しません。
<TABLE>と<table>は同じタグを表します。

HTMLの構造

HTMLのファイルは、次のような構造になっています。


<DTD>       <- HTMLの種類を決める 
<HTML>      <- HTMLデータの始まり
<HEAD>      <- HEADデータの始まり
タイトル、スタイルシートやプログラムなど各種情報
</HEAD>     <- HEADデータの終り
<BODY>      <- BODYデータの始まり
HTMLの本文
</BODY>     <- BODYデータの終り
</HTML>     <- HTMLデータの終り

注意

<TITLE> ... </TITLE> の部分は、HTMLのファイルを作る時には、必ず<HEAD></HEAD>に書いておきます。
この部分に、そのHTMLのタイトルを適当に決めて書いておきますが、これがないと、ブラウザはそのファイルをHTMLの文書だと思ってくれません。

また、実際には一番上にあるDTDの部分は無くてもブラウザに表示できますが、正式なWebページには必要なものなので、きちんとDTDは書いておくべきです。

HTML4.0のDTD

種類	DTD	説明
Strict DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">	廃止予定の要素とフレームを含まない
Transitional DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">	Strict DTDに廃止予定の要素を加えたもの
Frameset DTD	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/framesett.dtd">	Transitional DTDにフレームを加えたもの

簡単なHTMLデータ

文法的なことは後で覚えることとして、とりあえず簡単な例をやってみましょう。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE> Simple HTML data 1 </TITLE>
</HEAD>
<BODY>
<H1>見出し </H1>
<P>
一つ目の段落 
</P>
<P>
二つ目の段落
</P>
</BODY>
</HTML>

上のデータを、テキストエディタを使用してtest.htmlという名前で作っておいて、ブラウザで表示してみます。すると、ブラウザのウインドウの中に、以下のように表示されるはずです。

実際の表示例

<TITLE> から </TITLE> までで囲まれたSimple HTML data 1 はウインドウの上にあるDocument Title:の部分に表示されます。

改行の方法

HTMLでは、文章の中に普通に改行を入れただけでは、本当に改行されません。
改行したい場所に <BR> というタグを入れる必要があります。
ついでに言っておくと、スペースも無視されるので注意してください。


これは     改行を
入れた
文章です。

と打ち込んでも

これは改行を入れた文章です。

となってしまいます。


これは改行を<BR> 
入れた<BR>
文章です。

で始めて

これは改行を
入れた
文章です。

のように改行が入ります。

段落

HTMLでは <P></P> によって囲んだ部分が1段落になります。


<P>これが第一段落。</P>
<P>これが第二段落。</P>
<P>これが第三段落。</P>

というデータは

これが第一段落。

これが第二段落。

これが第三段落。

となります。
この<P>の場合も、デフォールトでは1行分空行が空くからと言って空行をあけるために使用してはいけません。

見出しを表すタグ

HTMLで、見出しの文字を表示するには、以下のタグを使用します。

<H1> .. </H1>
<H2> .. </H2>
<H3> .. </H3>
<H4> .. </H4>
<H5> .. </H5>
<H6> .. </H6>

このタグを使用する時に、注意しなければならないのは、たとえば <H1> で始めたら必ず </H1> を最後につけなければならないということです。

見出しを表すタグの例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE> Simple HTML data 2</TITLE>
</HEAD>
<BODY>
<H1>これがH1の見出し</H1>

<H2>これがH2の見出し</H2>

<H3>これがH3の見出し</H3>

<H4>これがH4の見出し</H4>

<H5>これがH5の見出し</H5>

<H6>これがH6の見出し</H6>
</BODY>
</HTML>

実際の表示例

HTMLを書く際の注意

HTMLのタグには全体の構造を表すタグと、見栄え(デザイン・レイアウト)を決めるカスケードスタイルシート(CSS)があります。
この2つを、きちんと使い分けるべきです。
たとえば、見出しのタグ(<H1>, <H2>など)によって文字の大きさが変わるからといって、これらを文字の大きさを変えるために使用してはいけません。

インライン画像

HTMLにおいて、画像をページ中(インライン)に表示するにはIMGタグを使用します。

<IMG SRC = "画像ファイルのURL" WIDTH = "横サイズ" HEIGHT = "縦サイズ" ALIGN = "位置" ALT = "説明">

SRC

SRCの後ろに画像のファイル名(URL)を書きます。
このタグを使用して、表示できる画像フォーマットの種類は以下の通りです。

フォーマット	ファイル名の拡張子	色数	インターレース	透明化	アニメーション
GIF	.gif	256色	○	○	○
JPEG	.jpg .jpeg	フルカラー	○	○	×
PNG	.png	フルカラー	○	○	×

ALIGN

ALIGNは、文章と画像の相対位置を変えるために使用します。
ALIGNを省略するとデフォールトのbottomになります。

ALIGN = "top" これが私の画<IMG SRC = "myown.gif" ALIGN = "top">です。 これが私の画です。
ALIGN = "middle" これが私の画<IMG SRC = "myown.gif" ALIGN = "middle">です。 これが私の画です。
ALIGN = "bottom" これが私の画<IMG SRC = "myown.gif" ALIGN = "bottom">です。 これが私の画です。

ALT

IMGタグを使用する時は、画像を表示しない・できないブラウザーを使ってページを見る人のために、 ALTタグも書いておいた方が良いでしょう。
ALTタグの後に、その画像についての説明を書いておきます。
ただし、単なる飾りの画像の場合は*(アスタリスク)などの記号を書いておけば良いでしょう。

ALT = "画像の説明" これが私の画<IMG SRC = "myown.gif" ALT = "[My face]" >です。 これが私の画[My face]です。

インターレース

画像を、まず荒いモザイク模様で表示しておいて、段々細かい画像にして表示するものです。
[interlaced image]

透過画像

画像の背景を、透過させて表示させることもできます。
[not transparent image] の背景を透過させると [transparent image] となります。

アニメーション

これは、GIFのみにある機能で、1枚のGIFファイルの中に複数の画像を入れて、それらを連続的に表示することによってアニメーションができるようにするものです。
[animation gif]

その他の画像フォーマット

GIF、JPEGやPNG 以外の画像フォーマットを表示したい場合は、 <A HREF = "画像ファイルのURL"> によって表示したい画像をリンクしておけば、ブラウザーの内部または外部に表示されます。
テスト画像

リンク

HTMLで文章や画像を他のファイルや画像にリンクするには

<A HREF = "リンク先のURL">... </A>

というタグを使用します。(</A>を忘れないこと)
...の部分をクリックすると、リンク先のページまたは画像が表示されます。
リンク先が画像ファイルの場合は設定によってブラウザの中か、または外部の画像表示コマンドによって表示されます。
画像以外の音声データ、動画データなども適当なプラグインなどがインストールしてあれば、スピーカから音を出したりブラウザ内に表示できます。

このリンク先は<A HREF = "link-test.html">サンプルページ</A>です。 このリンク先はサンプルページです。

一度もクリックされていないリンク先と、一度でもクリックしたところは色が変化します。

<A HREF = "link-test.jpg">画像 </A>をリンクするとこうなります。 画像をリンクするとこうなります。

上のリンク先をクリックすると、通常はブラウザ内に画像が表示されます。

また、URLをmailto:メールアドレスと書いておくと、クリックした時にそのメールアドレス宛になったメールソフトが自動的に立ち上がるようにできます。

CSS ( スタイルシート )

CSS( Cascading Style Sheet )とは、HTMLにおいてレイアウトを表現するための文法です。
HTMLのタグはあくまでも文書の構造を表すものなので、文字の大きさ・色・段付けなどレイアウトやデザインを決めるにはCSSを使うようにします。

CSSの利点

HTMLの文書が簡単になります。
HTMLのタグの中に、レイアウトの要素を含めなくて良いのでHTMLの文書が簡単になります。
同じことを繰り返さなくて済みます。
一度CSSで定義しておくと、同じタグでは全て同じレイアウトで表現できます。
ですから、複数のページのレイアウトを簡単に変更することもできます。
HTMLのタグよりも豊かな表現ができます。
フォントの大きさ・ポジションニングなど、HTMLより細かな指定ができます。
将来の規格にも対応できます。
XMLなどの規格を使うときにも対応しやすくなります。

CSSの使い方

CSSを使うには、以下の3つの方法のいずれかで行います。

タグに直接書き込む。 <タグ STYLE = "プロパティ名: 値; ..." >
ヘッダ( <HEAD>タグの中 ) に書き込む。 <HEAD> <TITLE>タイトル</TITLE> <STYLE>  </STYLE> </HEAD>
CSSファイルを作る。
ファイルの中に以下のようにプロパティを書き込んでおき、 タグ {プロパティ名: 値; ..." >} HTMLファイルの中で <LINK> タグによって取り込みます。

実際に使用する時には、3番目のCSSファイルを作って各HTMLファイルに読み込ませる方法が、後のメンテナンスが楽だと思います。

CSSの例

CSSを使った簡単なHTMLの作り方について以下に述べます。

CSSファイル(test.css)を作成します。
テキストエディタで、適当なファイル名(例えばtest.css)のCSSファイルを作成します。
ここではバックの色を赤にして、<H1>タグの中の文字を白色にしています。 BODY { background: red; } H1 { color: white; }

HTMLファイル(test.html)の中にCSSファイルを取り込みます。
そのために、CSSファイルの名前をtest.cssとすると、以下のように<HEAD>タグの中に<LINK>タグによって test.cssファイルを取り込んでおきます。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "test.css">
</HEAD>
<BODY>
<H1>CSSのテスト </H1>
<P>
スタイルシートのテスト
</P>
</BODY>
</HTML>

ブラウザで表示します。

CSSを使う時の注意

現在CSSにはCSS1とCSS2というバージョンがありますが、 FirefoxやIEなどのブラウザではCSS1のほとんどとCSS2の一部をサポートしている。
しかし、FirefoxとIEでは使うことのできるCSSが違うのでどちらかのブラウザしかうまく表示できないことが有り得ます。

CSSの基本的なプロパティ

color

文字などの色

background

バックの色

background-image

バックに貼る画像ファイル
URLで指定できるので他のマシンの画像も利用できます。

font-size

文字の大きさ

font-family

フォントの種類

serif (明朝)
sans-serif (ゴシック体)

text-align

テキストの位置
left, center, right のいづれかを指定

margin

枠線(ボックス)の外側の余白の幅

padding

枠線(ボックス)の内側の余白の幅

border-width

枠線(ボックス)の線幅

border-color

枠線(ボックス)の色

CSSの単位

長さ

単位	説明
em	現在のフォントサイズを1とした相対的な大きさ
ex	xのフォントサイズを1とした相対的な大きさ
%	全体を1とした相対的な大きさ
px	ピクセル
pt	ポイント 1/72 inch
pc	パイカ 1/6 inch
in	インチ 1 inch = 2.54 cm
cm	センチメートル
mm	ミリメートル

色

指定方法説明

色の名前 red, green などの色の名前

#RRGGBB 16進法で表した色の値

rgb(R,G,B) 10進法で表した色の値

rgb(R%,G%,B%) %で表した色の値

指定方法	説明
色の名前	red, green などの色の名前
#RRGGBB	16進法で表した色の値
rgb(R,G,B)	10進法で表した色の値
rgb(R%,G%,B%)	%で表した色の値

例


BODY {
	color: white;
	background: #FF0000;
	margin-left: 10%;
	padding-left: 1cm;
	margin-right: 15%;
	padding-right: 1cm;
	border-width: 2;
}

H1 {
	color: green;
	font-size: 20pt;
	font-family: sans-serif;;
}

上のCSSを使ったページ。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>
test page of CSS
</TITLE>
<LINK REL = STYLESHEET TYPE = "text/css" HREF = "test-css.css" TITLE = "Default css">
</HEAD>
<BODY>
<H1> Sample of CSS</H1>
このようなページになる。
<HR>
<CENTER>
<A HREF = "css2.html">back</A>
</CENTER>
</BODY>
</HTML>

テーブル(表)

HTMLで表を作るときは、以下のタグの組合せによって表現します。

<TABLE>...</TABLE>: テーブル全体を表すタグ
<TR>...</TR>: 横1行を表すタグ
<TH>...</TH>: ヘッダを表すタグ
<TD>...</TD>: セルを表すタグ

例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<HTML>
<HEAD>
<TITLE>Sample of Table</TITLE>>
</HEAD>
<TABLE>
<TR>
<TH> 番号</TH> <TH> 名前</TH>
</TR>
<TR>
<TD> 99AU0000</TD> <TD> 阿部</TD>
</TR>
<TR>
<TD> 99AU0001</TD> <TD> 安部</TD>
</TR>
</TABLE>
</BODY>
</HTML>

表示例

このままでは見にくいので、CSSを使ってデザインを変えてみましょう。
以下のファイルをtable-sample.cssという名前で作成します。


TH {
	background-color: blue;
	color: white;
}
TD {
	background-color: green;
	color: white;
}

これを、上のHTMLデータの<HEAD>タグの中で<LINK>タグによって読み込みます。


<HTML>
<HEAD>
<TITLE>Sample of Table</TITLE>>
<LINK REL = "stylesheet" TYPE = "text/css" HREF = "table-sample.css">
</HEAD>
<BODY>
.
.
.
</BODY>
</HTML>

表示例

整形済テキスト

C言語のプログラムなどを、HTMLによって書きたいとき書いてある通りに出力して欲しいことがあります。その場合は<PRE>タグを使用します。

例


<PRE>
#include &lt;stdio.h&gt;
main()
{
	printf("hellow\n");
}
</PRE>

を表示すると

#include <stdio.h>
main()
{
	printf("hellow\n");
}

の様に表示されます。

上のプログラムで&ltは<、&gtは>を表します。
この方法で表さないと、ブラウザがstdio.hをタグと間違えてしまうので表示がおかしくなります。

特殊文字

上で述べたように< , > , & , " などはHTMLの中で特別な意味があるので、そのままでは使用できません。
例えばC言語で #include <stdio.h> という部分も、そのままHTMLのデータファイルの中に書いておくと #include という様に<stdio.h>の部分が消えてしまいます。
これを避けるためには、次の特別な文字を使用します。

<: <
>: >
&: &
": "

上の特殊文字を使用して #include <stdio.h> と書いておけば #include <stdio.h> と正しく表示されます。

論理型タグ

< DFN> ... < /DFN>: 文章の中で、定義された単語を表現するために使用します。(イタリック体)
(例)This is a computer(Apple).
< EM> ... < /EM>: 文章の中で、強調された文字を表します。(強調イタリック体)
(例)This is a Apple.
< CITE> ... < /CITE>: 本など作品の、名前を表すのに使用されます。(イタリック体)
DFHelp is this manual. (例)
< CODE> ... < /CODE>: コンピュータのプログラムや、データを表現するのに使用します。(固定幅フォント)
(例)printf("hello\n");
< KBD> ... < /KBD>: キーボードから入力される文字を、表現するのに使用されます。(固定幅フォント・ボールド体)
(例)vi test.c
< SAMP> ... < /SAMP>: コンピュータから表示される文字を、表現するのに使用されます。(固定幅フォント)
(例)File Not Found
< STRONG> ... < /STRONG>: 文章の一部を強調するのに使用されます。(強調文字・ボールド体)
ただし、このタグは将来廃止されるかもしれません。
(例)This is strong charactor.
< VAR> ... < /VAR>: 変数を表現するのに使用されます。(イタリック体)
(例)val = 3 * y;

物理型タグ

文字の見た目を変更するタグですが、現在は非推奨になっています。
同じ目的には、CSSを使用します。

<B>... </B>: ボールド体
(例)This is Bold.
<I>... </I>: イタリック体
(例)This is Itaric.
<TT>... </TT>: タイプライタ体
(例)This is Typewriter.
<U>... </U>: アンダーライン
(例)This is Underline.

JavaScript とは

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

JavaScript の特徴

コンパイルの必要がありません。(HTML内に直接記述する)
変数に型がありません。(代入されるものによって型がきまる)
オブジェクト指向的な言語です。(クラスの継承などはできない)
ブラウザの機能を直接利用出来ます。
文法は似ているが、Java 言語とは全く別の言語です。

JavaScript プログラムの作り方

エディタで JavaScript を含んだ HTML ファイルを作成します。
その HTML ファイルをブラウザで読み込んで実行します。

例1

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

以下の内容の 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>

上の HTML ファイルをブラウザで読み込むと

と表示されます。

例2

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

以下の内容の 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>

上の HTML ファイルをブラウザで読み込むと

とボタンが表示されて、このボタンを押すとダイアログが出てきます。
(ダイアログの ok ボタンを押すとダイアログが消えます)

例3

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

以下の内容の 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>

上の HTML ファイルをブラウザで読み込むと、以下のようにテキストフィールドが表示されます。そこに、適当なURLを入力してボタンを押すと、別ウインドウが開いてそのURLで示されるWebページが表示されます。
URL

例4

JavaScriptで簡単な計算機を作ってみましょう。

以下の内容の 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>

上の HTML ファイルをブラウザで読み込むと、テキストフィールドとボタンが表示されます。

上のテキストフィールドに数式を入力してボタンを押すと、下のテキストフィールドに計算結果が表示されます。
(入力例)
- (3 + 2)/5 * 4
- Math.sin(1.5)
- Math.sqrt(2*2 + 3*3)

例5

JavaSciptで、簡単なサーチエンジンを作ってみましょう。

以下の内容の 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://www.google.co.jp/search?q=" + 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>

上の HTML ファイルをブラウザで読み込むと、以下のようにテキストフィールドが表示されます。テキストフィールドに、サーチしたい文字を入力してボタンを押すとGoogleからの結果が表示されます。 (ただし、検索するキーワードは一つだけ)
Search words

注意

JavaScriptプログラムを作る時、FirefoxとInternet Explorerなどブラウザの種類によって、互換性が無い場合があるので注意が必要です。
つまり、片方のブラウザで動作するJavaScriptプログラムがもう一方では動作しない場合があります。

参照

RFC821 (SMTP)
RFC1939 (POP3)
RFC1730 (IMAP4)
RFC2060 (IMAP4rev1)
RFC977 (NNTP)
RFC1035 (NTP)
RFC2030 (SNTP)

Prev | Next
index | home

abetmhr@gmail.com