記憶の外付けHDD

切実に頭にUSBのコネクターがほしいです。なるべくtype-cでお願いしたいです。(忘れないように、プログラミング学習で学んだことを投稿してます)

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

jQuery リファレンス:data

File: REFERENCE — Haml Documentation


余談

  • 非同期通信や自動更新の仕組みがわかってきたので、そのうちまとめたいと思います。