JavaScriptの学習

基本1

• JavaScriptでテキストを書く   document.write
• アラートダイアログ   alert
• 確認ダイアログ   confirm
• 入力ダイアログ   prompt
• DOM（その1）   document object model
• DOM（その2）   documentの親子・兄弟関係だけで要素を取得
• DOM（その3）   element、node、textの関係
• 要素の内容を書き換える   innerHTML/TextContent
• writeとinnerHTML/textContentの違い
• もし～なら   if文
• 1つの条件で処理を出し分ける   switch文

基本2　要素の取得

• HTMLタグを取得する（<li > リストタグにアクセスする例）   document.getElementsByTagName('')
• 子要素を取得する   childNodes
• 最初の子要素・最後の子要素を取得する   firstChild lastChild
• 子要素の数を取得する   childNodes.length
• 親要素・直前の要素・直後の要素を取得する   parentNode previousSibling nextSibling
• 要素のテキストを取得する <p>このタグで囲まれたテキストを取得</p>   nodeValue
• 要素のテキストのみを取得する <p>このタグで囲まれた<b>テキストのみ</b>を取得</p>   textContent
• 要素ノードのタグを取得する　<p>このテキストのタグを取得</p>   nodeName
• 要素のタイプを取得する   nodeType
• 子要素があるかどうか判定する   hasChildNodes();（関数へ）
• 「element」に指定した要素の横幅を取得する   offsetWidth

基本3　フォームにアクセスする

• フォームのtype="text"にアクセスしてvalueを取得する   formオブジェクトとname属性
• フォームのtype="radio"にアクセスしてvalueを取得する   document.getElementsByName('')

基本4　属性値（src , href , title , alt）を取得する

• 属性値から属性名を取得する   getAttribute( );
• 全ての属性値を取得する   attributes
• 属性名に値をセットする   setAttribute(" " , " ");
• 属性プロパティ VS getAttribute   ブラウザの互換性問題

基本5　取得した要素をもとにしてHTMLを操作する

• 要素を新たに追加する   document.createElement(' '), document.createTextNode(' '), appendChild( )
• 要素の直前に要素を新たに追加する   insertBefore( new , ref )
• 子要素を削除する   removeChild( )

全削除・再表示

• 子要素を全て削除する   while文を使って
• 子要素を削除する・追加する（全削除・1個ずつ削除・再表示）   for文を使って
• 要素を複製する   cloneNode
• 要素を（元のノードを削除して）置き換える   replaceChild( new , old );
• 要素を（元のノードを削除せずに）置き換える   replaceChild( new , old );

関数

• 関数とは
• 重複をなくすための関数
• 現在の日付を取得する関数   date(); getFullYear(); getMonth(); getDate(); getHours(); getMinutes(); getSeconds();
• 現在の日付から特定の日までの日数を計算する   getTime();
• 計算する関数   Math.…();
• 配列   Array();
• 多次元配列
• 連想配列
• 一定時間が過ぎると関数を呼び出す   setTimeout( , );
• 文字列を切り出す   substr( 開始位置 ,切り出す長さ );
• 一定時間ごとに関数を呼び出す   setInterval( , );

ループ処理

• setInterval( , );を使ったループ処理   
• 子要素があるかどうか判定する   hasChildNodes();
• 文字列を整数に変換する※※※   parseInt( , );
• 関数に入れる引数の役割   function(引数){....}
• 関数は変数だ！？じゃあ変数と関数の違いは？   function(  ){....}
• 引数の種類

イベント

• クリックしたらイベントを発生させる（HTML内記述）   onclick=""、onfocus=""、onblur=""
• 既にイベントが設定されている対象に追加でイベントを発生させる   addEventListener("click" , function{　});
• ページを開いたらイベントを発生させる   window.addEventListener("load" , function{　});   window.onload = function() {　}
• イベントを解除する   removeEventListener( );

イベントの発生を細かく操作する

• イベントの発生先を指定する（タグの中のidに対してなのかsrcに対してなのか...）   evt.targetプロパティ
• ブラウザが最初から組み込んでいる挙動（デフォルトアクション）を止める   preventDefault( )メソッド
• イベントの伝播を止める   evt.stopPropagation( )メソッド
• 要素をドラッグできるようにする   draggableプロパティ　Chrome Safari IE10
• 要素をドラッグ開始時/移動中/終了時に処理を行う   dragstart / drag / dragend
• 要素にドロップできるようにする   dragover / dragleave / drop
• ドラッグ要素からドロップ要素にデータを受け渡す   dataTransfar.setData(" " , ); / dataTransfar.getData(" ");
• 要素をドラッグできるようにする   　Firefox

マウス固有のプロパティ

• マウスが乗った・押された・離れたを取得する   evt.typeプロパティ
• 押されたマウス・ボタンを特定する   evt.butttonプロパティ
• マウスの座標を取得する   evt.clientプロパティ・screenプロパティ
• マウスがshift / ctrl / meta キーと同時に押されたかを判定する   evt.shiftKeyプロパティ・ctrlKeyプロパティ・metaKeyプロパティ

応用いろいろ

• リストの数を数える・配列要素の数を数える   ループの基礎
• for文でループしながら配列を出力する   for( ){ } Array( );
• リストにアクセスする方法   リスト( li )を動的に生成する
• セレクトボックス（ドロップダウンリスト）にアクセスする方法 1
• セレクトボックス（ドロップダウンリスト）にアクセスする方法 2-a   地域を選択すると、応じた都道府県名が選べるようにする（if文を使った動的生成）
• セレクトボックス（ドロップダウンリスト）にアクセスする方法 2-b   地域を選択すると、応じた都道府県名が選べるようにする（switch文を使った動的生成）
• セレクトボックス（ドロップダウンリスト）にアクセスする方法 3   Arrayとfor文を使った動的生成
• フォームで入力必須項目をつくる   
• 画像のサイズを取得して特定の場所に表示する   
• ランダムに配列のi番目の要素を取得して特定の場所に表示する   Math.random()と配列のlengthプロパティ
• 点滅させる   setTimeout(); と clearTimeout();
• テロップ表示   
• バナーチェンジ   
• ドラッグできる子ウィンドウ表示   （まだ途中）
• フォームからカーソルが離れたら   onblur

オブジェクト

• オブジェクトの作成
• オブジェクトのデータ（プロパティと値）を登録
• オブジェクトのデータ（プロパティと値）を登録   newを使わない書き方
• オブジェクトのデータ（プロパティと値）を登録   共通のプロパティをまとめることで大量のオブジェクトを作成したいとき
• オブジェクトのデータ（プロパティと値）にメソッドを追加
• プロトタイプを作成
• プロトタイプを作成して使いまわす

正規表現

• 任意の文字が含まれているかチェックする
• matchの返り値

アプリ

• おみくじ
• タイマー

補足

• ブラケット記法とドット記法   
• 連想配列や多次元配列の取り出し方   代入を使った工夫
• 変数と配列とオブジェクトの関係   Array();とvar 変数名とfunction Object(){ }
• オブジェクトと連想配列の違い
• インデックス番号の指定方法   document.getElementsByName(' ') と document.getElementsByTagName(' ') と childNodes と array = [ ]
• for(var = i , i < length , i++ ){ } と 単にi++だけなのとどう結果が違うか