2006年11月24日

演算子とは3

 5+6の「+」は、加算を行うための記号です。このように、何かの演算を行うための記号を演算子といいます。
○代入演算子
 x=56の「=」は、左辺の値(56)を左辺(x)に代入するための代入演算子です。

○算術演算子
 加減乗除などの算術計算を行う記号(+-*⁄)を、算術演算子といいます。

























演算子記述例機能記述例の結果
+3+5加算8
-34-a減算a=2ならば、32
*8*2乗算16
28⁄5除算5.6
%20%3剰余2
++i++インクリメントi=i+1
--i--デクリメントI=i-1


 ++はインクリメント演算子、--はデクリメント演算子と呼ばれるもので、それぞれ変数から1加算、1減算を行います。

○比較演算子
 式の左辺と右辺の大小関係を比較するための記号を、比較演算子といいます。
 比較演算子は、記述した大小関係が成立していればtrue(真)を、不成立ならばfalse(偽)を返します。
 両辺が等しいかどうかを比較する演算子は==です。代入演算子の=とは異なることに注意してください。























演算子記述例機能記述例の結果(a=5、b=8の場合)
==a==b等しいfalse
!=a!=b等しくないtrue
>a>baがbより大きいfalse
<a<baがbより小さいtrue
>=a>=baがb以上false
>=a<=baがb以下true


○論理演算子
 論理演算子には、両辺の記述が両方とも成立するかどうかを判定するアンド(&&)、記述を否定するノット(!)があります。
 演算の結果は、true(真)かfalse(偽)を返します。
 この他に、複数の文字列を連結する文字列演算子(+)や、クラスをインスタンス化するnew演算子などがあります。














演算子記述例機能記述例の結果(a=5、b=8、c=7の場合)
&&(a>b)&&(a>c)論理積(アンド)false
¦¦(a>b)¦¦(b>c)論理和(オア)true
!!(a>c)論理否定(ノット)true


○演算子の優先順位
 複数の演算子を合わせて記述した場合には、決められている順番(優先順位)に従って演算が行われます。
 演算の順番を強制的に変更したいときには括弧( )を使用します。

















優先順位演算子優先順位演算子
1!、++、--5==、!=
2*、⁄、%6&&
3+、-7¦¦
4>、>=、<、<=8=


2006年11月23日

変数とは3

○データを入れておく箱
 スクリプトを記述すると、いろいろなデータを扱う必要が出てきます。それらのデータを入れていく整理箱のことを変数といいます。

 変数の定義法
 var 変数名 = 入れるデータ


 変数に入れるデータは、文字列ならダブルコーテーションを使って"keitaro!、数値ならそのまま 67 のように書きます。他のプログラム言語を勉強した経験のある方は、「データ型の指定はどうなっているのだ?」と疑問を持たれるかもしれません。
 しかし、JavaScriptではデータ型の指定は必要ありません。入れるデータによって、自動的に適した処理が行われます。varの記述は省略することもできます。
 また、変数には名前を付けますが、その変数がどうのようなデータを扱っているのかを連想できるような命名がよいでしょう。ただし、以下の表1に示す予約語は変数名として使用することはできません。

(表1)予約語一覧
abstract
boolean
break
byte
case
char
class
const
continue
debugger
default
delete
do
double
else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super
switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
white
with

○2種類の変数
 変数には、ローカル変数とグローバル変数の2種類があります。ローカル変数は、定義した関数の中だけでしか使用できませんが、グローバル変数はスクリプトのどこでも使用できます。

<html>
<head>
<title>prog4-1<⁄title>
<script language="JavaScript">
<!--
var theme = "2種類の変数"; ⁄*グローバル変数の定義*⁄
document.write(theme);

function bgFunc(){
var col = "green"; ⁄*ローカル変数の定義*⁄
document.bgColor = col;
}
⁄⁄>
<⁄script>
<⁄head>
<body>
<form>
<input type="button" value="背景色変更" onClick="bgFunc()">
<⁄form>
<⁄body>
<⁄html>

○変数の連結
 変数は、プラス「+」演算子を使って演算(数値)、連結(文字列)することができます。次の例で確認してください。

