学習記録

メモ投稿機能（フロント側）

メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能

【目的】

・非同期通信についてAjaxを理解する

・必要なコード・用語を覚える

【学習概要（実装について大まかに何をしたか）】

①送信ボタンをクリックした際のイベントハンドラーを定義

②クリックした際のリクエスを送信

【実装の手順】

１．送信した際のイベントハンドラーを定義

１−１．投稿するボタンをクリックした時のDOMを取得

１−１−１．memo関数を定義

イベントがロード時に実行されるようにaddEventListener("load",memo);を記述

＜コード・用語＞

イベントハンドラー ... イベントが発生した際の実行される処理のこと

 addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド

１−１−２．送信ボタン『投稿する』のDOMを取得する処理を記述

送信ボタン『投稿する』にid:"submit"を付与

投稿後のメモを追加する要素として<div id="list"></div>を追記

＜コード・用語＞

DOM ... ドキュメントオブジェクトモデルの略。HTMLを解析しデータを作成する仕組

　　　　み。DOMによって解析されたHTMLは階層構造のあるデータ（DOMツリーやド

　　　　キュメントツリー）になる

１−１−３．送信ボタン『投稿する』(id:"submit")の情報を取得する

getElementByIdを用いて情報を取得する

＜コード・用語＞

getElementById ... DOMツリーから特定のHTMLの要素を取得するためのメソッド

１−１−４．送信ボタンをクリックした際に実行される関数を定義

addEventListenerを使用してクリックした際に実行される関数を定義

＜コード・用語＞

addEventListener ... イベント発火の際に実行する関数を定義するためのメソッド

２．リクエストを送信する

 おわり

明日はここから

買おうかな…