JavaScript(レベルアップ編)の学習

JavaScriptのさらなるレベルアップを目指しましょう。

Step1 CSSの操作

指定要素のスタイルを追加・変更出来ます。

• 該当要素にはid属性を付加して定義します。要素の操作は、 getElementByIdメソッドにより該当idの要素を取得して行います。
  例：要素名=document.getElementById("id名")
• スタイル設定は、「要素名.style.プロパティ名=スタイルの宣言」でします。
• プロパティ名はCSSでのスタイル名（ケバブケース（単語の間をハイフンでつなぐ命名規則））
  の指定ではなくキャメルケース（単語の先頭を大文字にする命名規則）で指定します。
  例：font-sizeはfontSizeと指定します。

演習問題１

1. 字体を「ＭＳ 明朝」に変更してみましょう。
2. ボーダー（青の実線で、太さは3pxで）を追加してみましょう。

Step2 ダイナミックHTML

DHTML(Dynamic HTML)は、HTMLドキュメントを動的に作成・変更できます。
下記の２通りの方法があります。

• HTMLを直接書く：document.write("HTML文")
• 指定した要素に書く：要素名.innerHTML="HTML文"
  ※該当要素にはid属性を付加して定義します。要素の操作は、
  getElementByIdメソッドにより該当idの要素を取得して行います。
  例：要素名=document.getElementById("id名")

演習問題２

1. 表示文字の大きさを20ptで表示してみましょう。
2. 表示文字の背景色を黄色にしてみましょう。

Step3 イベントハンドラ

イベントハンドラは、マウスやキーボードを操作した時の出来事（イベント）扱う処理のことです。

• 指定方法は、要素（タグ）の属性部分に指定します。
  <要素 onイベント名="サブルーチン名">
  または、onイベント名=　function（実行する関数）
• イベント名（主たる物）
  Click:要素をクリックした時に発生
  DblClick:要素をダブルクリックした時に発生
  Change:要素の選択、入力内容が変更された時に発生
  Focus:要素にフォーカスが当たった時に発生
  Blur:要素からフォーカスが外れた時に発生
  MouseOut:マウスが離れたした時に発生
  MouseOver:マウスが乗った時に発生
  MouseUp:クリックしたマウスを上げた時に発生
  MouseDown:マウスでクリックした時に発生
  MouseMove:マウスを動かしている時に発生
  KeyUp:押していたキーを上げた時に発生
  KeyDown;キーを押した時に発生
  Load:ページや画像の読み込みが完了した時に発生

3-1 MmouseOve/MouseOut/DblClick/Clickイベント

• マウスが指定の場所に乗った時に背景を変更して、マウスが離れた時に元の背景に戻します。
• また指定の場所をクリックまたはダブルクリックする処理を作成します。

演習問題３

1. マウスのクリックで背景色を赤に変更してみましょう。
2. マウスのダブルクリックで背景色を青に変更してみましょう。

3-2 Focus/Blur/Changeイベント

• 入力エリアにフォーカスが当たった時にエリアをクリアして、
  何かの入力がありフォーカスが外れた時に入力が確定します。
• 入力エリアからフォーカスが外れた時に未入力であれば「入力してください。」を表示します。

演習問題４

1. 何か入力がある場合は背景色を黄色に変更してみましょう。
2. 未入力の場合は「入力してください。」の文字を赤にしてみましょう。

3-3 マウスの位置情報の取得取と描画

• キャンバスにクリックした位置情報（ｘ座標、ｙ座標）を書込みます。
• イベントが発生した場所の座標はevent.offsetX、event.offsetY
  （クリックした要素上の座標）イベントオブジェクトで取得します。

演習問題５

1. ダブルクリックでキャンバスを初期状態（黒色）にしましょう。
2. クリックイベントをマウス移動イベントに変更してどのような動作になるか確認しましょう。

Step4 タイマーの使い方

スタートボタンを押してから、ストップボタンが押されるまでの時間を１００分の１単位でカウントします。

• タイマーの設定：setTimeout("タイムアウト後の実行サブルーチン名",タイムアウト時間（１０００分の１秒単位）) 　
• タイマーの停止：clearTimeout(タイマー名)

演習問題６

1. タイマー値を変更して１０分の１秒毎の表示に変更しましよう。
2. 開始してから５秒経過後にタイマーを停止する処理を追加してみましょう。