■ 目次 スタイル 画像 配列 DOM 関数 フォーム リンク 文字・文章 ウィンドウ フレーム 時間 環境変数 計算 その他 できないこと バグ 応用編 その他の小技 必ず１回以上繰り返しをする（do～while文） do { n = Mydata; } while(n == 10); do { 処理 } while(条件);　…　最低１度は処理が実行される繰り返しの命令です。 オブジェクトを削除する delete myObject; delete　…　指定したオブジェクトを削除します。 繰り返し処理の先頭に戻る continue; continue　…　繰り返し処理の先頭に戻ります。 　　　　　　　　　　繰り返し処理の内部でさらに繰り返し処理が行われていた場合には、一番内側の繰り返し処理の先頭に戻ります。 ループを抜ける for ( n-0; n < 100; n++ ) { check = false; break; } break　…　ループを抜けます。 お気に入りに追加ボタン <INPUT TYPE="button" VALUE="お気に入りに追加" ONCLICK="window.external.AddFavorite('http://hp.xrea.jp/','HTML小技集')"> 印刷ボタン <INPUT TYPE="button" VALUE="印刷" ONCLICK="print()"> ソースを表示するボタン <INPUT TYPE="button" VALUE="ソース" ONCLICK="location.href='view-source:'+window.location;"> 背景色をボタンで変更する <INPUT TYPE="button" VALUE="赤" ONCLICK="document.bgColor='#FFEEEE'"> <INPUT TYPE="button" VALUE="緑" ONCLICK="document.bgColor='#EEFFEE'"> <INPUT TYPE="button" VALUE="青" ONCLICK="document.bgColor='#EEEEFF'"> 背景画像を画像で変更 IMG SRC="back.gif" ONCLICK="document.body.style.backgroundImage='URL(back.gif)';" STYLE="cursor:hand;"> ウイルスメール対策 A HREF="#" ONCLICK="var a=('lto:'+'lll');var b='s21.xrea.com';location.href=('mai'+a+'@'+b);">メールを送る</A> 関数を複数呼び出すには？ onLoad="A();B();" 【解説】 ;（セミコロン）で区切って呼び出します。 リンクをクリックで処理を実行させる <a href="javascript:subWin()">サブウィンドウを開く</a> javascript:処理　…　JavaScriptを実行できます。処理の部分には関数などを書きます。 右クリック禁止 BODY oncontextmenu="alert('右クリック禁止');return false;"> TOP以外の直リンを禁止 if (!document.referrer){top.location.href="http://hp.xrea.jp/";} オブジェクトにプロパティを加える Object.prototype.mySite = "Web for begginer"; addObject = new Object(); document.write(addObject.mySite); //実行結果：Web for begginer オブジェクト名.prototype.プロパティ名 = 値　…　オブジェクトにプロパティを加えます。 何も値を返さない <a href="javascript:void(0)""> void(メソッドまたは数式)　…　何も値を返さない命令です。引数に指定した関数やメソッド、あるいは数式などは実行されますが、それによって返される値は何もありません。例えば、void(0); とした場合、0 は評価されますがスクリプトにはまったく影響を与えません。 ■ JavaScriptで実現できないこと 自分のコンピューターのファイルを読み出したい 基本的にできません。 アプリケーションを起動させたい できません。 外部テキストの読み込み Cookieファイル以外読み込めません。 ■ バグ関係 HEAD内に</SCRIPT>を書く document.write('</SCRIPT>');とHEAD内で書いたら、この後の命令が表示されて、何かおかしくなってしまいました。なぜでしょうか？ HEAD内に</SCRIPT>を書くと、なぜかそこでJavaScriptの定義が終わりとみなされてしまいます。 document.write('</SCRIP','T>');のように分割して記述すれば直ります。間抜けな仕様というかバグです (^^; document.writeln使用のとき、自動改行されない 呼び出す前後に<PRE>～</PRE>を入れるようにNetscape社のドキュメントには書いてあります。 つまりPREタグを記述しないと駄目だという事です。

正規表現とは？

• 英語の読みはRegular Expression。（略してRE）
• 正規表現とは、キーワードを検索したり、置換するときに使う検索の方法です。
• 非常に柔軟性が高い検索能力が特徴です。
• エディターの中でも、秀丸エディタやK2EditorなどのRE対応のエディターが大人気だとか

使い方

原文	フリーザ「このフリーザは変身するたびに偏差値がはるかに増す その変身をオレはあと２回も残している その意味がわかるな？」
正規表現	フリーザ
マッチする文字列	フリーザ「このフリーザは変身するたびに偏差値がはるかに増す その変身をオレはあと２回も残している その意味がわかるな？」

• 普通の文字はその文字自身にマッチします。（文字列も同じ）
• たとえば「フリーザ」という正規表現は、「フリーザ」という文字列にマッチします。

---

原文	ベジータ「俺が…俺が…クラス１ なんだーーーー！！！ くたばれフリーザーーーー！！」
正規表現	\n
マッチする文字列	ベジータ「俺が…俺が…クラス１{改行} なんだーーーー！！！{改行} くたばれフリーザーーーー！！」

• \n は改行を表します。したがって、改行のみにマッチします。
• ※改行は目に見えるものではありませんが、ここでは改行を{改行}として表現しました。

---

原文	悟空「みんな・・・オラ（悟空）に少しだけ答えをみせてくれ・・・！」
正規表現	^悟空
マッチする文字列	悟空「みんな・・・オラ（悟空）に少しだけ答えをみせてくれ・・・！」

• ^ は先頭の文字列のみにマッチします。オラ（悟空）の「悟空」にはマッチしません。

---

原文	ピッコロ「くそったれ!!数学がてめえなら歴史はオレだ!!!一生かかっても追いつけんぞ!!!」 フリーザ「これは、これは、おひさしぶり…」
正規表現	て.*なら
マッチする文字列	ピッコロ「くそったれ!!数学がてめえなら歴史はオレだ!!!一生かかっても追いつけんぞ!!!」 フリーザ「これは、これは、おひさしぶり…」

• .（ピリオド）はどのような１文字にでもマッチします。ただし、改行はマッチしません。
• マッチする文字の例
• あ、い、E、9、漢、三
• *（アスタリスク）は直前の文字と0回以上マッチします。
• たとえば、z* という正規表現は z にも、zzz にもマッチするし、zzzzzzzzzz にもマッチします。
• て.*ならは、「て」と「なら」の間に文字が0文字以上ある文字列がマッチします。
• マッチする文字の例
• て４５４６なら、てなら、てクノラティなら

---

原文	ｷﾞﾆｭｰ「俺の見立てでは俺の偏差値は60までは上がるはずだ…」 悟空「…センターリサーチ…」 ｷﾞﾆｭｰ「61…60…ご…59…58…バカな…まだ下がっていく！」 ｷﾞﾆｭｰ「じゅ…18!?」
正規表現	[0-9]
マッチする文字列	ｷﾞﾆｭｰ「俺の見立てでは俺の偏差値は60までは上がるはずだ…」 悟空「…センターリサーチ…」 ｷﾞﾆｭｰ「61…60…ご…59…58…バカな…まだ下がっていく！」 ｷﾞﾆｭｰ「じゅ…18!?」

