2019/09/02_学習記録
今日やったこと
- 基礎がなってないjavascriptの学習
- 自動更新の実装(メッセージ投稿アプリ)
学習した知識
まず、javascriptの基礎確認
while文
- 繰り返し処理を行う
例
1~20の数字を出力するシステム
let num = 1; while( num <= 20 ){ console.log(num); num += 1; }
解説
while(条件)
- 処理は
{}
に書く - 最後の
}
に;
は不要
for文
- 繰り返し処理を行う
- while文よりも簡単に書ける
例
1~20の数字を出力するシステム
for (let num = 1; num <= 20; num += 1){ console.log(num) }
解説
for(変数の定義; 条件式; 変数の更新)
- 文末の
}
に;
は不要
計算式の省略
例
//次の3つは同じ意味
num = num + 1
num += 1
num ++
- 引き算(-)もできる
jQuery
カスタムデータ属性(data-◯◯)
htmlにdata-
で始まる属性を指定すると、dataメソッドを使って、値を呼び出すことができる。
例
<p class="message" data-message_id="1">
解説
- 上の
data-message_id
の値である"1"は、データメソッドを使い、data("message_id")
で取得できる - 注意点:dataメソッドで取得した値は、文字列になっている
→ 数値データにする場合、to_i
を使う
hamlで記載
hamlでカスタムデータ属性を指定するときは
%p.message{data: {message_id: "1"}}
-
で一旦区切り、ハッシュでキーと値を定義する
参考
data-* - HTML: HyperText Markup Language | MDN
File: REFERENCE — Haml Documentation
余談
- 非同期通信や自動更新の仕組みがわかってきたので、そのうちまとめたいと思います。