おたすけHTML入門 |
 |
1999/11/25(木)
第6回「Java Script にも挑戦」
多くのホームページで、HTMLのタグ以外に、Java Scriptの機能
を使っています。簡単な概略を説明します。
■ JavaScript とは
簡単にいえば、Webブラウザ上で動作するスクリプト言語です。
主要のブラウザIE3以上やNN2以上で動作し、HTMLのソース内に、記
述するだけで、容易に動作させることができます。
【できること】
・繰り返し処理、条件判断処理ができる
・タイマー処理の実現
・イベント処理の実現
・フォームに入力したデータのチェック
・新しいページやフレーム、ウィンドウの管理 など
【こんなこともできる】
・子供向けのドリルのような計算問題、選択問題を作り、
数値、ボタン入力をさせるることで、答え合わせもできる。
・いくつかの情報を入力させ、年金計算、保険料、ローン返済、等
のシュミレーションができる。
【できないこと】
・Webサーバのマシンから情報を取り出したり、書き込んだりする
ことはできません。
・JavaScriptはHTMLのソース上に記述されている為、ソースを隠す
(ブラックボックス)ことはできません。
■ JavaScript をホームページに組み込むには
HTMLドキュメントの中に埋め込むことができます。
JavaScriptには、<SCRIPT>タグを使います。
<SCRIPT>タグはHTMLファイル中に何回でも記述できます。
色々な定義文は、通常<HEAD>タグ内に記述します。
<SCRIPT LANGUAGE="JavaScript">
<!--
スクリプト文
//-->
</SCRIPT>
【スクリプト文について】
・HTMLドキュメントは大文字、小文字どちらでもかまいませんが、
JavaScriptでは、大文字・小文字を意識します。間違えると、
エラーになります。
・JavaScriptの1つ1つの命令の記述ごとにセミコロン(;)の区切
りを入れます。
・1行に複数の命令記述もできますし、1つの命令を複数行に書く
こともできます。但し、変数名の途中で改行はできません。
【JavaScriptが動作しないWebブラウザへの対応】
JavaScriptは主要なWebブラウザで動作します。
しかし、古いバージョンのブラウザや、動作しないブラウザを
使っている人がいます。このようなブラウザに対しては、スク
リプト文をコメント(注釈)として扱わせ、何も実行しないよう
にする必要があります。
HTMLの注釈は <!-- コメント --> を使用します。
JavaScripは // コメント(記述部分から行末まで)
もしくは、/* と */ で記述を囲んだ部分
/* コメント(複数行可能) */
両方を考慮して、
<!--
スクリプト文
//-->
と記述します。
■ JavaScript サンプル
条件によって異なる処理を行う例として、アクセスした時刻によ
りことなるメッセージを表示して見ます。
[ファイル名:smp7.html]
<HTML>
<HEAD>
<TITLE>サンプル7</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aisatu(){
msglist = new Array(
"夜遅くまでがんばりますね",
"朝早くからアクセスありがとう",
"おはようございます",
"こんにちは",
"こんばんは"
);
var no;
date = new Date();
hh = date.getHours();
if( hh<4 ) no = 0; // 00:00 から 04:00 前のアクセス
else if( hh<6 ) no = 1; // 04:00 から 06:00 前のアクセス
else if( hh<12 ) no = 2; // 06:00 から 12:00 前のアクセス
else if( hh<18 ) no = 3; // 12:00 から 18:00 前のアクセス
else no = 4; // 18:00 から 00:00 前のアクセス
document.write( msglist[no] );
}
//-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#ffffff" TEXT="#000000" LINK="#0080ff" ALINK="#ff80ff" VLINK="#000080">
<H1>JavaScriptサンプル1</H1>
<FONT COLOR="#ff0000">時刻により異なるメッセージを表示</FONT>
<HR>
<SCRIPT LANGUAGE="JavaScript">
<!--
aisatu();
//-->
</SCRIPT>
</BODY>
</HTML>
【SCRIPT解説】
・簡単に説明しますと、1日を5つの時間帯に分け、それぞれの表
示メッセージを、msglist に設定します。
・現時刻を取得します。これは自分のパソコンの時刻です。
・if else で、現時刻が5つのどの時間帯に入るか判断します。
条件に当てはまると、no に数値を設定し、条件判断処理から
次の処理に移ります。
・document.write( msglist[no] ) で、そのメッセージを表示
しています。
このように、SCRIPTの中は、まさしくプログラムです。
プログラムなので、表示結果は同じでも、この部分の記述は、
作る人によって、それぞれ異なります。
HTMLを覚えるには、さほど時間を必要としませんが、JavaScript
の場合、自力で作るには、文法とプログラムを作る為の基礎知識
を身につける必要があります。しかし、そこまで苦労はしたくな
いが、使ってみたい。という人は、色々なサンプルを提供してい
るサイトがありますから、それを利用することもできます。
JavaScriptには、HTMLにはない魅力もあります。自分のページ
にも組み込んでみてはいかがでしょうか。
---------------------- 新コーナー ---------------------
今回からHTML入門以外に、役立ちそうなパソコン基礎知識を
「ワンポイント」コーナーで説明していきます。
★ ワンポイント(圧縮・解凍とは?)
圧縮:ファイルのデータ量を小さくする
解凍:小さくしたものを元に戻す
[便利な点]
・複数のファイルを一つにまとめられる
・元のファイルの大きさと比べ、小さくできる
・普段使わなくなったデータファイルを一つのファイルにして管理できる
[主な使い方]
1 パソコン雑誌の付録CD-ROMの圧縮ファイルを解凍する。
圧縮したままでは、使えません。
2 ダウンロードサイトから、ダウンロードした圧縮ファイルを解
凍する。
3 フロッピー1枚には入りきれない複数ファイルをフロッピーに
入れて持ち運ぶ時。圧縮後のファイルサイズが1枚のフロッピー
に入りきれない時は分割ソフトを使い複数枚に分ける。
自分のパソコン
HD複数ファイル --> 圧縮 --> (複数FDに分割)
他のパソコン
(複数FDファイルを結合しHDにコピー) -->
解凍 --> HD複数ファイル
( ) 内の作業は、圧縮後のファイルサイズがFD 1枚の容量を
越えた時に行う。
ファイル分割・結合ツール ダウンロード
http://www.forest.impress.co.jp/split.html
4 複数ファイルをメールの添付ファイルとして送る場合。
ファイルが1つでも、圧縮した方が転送量が少なくてすむ。
但し、JPEGのような画像ファイルは圧縮機能を使って作られて
いるので、圧縮しても効果はありません。
送り手
複数ファイル --> 圧縮 --> メールの添付ファイル
(テキストデータになる)
受け手
メールの添付ファイル --> (元のデータに戻す) -->
(テキストデータ)
解凍 --> 複数ファイル
添付ファイルの扱い方はメールソフトの説明を参照。
[圧縮・解凍には、専用のツールを使う]
お薦めソフト
1.Lhasa :LZH・ZIP形式 解凍のみ。 使い方簡単。 無料
http://www.forest.impress.co.jp/archiver.html#lhasa
2.LHMelt:LZH形式 圧縮・解凍。他形式も可能。無料
http://www.forest.impress.co.jp/archiver.html#lhmelt
3.Explzh:LZH形式 圧縮・解凍。他形式も可能。1000円
http://www.forest.impress.co.jp/archiver.html#explzh
4.Winzip:ZIP形式 圧縮・解凍。他形式も可能。29ドル
http://www.forest.impress.co.jp/archiver.html#winzip
解凍 : Lhasa
圧縮・解凍 : LHMelting Explzh Winzip
最低でも Lhasa がないと不便です。
[主な圧縮ファイルの種類]
方式 ファイル名 備考
------------------------------------------------------------
LHA方式 *.lzh 日本で使用されている圧縮方式。
ZIP方式 *.zip 主にアメリカで使用されている圧縮方式。
各種自動解凍方式 *.exe プログラム実行で、自動で解凍する。
解凍ツールを必要としない。
[圧縮・解凍の参考になるホームページ]
圧縮・解凍に関する大学の講義資料
http://www.toyama-cmt.ac.jp/japanese/department/K/staff/okamoto/k2/july08/index.html
統合アーカイバ・プロジェクト Common Archivers Library
http://www.csdinc.co.jp/archiver/
■最後に
ホームページファイル破損に伴う復旧処理で、プロバイダーのサーバを
含めて書くべきでした。ご指摘有り難うございました。
記述の誤り、漏れ等ありましたら際は、ご一報下さい。
■次回
第7回 「テーブル機能について」
再び、HTMLのタグ説明に戻り、よく使われるテーブル機能に
ついて説明します。