• ０～９までの数字にマッチします。
• [ ]とは文字セットといいます。角かっこで囲まれた文字の中のいずれかと一致します。
• たとえば、[abc]は、 dragon の a とマッチします。
• [0123]や[ABC]、[あ-ん]、[0-9A-Za-z]、[.+~_0-9]のように、文字コードの小さいほうから大きいほうへ書きます。したがって、[dragon]や[edcba]と書くことはできません。
• [ ] の中に [ や ] のカッコを入れる場合は[][123] のように [ の直後に ][ を置きます。

---

原文	フリーザ『「思っていたよりずっと賢いようだね。ちょっと驚いたよ…赤ペン先生の 上をゆく奴がこの世にいたなんてね…でも、僕にはかなわない」
正規表現	[^あ-ん]
マッチする文字列	フリーザ『「思っていたよりずっと賢いようだね。ちょっと驚いたよ…赤ペン先生の 上をゆく奴がこの世にいたなんてね…でも、僕にはかなわない」

• 「あ」から「ん」以外の文字..つまり、ひらがな以外の文字にマッチします。
• [ ] の中の先頭に ^ を入れることを否定の文字セットといいます。角カッコに囲まれた文字以外にマッチします。
• [ab^] これは先ほどの否定の文字セットとは違い、 a,b,^ にマッチするという意味になります。
• つまり、 ^ が先頭に無ければ、普通の文字として扱うということです。

---

原文	フリーザ「リアさん！ドリアさん！ドドリアさん！見て御覧なさい！！哀れな不合格者ですよ！！」 ベジータ「ここからが本当の受験だ・・・」 悟空「おめぇ、ココおかしいんじゃねぇか？」
正規表現	ド+リア
マッチする文字列	フリーザ「リアさん！ドリアさん！ドドリアさん！見て御覧なさい！！哀れな不合格者ですよ！！」 ベジータ「ここからが本当の受験だ・・・」 悟空「おめぇ、ココおかしいんじゃねぇか？」

• 直前の文字の1文字以上の連続にマッチします。
• たとえば、[ヤム+チャ]という正規表現は、ヤムチャ、ヤムムチャ、ヤムムムムムムチャにマッチします。
• ただ、 +（プラス） は1文字以上の連続なので、ヤチャにはマッチしません。
• 0文字以上の連続を表す記号 *（アスタリスク）を使って、 [ヤム*チャ] とすれば、ヤチャでもマッチします。

---

原文	ベジええタ「不老不死にさええなれえええばいくらでも浪人できえる。いつかフリーザの野郎を倒すことができえええるはずだええ」
正規表現	え{2}
マッチする文字列	ベジええタ「不老不死にさええなれえええばいくらでも浪人できえる。いつかフリーザの野郎を倒すことができえええるはずだええ」

• {2} は直前の文字が２個連続したときにマッチします。
• この場合はえ{2} なので、ええにマッチします。
• え{3} にすると、えええにマッチします。

---

原文	「いまのは　難しかったたたたたたああ　難しかったたぞおおお━━━━━━━━━━━━━━━っ!!!!」
正規表現	[おたは]{3,4}
マッチする文字列	「いまのは　難しかったたたたたたああ　難しかったたぞおおお━━━━━━━━━━━━━━━っ!!!!」

• 「お」「た」「は」のいずれかの文字が３～４個連続した文字列にマッチします。
• したがって、「いまのは」の「は」にはマッチしませんし、「たたたたたた」の最後の「たた」にはマッチしません。

---

原文	ﾍﾞｼﾞｰﾀ「なにが勉ア強だ…わらわせやがるぜ　教科書を出して勉アユ強 ただページをペラペラめくる勉強ってのがきさまの勉ユ強だったとはな！」
正規表現	勉.?強
マッチする文字列	ﾍﾞｼﾞｰﾀ「なにが勉ア強だ…わらわせやがるぜ　教科書を出して勉アユ強 ただページをペラペラめくる勉強ってのがきさまの勉ユ強だったとはな！」

• ?（クエスチョン）は直前の文字が0～1回連続している文字列にマッチします。
• .（ピリオド）はどのような１文字にでもマッチします。ただし、改行はマッチしません。
• .?（ピリオドクエスチョン）は、勉強もしくは、「勉」と「強」の文字の間に１文字あってもマッチするという正規表現です。つまり、勉ア強でも勉ユ強でもマッチします。
• 勉アユ強は間に２文字あるのでマッチしません。

---

例１	あなたは　地球人にしては　やりますね
例２	あなたは　やりますね　地球人にしては
例３	やりますね　あなたは　地球人にしては
正規表現	やりますね$
マッチする文字列	あなたは　地球人にしては　やりますね
	あなたは　やりますね　地球人にしては
	やりますね　あなたは　地球人にしては

• $（ドル）は行の最後にその文字列があればマッチする正規表現です。
• やりますね$ は行の最後に「やりますね」があればマッチします。
• したがって、行の最後に「やりますね」が無い場合はマッチしません。
• 「あなたは　やりますね　地球人にしては」　←　マッチしません

---

原文	｢社会！｣ ｢国語！｣ ｢理科！｣ ｢数学！｣ ｢英語！｣ ｢五教科揃って主要五教科！｣
正規表現	理科|数学|五
マッチする文字列	｢社会！｣ ｢国語！｣ ｢理科！｣ ｢数学！｣ ｢英語！｣ ｢五教科揃って主要五教科！｣

• | （たてぼう） で区切られた文字の、いずれかが含まれている場合にマッチします。
• 理科|数学|五 の場合は、理科、数学、五にマッチします。

---

例１	そうだ！わたしはこの左脳だけで解いてあげましょう
例２	そうだ！ぼくはこの左脳だけで解いてあげましょう
例３	そうだ！ぼくわたしはこの左脳だけで解いてあげましょう
正規表現	そうだ！(ぼく|わたし)は
マッチする文字列	そうだ！わたしはこの左脳だけで解いてあげましょう
	そうだ！ぼくはこの左脳だけで解いてあげましょう
	そうだ！ぼくわたしはこの左脳だけで解いてあげましょう

• そうだ！(ぼく|わたし)は ←　「そうだ！ぼくは」または「そうだ！わたしは」にマッチします。
• 「そうだ！ぼくわたしは」にはマッチしません。

---

Wikipediaから抜粋

伝統的な UNIX の正規表現

この文法では、ほとんどの文字はリテラルに扱われる。つまり、ある文字はその文字にのみマッチする。例えば、"a" は a にマッチし、"(bc" は (bc にマッチするなど。例外はメタ文字と呼ばれる。

.	任意の文字にマッチする。
[ ]	括弧内に含まれる一文字にマッチする。例えば、[abc] は a、b、c にマッチする。英語のアルファベットでは、[a-z] は全ての小文字にマッチする。これらは混ぜることが出来る。[abcq-z] は a、b、c、q、r、s、t、u、v、w、x、y、z にマッチし、[a-cq-z]でも同様である。文字 '-' は括弧内の最初か最後にあるときのみ、リテラルに扱われる。例えば、[abc-] や [-abc]。[ や ] にマッチさせる最も手っ取り早い方法は、囲んでいる括弧内で、括弧が最初になるようにすることである。例えば、[][ab] は ]、[、a、b にマッチする。
[^ ]	括弧内に含まれない一文字にマッチする。例えば、[^abc] は a、b、c 以外の任意の文字にマッチする。[^a-z] は小文字以外の任意の一文字にマッチする。上と同様にこれらは混ぜることが出来る。
^	行の最初にマッチする。
$	行の最後にマッチする。
\( \)	これに囲まれた表現は、後に呼び出すことが出来る。次の \n の項を参照のこと。
\n	ここで n は1から9までの数である。n 番目の \( \) で囲まれた部分にマッチする。この構文は理論的には不正で（正則文法の記述力を超える）、拡張正規表現では採用されていない。
*	一文字に続く "*" は0回以上の表現の繰り返しにマッチする。例えば、"[xyz]*" は ""、"x"、"y"、"zx"、"zyx" などにマッチする。 n を1から9までの数字としたとき、\n* は \( \) で囲まれた部分の0回以上の繰り返しにマッチする。例えば、"\(a.\)c\1*" は abcab や abcabab にマッチするが、abcac にマッチしない。 "\(" や "\)" で囲まれた表現に続く "*" は無効とされる。しかし、一部の環境ではそうならない。
\{x,y\}	直前の"ブロック"の x 回以上 y 回以下の繰り返しにマッチする。例えば、"a\{3,5\}" は aaa、aaaa、aaaaa にマッチする。

特定の正規表現の実装では、一部のメタ文字の前のバックスラッシュを異なって解釈する。例えば egrep や perl は、バックスラッシュの付いていない 括弧や縦棒 "|" をメタ文字と解釈し、バックスラッシュの付いているものをリテラルに解釈する。古いバージョンの grep は選言演算子 "|" をサポートしていない。

例

".at" は hat、cat、bat のような三文字の文字列にマッチする

"[hc]at" は hat と cat にマッチする

"[^b]at" は bat 以外の ".at" でマッチする全ての文字列にマッチする

"^[hc]at" は行の最初にあるときだけ、hat と cat にマッチする

"[hc]at$" は行の最後にあるときだけ、hat と cat にマッチする

文字列の範囲はロケールに依存する。例えば、エストニア語のアルファベットでは、s の後に z があり、その後は t、u、v、w、x、y と続くので、[a-z] ではすべての小文字のアルファベットにマッチしない^[1]。そのため、POSIX 標準では次の表に示されているクラス、つまり文字の区分を定義している。

POSIX クラス	対応する表現	意味
[:upper:]	[A-Z]	大文字
[:lower:]	[a-z]	小文字
[:alpha:]	[A-Za-z]	アルファベット
[:alnum:]	[A-Za-z0-9]	数字とアルファベット
[:digit:]	[0-9]	数字
[:xdigit:]	[0-9A-Fa-f]	16進数
[:punct:]	[.,!?:...]	句読点
[:blank:]	[ \t]	スペースとタブ
[:space:]	[ \t\n\r\f\v]	空白文字
[:cntrl:]		制御文字
[:graph:]	[^ \t\n\r\f\v]	印字文字
[:print:]	[^\t\n\r\f\v]	印字文字とスペース

例: [[:upper:]ab] は大文字と a と b のみにマッチする。

いくつかのツールで使用できる、POSIX にないクラスとして [:word:] がある。[:word:] は通常 [:alnum:] とアンダースコアからなる。これらが多くのプログラミング言語で識別子として使用できる文字であることを反映している。

[編集] POSIX の拡張正規表現

より現代的な拡張正規表現は多くの場合、現在の UNIX のユーティリティでコマンドラインオプションに "-E" を含めることで使用できる。

POSIX の拡張正規表現は伝統的な UNIX の正規表現に似ているが、いくつかの点で異なっている。

メタ文字 "+"、"?"、"|" が追加されている。また、バックスラッシュが削除されて、\{...\} は {...} になり、\(...\) は (...) になる。

"("、")"、"["、"]"、"."、"*"、"?"、"+"、"^"、"$" といった文字は特別な記号として使用されるので、リテラルに使いたいときはエスケープしなければならない。エスケープするには、それらの前に '\' を付ける。例えば、"a\.(\(|\))" は a.) や a.( にマッチする。

[編集] Perl 互換正規表現 (PCRE)

Perl は POSIX の拡張正規表現さえも上回る豊富な文法を持っている。その例として、POSIX とは異なり、Perl では最長マッチを行うか指定できることが挙げられる。例えば、パターン "a.*b" では .* はできるだけ長い文字列にマッチさせようとするが、パターン "a.*?b" ではできるだけ短い文字列にマッチさせようとする。だから "a bad dab" に対しては、前者のパターンでは文字列全体にマッチし、後者のパターンでは "a b" にだけマッチする。

また、Perl には以下の定義済み文字クラスがある。

\d	数字 [0-9]
\D	数字以外の文字、つまり [^\d]
\w	アルファベット、数字またはアンダーバー、つまり [a-zA-Z_0-9] （ロケールに依存し、例えばウムラウト付き文字などの扱いが変わる）
\W	アルファベット、数字やアンダーバー以外の文字、つまり [^\w]
\s	空白文字、つまり大抵の制御文字クラス \f、\n、\r、\t や \v
\S	空白文字以外の文字 [^\s]

このように Perl の正規表現が優れているため、多くの他のプログラミング言語やユーティリティなどで Perl の正規表現に非常によく似た文法を採用している。例えば、Java の Pattern クラス、Python、Ruby などがそうである。しかし、これらが Perl の正規表現と完全に互換である訳ではない。

[編集] 正規表現ライブラリ

言語的に、正規表現をサポートしていない場合においても、正規表現に必要な処理を提供する「正規表現ライブラリ」を導入することで正規表現を使うことができる。有名な正規表現ライブラリには「鬼車（おにぐるま）」がある。なお、鬼車は、Rubyの1.9系列やPHPの5系列に採用されている。

[編集] 形式言語理論における正規表現

アルファベット A = {a₁,...,a_n} 上の正規表現は次のように定義される。正規表現の表す集合が、その正規表現の表す言語である。

• ∅ は正規表現である。これは空集合 ∅ を表す。
• a_i（A の任意の要素）は正規表現である。これは a_i のみからなる集合 { a_i } を表す。
• X と Y が正規表現ならば、
  • X|Y も正規表現である。これは X の表す集合と Y の表す集合の和集合を表す。
  • XY も正規表現である。これは X に含まれる記号列に Y に含まれる記号列をつなげてできる記号列の集合 { ab | a ∊ X, b ∊ Y } を表す。
  • X* も正規表現である。これは X に含まれる記号列を 0 個以上つなげて出来る文字列の集合 { aⁿ | a ∊ X, n ≥ 0 } を表す。
• 上記の帰納的導出によって構成される記号列のみが正規表現である。

正規表現の定義に、次の項目を含めることもある:

• ε は正規表現である。これは空記号列 ε のみからなる集合 { ε } を表す。

正規表現 ε の表す集合は正規表現 ∅* の表す集合に等しいので、ε を正規表現の定義に含めなくても ∅* で代用できる。

X|Y の代わりに X+Y と書くことや、XY の代わりに X·Y と書くこともある。また、「|」や「*」の優先順位を明確にするために括弧を使うこともある。

---

• 最終更新 2008年3月10日 (月) 15:35。
• All text is available under the terms of the GNU Free Documentation License.

・足りないもの
・正規表現チェッカー
・実践で使える検索サンプル
・実践で使える置換サンプル
・正規表現の歴史、うんちく
・リンク
・サイトの紹介
・エディタでの使い方
・プログラミングでの使い方
・問題集

整列処理

• データが規則的に並んでいたほうがプログラムが簡単になるので、データは並び替えて操作することが多いです。
• データを大きい順、小さい順に並び替えることを整列（ソート）といいます。
• たとえば、会社であれば、お給料の高い順に並べる。また、学校であれば、出席番号順に並べる、テストの成績順に並べる、といったことに使います。

---

クイックソートとは？

ランダム配列数のクイックソートの例

• クイックソートは整列処理のアルゴリズムの一つ
• いくつかに小さく分割して並び替えする方式（分割統治法）
• 1960年にアントニー・ホーアが開発した
• 2008年3月現在、一番効率の良いソート方法として知られている
• 多くのプログラムで利用されている

---

アルゴリズム：クイックソート

• まず適当な数（ピボットという）を選択します。
• ピボットを基準に、左右に分割します。
• たとえば、ピボットより小さい数は左側、大きい数は右側に２分割していきます。
• 分割した部分に 1～3 を適用していき、ソートが完了するまで繰り返す。（再帰という）

---

図解アルゴリズム：クイックソート

左端を親要素（ピボット）とする、
leftにピボットよりも小さい数、r4ightに大きい数を入れる。入れる方法はleft、erightを交換していく。
ｓっして、ピボットの左側の要素（left）と右側の要素（right）で再帰処理を行いソートを完了させる

---

整列処理

• データが規則的に並んでいたほうがプログラムが簡単になるので、データは並び替えて操作することが多い
• データを大きい順、小さい順に並び替えることを整列（ソート）という
• たとえば、会社であれば、お給料の高い順に並べる。また、学校であれば、出席番号順に並べる、テストの成績順にならべる、といったことに使う

---

バブルソートとは？

ランダム配列数のバブルソートの例

• バブルソートは整列処理のアルゴリズムの一つ
• 基本交換法ともいう
• 計算時間が遅いことで有名（非効率）
• 最小値がだんだんと先頭に移動しながら整列する。この動きが水の泡（バブル）が水面に向かっていくように見えることから、バブルソートと呼ばれる

---

アルゴリズム：バブルソート

• データ同士を比較する
• 1番目と2番目を比較、順番が逆であれば入れ替える
• 次に2番目と3番目を比較して入れ替える
• これを最後まで行うと、最後の数だけが最小または最大の数として確定する
• この操作を全ての数が確定するまで繰り返す

---

図解バブルソート　ステップ１～３

図解：バブルソート step1

↓↓↓↓↓↓↓↓↓

図解：バブルソート step2

↓↓↓↓↓↓↓↓↓

図解：バブルソート step3

---

ソースコード：JavaScript

• まずはスクリプトを宣言します。
• <script type="text/javascript"></script>
• 次に、その中にソートする配列を作ります。
• java = [12,1243,4,3463,...]
• 次に、ボタンを作ります。クリックした時に関数を実行するように設定します。
• <form><input type="button" onclick="kansu()" value="バブルソート"></form>

<script type="text/javascript">

java = [
12,1243,4,
3463,85,45,
43,87,67,
253,645,95
];


</script>

<form><input type="button" onclick="kansu()" value="バブルソート"></form>

---

• ソートの効果をわかりやすくするため、シャッフル前の配列の中身を表示します。
• ３つごとに改行を入れます。
• if((s+1)%3 == 0) document.write("<br>");

for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}

---

• 関数 kansu() を作ります。
• ボタンをクリックしたときに実行されます。

function kansu(){

}//function kansu()

---

• 関数 kansu() の中に繰り返し（for文）を作ります。
• ここでは、「親フォー」と呼びます。
• ソートされる配列の要素数だけ繰り返します。
  • ０～java.length - 1

function kansu(){

        for(i=0; i<java.length-1; i++) { //親フォー
 
        }//for
        
}//function kansu()

---

• for文の中にfor文を作ります。
• ここでは、「子フォー」と呼びます。
• こちらは、配列の要素数の最後から、変数 i  まで繰り返します。
• j>i
• 親フォーが配列の最初から繰り返すのに対して、子フォーは配列の最後から繰り返します。
• 親フォーを繰り返すほど、子フォーの繰り返しの範囲は短くなります。
• j>i

function kansu(){
        for(i=0; i<java.length-1; i++) { //親フォー

                for(j=java.length-1; j>i; j--){ //子フォー
            
                }//for

        }//for
}//function kansu()

---

• 子フォー内にデータ同士を比較する if文を作ります。
• 隣りあう２つの要素を比較します。
• もし下の要素が、上の要素より数が小さければ、　java[j] < java[j-1]
• 下の要素と上の要素の値を並び替えます。　java[j] = java[j-1];　java[j-1] = taihi;
• このとき、java[j]の値を退避させる変数 taihi を最初に作っておくのがポイント
• これで、バブルソートは完了しました。

function kansu(){
        for(i=0; i<java.length-1; i++) {
                for(j=java.length-1; j>i; j--){
                        
　　　　　　　　　　　　if(java[j] < java[j-1]){
                                var taihi = java[j];
                                java[j] = java[j-1];
                                java[j-1] = taihi;
                        }//if
              
　　　　　　  }//for
        }//for
}//function kansu()

---

• 本当にソートできたか確認するため、配列 java の全ての値を表示します。
• document.write(java[s] + " , ");

function kansu(){
        
for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}//for
        
}//function kansu()

