初心者のためのホームページ作り:第104号

                隔週金曜日配信 What's New 2004年10月29日
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  ┏┏┏┏   初心者のためのホームページ作り/Web for beginner
  ┏┏┏         http://www.scollabo.com/banban/
  ┏┏
  ┏              <第104号>

                banban@scollabo.com

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

  当講座は、初心者や中級者が正しい文法と作法を身につけて、プロ級の本格
 的な Webページ作成に役立つことを目的に配信されております。

  当講座では HTML4.01、XHTML1.1、XML1.0 を中心とした文法が主体となって
 います。なお、このマガジンは等幅フォントでお読みいただくと快適に読める
 ようになります。

   今週のコンテンツ
    ■ JavaScript講座 (第22回) --- Arrayオブジェクト
    ■ インターネット用語 --- バッファー・オーバーフロー

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆JavaScript講座 --- Arrayオブジェクト

 Arrayオブジェクトは、配列をオブジェクトとするもので、配列で指定した各
 要素 (配列インデックス) を制御します。

 ■配列とは
 通常、ある一つのデータを格納する場合には「変数」を使います。これによっ
 て、任意にいつでもそのデータを取り出せます。
  しかし、大量のデータを処理しようとする場合に、それぞれの変数を用意す
 るのは大変です。そこで複数データを一度に格納し処理する場合に「配列」と
 いう手法を用います。

 ■配列の作成
 配列を用意する場合には、必ず new Array() の形式をとります。また ()内の
 引数には配列となるインデックスを配置します。インデックスはカンマで区切
 ることで任意にいくつでも設定することができます。

  具体的な書式
   week = new Array("日","月","火","水","木","金","土");

  この場合 week という変数には、インデックスのデータが格納され、それを
 参照するためには、[] の中に添え字をつけます。また、インデックスの並び
 は、必ず 0 からとなります。例えば2番目のインデックスを参照するには、

  document.write(week[1]);  となります。week[0] とした場合には1番目の
 インデックスを参照することになります。

 ■Arrayオブジェクトのメソッド
  Arrayオブジェクトで定義されているメソッドを使うことで、複雑なプログラ
 ムを用意しなくても、配列インデックスを様々な形で制御します。

 □ concatメソッド
 2つの配列を結合して、1つの配列にします。

  具体的な書式
   配列名.concat(結合する配列名)

  サンプル構文
  fruit = new Array("りんご", "みかん", "バナナ");
  cake  = new Array("チョコ", "饅頭", "せんべい");
   myArray = fruit.concat(cake);
   document.write(myArray);

   myArray には、リング、みかん、バナナ、チョコ、饅頭、せんべいという
  具合にインデックスが1つに結合されて格納されます。

 □ joinメソッド
 配列インデックスを指定した区切り文字で区切ります。区切り文字を省略した
 場合には、自動的にカンマが振られます。


  具体的な書式
   配列名.join(区切り文字)

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
    document.write("変換後の配列 ", myArray.join('/'));

  この構文では、myArray で定義された配列インデックスを、スラッシュ (/)
  で区切って表現しています。

 □ popメソッド
 配列の最後のインデックスを取り出すのが popメソッドです。

  具体的な書式
   配列名.pop()

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
    document.write("取り出し前", myArray);
     document.write("取り出し後", myArray.pop());

  この構文では、配列の最後のインデックス (yellow) を取り出した上で配列
  を表示しています。

 □ pushメソッド
 既に形成されている配列インデックスの最後尾に、さらにインデックスを一つ
 付け加えます。

  具体的な書式
   配列名.push(加えるインデックス)

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
   myArray.push("purple");
    document.write(myArray);

  myArrayには4つのインデックスが定義されていますが、さらにもう1のイ
  ンデックスを最後尾に付け加えて表示しています。

 □ reverseメソッド
 既に形成されているインデックスの順番を逆順に揃え直します。

  具体的な書式
   配列名.reverse()

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
   myArray.reverse();
    document.write(myArray);

  myArrayで定義されたインデックスを yellow、blue、green、red の逆順で
  並び替えて表示します。

 □ shiftメソッド
 既に形成された先頭のインデックスを取り出します。ちょうど最後のインデッ
 クスを取り出す popメソッドの逆になります。

  具体的な書式
   配列名.shift()

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
   myArray.shift();
    document.write(myArray);

  この構文では、配列の先頭のインデックス (red) を取り出した上で配列を
  表示しています。

 □ sliceメソッド
 既に形成されている配列のインデックスから指定した範囲のインデックスを取
 り出します。指定する範囲は、開始位置と終了位置となりますが、インデック
 スの先頭が、0 であることに注意してください。
  開始位置は取り出すインデックスの位置となり、終了位置は指定した位置の
 1つ前のインデックスであることに注意してください。

  具体的な書式
   配列名.slice(開始位置, 終了位置)

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow", "purple");
   myArray = myArray.slice(1,4);
    document.write("取り出し後の配列", myArray);

  この構文では myArrayで定義された5つのインデックスの先頭から2番目の
  インデックスより4番目のインデックスまで取り出します。
   つまり、green、blue、yellow までの3つのインデックスを取り出します。

 □ sortメソッド
 既に形成された配列のインデックスを並び替え (ソート) します。先に述べた
 reverseメソッドでは逆順に並び替えますが、sortメソッドでは文字コード順に
 並び替えます。数値を指定した場合には、小さい順に並び替えますが、並び替
 えは文字コード順になることに注意してください。

   具体的な書式
    配列名.sort()

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow", "purple");
   myArray = myArray.sort();
    document.write("並び替え後 ", myArray);

 □ spliceメソッド
 既に形成された配列インデックスを、指定した範囲で別のインデックスに置き
 換えます。指定範囲は sliceメソッドと同様に開始位置と終了位置を指定して
 別の任意のインデックスと置き換えます。

   具体的な書式
    配列名.splice(開始位置, 終了位置, 置き換えデータ)
    (置き換えデータはカンマで区切って複数指定可能です。)

  サンプル構文
   myArray = new Array("red", "green", "blue", "yellow");
   myArray.splice(1,3,"purple", "olive", "orange");
    document.write("置換え後の配列", myArray);

  この構文では、最初に作成した配列の2番目から4番目のインデックスを、
  purple、olive、orange に置き換えて表示します。
   したがって、red,purple,olive,orange と置き換えられます。

 □ unshiftメソッド
 既に形成されている配列のインデックスの先頭に新たなインデックスを追加し
 ます。なお shiftメソッドでは先頭の配列を取り出しますが unshiftメソッド
 では追加すると覚えてください。

   具体的な構文
    配列名.unshift(追加するインデックス)

  サンプル構文
   myArray = new Array("HTML", "JavaScript", "PHP");
   myArray.unshift("Perl");
    document.write(myArray);

  この構文では、既に形成されている配列の先頭に「Perl」というインデック
  スを先頭に追加します。

 ■Arrayオブジェクトのプロパティ
 Arrayオブジェクトでは1つだけプロパティが定義されています。
  プロパティはオブジェクトを参照したり設定する場合に用います。

 □lengthプロパティ
 形成されている配列のインデックス数を参照する場合に用います。

   具体的な構文
    配列名.length

   サンプル構文
    myArray = new Array("大吉","吉","中吉","凶");
    a = Math.floor(Math.randam()*myArray.length);
    document.write("今日の運勢は", myArray[a}, "です");

  この構文では、配列数を参照し、その数を元に乱数を発生させ (0〜4まで) 
  その結果、ある配列インデックスを取り出して表示させるものです。

 ■まとめ
 配列は様々なシーンで利用されます。負数のデータを1つに格納できる利点が
 あり、様々なメソッドを利用してコントロールします。
  その意味でも、各メソッドを覚えることは、複雑なスクリプト作成の上で、
 欠かせないものとなるでしょう。

  なお、各サンプルの実行結果は「今週のおさらい」に掲載しましたので、お
 暇な折に伽藍ください。URL は下記にあります。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆インターネット用語解説 --- バッファーオーバーフロー

 バッファーとは、複数の機器やソフトウェアの間でデータをやり取りするとき
 に、処理速度や転送速度の差を補うためにデータを一時的に保存しておく記憶
 装置や記憶領域のことで、一般的にはメモリ容量を指します。

 アプリケーションや基本ソフト (OS) などのシステムでは、あらかじめ想定さ
 れているバッファーの容量が確保されています。しかし、想定以上のデーター
 が入力されたときには、バッファーからデータがあふれ (over flow) ます。

 あらかじめ確保したメモリサイズを超えてしまった場合に、プログラム中のメ
 モリ領域が破壊されてしまいます。こうした場合、プログラムは誤動作を起こ
 したり、不意な異常終了することになります。サーバの場合には落ちる (停止
 する) こともあります。

 ■バッファーオーバーフロー攻撃
 こうしたアプリケーションやシステムの弱点 (脆弱性と呼ばれる) を突いて攻
 撃するバッファーオーバーフロー攻撃は後を絶ちません。昨年夏にマイクロソ
 フトのソフトウェアの脆弱性を狙った「ブラスター」というウィルスは大きな
 被害をもたらしたことは記憶に新しいところです。
  こうした攻撃はシステムを不安定にするばかりでなく、システム全体の権限
 まで乗っ取られる危険性があります。

 ■バッファーオーバーフロー攻撃の防止
 こうした悪意ある攻撃は、システムやアプリケーションの脆弱性を狙ったもの
 なので、ユーザ自身が未然に防ぐ策は限られています。システムやアプリケー
 ションの場合には、何よりも最新のバージョンにアップグレードする必要があ
 ります。
  例えば、Acrobat Reader という PDF閲覧ソフトで脆弱性が発見されたとき、
 メーカー側ですぐに対応したパッチをリリースしました。ユーザはこのパッチ
 をインストールすることで、不用意な攻撃を未然に防ぐことができます。

 あなたが利用するすべてのソフトウェアやシステム、基本ソフトなどは常日頃
 からそれらの会社のホームページを参照して情報を得ることが大切です。何事
 にも完璧なものはないのですから、それぞれのパッチを受けるように心がけま
 しょう。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

