プログラミング学習者のアウトプット 参
今週の学習内容のアウトプットとメモ
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({
type: HTTP通信の種類 GETとPOSTのどちらか
data: サーバーに送信する値
dataType: サーバーから返されるデータの型 (json 等)
})
・.attr('「属性」')
要素が持つ「属性」の値を返す。
・DOM要素の削除
emptyメソッドを使うと、指定したDOM要素の子要素のみ削除でき、
removeメソッドを使えば、DOM要素自体を削除できる。