---

• 全体のソースコードです。
• ちょっとわかりにくい？？

<script type="text/javascript">

java = [
12,1243,4,
3463,85,45,
43,87,67,
253,645,95
];


function kansu(){

        for(i=0; i<java.length-1; i++) {
                for(j=java.length-1; j>i; j--){
                        if(java[j] < java[j-1]){
                                var taihi = java[j];
                                java[j] = java[j-1];
                                java[j-1] = taihi;
                        }//if
                }//for
        }//for
        
for(s=0; s<java.length-1; s++){
        document.write(java[s] + " , ");
        if((s+1)%3 == 0) document.write("<br>");
}//for
        
}//function kansu()

</script>

<form><input type="button" onclick="kansu()" value="バブルソート"></form>

感謝の言葉

• ありがとうございました
• 心より感謝を申し上げます
• 本当にいつもありがとう
• ホンマありがとう！
• 大切な～～に感謝します
• おおきに！
• 感謝をこめて
• いろいろとありがとう

お祝いの言葉

• 素敵な一日をお過ごしください
• お誕生日おめでとう
• お幸せに
• ご健闘をお祈りいたします
• あなたは特別な人
• おめでとうございます
• 心からお祝い申し上げます
• 幸福を祈って・真心をこめて
• 愛をこめて
• 健康に気をつけて
• 健やかなご成長をお祈りします
• 御社の限りないご発展を祈願いたします
• 心から祝福申し上げます