今回はここまで。

 今週のおさらいは Webページにも掲載しましたので、是非参考までに見ておい
 てください。
  Webページでは HTML文の実行結果のサンプルもあり、より分かりやすく説明
 しています。あわせて過去の記事のおさらいも掲載しています

 (今週のおさらい)
  http://www.scollabo.com/banban/magazine/review_104.html

 次回は、11月12日に配信を予定しています。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆質問・ご意見ははこちらまで→ banban@scollabo.com

 なお、ご質問の際には、あなたがお使いのOS、ブラウザ、テキストエディタな
 ど、なるべく分かりやすく制作環境を明記していただけると回答しやすくなる
 と思います。
  ただし、個人的な事由により返事が遅れることがあります。ご了承ください。
 お急ぎの場合には、当サイト内の掲示板をご利用ください。きっと誰かが答え
 てくれると思います。

 発行者 ばんばん
 協力  スズキ・コラボレーション http://www.scollabo.com/
 配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)

  誤字・脱字・変換ミス・表現欠乏などには、平にご容赦願います。

 ■バックナンバー こちらで公開しています。
 プレーンテキスト  http://www.scollabo.com/banban/magazine.html
 各号のおさらい  http://www.scollabo.com/banban/magazine/
 アーカイブ    http://www.scollabo.com/banban/daf/archive.html
 まぐまぐ     http://backno.mag2.com/reader/Back?id=0000090196

 ■配信の変更・中止はこちらです。
 個別の手続きは受け付けていませんので、ご面倒でも各自でお願いできれば助
 かります。
  当サイトにて http://www.scollabo.com/banban/magazine/top.html
  まぐまぐにて http://www.mag2.com/m/0000090196.htm

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

<えでぃた〜ず・る〜む>

 地球の営みは地球自身が生まれて46億年の間、休みなく絶えず活発に動いてい
 ます。今回の新潟県中越地震もその一環であることに疑いはありません。
  大自然の想像を絶する力の前に、私たち人間が抵抗する術はありません。改
 めてその脅威に、ただ驚きと不条理を感じてしまうものです。

  幾たびかの台風と今回の地震に被災された方の心からのお見舞いと、一日も
 早い復興を祈念するものです。私たちにできることに惜しみはありません。次
 は我が身と心得ているからです。

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

◆著作権について
 個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応
 じておりません。記事中の内容について、無断で使用することを固く禁じます。
  なお、記事中のスタイルシート、スクリプト、HTMLをご自分のページ作成に
 自由に使っていただいても差し支えありません。

            Copyright(C) 2002-2004  www.scollabo.com/banban/
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□


This page is Valid HTML 4.01! 最新公開日 2004年11月29日
Copyright(C) 2002-2004 banban@scollabo.com