例(1)
var num1=34;
var num2=56;
document.write(num1+num2);
「90」と表示されます。

例(2)
var cha1="34";
var cha2="56";
document.write(cha1+cha1);
「3456」と表示されます。

例(3)
var cha1="kei";
var cha2="taro";
document.write(cha1+cha2);
「keitaro」と表示されます。

例(4)
var num1=34
var num2=56;
var cha1="kei";
document.write(num1+num2+cha1);
「90kei」と表示されます。

2006年11月22日

スクリプトの書き方3

○HTMLのルール
 JavaScriptを埋め込むHTMLのルールを確認しておきましょう。HTMLでは、タグを使ってプログラムを記述します。タグは、< >とこれらの中の文字列で構成されます。そして、例えば<head>と<⁄head>のように2つのタグ間に関連のあるプログラムを記述します。こここで、前にあるタグ(<head>)をスタートタグ、後ろにあるスラッシュ(⁄)の付いているタグ(<⁄head>)をエンドタグといいます。しかし、改行を行う<br>や、横線を引く<hr>などはエンドタグを省略できます。
 タグに使う文字は、大文字、小文字を区別しませんので、例えば<head>、<HEAD>、<Head>はどれも同じように解釈させます。したがって、大文字、小文字のどちらを使ってもよいのですが、XHTMLでは小文字で書くことになっています。

○JavaScriptのルール
(1)大文字と小文字は区別する
 HTMLと異なり、JavaScriptでは、オブジェクト名やメソッド名、関数名、変数名などで使う文字の大文字と小文字を区別して解釈します。例えばオブジェクト名に、now、NOW、Nowを使用すればすべてが別のものと判断されます。したがって、入力ミスがあるとエラーが生じ、スクリプトが正常に動作しなくなりますので十分注意しましょう。
(2)セミコロン
 文の終わりに、セミコロン( ; )を付けると、文の区切りを明示的にできます。セミコロンの記述は必須ではありませんが、1行に複数の文を書く場合には必ず記述する必要があります。以下に示すスクリプトは、どれも正常に動作します。

a.
  now=new.Data();
  min=now.getMinute();

b.
  now=new.Data()
  min=now.getMinute()

c.
  now=new.Data(); min=now.getMinute()

(3)コメント文
 スクリプトの中に、例えば変数やオブジェクトについての簡単な説明を挿入すると、後でスクリプトを読み返す場合などに大いに役立ちます。このように、スクリプトの実行には直接関係のない説明のための記述をコメント文といいます。コメント文の挿入の仕方には、次の2通りの方法があります。
 a.「⁄*」と「*⁄」で挟まれた部分はすべてコメント文になる。
 b.「⁄⁄」を記述すると、そこからその行の行末まではコメント文になる。
 また、適当な場所に空白をいれるとスクリプトを見やすくすることができます。

2006年11月21日

コラム31

「XML」

○XML(eXtensive Markup Language)は、これからインターネット上における電子文書の標準形式になると考えられている文書記述用言語です。

○JavaScriptは、ブラウザという共通の土台で、パソコンの種類を問わずに動作することができます。しかし、例えばワープロソフト「一太郎」と「ワード」で作成した文章は、それぞれのソフトウェアからでないと開くことはできません。表計算ソフトウェア「エクセル」で作成したデータは、エクセルからでないと開けません。このように電子文書の形式に共通性がないことは、いろいろな種類のパソコンやソフトウェアが混在しているインターネットを利用する場合には、大きな欠点となっています。この問題を解決するのが、XMLだと言われています。

○これまでの電子文書は、それを作成するソフトウェアによって、自動的にデータの形式が決まってしまいました。しかし、XMLを使うと、データの形式をユーザが自由に定義できるのです。そして、XMLの規格を用いれば、どのような電子文書でも同じように処理することができるようになります。

2006年11月20日

関数の使い方2