糖について

・主な成分　糖（おもにショ糖）
・単糖類　フルクトース（果糖）,グルコース（ブドウ糖）,ガラクトース（脳糖）
・二糖類　スクロース（ショ糖）,マルトース（麦芽糖）,ラクトース（乳糖）

単糖類…それ以上加水分解されない糖類。分子が一つ
二糖類…分子が二つ

口から入った炭水化物は、さまｚまな期間をとおりやがてブドウ糖に変換される。

グリセミック指数（glycemic index）

炭水化物が消化されて糖に変換する早さを相対的に表す数値のこと。グリセミック・インデックスまたはGI値とも表現される。後に、炭水化物の量も考慮した血糖負荷が考案されている。
測定基準…食品の炭水化物50グラムを摂取した際の血糖値上昇の度合いを、ブドウ糖（グルコース）を100とした場合の相対値で表す。

健康

いくつかの研究結果でＧＩ値の低いたべもので食生活を組み立てた場合に、2型糖尿病と心臓病のリストが低いと報告された。関係なかったという研究結果もある。

血糖負荷

グリセミック指数に炭水化物の重量をかけた値で、血糖値を上昇させる程度を表す指標である。炭水化物がｋｙ風速に九州されると、血糖値や血中のインスリンが急上昇し、疾患のリスｔクが上がることにつながるとされる。たとえば、矢左院は、少量のたんすいかっぶつしか含まれないのでグリセミック指数だけを指標にするにはその影響が正しく反映されているとはいえない。

基本的に炭水化物の量が少ない食品は血糖負荷が低い。また炭水化物の多い食品では全粒穀物（玄米、ふすまを取っていない麦などの精白していない穀物）が低い。精製された穀物やジャガイモ、トウモロコシは血糖負荷が高い。

疫学

血糖負荷の高い食事で男性の２型糖尿病、女性の心筋梗塞や２型糖尿病のリスクを上げた。

１０台の子どもを対象にした研究で、炭水化物が少なめの血糖負荷の低い食事は体重や体脂肪を減らした。インスリンの分泌量が多い場合、低脂肪高タンパク質の食事より、高脂肪低タンパク質の低い血糖負荷の食事のほうが原料んじ効果があった。　血糖負荷の低い食事がニキビを改善させた。

グリセミック指数の高い食品

100：ブドウ糖
100～90：ベークドポテト、高級パン（目の細かいもの）、マッシュポテト、蜂蜜
90～80：にんじん、コーンフレーク、お餅
80～70：砂糖、麦パン、食パン、フランスパン、ボイルドポテト、ビスケット、とうもろこし、白米ご飯
70～60：胚芽の混じったパン、ビート、ぶどう、レーズン、バナナ
60～50：ジャム、ショ糖、グリーンピース、ポテトチップ、そば、玄米ご飯、シリアル（オールブラウン）
50～40：オートミール、100％果汁ジュース、ライ麦パン、うずら豆、煮豆
40～30：アイスクリーム、ヨーグルト、りんご、インゲン豆、ひよこ豆、スパゲティ、フルーツ
30～20：平豆
20～10：果糖、大豆、緑黄色野菜、レモン、きのこ、海藻、ピーナツ

炭水化物の多い食品

砂糖、穀物が多い食品やお菓子に多く含まれます。

要注意な食品ベスト８（食品100gあたりの炭水化物の含有量 - 単位 g）
１位　肉まん　　　43.6
２位　ごはん　　　37.1
３位　コーンフレーク　83.6
４位　スパゲティ（乾）　72.2
５位　インスタントラーメン　63.5
６位　フランスパン　57.5
７位　チョコレート　55.4
８位　ポテトチップス　54.7

食塩の多い食品

塩、調味料、漬物などに多く含まれます。

要注意な食品ベスト４（食品100gあたりの含有量）
１位　お味噌　　　　　10.7～13.0
２位　ウスターソース　8.4
３位　カップラーメン　　6.9
４位　たらこ（焼）　　　5.3

CONTAINER LEFTCOL MAIN NAVI

上記のようなGIGAZINE風の３カラム段組を作る方法を紹介します。

左右のメニューの背景色のようなものは、じつは激太のボーダーの色だったりして、簡単にできそうで難しい。その激太ボーダーに新しく作ったメニューを重ねていくというのが今回のレイアウト。

ボーダーとメニューを重ねるには？

ボーダーとメニューを重ねるには、

• float:left
• position: relative
• margin-left:-200px

を使うらしいです。なんだか難しくて頭が混乱しそう＠＠

サンプルソース

ソースは以下からご自由にどうぞ。
たかが３カラム作るだけだと思っていたが、意外と難しいソースになってしまった…

<html lang="ja">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
        <title></title>
<style type="text/css"><!--

.outer {
background:#f7f7f7;
border-right:200px solid #ffdfe7;
border-left:200px solid #ffdfe7;
}

.inner {
margin:0; 
width:100%;
}

.leftcol {
float:left;
position: relative;
margin-left:-200px;
}

.main {
float: left; 
width: 100%; 
position: relative; 
}

.navi {
float:right;
position: relative;
margin-right:-200px;
}       

--></style>
</head>
<body>
<div class="outer"><div class="inner">
CONTAINER

<div class="leftcol">LEFTCOL</div>
<div class="main">MAIN </div>
<div class="navi">NAVI</div>

</div></div>

</body>
</html>

"何のデータも代入されていない状態"を指します。つまりは、宣言されたときは

 var foo;
 document.write( foo );  //"undefined"が表示される 

となります。

undefined型での判定には (typeof x == 'undefined') を使うべし

変数、プロパティが定義されていない（undefined）かの判定をするときに、いろいろな書き方があります。
よく使う、見かけるのは下記の3つです。

• (!x)
• (x == undefined)
• (typeof x == 'undefined')

この３つの書き方はそれぞれ条件が異なり、下記のような条件になります。

(!x)	変数 x が存在しないならば…

(x == undefined)

変数 x が undefined 型または null 型ならば…

(typeof x == 'undefined')

変数 x が undefined 型ならば…

(!x)　変数 x が存在しないならば…

コードが一番短くて済むので多用するのですが、、
!xが成立するのは、xがundefinedの場合だけじゃなくて、多岐にわかるので使用時に注意が必要だと思います。

!xがtrueになるようなものには下記があります。

• undefined
• null
• false
• 0
• NaN
• ""（空文字）

(x == undefined)　変数 x が undefined 型または null 型ならば…

(x == undefined)がtrueになるものは下記があります。

• undefined
• null

(typeof x == 'undefined')　変数 x が undefined 型ならば…

(typeof x == 'undefined')がtrueになるものは下記があります。

• undefined

x == undefined の際と、nullの扱いが異なるとこｒが、注意点でしょうか。

まとめ

undefinedだけを判定したいときは、(typeof x == 'undefined')または(x === undefined)と書くのが良い。

(typeof x == 'undefined')　または　(x === undefined)

参考サイト

本ページを作成するにあたって、以下のサイトを大変参考にさせてもらいました。本当に感謝の気持ちでいっぱいです。ありがとうございました。

• JavaScript 型の解説 - Wikibooks　…　Javascriptの型全般を抜粋
• undefined - Enjoy*Study　…　undefinedの使い方のTIPS

ノードとは何ですか？

ノードとは、DOMでアクセス・変更できるブロック単位です。

HTMLタグ全てがノードで作られています。

<p>これは段落です</p>

　<p>タグ　…　要素ノード

　「これは段落です」　…　テキストノード

---

<p>タグの要素ノードと、「これは段落です」のテキストノード、２つのノードを作ったことになります。

<p>タグ

要素ノード

これは段落です

テキストノード

要素ノードとテキストノードの関係

要素ノードとテキストノードの関係は「親と子供」に似ています。
要素ノードは「親ノード」、テキストノードは「子ノード」と区別されます。

<p>これは段落です</p> ＜要素ノード＞テキストノード＜／要素ノード＞ ＜親ノード＞子ノード＜／親ノード＞

属性ノード

要素ノードとテキストノードの他に、属性ノードと呼ばれるものがあります。

<p align="left">これは段落です</p> ＜要素ノード　属性ノード＞テキストノード＜／要素ノード＞ ＜親ノード　属性ノード＞子ノード＜／親ノード＞

