4/29 TIL

body.json()

fetch関数として受信したデータをjsに書き込むことができるデータに加工することを可能にする方法.サーバが受信した応答body部のデータを読み出し、解析処理を行う.

fetch(url).then(res => res.json())

fetch()

Node.jsで見られる関数を使用する場合は、この方法を使用するには、前にwindowを追加する必要があります.デフォルトでは、このメソッドはブラウザに埋め込まれているので、グローバルオブジェクトとしてwindowを貼り付ける必要があります.

DOMの値を変更したい場合？

document.querySelector(class,id).アクセス可能なコンテンツをvalueで処理します.

form要素の値、例えばinputを取得する場合。valueを書きたい場合は、divやspanなどの要素のテキストを読みます。textContentなどのメソッドを使用します。 リファレンス

XSS攻撃を防ぐためのテンプレート。

ハッカーが挿入したスクリプトのtag機能を無効にするためです.
に示すように、テンプレートを使用して作成します.replacepartは、ペン(<,>)を見つけたときに後ろの文字列に変換する機能です.

  renderMessage: ({ username, text, date, roomname }) => {
    const tmpl = `<div class="chat">
      <div class="username">${username
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
      <div>${text
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
      <div>${date}</div>
      <div>${roomname
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')}</div>
    </div>`;

    document.querySelector('#chats').innerHTML =
      tmpl + document.querySelector('#chats').innerHTML;
  },

e.preventDefault()

Input tagのコンテンツのコミットを停止する機能があります.しかしながら、操作コードでは、submitはスクリーンの点滅現象を除去するために用いられる.

submitMyPost.addEventListener('click', function(data){ 
  data.preventDefault(); // submit 누르면 화면이 깜박거리는 것을 방지.
  app.clearMessages();
  console.log("a");
  app.send({ // 한번만 쓸 변수나 상수는 상단에 선언하지 말자.
    username: document.querySelector('.inputUser').value, 
    text: document.querySelector('.inputChat').value,
    date: new Date().toLocaleString(), // 자체내장함수
    roomname: document.querySelector('.inputUser').value
  },app.fetch);