[Right job]Webエンジニア_基礎講座②

YouTubeは、右下の全画面で表示するとよりみやすくなります！

時間を短縮したい方は、1.5倍速で進めることをおすすめします。

また、わからなくなったら、一度動画を見返してみましょう。もちろん、いつでも質問を受けつけています。

また、動画で出てくる「関数」や「メソッド」と呼ばれるものは、JavaScriptがもともと用意している道具のようなものです。「関数」も「メソッド」も同じ意味として捉えて構いません。

動画1 JavaScriptの解説

深く理解しようとせず、動くものを作ることを目的に進めましょう。
JavaScriptとは、見た目に対して動きをつけることができる言語

動画2 JavaScriptで実装する機能

①投稿して画面に表示する
②投稿した内容に対してbotがレスポンスをする
console.log()はデバッグのために使うもの。実際に画面に表示されることはないものの、JSの処理

○script.js

console.log("こんにちは！)

動画3 画面の情報を取得しよう

送信したテキストを画面に表示するための流れを確認
情報を取得する→テキストを貼り付けるという流れで投稿機能を実装する
getElementById(“id名”)とは、HTMLのid名から、要素を取得することができる関数

○script.js

console.log(document.getElementById("form"))

動画4 addEventListenerの解説

nullは情報がないこと意味する
コードは上から下に読み込まれるのが原則である
window.addEventListener(“load”, function() {})とは、まず最初にHTML要素を読み込んでから、実行する関数

○script.js

window.addEventListener("load", function(){
  console.log(document.getElementById("form"))
})

動画5 変数の解説

変数とは、データを保持することができるもの。箱のようなイメージを持ってもらえるとOKです。
「=」とは代入の意味。数学のような同じという意味ではありません。
formという変数を作成する
contentsという変数を作成する

○script.js

window.addEventListener("load", function(){
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  console.log(contents)
})

動画6 送信ボタンが押されたらJS側で値を取得しよう

addEventListener(“submit”, function(event){})とは、submit（送信ボタン）が押されたら動く関数
preventDefault()とは更新する動作をキャンセルすることができる関数

○script.js

window.addEventListener("load", function(){
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  form.addEventListener("submit", function(event){
    event.preventDefault()
    const user_question = document.getElementById("user_question").value
    console.log(user_question)
  })
  console.log("aaa")
})

動画7 もし動かなくなったときの検証方法

ここまでの振り返り
console.logの使い方

○script.js

window.addEventListener("load", function(){
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  form.addEventListener("submit", function(event){
    event.preventDefault()
    const user_question = document.getElementById("user_question").value
  })
})

動画8 HTML要素に出力をしよう①

createElement(“div”)とは、HTMLのタグである<div>をJS側で作成できる関数
classNameとは、HTMLのタグである<div class=”クラス名”>をJS側で追加することができる関数
innerHtmlとは、指定したHTML要素の書き換えを行うことができる関数

○script.js

window.addEventListener("load", function(){
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  form.addEventListener("submit", function(event){
    event.preventDefault()
    const user_question = document.getElementById("user_question").value
    const div_text_user = document.createElement("div")
    div_text_user.className = "user_text"
    div_text_user.innerHTML = user_question
  })
})

動画9 HTML要素に出力をしよう②

親要素.appendChild(追加するHTML要素)とは、追加するHTML要素を指定の親クラスの中にJS側から子クラスとして追加することができる関数

完成コード

○script.js

window.addEventListener("load", function(){
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  form.addEventListener("submit", function(event){
    event.preventDefault()
    const user_question = document.getElementById("user_question").value
    const div_text_user = document.createElement("div")
    div_text_user.className = "user_text"
    div_text_user.innerHTML = user_question
    contents.appendChild(div_text_user)
  })
})

お疲れさまでした！

余力のある方は、自力で調べながら、10と11の機能も実装してみましょう。

10 newPost()という関数化してみよう

プログラミングのコードは、１つの関数に１つのシンプルな機能であることが原則
関数には、呼び出す側と定義する側がある
まずは、JSにおける関数とは何かを調べる
newPost関数の定義と呼び出すコードを作成してみる

○script.js（解答例）

// newPost関数を定義する
function newPost() {
  const form = document.getElementById("form")
  const contents = document.getElementById("contents")
  form.addEventListener("submit", function(event){
    event.preventDefault()
    const user_question = document.getElementById("user_question").value
    const div_text_user = document.createElement("div")
    div_text_user.className = "user_text"
    div_text_user.innerHTML = user_question
    contents.appendChild(div_text_user)
  })
}

// newPost関数を呼び出す
window.addEventListener("load", newPost)

11 botの自動レスポンス機能を作成しよう

reset()を使って、投稿したら、入力文字が消えるようにする
「こんにちは」と投稿したら、「hello」を自動で返してくれる返す機能を実装する
if文を使って、「こんにちは」以外にも自動で返信してくれる機能を実装する
数字を送ったら、偶数か奇数かを判断して自動で返信してくれる機能を実装する
投稿したら、1秒後に自動で返信が返ってくるようにする