属性ノードは、要素ノードの中にありますが、子ノードではありません。

要素ノードとテキストノードの関係を「親と子供」だとすると、属性ノードは「親が身につけているネックレス」のようなものです。

子ノード・親ノードを調べる

命令一覧

parentNode

親ノードを返します

chileNodes[0]

子ノードのリストを「ノードリスト」として返します

firstChild

最初の子ノードを返します

lastChild

最後の子ノードを返します

nextSibling

直後にあるノードを返します

previousSibling

直前にある子ノードを返します

---

親ノードを調べる　parentNode

対象となるノードの親ノードを返します。

---

たとえば <DIV>タグの中に <P>タグがあるとします。

その <P>タグの親ノード（parentNode）は <DIV>タグということになります。

---

サンプル - 親ノード名をダイアログで表示する

親ノードの名前をダイアログで表示するサンプルです。

サンプルでは、ボタンのクリック時に<span>の親ノード<p>を調べて、そのノードの名前をダイアログに表示しています。

たべてもたべても　ふとらない　もの　なあに？ <p>たべてもたべても　<span id="par_oya_1">ふとらない　もの　なあに？</span></p> <form> <input type="button" onclick=" popo = document.getElementById('par_oya_1').parentNode.nodeName; alert(popo);" value="クリック！"> </form>

---

全ての子ノードを調べる　chileNodes[0]

対象となる全ての子ノードを調べ、そのノードリストを返します。

取得したノードリストの１番目にアクセスしたいときはchildNodes[0]と書きます。
２番目ならchildNodes[1]、３番目ならchildNodes[2]…このように番号でアクセスします。

---

HTMLサンプル

次のようなHTMLサンプルを使って説明していきます。

あいうえお かきくけこ さしすせそ たちつてと なにぬねの

<ul id="fadsf3449rf4"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

リストの数を調べる

リストの数を調べたいときは次のように書きます。

あいうえお かきくけこ さしすせそ たちつてと なにぬねの <form> <input type="button" value="リストは全部で何個ありますか？" onclick=" hu = document.getElementById('fadsf3449rf4').childNodes; alert('リストは全部で'+hu.length+' 個あります'); "> </form>

---

手順１ - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="fadsf3449rf4">

IDにアクセスするには、getElementById() をつかいます。

getElementById('fadsf3449rf4')

これでリストの<ul>にジャンプできました。

---

手順２ - リストの中にある全ての<li>を取得する

次に、リストの中にある全ての<li>を取得します。

<ul id="fadsf3449rf4"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

<li>を取得するには、childNodes[0] をつかいます。手順１のスクリプトにchildNodesを加えてみます。

getElementById('fadsf3449rf4').childNodes

これでリストの中にある全ての<li>を取得しました。

---

手順３　取得した<li>の数を調べる

取得した<li>の数を調べてみます。調べるには length をつかいます。

getElementById('fadsf3449rf4').childNodes.length　// 5

このように記述すると、<li>の個数を返してくれます。
このサンプルの場合は、<li>の個数は５個あるで、5が返されます。

先ほどの結果（5）をダイアログに表示して、リストの数を調べるサンプルの完成です。

---

最初の子ノードを調べる　firstChild

対象となるノードの最初の子ノードを返します。

---

firstChildを使ったサンプル

次のようなリストがあるとします。このリストの一番最初の値「あいうえお」を取りだしてみましょう。

あいうえお かきくけこ さしすせそ たちつてと なにぬねの

<ul id="tgrvvttb"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

---

あいうえお かきくけこ さしすせそ たちつてと なにぬねの <form> <input type="button" value="リストの一番最初の値は？" onclick=" hu = document.getElementById('tgrvvttb').firstChild.firstChild; alert('リストの一番最初の値は '+hu.nodeValue+' です。'); "> </form>

---

■　手順１ - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="tgrvvttb">

IDにアクセスするには、getElementById() をつかいます。

getElementById('tgrvvttb')

これでリストの<ul>にジャンプできました。

---

■　手順２ - リストの中にある最初の<li>だけを取得する

次に、リストの中にある最初の<li>だけを取得します。

<ul id="fadsf3449rf4"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

最初の<li>だけを取得するには、firstChild をつかいます。手順１のスクリプトにfirstChildを加えてみます。

getElementById('tgrvvttb').firstChild

これでリストの中にある最初の<li>だけを取得しました。

---

■　手順３　<li>の中にあるテキストを取得する

<li>の中にあるテキストを取得します。

<ul id="fadsf3449rf4"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

取得するには、 nodeValue をつかいます。

getElementById('tgrvvttb').firstChild.nodeValue //あいうえお

このように記述すると、<li>の中にあるテキストを取得してくれます。
このサンプルの場合は、最初の<li>のテキストは「あいうえお」なので、「あいうえお」を取得します。

これで、リストの一番最初の値「あいうえお」を取りだすことができました。
ダイアログにこの結果を表示して完成となります。

---

最後の子ノードを調べる　lastChild

対象となるノードの最後の子ノードを返します。

---

lastChildを使ったサンプル

次のようなリストがあるとします。このリストの一番最後の値「なにぬねの」を取りだしてみましょう。

あいうえお かきくけこ さしすせそ たちつてと なにぬねの

<ul id="gtb4gbv"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

---

あいうえお かきくけこ さしすせそ たちつてと なにぬねの <form> <input type="button" value="リストの一番最初の値は？" onclick=" hu = document.getElementById('gtb4gbv').lastChild.lastChild; alert('リストの一番最初の値は '+hu.nodeValue+' です。'); "> </form>

---

■　手順１ - リストの<ul>にジャンプする

リストの<ul>にジャンプします。ジャンプするには、<ul>の中にあるIDにアクセスすることが必要になります。

<ul id="gtb4gbv">

<ul id="gtb4gbv"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

IDにアクセスするには、getElementById() をつかいます。

getElementById('gtb4gbv')

これでリストの<ul>にジャンプできました。

---

■　手順２ - リストの最後の<li>にジャンプする

リストの最後の<li>にジャンプします。

<ul id="gtb4gbv"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> <li>たちつてと</li> <li>なにぬねの</li> </ul>

ジャンプするには lastChild をつかいます。

getElementById('gtb4gbv').lastChild

これでリストの最後の<li>にｈジャンプできました。

---

■　手順３ - テキスト（なにぬねの）にジャンプする

「なにぬねの」と書かれたテキストにジャンプします。

<li>なにぬねの</li>

ジャンプするには lastChild をつかいます。

<li>の子ノードは「なにぬねの」の１つだけなので、lastChildの代わりにfirstChildをつかっても問題なく動作します。

getElementById('gtb4gbv').lastChild.lastChild

これで「なにぬねの」と書かれたテキストにジャンプできました。

---

■　手順４ - 「なにぬねの」を取得する

「なにぬねの」と書かれたテキストを取得します。

<li>なにぬねの</li> 　　↑↑取得

lastChildだけでは、「なにぬねの」というテキストの場所にジャンプしただけなので、テキストを取得したことにはなりません。

テキストを取得するには、nodeValueをつかいます。

getElementById('gtb4gbv').lastChild.lastChild.nodeValue

これで「なにぬねの」と書かれたテキストを取得しました。
あとはダイアログに表示して、「なにぬねの」を取りだすサンプルの完成となります。

alert(getElementById('gtb4gbv').lastChild.lastChild.nodeValue)

---

直後にある兄弟ノードを調べる　nextSibling

対象となるノードの直後にある兄弟ノードを返します。子ノードではありません。

例えば次のようなHTMLがあるとして、<div id="ai">から見た兄弟ノードは<div id="kaki">となります。間違えやすいので気をつけていきましょう。

<div id="ai"><p>あいうえお</p></div> <div id="kaki">かきくけこ</div>　←兄弟ノード <div id="ai">からの視点では、<p>あいうえお</p>は子ノード、<div id="kaki">は兄弟ノード

---

nextSiblingを使ったサンプル

「あいうえお」の文字をクリックすると、その兄弟ノード「かきくけこ」のＩＤ名”kaki”を表示します。

あいうえお かきくけこ

<div id="ai" onclick=" fd = this.nextSibling.id; alert(fd); "><p>あいうえお</p></div><div id="kaki">かきくけこ</div>

---

手順１ - 「あいうえお」の<div>タグにジャンプする

「あいうえお」の<div>タグにジャンプします。ジャンプするには、<div>の中にあるIDにアクセスすることが必要になります。

<ul id="ai">

<div id="ai"><p>あいうえお</p></div> <div id="kaki">かきくけこ</div>

IDにアクセスするには、getElementById() をつかいます。

getElementById('ai')

同じ<div>の中から指定したい場合は、getElementById()の代わりにthisをつかっても指定できます。

変更前： getElementById('ai') 変更後： this

これで「あいうえお」の<div>にジャンプできました。

---

手順２ - 「あいうえお」から「かきくけこ」にジャンプする

「あいうえお」の兄弟ノードにジャンプします。兄弟ノードは「かきくけこ」になります。

あいうえお かきくけこ

ジャンプするには、nextSiblingをつかいます。

this.nextSibling

これで「あいうえお」から「かきくけこ」にジャンプできました。

あとはＩＤを取得して（this.nextSibling.id）、ダイアログに表示すれば完成となります。

---

