4/8 DHTMLについて。
みなさんこんにちは(´ー`)
気づけばもう４月なんですよね。なんだか３月は気づかないうちに過ぎ去ってしまったような気がします。
さて、今回はDHTMLについてです。
と、いってもかゆいところに手が届くわかりやすい説明は出来る気がしないので、ごく簡単なサンプルを使って私が気になったところをちょこちょこっと解説してみたいと思います。
まずは今回のサンプルを見るところからはじめましょう。
↓これ
文字を打つとその文字が表示されるっていうだけ(´ー`)
で、これがそのソース（重要な部分だけ色をつけてます）
sample.html
HTMLの内容を操作するためには操作する対象を特定する値が必要不可欠です。
それが上記で色をつけたidの部分。
この値を利用して、javascriptで内容の操作を行います。
次がメインのjavascript。
sample.js
言いたいことは大体コメントに書いてありますが、document.getElementById("result");の部分、ここでsample.htmlのid="result"のタグをオブジェクトとして取得しています。
そしてresult.innerHTMLの部分で<div id="result">ここ！</div>を書き換えています。
ちなみにjavascriptについての説明はしませんのであしからずm（＿ ＿）m
結構奥深いので勉強してみると楽しめるかも。
特に見るところのないCSS
sample.css
と、まぁこんなところでしょうか。
DHTMLを使うといろんなことが出来るので、DHTMLでなにが出来るかだけでも知っておくと損はないでしょう。
今回はこんなところで失礼しますヽ(´ー`)ﾉ
以下、参考URL
HTML へのアクセスとノードの扱い方
今日説明したことのさらに掘り下げた説明。
Gecko DOM リファレンス>DOM style リファレンス
getElementById()で取得したオブジェクトのプロパティと関数。
ブラウザごとに使える関数などが違いすぎるので、事前調査・動作検証は忘れずに。
ちなみにこれはFireFox(mozilla)用。
JavaScriptist
逆引きの参考に。＞関連ページ
| 4/8 DHTMLについて。 |
みなさんこんにちは(´ー`)
気づけばもう４月なんですよね。なんだか３月は気づかないうちに過ぎ去ってしまったような気がします。
さて、今回はDHTMLについてです。
と、いってもかゆいところに手が届くわかりやすい説明は出来る気がしないので、ごく簡単なサンプルを使って私が気になったところをちょこちょこっと解説してみたいと思います。
まずは今回のサンプルを見るところからはじめましょう。
↓これ
文字を打つとその文字が表示されるっていうだけ(´ー`)
で、これがそのソース（重要な部分だけ色をつけてます）
sample.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="./sample.css">
<script language="JavaScript" src="./sample.js"></script>
</head>
<body>
このなかに文字を打ってみるといいよ！
<form">
<input id="query" type="text" size="50">
</form>
<div id="result"></div>
</body>
</html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="./sample.css">
<script language="JavaScript" src="./sample.js"></script>
</head>
<body>
このなかに文字を打ってみるといいよ！
<form">
<input id="query" type="text" size="50">
</form>
<div id="result"></div>
</body>
</html>
HTMLの内容を操作するためには操作する対象を特定する値が必要不可欠です。
それが上記で色をつけたidの部分。
この値を利用して、javascriptで内容の操作を行います。
次がメインのjavascript。
sample.js
//bodyタグのonloadにdoOnload関数をセットする。
//ページ読み込み完了時にdoOnloadを実行。
onload = doOnload;
var oldquery = "";
function doOnload()
{
//50ミリ秒ごとにpeekQuery()を実行しつづける。
setInterval("peekQuery()",50);
}
/* 入力された文字を非同期に表示させる関数 */
function peekQuery()
{
//document.getElementById("***")
// sample.htmlのタグのid属性が***のオブジェクトを取得する。
// 取得したオブジェクトを使ってタグの内容などを取得・変更することが出来る。
var result = document.getElementById("result"); //出力Divタグ
var textbox = document.getElementById("query"); //inputタグ
var query = textbox.value; //入力された文字列
//未入力のばあい
if (query == ""){
result.style.display = "none"; //出力結果divタグを表示しない
//入力されたばあい
}else if(query != oldquery){
result.style.backgroundColor="#ff99bb"; //出力結果divタグの背景色を変更する
result.style.display = "block"; //出力結果divタグを表示する
}
//出力結果divタグのテキスト内容を変更する。
//innerHTMLというプロパティは、HTMLタグも解釈して実行できます。
//また、純粋に文字列として扱うinnerTextというプロパティもあります。（ブラウザによってはinnerTextは未対応）
result.innerHTML = "<font size=7>" + query + "</font>";
oldquery = query;
}
//ページ読み込み完了時にdoOnloadを実行。
onload = doOnload;
var oldquery = "";
function doOnload()
{
//50ミリ秒ごとにpeekQuery()を実行しつづける。
setInterval("peekQuery()",50);
}
/* 入力された文字を非同期に表示させる関数 */
function peekQuery()
{
//document.getElementById("***")
// sample.htmlのタグのid属性が***のオブジェクトを取得する。
// 取得したオブジェクトを使ってタグの内容などを取得・変更することが出来る。
var result = document.getElementById("result"); //出力Divタグ
var textbox = document.getElementById("query"); //inputタグ
var query = textbox.value; //入力された文字列
//未入力のばあい
if (query == ""){
result.style.display = "none"; //出力結果divタグを表示しない
//入力されたばあい
}else if(query != oldquery){
result.style.backgroundColor="#ff99bb"; //出力結果divタグの背景色を変更する
result.style.display = "block"; //出力結果divタグを表示する
}
//出力結果divタグのテキスト内容を変更する。
//innerHTMLというプロパティは、HTMLタグも解釈して実行できます。
//また、純粋に文字列として扱うinnerTextというプロパティもあります。（ブラウザによってはinnerTextは未対応）
result.innerHTML = "<font size=7>" + query + "</font>";
oldquery = query;
}
言いたいことは大体コメントに書いてありますが、document.getElementById("result");の部分、ここでsample.htmlのid="result"のタグをオブジェクトとして取得しています。
そしてresult.innerHTMLの部分で<div id="result">ここ！</div>を書き換えています。
ちなみにjavascriptについての説明はしませんのであしからずm（＿ ＿）m
結構奥深いので勉強してみると楽しめるかも。
特に見るところのないCSS
sample.css
@charset "shift_jis";
/* divタグの設定 */
div{
display:none; /*表示状態：見えなくする*/
}
/* divタグの設定 */
div{
display:none; /*表示状態：見えなくする*/
}
と、まぁこんなところでしょうか。
DHTMLを使うといろんなことが出来るので、DHTMLでなにが出来るかだけでも知っておくと損はないでしょう。
今回はこんなところで失礼しますヽ(´ー`)ﾉ
以下、参考URL
HTML へのアクセスとノードの扱い方
今日説明したことのさらに掘り下げた説明。
Gecko DOM リファレンス>DOM style リファレンス
getElementById()で取得したオブジェクトのプロパティと関数。
ブラウザごとに使える関数などが違いすぎるので、事前調査・動作検証は忘れずに。
ちなみにこれはFireFox(mozilla)用。
JavaScriptist
逆引きの参考に。＞関連ページ