○関数とは
 あらかじめ決められた何らかの処理をする機能を関数といいます。例えば、呼び出されると画面に「私は、イルカです。」と表示する機能があれば、その機能が関数です。
 関数には、はじめに持っているデータだけを処理するものと、呼び出される時に処理するデータを受け取れるものがあります。
 例えば・・・
 関数A)呼び出されると、いつも「私は、イルカです。」と表示して作業を終えます。
 関数B)呼び出される時に受け取ったデータを表示して作業を終えます。
 関数C)呼び出される時に受け取ったデータを表示した後、呼び出した側に処理の終了報告をしてから作業を終えます。

 関数が、呼び出し側から受け取るデータを「引数」、また処理を終えた後に呼び出し側へ返すデータを「戻り値」といいます。
 何度も行いたい処理は、関数名をつけて一度定義しておけば、必要なときに呼び出して使用することができます。つまり、何度も同じスクリプトを書く必要がなくなります。また、ある処理機能を関数という形にまとめて整理しておくことで、スクリプトが簡潔にわかりやすくなるメリットがあります。

○関数の使用例
 関数の定義の仕方は、次のようになります。関数名は、自由に決められます。

function 関数名() {
処理内容
}


 以下に、背景色を変更する指定を関数として定義したスクリプト例を示します。関数の定義はヘッドタグ<head>の中で行い、関数の機能を使いたいときには、関数名bgFuncで呼び出します。

<html>

<head>
<title>prog3-4<⁄title>
<script language="JavaScript">
<!--

function bgFunc() {
document.bgColor = "blue"
}


⁄⁄ -->
<&38260;script>
<⁄head>

<body>
<form>
<input type="button" value="背景色変更" onClick="bgFunc()">
<⁄form>
<⁄body>

<⁄html>

 引数などは関数名の後の括弧( )内に書きますが、この例では引数がないので括弧内には何も記述していません。
 スクリプトを実行し、ボタンをクリックすると背景色が青に変化します。
 背景色を変えることが目的ならば、HTMLだけを使ってボディタグ<body>内に、<body bgColor="blue">と書けばよいのですが、それではページを表示した後に背景色の変更を行うことができません。
 しかし、JavaScriptを使うことによって、一度表示したブラウザの画面を自在に変化させることができます。これは正に、ダイナミックなホームページ実現の為の必須テクニックですね。

2006年11月19日

イベントハンドラとは2

○イベントとは
 ホームページを見る場合には、画面上のボタンをクリックして他の画面にジャンプすることがよくありますね。このように、マウスでボタンをクリックする、マウスのポインタを移動する、キーボードのリターンキーを押すなど、何かのきっかけになるような動作をイベントといいます。閲覧者からの入力を取り込み、それに反応するためには、イベントをうまく扱うことが大切になります。

○イベントハンドラ
 イベントを受け取って、何かの処理をおこなう機能をイベントハンドラといいます。例えば、画面上に配置されたボタンをマウスで左クリックすると、イベントハンドラがその動作をイベントとしてとらえ、あらかじめ指定しておいた他のホームページへジャンプするといった動作をします。JavaScriptでのプログラミングでは、イベントハンドラをうまく利用することが一つのキーポイントになります。
 マウスがクリックされると、それをイベントとして何かの動作を行うためには、onClickイベントハンドラがあります。
 このように、イベントハンドラ名の多くは、onで始まることを覚えておくと、イベントハンドラ名を見ただけでおおよその機能を察することができるでしょう。onClickなら、「クリック(Click)されると〜をする」ということになります。
 以下に、画面上のボタンをクリックすると、背景色を白から青に変更するスクリプトを示します。
 このスクリプトのように、入力を受け付けるものはフォームタグ<form>の中に書きます。そして、ボタンの配置にはインプットタグ<input>を使用します。
 また、色の指定「blue」をシングルクォーテーション「'」で囲んでいるのは、ダブルクォーテーション「"」を二重に使うのを避けるためです。

<html>

<head>
<title>prog3-3<⁄title>
<⁄head>

<body>

<script language="JavaScript">
<!--


⁄⁄ -->
<⁄script>

<form>
<input type="button" value="背景色変更" onClick="document.bgColor='blue'" >
<⁄form>

<⁄body>

<⁄html>


2006年11月18日

プロパティとは2