直前にある兄弟ノードを調べる　previousSibling

対象となるノードの直前にある兄弟ノードを返します。子ノードではありません。

例えば次のようなHTMLがあるとして、<div id="ai">から見た直前の兄弟ノードは<div id="kaki">となります。間違えやすいので気をつけていきましょう。

<div id="saba">はにほへと</div>　←直前の兄弟ノード <div id="ai"><p>あいうえお</p></div>　←ここからの視点 <div id="kaki">かきくけこ</div> 視点： <div id="ai"> 子ノード： <p>あいうえお</p> 直後の兄弟ノード： <div id="kaki"> 直前の兄弟ノード： <div id="saba">

●　<div id="ai">から見たノードの相対関係

視点：	<div id="ai">
子ノード：	<p>あいうえお</p>
直後の兄弟ノード：	<div id="kaki">
直前の兄弟ノード：	<div id="saba">

---

previousSiblingを使ったサンプル

「あいうえお」の文字をクリックすると、その直前の兄弟ノード「はにほへと」のＩＤ名”saba2”を表示します。

はにほへと あいうえお　←クリック かきくけこ

<div id="saba21">はにほへと</div> <div id="ffd1" onclick=" fgv = this.previousSibling.id; alert(fgv);"><p>あいうえお</p></div> <div id="fffre2">かきくけこ</div>

---

手順１ - 「あいうえお」の<div>タグにジャンプする

「あいうえお」の<div>タグにジャンプします。ジャンプするには、<div>の中にあるID「ffd1」にアクセスすることが必要になります。

<ul id="ai">

<div id="saba21">はにほへと</div> <div id="ffd1"><p>あいうえお</p></div> <div id="fffre2">かきくけこ</div>

IDにアクセスするには、getElementById() をつかいます。

getElementById('ffd1')

同じ<div>の中から指定したい場合は、getElementById()の代わりにthisをつかっても指定できます。

変更前： getElementById('ffd1') 変更後： this

これで「あいうえお」の<div>にジャンプできました。

---

手順２ - 「あいうえお」から「はにほへと」にジャンプする

「あいうえお」の直前の兄弟ノードにジャンプします。直前の兄弟ノードは「はにほへと」になります。

はにほへと あいうえお

ジャンプするには、previousSiblingをつかいます。

this.previousSibling

これで「あいうえお」から「はにほへと」にジャンプできました。

あとはＩＤを取得して（this.previousSibling.id）、ダイアログに表示すれば完成となります。

---

DOMとは何ですか？

DOM （Document Object Model） とは、<div>、<img>などのHTMLタグを自由に操作できる機能のことです。

たとえば特定のタグのスタイル（背景、枠線など）を変更したり、テキストやＵＲＬ情報を取得したりできてとても便利です。

DOMを使ったサンプルいろいろ

タグの装飾（スタイル）を変更する

レベル１ レベル２ レベル３ Yahoo! JAPAN [OpenSpace] Google goo スペースアルク

---

参考リンク

• ＤＯＭってなに - オブジェクトなJavaScriptの基礎講座
• ［JavaScript］All About
• JavaScriptでDOMを使う――オブジェクト指向入門の入門 - outsider reflex
• Using the W3C DOM Level 1 Core - MDC
• Traversing an HTML table with JavaScript and DOM Interfaces - MDC
• DOM 関連の資料とリンク
• 第1回　DOMから始めるモダン・スクリプティングの世界へようこそ：ITpro

Q

ハードディスクの中身を完全に消去するにはどうすればいいですか？

Aフリーソフトや市販で売られている専用のソフトを使って、ハードディスクの中身を完全に消去する「物理フォーマット」を実行する必要があります。

ハードディスクをフォーマット（初期化）する方法には、「物理フォーマット」と「論理フォーマット」の２種類があり、Windowsが通常行うフォーマットは論理フォーマットです。

Q

フォーマットとは何ですか？

Aフォーマットとは、WindowsなどのOSがハードディスクを利用するために初期化することです。

初期化していないハードディスクは真っ白で何もない空間のようなもので、パソコンはハードディスクを利用できません。

なので初期化をして、どの部分に何のファイルがあるかを管理するための、たくさんの箱（領域）をハードディスクの中に作ってあげることで、ハードディスクを利用できるようになります。

Q

物理フォーマットとは何ですか？

A物理フォーマットとは、あふれかえったデータを完全に消して、真っ白で何もない空間に、たくさんの箱だけがある状態に戻してあげることです。

Windowsが通常行うフォーマットの論理フォーマットでは、ファイルがハードディスク上にそのまま残っていることがあり、後から特殊なソフトウェアを使うことで、消したつもりのファイルを復元されてしまうことがあります。

誰かにパソコンを譲るときや処分するときには、物理フォーマットを忘れずに実行しましょう。

Q

デフラグしても処理速度が低下したままです。なぜですか？

A処理速度の低下はデフラグだけでは解決しません。
まずはクリーンアップを行いましょう。

デフラグとクリーンアップの違いを本棚に例えると、次のようになります。

デフラグ　…　順番がバラバラの本棚をキレイに整理する クリーンアップ　…　本棚から要らない本を出して捨てる

■結論

なので、デフラグよりもクリーンアップを先にやりましょう。 クリーンアップ　→　デフラグ

要らない本をまず捨ててから、本棚を整理したほうが効率がいいですからね。
また、不要なファイルを手動で削除していき、ハードディスク（HDD）の容量を減らしていく方法も処理速度の回復に効果があります。

ボタンのクリック時に、スライドショーを再生します。

再生中にもう一度ボタンをクリックすると、スライドショーは停止します。

ソース

<script type="text/javascript"> <!-- img = ["tyuraHome.jpg" ,"tyuraFriend.jpg" ,"tyuraMilk.jpg" ,"tyuraFlower.jpg"]; //　画像アドレス speed = 1000; //　画像の切り替わる速さ imgNo = 0; //　img配列を数字（0～3）で切り替え imgSui = false; //　タイマーの再生、停止のスイッチ切り替え（true,false） var timerID; //　タイマーID imgYouso = img.length; //　imgの要素数 document.write("<img src="+img[0]+" id='pic3' width=230 height=230><br><br>"); //　画像を生成。ID名＝「pic3」 document.write("<form><input type='button 'value='再生 'onclick='slideShow()' id='picBtn'></form>"); //　フォームのボタンを生成。クリックで関数を実行。ID名＝「picBtn」 function slideShow() { if(imgSui==false) //　もしスイッチがオフの状態ならば { imgSui = true; document.getElementById("picBtn").value = "停止"; //　フォームボタンのテキストを「停止」に設定 timerID = setInterval("slideRun()",speed); //　タイマーを一定毎に実行。関数slideRunを実行。 } else { imgSui = false; document.getElementById("picBtn").value = "再生"; //　フォームボタンのテキストを「再生」に設定 clearInterval(timerID); //　タイマーを解除 } } function slideRun() { imgNo++; if (imgNo>=imgYouso){imgNo = 0;} //　もし数字がimgの要素数以上になったら、数字を0に初期化する //　数字は0～3の間で変化し、img配列の参照に使用される document.getElementById("pic3").src = img[imgNo]; //　<img id="pic3">のソースをimg配列の要素に置きかえる。 } //--> </script>

解説

表示したい場所にスクリプトを記述します。

---

speed = 1000

画像の切り替わる速さを指定します。

この変数は、setInterval("関数名",ミリ秒) の「ミリ秒」に代入します。

時間の単位はミリ秒で、１秒 ＝ 1000ミリ秒　となります。

---

imgNo = 0

img配列を数字（0～3）で切り替えます。

---

timerID = setInterval("slideRun()",speed)

タイマーを一定毎に実行します。さらに、関数slideRunを実行します。

---

if (imgNo>=imgYouso){imgNo = 0;}

もし数字がimgの要素数以上になったら、数字を0に初期化します。

数字を0に初期化することで、スライドショーが（0～imgの要素数）の範囲でずっと続くようになります。

---

緑色の文字は、必要に応じて書き換えてください。

リンクのクリックで、ウィンドウポップアップを表示するスクリプトです。

ポップアップは、ウィンドウの外をクリックすると自動的に消えます。

※Firefoxでは動作しないようです。 エラー: window.createPopup is not a function ソースファイル: http://taro4.blog37.fc2.com/ 行: 28

ポップアップを表示

ソース

