おたすけHTML入門 HTML入門メニュー

第5回へ  第7回へ
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のタグ説明に戻り、よく使われるテーブル機能に
ついて説明します。


第5回へ  第7回へ