2008年9月アーカイブ

正規表現を用いる方法には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の制限

| | コメント(0) | トラックバック(0)
Cookieは、かなり制限された形式でしか、クライアント側に情報を保存することができない。

制限は続きに↓↓

Cookieとは

| | コメント(0) | トラックバック(0)
Webブラウザでは通常、ローカルマシン側(クライアント側)に情報を保存することはできない。
しかし、JavaScriptを用いるとCookieファイルを保存することができる。

●オブジェクトを使ったイベントハンドラの利用

HTML要素にイベントハンドラを設定する方法は、通常はイベントハンドラの対象を特定できる場合に用いる。ボタンやチェックボックスなどの各種フォームがその例。

これに対し、ブラウザ上のどこで起きてもよいようなイベント、onkeydownやonloadなどは、特定のHTML要素に対してイベントハンドラを設定するのは難しい。

そんなときに使うのが、オブジェクトに対していイベントハンドラを設定する方法である。

●HTMLタグを用いたイベントハンドラの利用

▼書式▼

<HTMLタグ イベントハンドラ="JavaScriptプログラム">

この記述により、ユーザーがHTMLタグの領域上でイベントハンドラに対応したイベントを起こしたときに、指定したJavaScriptのプログラムが実行される。



イベント

| | コメント(0) | トラックバック(0)
イベントとはWebページを見ているユーザーが行った操作のことをいう。

あるイベントが起こった際に、特定のものに対してアクションを起こすことにより、さまざまな機能を実現することができる。

・フォームのボタンをクリックした
・ハイパーリンクになっている文字列をクリックした
・Webページがロードされた


DOMにはHTML要素に値を設定する方法として、setAttributeメソッドがある。

setAttributeメソッドは、特定した要素に値を設定するときに用いる。

▼書式▼

要素.setAttribute("プロパティ","値")

▼実際の記述▼

document.getElementById("img").setAttribute("width","50");

●getElementsByTagNameメソッドで特定する

HTML要素の中からタグを基に特定の要素を指定するには、getElementsByTagNameメソッドを用いる。

このメソッドは引数に与えられたタグ名を取り出すことができる。HTMLタグは通常HTML内に複数存在する。そのため、getElementsByTagNameメソッドでは、指定したタグ名にマッチしたすべての要素を配列にして返す。その要素の中からある特定のものを指定するのは、次のようにインデックスを使う。

document.getsElementByTagName("タグ名")[インデックス]

●getElementByIdメソッドで特定する

DOMでは、HTML内の要素を特定するためのメソッドとして、getElementByidメソッドが用意されている。HTML4.01では、id属性により、HTMLの各要素に識別のための名前を定義することができる。このメソッドは、id属性によってHTMLの各要素につけられた名前を基に、要素を特定する。

getElementByidメソッドの書式

document.getElementById("id名")

●名前を基に階層構造を指定する

HTMLの各要素につけられた名前を基に、階層構造を記述して要素を指定する。

これはJavaScriptのオブジェクトモデルでの、nameを使った指定と同じである。

DOMの構造

| | コメント(0) | トラックバック(0)
DOMの構造は、windowオブジェクトをトップにした階層構造の下に、Webページで使うオブジェクトが配置されている。

DOM

| | コメント(0) | トラックバック(0)

JavaScriptにはオブジェクト階層があり、それをスクリプトで操作できる。しかし、最近のWeb
ブラウザは、もう1つのプジェクト階層を実装している。

それが、DOM(Document Object Model)というものだ。

フレーム

| | コメント(0) | トラックバック(0)
SEO上めったには使われることのなくなったフレームだが、一応記しておく。

JavaScriptでは、フレームも制御することができる。

考え方としてはフォームの制御と同じ。

フォームの要素の参照には、名前による参照もサポートされている。

名前による参照では、それぞれの要素のname属性によってつけられた名前を参照する。そのため、同じWebページ内のフォームには同じ名前をつけることはできない。また同様にあるフォーム内で、フォームの要素に同じ名前をつけることはできない。

JavaScriptでフォームを参照するには、オブジェクトの階層構造を意識して指定する。

フォーム全体と、フォームの各要素を示すキーワードは次の通り。

・フォーム全体        ←→ forms
・フォームの各要素 ←→ elements

フォーム

| | コメント(0) | トラックバック(0)
フォームで必要となる要素は<form>タグになる。

<form method="post |get" action="プログラムへのパス">
  フォーム要素のオブジェクト
</form>


method属性は、フォーム要素のオブジェクトに入力された値をどのような方法で渡すかを指定するものである。またaction属性は、submitされたときに、どのプログラムに処理を引き渡すかを指定する。

プロパティは、値を設定したり参照したりすることができる。ただしプロパティの中には値を設定できないものもある。