<script type="text/javascript"> <!-- function ponkotu() { robot = window.createPopup(); //　ウィンドウオブジェクトを生成 magic = robot.document.body; //　アドレスを短くするために、変数magicに「robot.document.body」を代入 //　下は「robot.document.body.style.border」でももちろんＯＫ。 magic.style.border = "solid 2px blue"; //　枠（ボーダー）の太さを2px、色をブルーに変更　 magic.innerHTML = "<b>サンプル</b>"; //　ポンコツポップアップ内のHTMLを「サンプル」に書き換え robot.show(200,200,200,200,document.body); //　ポンコツポップアップを画面上に表示 //　値は左から順に（x座標, y座標, width, height, document.body）となっています。 } //--> </script> <a href="#" onclick="ponkotu()">ポップアップを表示</a>

解説

表示したい場所にスクリプトを記述します。

---

window.createPopup()

ポップアップオブジェクトを生成します。

---

変数 = window.createPopup()

ポップアップオブジェクトを生成したものを変数に代入します。

---

robot.show(プロパティ)

ポップアップオブジェクトを画面に表示します。
robotとは、window.createPopup()を代入した変数です。

---

show(200,200,200,200,document.body)

show()の値は左から順に（x座標,y座標,width,height,document.body）となっています。

---

緑色の文字は、必要に応じて書き換えてください。

Q

源泉徴収とは何ですか？

A 給料や報酬などを支払う段階で、所得税などをあらかじめ徴収した上で支払いが行われる制度のことです。一般的にサラリーマンや公務員などは年末に所得税の過不足を調整する。一般のサラリーマンや公務員は、年末調整をするだけで確定申告をする必要はありません。しかし、年収が一定額以上であったり、高額な医療費を支払った場合などは確定申告が必要となる場合があります。

Q

源泉徴収額（３４９００円）とは何ですか？　払わなければいけませんか？

A 源泉徴収表を記載されている金額は、その年の所得税金額を表しています。例えば３４９００円と記載されていたら、あなたは３４９００円を納税したことになります。
また、国民年金や生命保険に加入していれば、その源泉徴収表で控除を受けられることになります。
また、確定申告のときに源泉徴収表が必要になりますので、それまで大切にとっておいてください。

サムネイル表示の画像にマウスカーソルを合わせると、左に大きな画像を表示します。

また、枠線（ボーダー）の色、画像の上の文字がそれぞれ変化します。

ソース

<script type="text/javascript"><!-- myImage = ["main2.jpg","main3.jpg","main4.jpg"]; //　画像 yoso = myImage.length; //　画像の要素数 document.write("<div id='result'>マウスを乗せると…</div>"); //　id名「result」 document.write("<img src="+myImage[0]+" width=150 height=180 id=pic>"); //id名「pic」 for(i=0; i<yoso; i++) //　0～要素数だけ繰り返し。 { document.write("<img src='"+myImage[i]+"' width=80 height=100 onmousemove='func(this)'>"); //　画像を表示。マウスカーソルが上に乗ったらfunc関数を実行。引数はコレ（イメージオブジェクト）。 } function func(obj) //　func関数。引数を受け取ってopjに代入。 { document.getElementById("result").innerHTML=obj; //　id名resultにobjを記述。 document.getElementById("pic").src=obj.src; //　id名「pic」の画像ソースをobjの画像ソースに書き換える。 document.getElementById("pic").style.border="4px solid red"; //　id名「pic」の枠線（ボーダー）を変更。 } // --></script>

解説

表示したい場所にスクリプトを記述します。

---

myImage = [要素1, 要素2, 要素3]

配列を表します。

---

myImage.length

画像の要素数を取り出します。

---

onmousemove = 'func(this)'

マウスカーソルが上に乗ったら、func関数を実行します。引数はthisです。

---

function func(obj)

func関数です。引数受け取り、objに代入します。

---

document.getElementById("ID名")

ID名を参照します。

---

document.getElementById("ID名").innerHTML=処理

ID名のHTML内を書き換えます。

---

document.getElementById("ID名").src

ID名のソースを参照します。

---

document.getElementById("ID名").style.border = "スタイルシート"

ID名の枠線（ボーダー）を指定します。

---

緑色の文字は、必要に応じて書き換えてください。

じゃんけんゲームの作成に使用した命令

小数点切り上げ

Math.ceil()　…　小数点以下を切り上げます。1.2であれば2になります。

乱数を返す

Math.random()　…　0～1の乱数を返します。

１～３の整数を返す

Math.ceil(Math.random() * 3)　…　1～3の整数を返します。

ＩＤ名がついたオブジェクトの文字列を変更

document.getElementById("ＩＤ名").value = "文字列"　…　ＩＤ名がついたオブジェクトの文字列を変更します。

サンプル

結果：　CPUが出した手：

X座標とY座標

document.オブジェクト名.style.left = X座標 … 画像のX座標を指定
document.オブジェクト名.style.top = Y座標 … 画像のY座標を指定

オブジェクト名

オブジェクト名 … オブジェクト名を指定すると、オブジェクトの色やサイズなどの状態を変更できます。

name属性でオブジェクト名を指定 document.namezokusei.style.top = X座標 参照番号（ページ先頭からの画像数）でオブジェクト名を指定 document.images[0].style.top = X座標 画像名でオブジェクト名を指定 document.images["namezokusei"].style.top = X座標

ソース

<script type="text/javascript"><!--x = 0;v = 3;function kansu() { x += v; //　x = x + v;　xにvをどんどん足していく if(x>400 || x<0){ //　もしx座標が400を超えたら。又はx座標が0未満になったら。 v = -v; //　右までいったら左に反転、左までいったら右に反転させる }document.enen.style.left = x;//　オブジェクト名enenのX座標を指定}setInterval('kansu()',20);//　0.02秒毎にkansu()を実行// --></script><img src="main3.jpg" name="enen" style="position:relative; left:0; top:0;">//　画像（main3.jpg）を表示

式１ || 式２ … もし式１だったら。または式２だったら処理を実行。 v = -v … 右までいったら左に反転、左までいったら右に反転。 document.オブジェクト名.style.left … オブジェクト名のX座標を指定。 setInterval() … 一定毎に処理を実行。 name … オブジェクト名を指定 position:relative … 画像の位置（相対指定） potision:absolute … 画像を位置（絶対指定） left:0 … X座標を0に指定 top:0 … Y座標を0に指定

サンプル

ボタンをクリックで画像が左右に移動します。





追記：ブログにアップしたら動かなくなっちゃいました。なんでだろ・・。

マウスカーソルを画像の上に重ねると、画像が入れ替わるロールオーバー画像の作成が今回のお題です。

ロールオーバー画像はonmouseoverと、onmouseoutの２つのイベントを使って作ります。

書式

onmouseover="処理" … マウスカーソルが画像の上に乗ったとき
onmouseout="処理" … マウスカーソルが画像から離れたとき

ソース

<img src="main.gif" width="213" height="240" border="0" onmouseover="this.src='main2.jpg' "onmouseout="this.src='main.gif'">

src … 画像のソースを記述 width … 画像の横幅 height … 画像の縦幅 border … 画像の枠線（ボーダー）の太さ onmouseover … マウスカーソルが上にのったとき onmouseout … マウスカーソルが離れたとき this.src … このタグのsrcの中身を指定。 この場合は<img>タグ内のsrc要素の画像アドレス（xxx.jpg）を書き換える。

サンプル

恋愛、結婚、人生、仕事、お金、家庭、美容、健康、いじめ、宗教…などなど。
どんなに幸福な人生を送っているようでも、人によって様々な悩みを抱えています。
今回は、そんな悩みを人から相談されたとき、どのようなアドバイスをしてあげるのが良いのかを考えていきましょう。

１）悩みに共感する

私も同世代なのでその気持ちはよくわかります。彼女から突然に別れを切り出されてしまったとのこと、お気持ちお察しします。

２）相手の心を楽にする

まず正直にあなたの悩んでいることを伝えてみてはいかがでしょうか？ 相手があなたの気持ちを察してくれることを待っていても、あなたの本当の気持ちを分かってもらうことはできませんよ。

自分の気持ちを正直に話すことはあなた自身を大切にするということです。ほんのちょっとだけ勇気をもって、一歩前に踏み出していきましょう。

３）選択させる

このままこの仕事を続けていきたいのか。それとも、給料が少なくなる可能性はあっても新しいことにチャレンジをするのか・・。よく考えて、あなたの人生にプラスになる方法を考えてくださいね。

■ setTimeout() 書式・説明

タイマーID = setTimeout(処理,ミリ秒) タイマーID = window.setTimeout(処理,ミリ秒) タイマーID = フレームオブジェクト.setTimeout(処理,ミリ秒)

指定されたミリ秒後にし指定された処理を１度だけ実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearTimeout()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です timerID = setTimeout("myFunc()",1000);

---

■ setInterval() 書式・説明

タイマーID = setInterval(処理, ミリ秒) タイマーID = window.setInterval(処理, ミリ秒) タイマーID = フレームオブジェクト.setInterval(処理, ミリ秒)

指定されたミリ秒ごとに指定された処理を一定の間隔で実行します。戻り値としてタイマーIDが返されます。設定したタイマーを解除するには、clearInterval()のカッコ内にタイマーIDを指定します。

//※timerIDはただの変数です timerID = setInterval("myFunc()",1000);

---

リアルタイムに動く時計を作ってみよう

それでは、setIntervalを使ってリアルタイムに動く時計を作ってみましょう。
サンプルの流れは次の通りです。

ページ全体の処理 ページがロードされた瞬間に ↓ setInterval()で関数tokei()を１秒毎に実行 関数tokei()内部の処理 日時の値が入っているDateオブジェクトを生成 ↓ id = "result"を検索して、そのHTML内に日時を入れる

---

ソース

window.onload = function() { timerID = setInterval("tokei()",1000); } function tokei() { dt=new Date(); document.getElementById("result").innerHTML = dt + "<br>"; } ↓↓↓ <div id="result"></div> ↑↑↑

window.onload … ページをロードした瞬間に実行 setInterval() … 一定の間隔でタイマーを実行 new Date() … 日時情報が入ったDateオブジェクトを生成 getElementById() … id名を検索 innerHTML … HTMLタグをその中に記述できる要素 id="" … id名を指定。ここにタイマーが表示される。

関数「function」を使う主なメリット３つは次のとおりです。

関数のメリット

１・ プログラム中に何度も出てくるコードが１つにまとまる ２・ 使い方は関数名を呼びだすだけ ３・ 何度でも同じ動作 ↓↓↓ 関数を使うと、コードが大幅に短くなります！ さらに、プログラムの修正やメンテナンスが簡単になります！

---

■ 関数を作成する（宣言する）

関数を作成

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

■ ３つの引数を足してダイアログに表示するサンプル

<script type="text/javascript"> <!-- function kansu(a,b,c) { n = a + b + c; alert(n); } kansu(10,20,30); // --> </script>

kansu()という関数を作る。 引数はa,b,cの３つ。 a + b + c の結果を n に代入。 n をダイアログ表示 関数kansu()を実行。

■ 戻り値（return）を用いたサンプル

<script type="text/javascript"> <!-- function kansu(a,b,c) { n = a + b + c; return n; } function poppo() { jinrai = kansu(10,20,30); alert(jinrai); } poppo(); // --> </script>

kansu()という関数を作成。引数はa,b,c。 a + b + c の結果を n に代入。 戻り値を n に設定。 poppo()という関数を作成。 kansu()を実行。戻り値を jinrai に代入。 ダイアログで jinrai を表示 関数poppo()を実行。

JavaScriptには様々なオブジェクトがあります。

主なオブジェクトの一覧表

Array	配列	image	画像
Date	日付、時刻	links	リンク
document	文書	location	URL
window	ウィンドウ	Math	数学
event	イベント	navigator	ブラウザ
function	関数	Number	数値
history	履歴	String	文字列

直角三角形の幅と高さと求めてダイアログに表示します。次に面積を小数点第五位まで求めてダイアログに表示するサンプルを作っていきましょう。

point１ 直角三角形の状態

斜辺の長さ … １
角度 … 60度
幅 … x
高さ … y

---

point2 三角形の幅（x）を求める

三角形の幅は、cos(角度)で求められる。
サンプルでは三角形の角度は60度なので

x = cos(60) で三角形の幅を求められる。

三角形の幅を求める

幅（x） = Math.cos(角度);

---

point3 三角形の高さ（y）を求める

三角形の高さは、sin(角度)で求められる。
サンプルでは三角形の角度は60度なので

y = sin(60) で三角形の高さを求められる。

三角形の高さを求める

高さ（y） = Math.sin(角度);

---

point4 角度からラジアン（radian, 記号 :rad）に変換する

sin（サイン）やcos（コサイン）に角度を入れる際、角度をラジアンに変換する必要があります。ラジアンとは角度の単位の一つです。1ラジアンは(360/2π) = 約57.29578度となります。

――角度からラジアンに変換するには？

角度からラジアンに変換

ラジアン(rad) = 角度 * Math.PI / 180;

---

point5 小数点以下を四捨五入する Math.round()

小数点以下を四捨五入するには、Math.round()を使います。
習うより慣れる！それではさっそくMath.round()を使ってみましょう。。

――Math.round()で四捨五入してみよう！

Math.round()で四捨五入

kekka = Math.round(5.7); kekka2 = Math.round(5.4);

5.7を四捨五入すると6になり、5.4を四捨五入すると5になります。
上のサンプルをブラウザに書き出すと次の実行結果のように表示されます。

● 実行結果

6 5

---

point6 面積を小数点第五位（n.nnnnn）まで四捨五入する Math.round()

直角三角形の面積を小数点第五位（n.nnnnn）まで四捨五入するには、あらかじめ面積を×10000倍して小数点以下を四捨五入します。そして、その数を÷10000することで、小数点第五位まで四捨五入した数を求めることができます。

小数点第五位まで四捨五入

結果 = Math.round(面積 * 10000) / 10000;

――面積が121.01020cm²の三角形があり、その面積を小数点第二位まで四捨五入する手順

手順１） 面積を×100します

121.01020 * 100 = 12101.20

手順２） 手順１の値を四捨五入します

Math.round(12101.20) = 12101

手順３） 手順２の値を÷１００します。

12101 / 100 = 121.01

結果 三角形の面積（121.01020cm2）が小数点第二位（121.01cm2）まで四捨五入された

---

【サンプル】 三角形の幅と高さと面積を求める

それでは、実際に直角三角形の幅と高さと面積をJavaScriptで求めていきましょう。
スクリプトは次のとおりになります。

<script type="text/javascript"> <!-- kakudo = 60; rad = kakudo * Math.PI / 180; x = Math.cos(rad); y = Math.sin(rad); window.alert("幅： "+ x + "高さ： " + y); menseki = x * y / 2; window.alert("面積： "+ menseki); menseki = Math.round(menseki * 10000) / 10000; window.alert("四捨五入した面積： " + menseki); // --> </script>

変数kakudoに角度を代入。 角度からラジアンに変換。 x（三角形の幅）を計算。 y（三角形の高さ）を計算。 ダイアログに x と y の値を表示。 三角形の面積を計算して menseki に代入。 ダイアログに面積を表示。 面積を小数点第五位（n.nnnnn）まで四捨五入。 ダイアログに四捨五入した面積を表示。

文字列を整数の値に変換します。

 

■文字列ダイアログに入力された文字列を整数値に変換するコード

<script type="text/javascript">

<!--

x = prompt("数値（0～9）を入力してください","");

//文字列ダイアログに文字列（0～9）の入力を求めます

parseInt(x);

//promptに入力されるのは文字列なので、それを数値に変換します

kotae = x * 2;

window.alert("x * 2 = " + kotae);

//数値に変換したので、計算できるようになります

// -->

</script>

＊サンプルの実行画面

関連タグ
parseFloat("文字列")	文字列を小数の値に変換します

変数を宣言するには「var」を使います。通常変数はグローバル変数となりますが、関数のパラメーターや関数内で「var」を使うとその関数内だけで有効になるローカル変数となます。ローカル変数はグローバル変数と名前が同じであっても区別されます。

a=10; var b=10; var c=10; func(10); function func(a) {    var b=100;    b=b-a; c=b; }

aはグローバル変数 bもグローバル変数 cもグローバル変数 aはローカル変数 bもローカル変数。グローバル変数のbとは区別される cはグローバル変数なのでcの値はローカル変数bの値が代入される

与えれば与えるほど幸福は増す。
与える人は限りなく得をする。
明るい心で与えることは幸福への第一歩。
良い人間関係は与えることから始まる。

物惜しみはあの世までの人を不幸にする病
与える人は明るい。
外交的。
人生で得をする、。
物惜しみは心が内向的。
誰も付き合わない。

あらゆる人とのつながりを持っていれば、生きることが楽になる。
与えれば与えるほど受け取ることができる。
与えると、幸せな気分を手に入れることができる。
人との関係が良くなる。

何をどう与えればいいのか？
「この人は今なにを考えているのだろう」。相手の心に目を向ける。
自分が我慢することなく、相手に何かをしてあげる。
与えることはとても難しい。

何を与えるか？愛・物・言葉・時間・お金・・・私たちは与えることができるものをたくさん持っている。

相手が喜ぶもの、相手が嬉しいもの、相手の為になるものを与える
与えることができると、心がオープンになってその分、色々なものを受け取ることができる。

賢者は惜しみなく与え、愚者は与えることを嫌悪する。

あなたが与えるサービスの量と質＝あなたが受け取る報酬額
『ユダヤ人大富豪の教え』

真に成功するには、あらゆる変化を受け止めること
『パフォーマンス・マネジメント』

今までの習慣から抜け出すのは本当に難しい。例えば、受け取ってばかりの習慣を、相手に惜しみなく与える習慣に変化させようと思ったとする。でも、受け取る習慣というのは既に体に染み付いている。だから並大抵のことではその習慣を断ち切ることはできないだろう。それがどんなに自分にとってメリットがあると解っていても、今までの習慣を変えてたまるもんか、と体が拒否反応を起こすのだ。

賢者になりたいなら、相手に惜しみなく与えなさい。今までの悪い習慣を変えられるような、変化を受け止めることのできる人間になりなさい。

 

ファイル名を指定して実行	田 + R
デスクトップ検索	田 + F

 

「ファイル名を指定して実行」で使用できるコマンド

 

 

コマンド	対応プログラム
cmd	コマンドプロンプト
calc	電卓
notepad	メモ帳
dxdiag	DirectX診断ツール

Windows Live WriterにFC2ブログのアカウントを追加する

 
ブログ ホームページの URL
ユーザー名
パスワード

[Windows Live Writer設定]
プロバイダ：Movable Type API
ＡＰＩ：http://blog.fc2.com/xmlrpc.php

これでFC2のアカウントが追加されました。

タグを編集したい

表示形式をHTMLモードに変更します。
メニューの 表示 → HTMLコード をクリックします。（Shift + F11）

 

画像を追加する

 

１．ローカルから画像をドラッグドロップ又は、参照してWriter内に取り込む

２．画像をクリックし、右サイドバーの詳細画像タブをクリックで画像のスタイルやサイズを設定