○プロパティは性質のこと
 プロパティとは、オブジェクトの性質を示す言葉です。WindowsOSを使っている人なら、デスクトップ画面の任意の位置でマウスを右クリックしてみてください。
 画面にメニューウインドウが表示されますから、「プロパティ」という項目を選んでください。
 すると、「画面のプロパティ」ウインドウが表示されます。そこで、例えば「デスクトップ」を選択すれば、デスクトップ画面の背景画像の種類や表示位置を好みに応じて設定できます。
 このように、何かに関係した性質のことをプロパティといいます。この例では、デスクトップの背景の種類や表示位置がプロパティです。

○プロパティを設定してみよう
 前に使用した、documentオブジェクトに関するプロパティを設定してみましょう。
 以下のように、JavaScript記述部分に何も書かないで、つまり特別な指定をしないスクリプトを実行するとブラウザは、背景色を初期設定の白にして起動します。

<html>

<head>
<title>prog3-1<⁄title>
<⁄head>

<body>
<script language="JavaScript">
<!--


⁄⁄ -->
<⁄script>
<⁄body>

<⁄html>

 documentメソッドは、ブラウザの背景色を指定するbgColorというプロパティを持っています。そこで、このプロパティを使って背景色を青(blue)に指定したスクリプトを書いて実行してみましょう。

<html>

<head>
<title>prog3-2<⁄title>
<⁄head>

<body>
<script language="JavaScript">
<!--

document.bgColor = "blue"

⁄⁄ -->
<⁄script>
<⁄body>

<⁄html>

どうでしょう?背景色は青色になりましたか。

2006年11月17日

ビルトインオブジェクトとは2

2類のオブジェクト
 前に使用したdocumentオブジェクトなどは、ブラウザ自身の機能として用意されているもので、これらを
ナビゲータオブジェクトといいます。一方、JavaScriptが独自の機能としてブラウザに組み込んでいるオブジェクトもあり、これらをビルトインオブジェクトといいます。
 ビルトインオブジェクトには、日付や時間を扱うDateオブジェクトや、文字列の検索や修飾を扱うStringオブジェクトなどがあります。

ビルトインオブジェクトの使い方
 ナビゲータオブジェクトは、document.write()のようにオブジェクト名を書けば直ちに使用できました。しかし、ビルトインオブジェクトを使用するためには、少々の前準備が必要となります。
 JavaScriptでは基本的に、ビルトインオブジェクトをすぐに使えるオブジェクトとして用意していません。オブジェクトを作る型枠が用意されていると考えてください。
 この型枠のことを、クラスといいます。従って、利用者はビルトインオブジェクトを使用する前に、型枠(クラス)から実際に使えるオブジェクトを作り出さなければなりません。この作業をインスタンス化といいます。
 インスタンス化には、new演算子という機能を使用します。new演算子によって作り出すオブジェクトには好きな名前(※予約語として決められている名前は使用できません)を付けることができます。
 new演算子を使って、オブジェクトを作る際の書式は次のようになります。

 オブジェクト名 = new クラス名

 前に使用したサンプルスクリプトで、ビルトインオブジェクトDateを使った場合を見てみましょう。

 now = new Date(); -----------------(1)
 min = now.getMinutes(); -----------(2)

 (1)では、new演算子によってビルトインオブジェクトDateを、実際に使えるnowという名前のオブジェクトとしてインスタンス化しています。これで、nowオブジェクトを使うことができるようになります。インスタンス化は、プログラムの中で一度行えばOKです。
 (2)では、nowオブジェクトを実際に使用しています。nowオブジェクトに、現在時刻の「分」を取得するgetMinutesメソッドを指示して、得られた分データをminという名前の変数(データを入れておく容器)に入れています。
 ビルトインオブジェクトには、インスタンス化が必要なことを学習しました。しかし、ビルトインオブジェクトの中には、インスタンス化をしなくてもメソッドを指示して使用できるものがあります。
 例えば、Math.sin()などのように三角関数の値を取得することができます。
 このようにインスタンス化なしで指示できるメソッドを、クラスメソッドといいます。使用するオブジェクトやメソッドは、インスタンス化が必要かどうか調べてから記述する必要があります。

2006年11月16日

メソッドとは2