オブジェクトは、その内部にあらかじめさまざまな値を持っている。それを保持しているのがプロパティである。言い換えればプロパティは、オブジェクト内の固有の変数ということもできる。

メソッド

| | コメント(0) | トラックバック(0)
メソッドは、オブジェクトを操作するためのもの。オブジェクトは基本的にメソッドにより操作される。

各オブジェクトには、それぞれを操作するためのメソッド用意されており、このメソッドを使いオブジェクトを操作することでプログラミングを行う。

JavaScriptでは、スクリプトの中でオブジェクトの階層を記述する。これは、ページ内で論理的にオブジェクトを扱う上ではよいのだが、同じような階層構造を記述するときには、そのつど記述しなければならないので面倒なことこのうえない。

そこでwith文を使う。

オブジェクトを使うには、オブジェクトを明示的に生成する必要がある。これは、オブジェクトによって
は、1つのWebページ内で複数使われる可能性があるため。Webブラウザは、いくつのオブジェクトが必要になるかわからないので、事前にオブジェクトを生成しておくわけにはいなかい。そのため必要な数だけ、自分でオブジェクトを生成することになる。

historyオブジェクトはWebブラウザの持っている履歴に関する処理を行うときに使う。

代表的な操作に、1つ前のページに戻るがある。

locationオブジェクトは、windowオブジェクトの子にあたるオブジェクト。

このオブジェクトは、場所(URL)に関しての処理を行うときに使う。URLを変更したり、
現在表示されているページのアドレスについての情報を取り出したりすることができる。

documentオブジェクトは、Webページを表示する部分を表すオブジェクト。

documentオブジェクトは、実質的には<body>~</body>で囲まれた部分に対応するもの
であり、アンカー、フォーム、リンク、タイトル、カラー、場所などのWebページに関する様々な
情報が含まれている。
navigatorオブジェクトは、Webブラウザについての情報を持っているオブジェクト。

このオブジェクトを使うことで、ユーザーが使っているWebブラウザやOSなどの環境について
調べることができる。

windowオブジェクトは、すべてのオブジェクトの元となるもの。

このオブジェクトが扱うのは、ウィンドウの操作や、メニューバー、ツールバー、アラートといった
Webブラウザ全体の動作である。

Webブラウザのそれぞれのオブジェクトには、対応する名前がついている。


ビルトイン・オブジェクトの大半は、windowオブジェクトを頂点とした階層構造に組み込まれている。
(オブジェクト・モデル)

これらがあらかじめ階層構造となっているのは、オブジェクトへのアクセスを容易にするため。

JavaScriptには、最初から組み込まれている「ビルトイン・オブジェクト」がある。

このビルトイン・オブジェクトが実装されているのは、WEB制作の際によく利用するであろう基本的なモノを、いちいちプログラムを書かなくても、メソッドを用いてすぐに利用できるようにするため。

windowやsubmitなど、普段何気なく使っているものがこれである。

JavaScriptのスクリプトを書く上で、重要な役割を担う。

オブジェクトは、いくつかのメソッドやプロパティ(設定値)を持つデータ構造のことをいう。

オブジェクトには、documentやwindowのように最初からJavaScriptに組み込まれている
「ビルトイン・オブジェクト」があるが、関数と同様に自由に生成することもできる。
関数の引数についての注意点は、変数がどの範囲で使えるかという問題と同じ。変数が使える範囲のことを「変数のスコープ」という。


関数の実行

| | コメント(0) | トラックバック(0)

関数を実行することを「関数の呼び出し」という。関数は、値が返ってこない場合は、関数名と
引数を書くことで実行できる。

関数名(引数);

関数は処理した結果を呼び出し元に返すことができる。このとき、返すことのできる値は1つのみ。
返される値を「戻り値」と呼ぶ。値を返すには、return文を使い、戻り値をreturnの後ろに1つ書く。

return 戻り値;

function putDate(date) {
   document.write(date);
}


上のputDate関数は、dateという引数を定義している。これで、その関数内で引数dateを自由に使うことができる。また関数内で引数を使うとき、その中に入っている値は、関数を呼び出す際に渡したものが参照されることになる。



関数の定義

| | コメント(0) | トラックバック(0)
関数は「function」キーワードを用いて定義する。この定義には、関数の名前、関数に渡す引数リスト、関数内部で行われる処理を記述したスクリプトが必要となる。

function 関数名(引数リスト) {
処理;
}


関数

| | コメント(0) | トラックバック(0)
プログラムやスクリプトを書いていると、同じような処理が何度も出てくる。こんなとき、同じ処理を何度も記述するのは面倒だし、効率も悪い。

この問題を解決するのが関数(function)という機能。関数は、ある一連の処理をまとめるためのもの。

