プログラミング勉強中!!

TECH::EXPERT 40期 受講生の筆者がその日学んだことをアウトプットしていくブログです。学習量によっては全て書ききれないこともあります。お気付きのことありましたバシバシコメントください!!3月中旬よりWEBエンジニアとして働くことになりました。日々の業務などについても発信させていただきたいと思います!!よろしくお願いいたします!!

11/23学習

はい、こんばんは。

 

最近朝夜と冷え込んで参りました。

 

11月も終わりに近づき、ようやく冬服の出番になりましたね。

 

最近は朝起きるのが億劫だという人に、自己流の目覚ましを伝授いたします。

 

目覚ましなった〜止めよう!と思う前に腕立て伏せ5回しましょう!!目がバッチリ冷めます!!

 

不覚にもこのブログを読んでしまったそこのあなた、ぜひお試しあれ!!

 

ということで早速今日の振り返りに入りたいと思います。

 

昨日も言及しましたが、本日はJavaScriptを使って、chat-spaceのメッセージを非同期通信にするということに取り組んでおりました。

 

Tech::EXPERTの#outputにも投稿されていましたが、下記のブログが相当役に立ちます!!

 

 

haayaaa.hatenablog.com

 

私が本日ブログへ投稿しようと思っていたことの全てがすでに書かれていました。

 

ですので、ちょっとしたコードの解説を本日させていただければと思います。

 

$(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記事です。

 

qiita.com

 

 


$.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');
})
})
});

 

上記のコードについては明日、解説させていただきたいと思います・・・力つきました・・・・(大切な部分ですので、アウトプットしたいと思います。)