DHTML.gif (7377 バイト)

この講座ではDHTMLというものをやっていきたいと思います。
基本的にはHTML講座、スタイルシート講座と同じ構成になっています。
DHTMLを使いこなすためにはJavaScriptというものを勉強してもらわないといけません。
この講座ではJavaScriptの知識があるものとして解説していきます。
(※もちろんJavaScriptの知識がなくても大丈夫な部分もあります。)
JavaScriptについてはJavaScript講座を読んでください。
また、JavaScriptのメールマガジンも発行しているので、そちらの購読もお勧めします。
では、DHTML編がんばってべんきょうしていきましょう。
(※基本的にIEを中心に解説していきます。両方書いていると大変なのとm(_ _)m、NN6からレイヤーなどが使えなくなり、IEに似てきたためでもあります。
NN6をお使いの方にはこの講座のものがある程度使えると思います。)


ランキングに参加しています。投票のご協力お願いします。

8804a.gif (1970 バイト) 02x88.gif (2058 バイト) ju-bn2.gif (1255 バイト) hprank5.gif (940 バイト)


※ 勉強の仕方は様々です。目次から自分の知りたいものを調べてもいいし、最初から順番に勉強してもらっても結構です。
初めから順番にやってもらえるように作っていますので、初心者の方はできれば初めから読んでいただくことをお勧めします。
各コンテンツは基本編標準編応用編と分かれています。それぞれの講座の後には
top.gif (583 バイト)back2.gif (978 バイト)back.gif (1116 バイト)next.gif (705 バイト)next2.gif (967 バイト)というのがありますので、全てのコンテンツの基本編を先に勉強して、次は標準編、そして応用編と勉強してもらってもいいですし、コンテンツごとに基本から応用まで一気にやっていってもらって全てのコンテンツを読んでもらってもいいです。様々な勉強法があると思いますので、ご自由に利用ください。

※ わかりにくい言葉(例えば上のソースという言葉)などはできるだけ説明していきたいと思います。また、はじめから読んでいただくと大体の言葉の説明を加えていると思いますのが、それでもわからない語句がある場合は質問してください。本当はわかりにくい言葉は簡単な言葉として全て書き直してもいいんですが、本などを読む時にやっぱりわからない言葉がたくさん出てくるんですね、だからここで説明しながらそういう言葉を使っていくことによって書店に並んでいる本もわかりやすく読めるようになっていくと思います。

※ ブラウザによって使用できるものとできないものがあります。以下のように示したいと思います。
インターネット.gif (941 バイト)・・・インターネットエクスプローラー対応 ネットスケープ.gif (918 バイト)・・・ネットスケープ対応 なし・・・わかりません

デフォルトという言葉が出てくることがあります。デフォルトとは、初めから指定されている設定のことです。

more.gif (135 バイト)ではさらに詳しく説明しています。難しい人は特に読む必要はありません。



STEP UP編

1. はじめに
  ・
DHTMLとは?

2. イベント
  [基本編]
  ・
マウスに関するイベントT

  ・フォーカスイベント
  ・ブラウザの読み込みと同時に何かを実行したい
  ・キーボードイベント
  ・タイマーを使おう
  [標準編]
  ・
プロパティ変化の認識
  ・
マウスの有効範囲を指定

3. フォント
  [基本編]
  ・
フォントの色を変える

  ・フォントの種類を変える
  ・フォントの装飾を変える
  ・フォントの太さを変える
  ・フォントの大きさを変える
  ・部分的に背景色を変える

4. ポジション
  [基本編]
  ・
オブジェクトの位置を指定する

  ・ウィンドウをスクロールさせよう

5. サイズ
  [基本編]
  ・
ボックスのサイズを変更する

  ・画像のサイズを変更するPart1
  ・画像のサイズを変更するPart2
  ・罫線のサイズを変更する

6. 表示
  [基本編]
  ・
オブジェクトの表示/非表示Part1

  ・オブジェクトの表示/非表示Part2
  ・好きな文字列を入れたいPart1
  ・好きなHTML文を入れたいPart1
  ・画像を切り替えよう
  ・背景をを切り替えよう
  ・フォームのボタンの文字を変える
  [標準編]
  ・
好きな文字列を入れたいPart2

命令別リファレンス

2. イベント
  ・onclick = "■"
  ・ondbclick = "■"
  ・onmousedown = "■"
  ・onmouseup = "■"
  ・onmouseover = "■"
  ・onmousemove = "■"
  ・onmouseout = "■"
  ・onclick = "■"
  ・onFocus = "■"
  ・onBlur = "■"
  ・onload = "■"

  ・onunload = "■"
  ・document.onkeydown = "■"
  ・document.onkeypress = "■"
  ・document.onkeyup = "■"
  ・setTimeout(■,▲)
  ・setInterval(■,▲)
  ・clearTimeout = ★

  ・clearInterval = ★
  ・onpropertychange=■
  ・■.setCapture(▲)
  ・■.releaseCapture(▲)

3. フォント
  ・★.style.color = "■"
  ・★.style.fontFamily = "■"
  ・★.style.fontStyle = "■"
  ・★.style.fontWeight = "■"
  ・★.style.fontSize = "■"
  ・★.style.background = "■"

4. ポジション
  ・★.style.▲ = "■"
  ・★.doScroll("■")

5. サイズ
  ・★.style.▲ = "■"
  ・★.style.▲ = "■"
  ・★.style.zoom = "■"
  ・★.width = "■"
  ・★.height = "■"

6. 表示
  ・★.style.visibility = "■"
  ・★.style.display = "■"
  ・★.innerText = "■"
  ・★.innerHTML = "■"
  ・★.src = "■"
  ・document.body.background = "■"
  ・★.value = "■"
  ・★.outerText = "■"


 戻る