トップページへ
JavaScriptを使う

  1. JavaScriptを使うには
    1. JavaScript非対応環境への対策  参考

    2. プラウザの設定  参考
      「アクティブスクリプト」を有効にします →
  2. JavaScript の利用
    1. JavaScript の例
    2. JavaScriptで地図を表示・操作する
      1. Google Maps を使う    Maps サンプル   記述例
      2. Yahoo! Map を使う    Yahoo! Map サンプル   記述例
      3. Leaflet を使う    使い方   Leaflet 地図   地理院タイル   カスタマイズ   重ねるレイヤ
    3. JavaScrip の注意事項  注意点  つまづきやすい
      1. scriptの位置   注意点  外部ファイル  タイミング  レンダリング
      2. 変数の扱い   var宣言  変数宣言  var/let/const  オブジェクト
      3. document.write()は非推奨   insertAdjacentHTMLを使う  innerHTMLを使う
    4. jQuery を使う
      1. jQuery とは?  
      2. jQueryを使う  
    5. その他
      1. セレクタの種類
      2. 正規表現テスト
      3. 配列   Array.reduce()
      4. アロー関数について   即時関数  連想配列  テンプレートリテラル
      5. Class   クラス  クラス定義 class を理解する  class構文 
  3. JavaScript のディバッグ
    1. alert で確認する
      1.  script の中に、「 alert( 変数 ) 」を記述して「変数」の確認等をします。例↓
      2. 注意事項
        引数が非適切の場合は「undefined」「object Object」「object HTMLCollection」等が表示されます
        プロパティを一覧表示
      3. 参考サイト
        alert の使い方  alertメソッド  アラート表示
    2. console.log() で確認する
      1. console.log() を書き込む。例↓

      2. Web ページを表示時に(下左図↓)、F12 キーを押すと「コンソール」画面を表示出来ます(下右図↓)
      3. ブラウザ毎の console 画面表示方法   参考1  参考2
        「F12 キー押し」で表示可能です。それ以外にも下記のようにすれば console 画面が表示できます。
        Edge:
         1) ブラウザの右上にある横三点アイコン(・・・)をクリック
         2) 「その他のツール」>「開発者ツール」を選択
         3) 「コンソール」画面が表示される
        Chrome:
         1) ブラウザの右上にある縦三点アイコンをクリック
         2) 「その他のツール」>「デベロッパーツール」を選択
         3) 「console」画面が表示される
        Firefox:
         1) ブラウザの右上にある三本ラインアイコンをクリック
         2) 「ウェブ開発」>「ウェブコンソール」を選択
         3) 「コンソール」画面が表示される
        Internet Explorer:
         1) ブラウザの右上にある歯車アイコンをクリック
         2) 「F12開発者ツール」を選択
         3) 「コンソール」画面が表示される
      4. 参考サイト  値を表示  デバッグのやり方  オブジェクトの中身  デバッグ効率  console.table
    3. 要素値を取得する
    4. 参考サイト
  4. 関連サイト
    1. プログラミング講座  JavaScript講座  基本文法  JavaScriptとは
    2. リファレンス  javascript-js.studio
    3. onloadイベント  addEventListener()  キャプチャ/バブリング  イベントについて
    4. querySelectorAll  querySelector()
    5. 正規表現  サンプル集
    6. テンプレートリテラル  テンプレート文字列
    7. code-prettify  Google Code Prettify

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