正規表現を用いる方法には2つあるのは先述した通り。
1つは、Stringオブジェクトに実装されているmatchメソッド、replaceメソッド、searchメソッドなどを
用いる方法。
もう1つは、RegExpオブジェクトが持っているメソッドなどを用いる方法だ。
Stringオブジェクトの中には、次のようなメソッドがある。
<<マッチする条件を指定する>>
マッチするものを1つだけ探すのか、マッチするものをすべて探すのかといったことを指定したい
場合というのがある。また、通常は大文字と小文字は区別されるが、区別したくない場合もある。
こういうときには、以下のような修飾子で条件を指定できる。
<<マッチする位置を指定する>>
マッチさせたい場所が、行の先頭だけとか行の末尾だけといったことがある。
このようなときには、「位置指定子」を用いてマッチする位置を指定する。
<<複数の文字にマッチさせる>>
1文字だけでなく、複数の文字列にマッチするかどうかを確認したい場合ってある。
たとえば「img」で始まり、後ろに数字がついている文字列をまとめてマッチさせたい場合には、
次のように記述する。
<<1文字にマッチする>>
マッチする文字が、ある特定の1文字の場合、正規表現として、その文字事態を使う。たとえば
「a」が含まれる文字列をマッチさせたいときには、次のように記述する。
正規表現では、区切り文字でパターンを囲む。JavaScriptでは、「/」(スラッシュ)を用いて、以下の
ような書式で表現する。
/パターン/
またJavaScriptでは、もう1つパターンを指定する書式がある。
正規表現とは、文字列がどのようなパターンになっているかを形式的に表すもの。
たとえば、「Th」で始まるもの(This,Theなど)は、「Th*」と表現する。
Cookieは有効期限がくると自動的に削除される。だが、それよりも早くCookieを削除したくなる
ことってあるかもしれない。言っておくが、これはユーザーがブラウザから「クッキーを削除する」こと
とは話題が違うので注意。
Cookieファイルへの保存・参照は、documentオブジェクトの下のcookieプロパティを用いる。
Cookieはドメインごとに保存される。
document.cookie
Cookieへの書き込みは、documentオブジェクトのcookieプロパティに値を代入することで行う。
具体的には次の書式となる。
document.cookie="キー名=値"; expires=期限(GMT); path=URLパス:
domain=サイトドメイン; secure";
Cookieファイルの保存場所は、OSやブラウザによって異なる。
Cookieは、かなり制限された形式でしか、クライアント側に情報を保存することができない。
制限は続きに↓↓
Webブラウザでは通常、ローカルマシン側(クライアント側)に情報を保存することはできない。
しかし、JavaScriptを用いるとCookieファイルを保存することができる。
●オブジェクトを使ったイベントハンドラの利用
HTML要素にイベントハンドラを設定する方法は、通常はイベントハンドラの対象を特定できる場合に用いる。ボタンやチェックボックスなどの各種フォームがその例。
これに対し、ブラウザ上のどこで起きてもよいようなイベント、onkeydownやonloadなどは、特定のHTML要素に対してイベントハンドラを設定するのは難しい。
そんなときに使うのが、オブジェクトに対していイベントハンドラを設定する方法である。
●HTMLタグを用いたイベントハンドラの利用
▼書式▼
<HTMLタグ イベントハンドラ="JavaScriptプログラム">
この記述により、ユーザーがHTMLタグの領域上でイベントハンドラに対応したイベントを起こしたときに、指定したJavaScriptのプログラムが実行される。
イベントとはWebページを見ているユーザーが行った操作のことをいう。
あるイベントが起こった際に、特定のものに対してアクションを起こすことにより、さまざまな機能を実現することができる。
・フォームのボタンをクリックした
・ハイパーリンクになっている文字列をクリックした
・Webページがロードされた
DOMにはHTML要素に値を設定する方法として、setAttributeメソッドがある。
setAttributeメソッドは、特定した要素に値を設定するときに用いる。
▼書式▼
要素.setAttribute("プロパティ","値")
▼実際の記述▼
document.getElementById("img").setAttribute("width","50");
●getElementByIdメソッドで特定する
DOMでは、HTML内の要素を特定するためのメソッドとして、getElementByidメソッドが用意されている。HTML4.01では、id属性により、HTMLの各要素に識別のための名前を定義することができる。このメソッドは、id属性によってHTMLの各要素につけられた名前を基に、要素を特定する。
getElementByidメソッドの書式
document.getElementById("id名")
●名前を基に階層構造を指定する
HTMLの各要素につけられた名前を基に、階層構造を記述して要素を指定する。
これはJavaScriptのオブジェクトモデルでの、nameを使った指定と同じである。
DOMの構造は、windowオブジェクトをトップにした階層構造の下に、Webページで使うオブジェクトが配置されている。
SEO上めったには使われることのなくなったフレームだが、一応記しておく。
JavaScriptでは、フレームも制御することができる。
考え方としてはフォームの制御と同じ。
フォームの要素の参照には、名前による参照もサポートされている。
名前による参照では、それぞれの要素のname属性によってつけられた名前を参照する。そのため、同じWebページ内のフォームには同じ名前をつけることはできない。また同様にあるフォーム内で、フォームの要素に同じ名前をつけることはできない。
JavaScriptでフォームを参照するには、オブジェクトの階層構造を意識して指定する。
フォーム全体と、フォームの各要素を示すキーワードは次の通り。
・フォーム全体 ←→ forms
・フォームの各要素 ←→ elements
フォームで必要となる要素は<form>タグになる。
<form method="post |get" action="プログラムへのパス">
フォーム要素のオブジェクト
</form>
method属性は、フォーム要素のオブジェクトに入力された値をどのような方法で渡すかを指定するものである。またaction属性は、submitされたときに、どのプログラムに処理を引き渡すかを指定する。
プロパティは、値を設定したり参照したりすることができる。ただしプロパティの中には値を設定できないものもある。
オブジェクトは、その内部にあらかじめさまざまな値を持っている。それを保持しているのがプロパティである。言い換えればプロパティは、オブジェクト内の固有の変数ということもできる。
メソッドは、オブジェクトを操作するためのもの。オブジェクトは基本的にメソッドにより操作される。
各オブジェクトには、それぞれを操作するためのメソッド用意されており、このメソッドを使いオブジェクトを操作することでプログラミングを行う。
JavaScriptでは、スクリプトの中でオブジェクトの階層を記述する。これは、ページ内で論理的にオブジェクトを扱う上ではよいのだが、同じような階層構造を記述するときには、そのつど記述しなければならないので面倒なことこのうえない。
そこでwith文を使う。
オブジェクトを使うには、オブジェクトを明示的に生成する必要がある。これは、オブジェクトによって
は、1つのWebページ内で複数使われる可能性があるため。Webブラウザは、いくつのオブジェクトが必要になるかわからないので、事前にオブジェクトを生成しておくわけにはいなかい。そのため必要な数だけ、自分でオブジェクトを生成することになる。
historyオブジェクトはWebブラウザの持っている履歴に関する処理を行うときに使う。
代表的な操作に、1つ前のページに戻るがある。
locationオブジェクトは、windowオブジェクトの子にあたるオブジェクト。
このオブジェクトは、場所(URL)に関しての処理を行うときに使う。URLを変更したり、
現在表示されているページのアドレスについての情報を取り出したりすることができる。
documentオブジェクトは、Webページを表示する部分を表すオブジェクト。
documentオブジェクトは、実質的には<body>~</body>で囲まれた部分に対応するもの
であり、アンカー、フォーム、リンク、タイトル、カラー、場所などのWebページに関する様々な
情報が含まれている。
navigatorオブジェクトは、Webブラウザについての情報を持っているオブジェクト。
このオブジェクトを使うことで、ユーザーが使っているWebブラウザやOSなどの環境について
調べることができる。
windowオブジェクトは、すべてのオブジェクトの元となるもの。
このオブジェクトが扱うのは、ウィンドウの操作や、メニューバー、ツールバー、アラートといった
Webブラウザ全体の動作である。
ビルトイン・オブジェクトの大半は、windowオブジェクトを頂点とした階層構造に組み込まれている。
(オブジェクト・モデル)
これらがあらかじめ階層構造となっているのは、オブジェクトへのアクセスを容易にするため。
JavaScriptには、最初から組み込まれている「ビルトイン・オブジェクト」がある。
このビルトイン・オブジェクトが実装されているのは、WEB制作の際によく利用するであろう基本的なモノを、いちいちプログラムを書かなくても、メソッドを用いてすぐに利用できるようにするため。
windowやsubmitなど、普段何気なく使っているものがこれである。
JavaScriptのスクリプトを書く上で、重要な役割を担う。
オブジェクトは、いくつかのメソッドやプロパティ(設定値)を持つデータ構造のことをいう。
オブジェクトには、documentやwindowのように最初からJavaScriptに組み込まれている
「ビルトイン・オブジェクト」があるが、関数と同様に自由に生成することもできる。
関数の引数についての注意点は、変数がどの範囲で使えるかという問題と同じ。変数が使える範囲のことを「変数のスコープ」という。
関数は処理した結果を呼び出し元に返すことができる。このとき、返すことのできる値は1つのみ。
返される値を「戻り値」と呼ぶ。値を返すには、return文を使い、戻り値をreturnの後ろに1つ書く。
return 戻り値;
function putDate(date) {
document.write(date);
}
上のputDate関数は、dateという引数を定義している。これで、その関数内で引数dateを自由に使うことができる。また関数内で引数を使うとき、その中に入っている値は、関数を呼び出す際に渡したものが参照されることになる。
関数は「function」キーワードを用いて定義する。この定義には、関数の名前、関数に渡す引数リスト、関数内部で行われる処理を記述したスクリプトが必要となる。
function 関数名(引数リスト) {
処理;
}
プログラムやスクリプトを書いていると、同じような処理が何度も出てくる。こんなとき、同じ処理を何度も記述するのは面倒だし、効率も悪い。
この問題を解決するのが関数(function)という機能。関数は、ある一連の処理をまとめるためのもの。
if~else文では簡単なプログラミングが可能だが、スクリプトが1回しか実行されないなど、より複雑な処理にはもの足りない。特に「同じ処理を複数回数繰り返したい」という状況は現実的に発生しやすい。
これを実現するのが繰り返し処理「ループ」である。
このループには2つの種類がある。
演算子が実行される順序は、通常の数学の計算と同様に、乗算、除算が加算、減算よりも優先される。
なので、加算、減算を乗算、除算よりも先に計算したい場合には、「()」括弧で囲む。また、剰余計算は乗算、除算と同じ優先順位である。
演算子は同時に用いたときに、どれから先に実行されるかという順位が決まっている。
なので複雑な式を記述するときには、この優先順位を意識する必要がある。
文字列連結演算子(+)は、文字列どうしを連結する演算子。
文字列1 + 文字列2
実際の記述は下記の通り
chars="Hoge "+"JavaScript";
上記では、変数charsに「Hoge JavaScript」という連結された文字列が代入される。
右側と左側の条件式を評価して、それぞれ成り立っているかどうかで true(真)、false(偽)を返す。
これは複数の条件式を評価するためによく用いるので、しっかり覚えておく。
右側と左側の値を比較するときに用いる。
比較演算子を使った式は、条件式として用いる。
数値計算を行う演算子。和(+)、差(-)、積(*)、商(/)を求める演算子のほかに、割り算の余りを求める剰余演算子(%)がある。
ある値を代入するために使う。
代入演算子の右側に記述されている値や式の結果などを、左側に記述されている変数に代入する処理を行う。
変数は、ただ値を入れただけでは意味をなさない。変数に対して何らかの処理を加えることで初めて、プログラムに役立つ結果を得ることが出来る。ここで言う処理とは、
「演算子(Operator)を用いて何らかの計算を行うということ」
「複数個の変数をひとかたまりとして扱えるようにしたもの」
変数に添え字がついたものとして表現される。
var 変数=new Array(配列の数)
データを扱うには「変数」を用意し、それにデータを入れるという手段をとる。変数には名前があり、どんなデータが入っているかは、その名前で参照される。
つまり変数とは「ある値を入れることのできる、名前がついた箱」ってこと。
ちなみに変数に、ある値を入れることを「代入」という。
JavaScriptでは情報を次の4つの形式に分類して扱う。
数値 10、0.1、10e3 など
文字列 "Hello"、"Script" など
論理値 true(真)またはfalse(偽)
null null値。何も入っていないことを表す特別なキーワード
主要なWebブラウザの多くは動作する。FFやChromeなどの先進的ブラウザは、それ自体がJavaScriptの実行速度向上をメリットとして謳っているほどだ。もはやJavaScript実行が遅いブラウザ、動作しないブラウザは時代遅れともいえよう。しかしながら、家電やPDA、Mobileなどの組み込まれている独自ブラウザなどでは、JavaScriptがまともに動かないブラウザがまだまだ多く存在しており、PRVならともかく商用サイトとして運用するにはこれらも無視はできないのでそれなりの対処は必要である。
JavaScriptが動作しないWebブラウザのための対処は以下
どうせ隠せないのでHTMLに直書きでも構わないのだが、場合によっては面倒なので外部ファイル化して読み込ませたほうが何かと便利。場合によってとは次の通り。
・非常に長いスクリプト(ライブラリとか、場合によってはライブラリの呼び出し文も長くなる)
・どのみち隠せないけれど、少しだけ意地悪したい、そんなとき・・・
・スクリプトを使いまわしするとき
スクリプトの中にコメントアウト(解説)を入れることができる。散々苦労した末、動作に成功したのは良いがそこで満足してしまい後になって「あの時どうしたんだっけ?」は良くある話。
コメントを入れる方法は次の2種類
多くのWebページでは<head>タグ内に記述しているが、実は決まった位置はない。つまりどこに書いても構わない。
JavaScriptのスクリプト記述にはいくつかルールがあるが、特に覚えておいたほうが良いのは次。
・「;」が命令文の区切りとなる
・大文字小文字を区別する
JavaScriptに限らずWebページにスクリプトを組み込む時には、以下のように<script>タグを用いる。