プログラミング学習者のアウトプット 参

今週の学習内容のアウトプットとメモ

 

JavaScript

JavaScriptとは

 汎用性の高い言語。特にブラウザ上での操作、例えばボタンをクリックする、マウスカーソルを合わせた時にタブが開く等をプログラムすることに強い。

 

JavaScriptでのコード

・letとconst

 変数を定義するときに使用する。letで定義した変数はあとで内容を書き換えることができるが、constで定義すると内容の書き換えはできなくなる。

 

・function

 関数を定義し、 function 「関数名」(引数){  処理内容  } として使う。

 

・配列とオブジェクト

 データを保存する際、順番で管理するのが配列、データごとに名前を付けて管理するのがオブジェクト。

 配列は let list = ['A', 'B',.......];と定義し、

 オブジェクトは let obj = { 「名前」: '  データ  ' ,  ........};と定義する。

 

・DOM(Document Object Model)

 HTMLで書かれたコードを解析して、webページとして表示させる仕組みこと。このとき解析されたHTMLは樹状に構築されるため、DOMツリーと呼ばれる。またHTMLのタグはノードと呼ばれる。

 DOMツリーから特定の要素を取り出す方法として、次のものがある。

  document.getElementById("「id名」"); 

   →  「id名」を持つノードを取り出す

  document.getElementsByClassName("「クラス名」");

   →  「クラス名」を持つ全ノードを取り出す

  document.querySelector("「セレクタ名」");   

   →  「セレクタ名」を持つ全ノードを取り出す

 

・イベント

 ブラウザで行われる操作のこと。このときに実行される処理をイベント駆動と呼ぶ。

 

・this

 関数の中で使うと、イベントの発生元となった要素を自動で取得する。

 

jQuery

jQueryとは

 DOM操作をもっと簡単に書けるようにした、JavaScriptのライブラリのうちの一つ。

 

Ajaxとは

 非同期通信のことで、ブラウザを再読み込みせずにデータを更新できる。このときに使われるデータ記述形式の一つにJSONと呼ばれるものがあり、キーとバリューの組み合わせでデータを表現する。

 

APIとは

 必要なデータだけをJSON等の形式で返す、サーバーの仕組み。またHTTPやHTTPS通信で利用できるAPIを webAPIと呼ぶ。

jQueryでのコード

・HTML要素の取り出し

 $(" #「セレクタ」")  →  idが「セレクタ」の要素を取り出す。

 $(" .「クラス名」")  →  classが「クラス名」の要素を全て取り出す。

 $("「要素名」")  →  「要素名」の要素を全て取り出す。

 $(" [属性 = ' 値 ' ] ")  →  「属性」が「値」の要素を全て取り出す。

 find("「セレクタ」")  →  「セレクタ」を全取得する。

 

・respond_to

 リクエストがHTMLとJSONの場合で条件分岐し、それぞれのときの処理を定義できる。

 

・$.ajax

 jQueryで非同期通信を行うために必要な記述で、次のように記述する。

   $.ajax({

    url: リクエス送信先のURL

    type: HTTP通信の種類 GETとPOSTのどちらか

    data: サーバーに送信する値

    dataType: サーバーから返されるデータの型 (json 等)

    })

 

・.attr('「属性」')

 要素が持つ「属性」の値を返す。

 

・DOM要素の削除

 emptyメソッドを使うと、指定したDOM要素の子要素のみ削除でき、

 removeメソッドを使えば、DOM要素自体を削除できる。