JavaScriptの基礎学習

  1. JavaScriptの書き方

    • scriptタグでJavaScriptを扱うことができる

    • scriptタグ内にsrcプロパティでファイル名へのリンクを作ることで、
      外部ファイルからJavaScriptを書き込むことができる.

  2. 変数の定義とコンソールへの表示

    • console.log("message")でコンソールに"message"を表示する
    • 変数の定義は var 変数名 で行う.
    • 以下のソースでコンソールにmsg内のテキストを表示することができる.

      • var msg;
      msg = "hello world";
      console.log(msg);

    • 変数の型
      • 文字列
      • 数値
      • 真偽値(true/ false)
      • オブジェクト

  3. 三項演算子

      4. var a,b,c;
      if (条件){
          a=b;
      }else{
          a=c;
      }

      これは以下のように書きなおすことができる.
      a = (条件) ? b : c;

  4. ユーザーに情報を提示する

    • alert("message")： メッセージウィンドゥを表示 OKボタンのみ
    • confirtm("message")：Yes/Noのボタンを表示 Yなら1, Nなら0を返す.
    • prompt("message", "初期値")： テキスト入力欄を表示 入力テキストを返す, 何もなければNULL.

  5. 関数の書き方

      6. function 関数名(引数){
          return 0;
      }

    • 無名関数 (function{})
    • 即時関数 (function(){};)(): 他のプログラムと変数名が干渉しないように配慮する場合に使う
    • 関数を変数に代入 var hello = function(引数){};("引数への代入") ：普通にhello()で呼び出しができる.

  6. タイマー処理

    • setInterval(処理, インターバル[ms]) : インターバル時間ごとに処理を繰り返す.
    • clearTimeout(変数); で指定した無名関数のカウントを止める
    • setTimeout(処理, インターバル[ms]): インターバル時間後に処理を1回だけ行う.

      • setInterval(function(){ 処理 }, 1000)   //1000[ms]ごとに処理を繰り返す

  7. オブジェクト

    • 辞書型：辞書の中にプロパティを指定して使用する. 無名関数を使うことでメソッドとして利用もできる.

      • var user={
              email: "nkmonokuro@gmail.com",       //プロパティ
                    score: 80
              greet: function(name){       //オブジェクトのプロパティに無名関数を使うこともできる(メソッド)
                    console.log("Hello" + name + "from" + this.email); //this: このオブジェクト内のemailプロパティにアクセスする.
          }
      }

      console.log(user["email"])あるいは console.log(user.email)でvalueを表示できる.
      代入は       user.score = 100　とすれば代入できる

  8. 組み込みオブジェクト

    • Stringオブジェクト

      • var str = new String("Hello"); //Stringオブジェクトをstr変数に適用
      console.log(str.length);       //strの文字数を表示(Stringのメソッド)
      console.log(str.replace("H", "h"));       //Hをhに置換
      console.log(str.substr(1,3));      //2文字目から4文字目を表示

    • Arrayオブジェクト(配列に関するオブジェクト)
      • 配列の前後に追加したい場合

        • unshift - array - push

      • 配列の前後から除外したい場合

        • shift - array - pop

      • splice メソッドで指定した範囲の配列の中身を削除＆置き換えができる

      var str = new Array(100, 300, 500); //配列[100, 300, 500]
      console.log(str.length);
      str.splice(1, 2, 200, 300);       //配列の要素1から1つ先まで削除、代わりに200,300を代入する.

    • Mathオブジェクト
      • Mathオブジェクトは定義する必要がない(詳細はmdn math で検索)
      • Math.PI: 円周率
      • Math.ceil(): 切り上げ
      • Math.floor: 切り下げ
      • Math.round: 四捨五入
      • Math.random: ランダム値
    • Dateオブジェクト
      • new Date(year, month, day, hour, min, sec)
      • .getFullYear(): 年を取得
      • .getMonth(): 月を取得
      • .getTime(): 1970/1/1からの経過時間を取得

  9. DOMとは

    • ウィンドウにJavaSqriptからアクセスすることができる
    • console.dir(window); windowの詳細を視ることができる
    • console.log(window.outerHeight); windowの高さを視ることができる
    • window.location.href = 'url': 今視ているウィンドウを別のurlに飛ばすことができる.
    • window.document - 今開いているページ document のみでもいい
    • document object model (DOM)

  10. DOMでの操作

    • 要素を書き換える場合
      • var a = document.getElementById('id'): 属性がidのアイテムを取得する
      • a.textContent = "テキスト": aのテキストを"テキスト"に書きなおす
      • a.style.color = "color": aの色を"color"に置き換える.
      • a.className = "classname": aのclassを"classname"に置き換える
    • 要素を置き換える場合
      • var a = document.createElement('p'): p要素を新しく作る
      • var text = document.createTextNode("テキスト"): テキストを新しく作る
      • document.body.appendChild(a).appendChild(text):body要素の下にaの要素(p)さらにその下にtextを挿入する
    • イベントを設定する
      • ボタンを押したときにテキストが追加されていくようにする.
      • 指定したidがクリックされたときに無名関数内の処理が行われる
      • document.getElementId('ID名').addEventListner('click',function(){処理内容})



Comments