JavaScriptを使う

JavaScriptを使うには
1. JavaScript非対応環境への対策　　参考
  <script type="text/javascript"> // ここに、JavaScript 利用環境リストを記載 </script> <noscript> ここには、JavaScript非対応環境リストを記載 </noscript>
2. プラウザの設定　　参考
  「アクティブスクリプト」を有効にします →
JavaScript の利用
1. JavaScript の例
  - JavaScriptの使い方　　逆引きリファレンス　 addEventListener type一覧
  - 犬猫　時刻表示　カレンダ　日付選択　ストップウォッチ　モーダルを表示
    参考: JavaScriptテクニック　 HIMAJIN 　サンプル集　使えるサンプル　練習問題集　関連サイト
2. JavaScriptで地図を表示・操作する
  1. Google Maps を使う　　 Maps サンプル　記述例
  2. Yahoo! Map を使う　　 Yahoo! Map サンプル　記述例
  3. Leaflet を使う　　使い方　 Leaflet 地図　地理院タイル　カスタマイズ　重ねるレイヤ
3. JavaScrip の注意事項　セキュリティ　JS の注意点　つまづきやすい
  1. scriptの位置　　タイミング　外部ファイル　タイミング　 deferとasync 　レンダリング
  2. 変数の扱い　　var宣言　変数宣言　 var/let/const 　オブジェクト　関数と変数
  3. document.write()は非推奨　　 DOM-based XSS 　insertAdjacentHTMLを使う　 textContentを使う
  4. return false 　
4. jQuery を使う
  1. jQuery とは？　　
  2. jQueryを使う　　
5. その他
  1. メソッドとは　　メソッドの使い方　関数とメソッドの違い
  2. セレクタの種類　　 querySelectorAll()
  3. 正規表現テスト
  4. 配列　　 Array.reduce() 　連想配列　 sort() 　reduce() 　可変長引数
  5. アロー関数について　　関数の違い　即時関数　テンプレートリテラル
  6. Class 　　クラス　クラス定義　 class を理解する　 class構文　コンストラクタ
  7. マウスの座標を取得　　
JavaScript のディバッグ
1. alert で確認する
  1. 　script の中に、「 alert( 変数 ) 」を記述して「変数」の確認等をします。例↓
    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script> alert(new Date()); // alert で new Date() を確認 var day = new Date().toLocaleString(); document.getElementById("box").innerHTML = day; </script> </head> <body> <p id="box">時刻</p> </body> </html>
  2. 注意事項
    引数が非適切の場合は「undefined」「object Object」「object HTMLCollection」等が表示されます
    ＊プロパティを一覧表示
  3. 参考サイト
    alert の使い方　 alertメソッド　アラート表示
2. console.log() で確認する
  1. console.log() を書き込む。例↓
    <!DOCTYPE html> <html lang="ja"> <head> <meta charset = "utf-8"> </head> <body> <p>console.log() テスト</p> <script> for (var i=0; i<5; i++) { if(i==2){ console.log('i = '+i+' です'); // console を記述 } else if(i==3){ txt = "<p style='color:red;'>i= "+i+"</p>"; document.write(txt); console.log(txt); // console を記述 } else { console.log("i: "+i) } // console を記述 } </script> </body> </html>
  2. Web ページを表示時に(下左図↓)、F12 キーを押すと「コンソール」画面を表示出来ます(下右図↓)
  3. ブラウザ毎の console 画面表示方法　　参考１　参考２
    「F12 キー押し」で表示可能です。それ以外にも下記のようにすれば console 画面が表示できます。
    Edge:
    　1) ブラウザの右上にある横三点アイコン(･･･)をクリック
    　2) 「その他のツール」＞「開発者ツール」を選択
    　3) 「コンソール」画面が表示される
    
    Chrome:
    　1) ブラウザの右上にある縦三点アイコンをクリック
    　2) 「その他のツール」＞「デベロッパーツール」を選択
    　3) 「console」画面が表示される
    
    Firefox:
    　1) ブラウザの右上にある三本ラインアイコンをクリック
    　2) 「ウェブ開発」＞「ウェブコンソール」を選択
    　3) 「コンソール」画面が表示される
    
    Internet Explorer:
    　1) ブラウザの右上にある歯車アイコンをクリック
    　2) 「F12開発者ツール」を選択
    　3) 「コンソール」画面が表示される
  4. 参考サイト　console.logを表示　デバッグのやり方　 JSONを整形表示　デバッグ効率化　 console.table
3. DOM要素値を取得する
  - DOM操作　 DOMとは何　 DOM基礎　 DOMの役割　 DOM操作とは　 DOM
  - 要素を取得　スタイル取得　 value値　あらゆる要素　属性取得　 text box
4. 参考サイト
関連サイト

　　ページのTopへ　　　 JavaScript 　J.S.を使う　JS-link 　jQuery 　Wordpress 　maps 　g-chart