TECH EXPERT 17日目

TECH::EXPERT
2019.07.29

予定があり昼で早退。
JavaScriptとjQueryで知っておくべきはjQueryオブジェクトの概念かと。
これ言われないと調べないし、調べないからわからないしで悪循環な気がする。

やったことメモ

ruby

initialize(a,b)
@a = a
@b = b
end

attr_accessor :title, :name, etc.

.new()する際に設定しなくてはいけない。（rubyなら）

Jquery

要素の取得

parent()

指定した要素の親要素を取得できる。

$('#parent_target').parent().css('background-color', 'red');
li要素の親であるulが変更される。

find()

指定した要素の子孫要素を取得できる。
引数に指定したい要素を渡すことで、子孫要素の中から引数と一致した要素を取得できる。
返る値はDOM要素の配列。not jQuery object!

$('#find').find('#find_target').css('background-color', 'blue');

siblings()

指定した要素の兄弟要素を取得できる。
引数がある場合は、引数の要素に一致するすべての兄弟要素を取得。
引数がない場合は、すべての兄弟要素を取得。
（指定した要素自身は含まない）

next()

指定した要素の次の兄弟要素を取得する。（子要素は無視する）
引数がある場合には、引数の要素の次の要素を取得。
引数を与えなかった場合には、セレクタとして指定した要素の次の要素を取得。

this

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

イベントオブジェクト

targetやkeyCodeなどのプロパティを使うことでイベントの発生元の要素や押されたキーの種類などがわかる。

$(function() {
  $('form').on('submit', function(e) {
    console.log('送信ボタンが押されました');
    e.preventDefault();
  });
});

function(e)とすると（eはどんな文字列でも良いがeventの略が用いられる）イベントオブジェクトが渡される。イベントオブジェクトには、イベントの発生元の要素や押されたキーの情報などが入っているので、console.log(e);とすればコンソール上で確認できる。

preventDefault()

ブラウザが最初から持っているアクションをキャンセルする。

.prop()

引数で指定したプロパティを参照できる。

if (checkbox.prop('checked')) {
  output += checkbox.attr('value') + '\n';
}

DOMオブジェクトとjQueryオブジェクト

DOMオブジェクトに対するメソッドとjQueryオブジェクトに対するメソッドは別物。
メソッドの返す値がjQueryオブジェクトかDOMか、それ以外なのか注意が必要。
$(DOM)とするとjQuery要素になる。
jQueryオブジェクトは配列に似た構造であるが、厳密には配列ではないのでDOMオブジェクトを配列に格納したものとは挙動が異なる。

var dom = $("form").find("label");
dom[1].hide();
↑これは動かない
$(dom[1]).hide();
↑これは動く。∵hideはjQueryメソッドだから。
DOMオブジェクトとjQuery オブジェクトで取得できる属性の違い。
###疑問画面上のあるボタンをクリックし、クリックイベント中にボタンの属性を取得する際に、DOMオブジェクトから属性を取...
teratail.com

「プロパティ」と「属性」

DOMメソッド
以下はプロパティと属性をそれぞれ参照したものであるが、プロパティは適切に設定されたものでなければundefinedとなる。
e.target.href;　　　　　　//プロパティ
e.target.getAttribute('href'); 　　　//属性
jQueryオブジェクト
$target.prop('href');     //プロパティ
$target.attr("href");     //属性

windowオブジェクト

クライアントサイドJavaScriptでは、実行されるタイミングで自動的に windowオブジェクト というオブジェクトが作られます。ブラウザに関する様々なプロパティ・メソッドを持つ。

プロパティ簡単な説明
navigatorブラウザ自身に関する情報をもつNavigatorオブジェクト
location現在のページに関する情報をもつLocationオブジェクト
historyブラウザの履歴をたどる back(), forward() をもつHistoryオブジェクト
screen画面に関する情報をもつScreenオブジェクト
documentページのHTML文書に関する情報をもつDocumentオブジェクト
$(function() {
  $('.index1').click(function() {
    window.location = './index1.html';
  });
});
$('.forward').click(function() {
  window.history.forward();
});

コールバック

必要なタイミングで呼び出せるように、あらかじめ定義しておく関数のことをコールバックと呼ぶ。

Ajaxとは

Ajaxとは、Asynchronous JavaScript + XMLの略。
JavaScriptによる非同期通信を用いたプログラミングの手法のこと。
ユーザーがアクションを起こした際にページ全体を書き換えるのではなく、JavaScriptにサーバとの通信をさせ、ページの一部を書き換えることで、スムーズなUX(User Experience)を提供する。

API

APIとは、Application program interfaceの略で、何らかの目的を達成するための処理のまとまりのこと

HTTP通信

ブラウザ（＝クライアント）からサーバへの通信を HTTPリクエスト 、
サーバからブラウザへの通信を HTTPレスポンス

HTTPリクエスト

  • リクエスト行
  • リクエスト・ヘッダ
  • ボディ部
> GET / HTTP/2
> Host: www.google.co.jp
> User-Agent: curl/7.54.0
> Accept: */*

1行目がHTTPメソッド、パス（この場合は”/” = ルート）、HTTPのバージョン情報
2行目〜がヘッダ部分

HTTPレスポンス

  • ステータス行
  • レスポンス・ヘッダ
  • ボディ部

ステータス行

種類概要説明
1xxInformational 情報リクエストは受け取られた。処理は継続される。
2xxSuccess 成功リクエストは受け取られ、理解され、受理された。
3xxRedirection リダイレクションリクエストを完了させるために、追加的な処理が必要。
4xxClient Error クライアントエラークライアントからのリクエストに誤りがあった。
5xxServer Error サーバエラーサーバがリクエストの処理に失敗した。
ステータスコード説明
200 OKOK。リクエストは成功し、レスポンスとともに要求に応じた情報が返される。
301 Moved Permanently恒久的に移動した。リクエストしたリソースが恒久的に移動されているときに返される。Location:ヘッダに移動先のURLが示されている。
302 Found発見した。リクエストしたリソースが一時的に移動されているときに返される。Location:ヘッダに移動先のURLが示されている。
403 Forbidden禁止されている。リソースにアクセスすることを拒否された。リクエストはしたが処理できないという意味。
404 Not Found未検出。リソースが見つからなかった。
410 Gone消滅した。リソースは恒久的に移動・消滅した。どこに行ったかもわからない。
500 Internal Server Errorサーバ内部エラー。サーバ内部にエラーが発生した場合に返される。
503 Service Unavailableサービス利用不可。サービスが一時的に過負荷やメンテナンスで使用不可能である。

関連記事

コメント