3,上級知識: 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に組み込まれている
「ビルトイン・オブジェクト」があるが、関数と同様に自由に生成することもできる。

このアーカイブについて

このページには、2008年9月以降に書かれたブログ記事のうち3,上級知識カテゴリに属しているものが含まれています。

次のアーカイブは3,上級知識: 2009年7月です。

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