はい、こんばんは。
最近朝夜と冷え込んで参りました。
１１月も終わりに近づき、ようやく冬服の出番になりましたね。
最近は朝起きるのが億劫だという人に、自己流の目覚ましを伝授いたします。
目覚ましなった〜止めよう！と思う前に腕立て伏せ５回しましょう！！目がバッチリ冷めます！！
不覚にもこのブログを読んでしまったそこのあなた、ぜひお試しあれ！！
ということで早速今日の振り返りに入りたいと思います。
昨日も言及しましたが、本日はJavaScriptを使って、chat-spaceのメッセージを非同期通信にするということに取り組んでおりました。
Tech::EXPERTの#outputにも投稿されていましたが、下記のブログが相当役に立ちます！！
私が本日ブログへ投稿しようと思っていたことの全てがすでに書かれていました。
ですので、ちょっとしたコードの解説を本日させていただければと思います。
$(function(){
function buildHTML(comment){
var html =
return html;
}
まず上記のコードのfunction()とありますが、これは何かというと、即時関数と言います。このコードが読み込まれると即実行してくださいね！というのがこのコードです。
var hoge = ・・・ですが、JavaScriptにおいて変数を宣言するときは、var hoge =という形式をとります。
$(‘#new_comment’).on(‘submit’, function(e){
e.preventDefault();
var formData = new FormData(this);
var href = window.location.href + ‘/comments’
ここでは、onメソッドとfunction()が同時に使われていますね。
‘submit’されたら即実行してくださいねとでも解釈します。
ちなみにイベント名は結構あります。（下記参照）
blur 要素がフォーカスを失った時に発生
focus 要素がフォーカスを得た時に発生
load ドキュメント内の全リソースの読み込みが完了したときに発生
resizewindow の大きさが変更された時に発生
scroll ドキュメントがスクロールした時に発生
click クリックされた時
dblclick ダブルクリックされた時
mousedown 要素上でマウスが押された時に発生
mouseup 要素上でマウスが押され、上がった時に発生
mousemove 要素上でマウスが移動している時に発生
mouseover マウスが要素に入った時に発生。子要素でも発生
mouseout マウスが要素から外れた時に発生。子要素でも発生
mouseenter マウスが要素に入った時に発生。子孫要素に入った時には発生しないmouseleave マウスが要素から外れた時に発生。子孫要素から外れた時には発生しないchange 要素がフォーカスを得て値の修正が完了した時に発生
selecttype 属性値が”text”のinput要素、textarea要素のテキストが選択された時に発生submit フォームが送信された時に発生
keydown キーが押し下げられた時に発生
keypress キーが押された時に発生
keyup キーが上がった時に発生
error javascriptのエラーが発生した時に発生
ソースは下記のQiita記事です。
$.ajax({
url: href,
type: “POST”,
data: formData,
dataType: ‘json‘,
processData: false,
contentType: false
})
.done(function(data){
var html = buildHTML(data);
$(‘.comments’).append(html)
$(‘.textbox’).val(”)
})
.fail(function(){
alert(‘error’);
})
})
});
上記のコードについては明日、解説させていただきたいと思います・・・力つきました・・・・（大切な部分ですので、アウトプットしたいと思います。）
コメント