【JavaScript】イベント駆動系メソッドまとめ
.on()メソッド
$("セレクタ”).on("イベント名",function(){
//イベントが起きた時に行う処理
}
イベント名
click クリックされた時
dbclick ダブルクリックされた時
mouseover マウスが要素の上に乗った時
mouseout マウスが要素から離れた時
keydown キーが押された時（キーが押された瞬間、つまり直前の状態に対して実行される）
keyup キーが話された時
change 入力内容が変更された時
submit フォームが送信された時
学習メモ0218
JavaScript
同期通信
リクエストを投げ、サーバーから応答があるまでブラウザ側の表示しないような通信
非同期通信
リクエストを投げた直後からブラウザ側での操作ができるような通信
サーバーからの応答があり次第、コールバック（登録された関数）を実行する
通信中にもブラウザ操作が可能なため、ユーザビリティを高めることができる
windowオブジェクト
navigator・・・ブラウザ自身に関する情報をもつオブジェクト
location・・・現在のページに関する情報をもつオブジェクト
history・・・ブラウザの履歴をたどるback(),forwrd()をもつオブジェクト
screen・・・画像に関する情報をもつオブジェクト
document・・・ページのHTML文書に関する情報をもつオブジェクト
window.location = 'URL' ・・・URLへジャンプする
window.history.back()・・・戻る
Ajaxを使った非同期通信
Ajax(Asynchronous JavaScript + XML)
JavaScriptによる非同期通信を用いたプログラミング手法のこと
JSON(JavaScript Object Notation)
サーバーからのデータのレスポンス形式のひとつ？？
$ajax()
JavaScriptkらHTTPリクエストを発行するための関数
第一引数にURL,第二引数にオプションのオブジェクトをとる
const API_KEY = '取得したAPI Key';
$(function() {
$('#weather-form').on('submit', function(e) {
var cityName = $(this).find('#weather-form-city').prop('value');
$.ajax()
.done(function(data) { //レスポンスのJSONをJavaScriputの連想配列としたものを引数としている？
// 通信に成功した時の処理
})
.fail(function(data) { //XMLHTTPRequestオブジェクトを引数としている？？
// 通信に失敗した時の処理
});
e.preventDefault();
});
});
API
APIとは
サーバーからの返り値をHTMLだけではなくJSONなどの形式で返す仕組みのこと
APIの作り方
1.HTMLを返すためのコントローラーを共有してAPIとして使えるようにする
2.API専用のコントローラーを作成する
3. APIを作成するためのgemを利用する
**respond_toメソッド・・・リクエストがHTMLやJSONなど何を求めているのか拡張子等から判断し、自動的に条件分岐する
respond_to do |format|
format.html{redirect_to :root} //HTMLリクエスト時はrootアクションにリダイレクトする
format.json{render json:@todo} //JSONリクエストの時はjsファイルで作成したtodo(@todo)を返す
end
非同期通信を実装する（Pictweet）
jquery-rails(gem)をインストール
application.jsに記載する
//= require jquery
//= require jquery_ujs
**コメント機能を非同期通信化する
1.jQuery記述ファイルを作成（assets/javascripts/comment.js）
2.フォームが送信されたらイベントが発火するようにする
FormData()・・・form内のデータの送信にしようできる
var fomData = new FormData(this) //セレクタで指定したフォームの情報を取得する
デバグの方法
console.log(this)・・・引数内の内容をconsoleに出力する
3.非同期通信でコメントが保存されるようにする
attr()メソッド・・・引数ないで指定された属性値を返す
var url = $(this).attr('action') // thisで指定されたセレクタのaction属性値を返す
processDataオプション：false要復習！わからん！
contentTypeオプション：false FormDataでフォーム情報を取得した場合はfalseにする
js.studio-kingdom.com
5.作成したメッセージをJSON形式で返す
jbuilder
デフォルトでrailsに入っているgem。入力データをJSON形式で出力するテンプレートエンジン
jbuilderファイル（views/comments/create.json.jbuilder)を作成してJavaScriptで必要な情報を渡す
json.text @comment.text json.user_id @comment.user.id json.user_name @comment.user.nickname
6.返ってきたJSONをdoneメソッドで受け取り、HTMLを作成
テンプレートリテラル記法
HTMLをバックティック文字で囲むことで、複数行の文字列や文字列内挿入昨日が使用できる
$(function(){
function buildHTML(comment){
var html = `<p>
<strong>
<a href=/users/${comment.user_id}>${comment.user_name}</a>
：
</strong>
${comment.text}
</p>`
return html;
}
:
:
:
:
.done(function(data){
var html = buildHTML(data);
$('.comments').append(html)
$('.textbox').val('')
})
})
});
※アプリケーションをデプロイする際にエラーになる場合あり。
下記のコメントアウトする必要がある
config/enviroments/production.rb
// config.assets.js_compressor = :uglifier
7.エラー時の処理を行う
学習メモ0217
インスタンス変数、ゲッター、セッター、self
勉強参考記事 Railsのmodelクラスのselfが曖昧だったので - Qiita
scaffold めちゃ便利
rails g scaffold モデル名 カラム名1:データ型1 カラム名2:データ型 2 … bundle exec db:create bundle exec db:migrate
ルーティング、モデル、コントローラー、ビューが自動で作成される
統合テスト
Capybara(gem)
ブラウザの操作を再現するためのgem
visitメソッド
指定したページへ移動することができるメソッド 。引数にURLかプレフィックスパスを指定。
click_onメソッド
指定したHTML要素をクリックするメソッド。引数にvalue属性の値を指定
fill_inメソッド
フォームへの入力をシュミレートする
visit("URL")
visit prefix_path
click_on(value値)
#Nameのフィールド名のtext_fieldに"Example User"を入力したシュミレート
fill_in "Name","Example User"
fill_in 'text',with: 'フューチャースペックのテスト'
フューチャースペック
統合テストを行うためのスペック
it → scenario
before → background
describe → feature
let → given (必ずしもそうではない？？)
複数のexpectを記載する
have_content/have_no_contentマッチャー・・・引数内のvalue値の要素があるかないか判断
学習メモ0216
form_forメソッド
htmlにformタグを生成するメソッド。
formタグの親要素内に子要素としてform_forメソッドを使っても、親要素のformが優先されてしまう。子要素のform_forに設定したアクション等は有効にならない。
.valid?にてエラーメッセージを生成＋true,falseを返す
.errorsにてエラーメッセージを出力
エラーメッセージの生成はどこにされたかの確認方法は不明（binding.pryで止めて、どうにかするか？？）
include?メソッドはarrayクラスのオブジェクトについては完全一致の要素がある場合のみtrue,stringクラスのオブジェクトについては部分一致でもtrue
array = ["abc","def","ghi"]
array.include("abc") => true
array.include("ab") => false
array[0].include("abc") => true
array[0].include("ab") => true
テストのグループ化
context 'can save' do
it '~~~~~~~' do
end
end
context 'can not save' do
it '~~~~~~~' dl
end
end
deviseのテスト方法 わからん
attribute_for(FactoryGirl)
オブジェクトを生成せずにハッシュを生成するメソッド
やること
font-awesomeの扱い
resetcss
boxsizing : border-box