○メソッドは、操作方法のこと
 ここでは、メソッドの意味について理解しましょう。前回では、オブジェクトをCD-ROM装置に喩えました。メソッドとは、あるオブジェクトに対して、何かの動作を指示するものだと考えられます。CD-ROM装置でCDを読み込むためには、電源スイッチを入れる、CDのセットを確認するなどの動作が必要となります。このように、CD-ROM装置というオブジェクトに指示することがメソッドなのです。
 もう一つ違う例を挙げておきましょう。ホームページにある「ボタン」オブジェクトを考えます。例えば、マウスポインタが「ボタン」の上にきたときにはビープ音を出し、「ボタン」を左クリックしたときには他のページにジャンプし、右クリックしたときには何かのメッセージを表示する。というように「ボタン」オブジェクトに対して行う動作の指示がメソッドです。 

○write(ライト)メソッド
 具体的なオブジェクトとメソッドの例を見てみましょう。JavaScriptで使用できるオブジェクトに「document」があります。このオブジェクトは、スクリプトの作成でも使用しました。例えば、以下のように記述して使用します。

 document.write( "私は、イルカです。" );
 ~~~~~~~~ ~~~~~
 オブジェクト メソッド

 この例では、documentがオブジェクト、writeがメソッドです。メソッドは、オブジェクトの後にどっと「.」を付けて記述します。括弧内の文字列はメソッドがオブジェクトへ渡すデータで、引数(ひきすう)と呼びます。
 documentはブラウザのウインドウに対して、メソッドで指示されたいろいろな機能を実行します。ここでは、表示を指示するwriteメソッドが使われているので、documentメソッドは、受け取った文字列「私は、イルカです。」をブラウザ上に表示します。
 ブラウザには、以下に示すようにいろいろなオブジェクトが階層的に整理して用意されています。JavaScriptによって目的のオブジェクトを使用する場合には、ドット「.」を付けて名前をつないで呼び出します。しかし、一番上にあるwindowオブジェクトは、記述を省略できることになっています。    












2006年11月15日

オブジェクトとは2

○オブジェクトはデータ+機能
 JavaScriptは、オブジェクト指向型のプログラム言語です。オブジェクトとは、「データと、その処理の方法を合わせ持ったもの」と考えられます。例えば、トランジスタやモータなどは単なる電子部品ですが、それらを組み合わせてCD-ROM装置を組み立てたとします。トランジスタやモータなどを「データ」に喩えると、それらが、CDを読み取る「処理の方法」を持ったCD-ROM装置というオブジェクトを構成したことになります。
 オブジェクト指向のプログラミングでは、あらかじめ用意してあるオブジェクトを組み合わせて、プログラム全体を構成していきます。例えば、パソコンを自作する場合なら、CD-ROM装置やハードディスク装置などのオブジェクトを組み合わせるのです。
 一方、これまでのBASICやCなどのプログラミング言語では、プログラムを一から記述して全体を構成するという考え方が基本となっています。パソコンを自作する場合なら、CD−ROM装置やハードディスク装置などのオブジェクトを組み立てるところから始めることになります。どちらが効率よく作業を行えるでしょうか?
 JavaScriptのようなオブジェクト指向型プログラム言語は、装置の製作から始める従来の言語に比べて、プログラミングに要する時間が短くて済みますし、完成している装置を使用するので、装置の製作間違いを心配する必要がありません。つまり、短時間で簡単に、しかも信憑性の高いプログラム(スクリプト)を作成することができるのです。

○機能を持った「ボタン」はオブジェクト
 ホームページなどでよく見かける「ボタン」について考えてみましょう。例えば、ダイアログが表示されて「OK」ボタンが表示された場合、もし、この「OK」ボタンをクリックしても何も起こらないのなら、このボタンは単なる画像データに過ぎません。
 しかし、クリックによって、何らかの機能を持っているなら、この「OK」ボタンはオブジェクトということができます。このように考えると、ホームページにはボタンをはじめとして、いろいろなオブジェクトが並んでいることがわかりますね。
 JavaScriptでは、あらかじめ用意されている多くのオブジェクトが使用できます。それらのオブジェクトを目的に応じて選び出し、並べていくことが、プログラムつまりスクリプトを作っていくということなのです。
 オブジェクト指向型と聞くと、何やら難しく感じるかもしれませんが、要はプログラムの作成を簡単にして間違いを減らすようにするための方法なのです。