for文とwhile文によるループをより使いやすくするために、break文とcontinue文を用いる。

breakとcontinueは、forやwhileの持っている終了条件だけでなく、繰り返し処理中に何らかの条件が成立したらループの動作を変えるという目的のために使用する。

簡単にいえば、breakはループが終了していなくても、この命令が実行されるとループから抜け出すというもの。

while文によるループは、ある条件が真である間、ループを繰り返すもの。

while文の形式は以下のようになる。

for~in文を使ったループは、オブジェクトのすべてのプロパティに自動的にアクセスするために使われる。

for~in文の記述は、以下のようになる。

for文はプログラミングをとちると深刻なエラーを引き起こすので注意が必要だ。
for文の後ろには「()」の中に条件を書くが、ここで終了条件を誤って書くと、いつまでたってもループから抜け出せずスクリプトが終わらない、いわゆる「無限ループ」が起きる。


for文を使ったループは、基本的に指定した回数だけ処理を繰り返すために用いる。

for(初期状態; 終了条件; 継続処理) {
処理;

具体的には、次のように記述する。

if~else文では簡単なプログラミングが可能だが、スクリプトが1回しか実行されないなど、より複雑な処理にはもの足りない。特に「同じ処理を複数回数繰り返したい」という状況は現実的に発生しやすい。

これを実現するのが繰り返し処理「ループ」である。

このループには2つの種類がある。

現実の運用では、たくさんの分岐をしたい場合がほとんどになるので、その場合、ifとelse
を組み合わせて、複数の条件式を評価できるようにする。

単純な分岐はifだけでも記述できるが、条件式が偽のときにも何らかの処理を実行したい場合
には、elseを用いる。

if~else文(条件文)を式と組み合わせて使うと、条件に応じて処理を分岐させ、プログラムの流れ
を変更することができる。

if~else文には、何パターンかの記述方法がある。

演算子が実行される順序は、通常の数学の計算と同様に、乗算、除算が加算、減算よりも優先される。
なので、加算、減算を乗算、除算よりも先に計算したい場合には、「()」括弧で囲む。また、剰余計算は乗算、除算と同じ優先順位である。


演算子は同時に用いたときに、どれから先に実行されるかという順位が決まっている。
なので複雑な式を記述するときには、この優先順位を意識する必要がある。

文字列連結演算子(+)は、文字列どうしを連結する演算子。

文字列1 + 文字列2

実際の記述は下記の通り

 chars="Hoge "+"JavaScript";

上記では、変数charsに「Hoge JavaScript」という連結された文字列が代入される。


条件演算子

| | コメント(0) | トラックバック(0)

条件式と2つの値から構成され、2つの値のうちどちらかが返される。

(条件式) ? 値1 : 値2

論理演算子

| | コメント(0) | トラックバック(0)
右側と左側の条件式を評価して、それぞれ成り立っているかどうかで true(真)、false(偽)を返す。

これは複数の条件式を評価するためによく用いるので、しっかり覚えておく。

比較演算子

| | コメント(0) | トラックバック(0)
右側と左側の値を比較するときに用いる。

比較演算子を使った式は、条件式として用いる。

算術演算子

| | コメント(0) | トラックバック(0)
数値計算を行う演算子。和(+)、差(-)、積(*)、商(/)を求める演算子のほかに、割り算の余りを求める剰余演算子(%)がある。

代入演算子

| | コメント(0) | トラックバック(0)
ある値を代入するために使う。

代入演算子の右側に記述されている値や式の結果などを、左側に記述されている変数に代入する処理を行う。

変数の処理

| | コメント(0) | トラックバック(0)
変数は、ただ値を入れただけでは意味をなさない。変数に対して何らかの処理を加えることで初めて、プログラムに役立つ結果を得ることが出来る。ここで言う処理とは、

「演算子(Operator)を用いて何らかの計算を行うということ」


配列

| | コメント(0) | トラックバック(0)
「複数個の変数をひとかたまりとして扱えるようにしたもの」

変数に添え字がついたものとして表現される。

var 変数=new Array(配列の数)

変数の名前

| | コメント(0) | トラックバック(0)
変数に名前をつける際には次の4つに注意する。


変数の生成

| | コメント(0) | トラックバック(0)
データを扱うには「変数」を用意し、それにデータを入れるという手段をとる。変数には名前があり、どんなデータが入っているかは、その名前で参照される。

つまり変数とは「ある値を入れることのできる、名前がついた箱」ってこと。

ちなみに変数に、ある値を入れることを「代入」という。
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>タグを用いる。


このアーカイブについて

このページには、2008年9月に書かれたブログ記事が新しい順に公開されています。

次のアーカイブは2009年7月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。