【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【5日目】
Chapter 6 イベントドリブンのきほんを学ぼう〜DOMを使ってストップウォッチを作る
1月28日(月) 1.5h
Bootstrap
ボタンスタイル指定
| クラス | 表示 |
|---|---|
| btn-default | 白 |
| btn-primary | 青 |
| btn-success | 緑 |
| btn-info | 水色 |
| btn-warning | オレンジ |
| btn-danger | 赤 |
| btn-link | テキストの見た目 |
| btn-lg | 大きいボタン |
| btn-sm | 小さいボタン |
JavaScript
HTML内の書式注意 :
document.writeメソッドを利用するとき以外、
<script>要素は必ず<body>要素の最後か、<head>要素内に記述する
DOM(Document Objrct Model)
HTML要素をプログラムの対象(=オブジェクト)として扱う手段。
要素取得メソッド
・getElementsByClassName ... class属性から複数の要素を配列で取得。【書籍p.207 'Name'抜け】
・getElementsByName ... name属性から要素をNodeListで取得。
・getElementsByTagName ... タグ名から要素をHTML.Collectionで取得。
その他メソッド
・innnerHTML ... 要素の内容を書き換える
・remove ... 要素を削除する
<div class="container"> <p id="timer">00:00:00</p> // ID:timerの文章 <script> // ID:timer要素の中身を取得して書き換え document.getElementById('timer').innerHTML = '00:00:01'; // ID:timer要素を削除 document.getElementById('timer').remove(); </script> </div>
if...else文
if ( 条件) { // true時の処理 } else { // false時の処理 }
関数の定義
var 関数名 = function(変数) { // 処理内容 };
イベントドリブン
ユーザが何かしら操作を行った時にプログラムを動かすこと。
イベント ... 「ユーザがクリックした」などの動作。
イベントの種類
| イベント | 説明 |
|---|---|
| keydown | キーボードが押された |
| keypress | キーボードが押し続けられている |
| keyup | キーボードが押された状態から離された |
| mouseenter | マウスカーソルが要素に触れた |
| mouseover | マウスカーソルが要素に触れ続けている |
| mousemove | マウスカーソルが動いた |
| mousedown | マウスボタンを押した |
| mouseup | マウスボタンを離した |
| click | クリックした |
| dbclick | ダブルクリックした |
イベント監視方法
要素 .addEventListener( イベントの種類 , 処理);
document.getElementById('要素id') .addEventListener('click', function() {
});
※無名関数...名前の付いていないファンクション。例えば、上のfunction。関数を新たに定義する事なくイベントへの処理を記述できている。
タイマー処理
開始
処理を間隔ごとにくり返す
タイマーID = setInvertal( 処理, 間隔(ミリ秒) );
終了
clearInterval(タイマーID);
小数点以下を切り捨てる
整数 = Math.floor(小数);
要素にクラスを追加
要素.classList.add('追加クラス名');
例: STARTボタンをSTOPボタンに変える
this.innnerHTML = 'STOP'; this.classList.remove('btn-default'); this.classList.add('btn-danger);
成果物
