[20.09.17 Node_Todo] 데이터 보내는 3가지 방법, 바닐라 JS, 버튼의 타입, 이벤트 핸들러, 논리연산자

client에서 데이터를 보내는 3가지 방법

1. query String 방식

  - http://localhost:3000/?변수1=변수값&변수2=변수값

  - let 변수1 = req.query.변수1

  - let 변수2 = req.query.변수2

 

2. Path Varriable 방식 : URL처럼 값을 보내는 방법

  - http://localhost:3000/값1/값2

  - router.get("/:변수1/:변수2")

  - let 변수1 = req.params.변수1

  - let 변수2 = req.params.변수2

 

3. form에 input에 값을 담아서 post로 보내는 방법

  form(method="POST")

    input(name="변수1")

    input(name="변수2")

 

  - let 변수1 = req.body.변수1

  - let 변수2 = req.body.변수2

>> index.js

---

버튼의 타입

//- button의 type을 button으로 바꾸면(기본값:submit)
//- form 내부에있는 버튼을 클릭해도
//- input내용이 서버로 전송되지 않는다.
//- button 클릭을 스크립트로 이벤트 처리를 하여
//- 입력값에 대한 유효성 검사를 하기위한 선행 방법
//- <button type="button" onclick="btn_click()">저장</button>
button(type="button", id="btn-save") 저장

>> index.pug

---

이벤트 핸들러

바닐라 JS 코딩

function btn_click() {
  // id가 todo로 되어있는 input tag에
  // 사용자가 입력한 문자열을 추출하여
  // todo 변수에 담아라
  // input tag가 아닐 경우에는
  // innerHTML 이라는 속성을 통해서 값을 추출할 수 있다.
  let todo = document.getElementById("todo").value;
  alert(todo);
}

function main_title_click() {
  // id가 main_title로 되어있는(일반적인 tag)의
  // text 문자열을 추출하여
  // innerHTML, innerText 속성을 사용하여 문자열 추출
  // 간혹 일부 브라우저에서 innerText 속성이 안되는 경우도 있다.
  // 또한 innerText는 대소문자를 주의해야한다.
  // innerTEXT로 작성하면 안된다.
  // text 변수에 저장
  let text = document.getElementById("main_title").innerHTML;
  alert(text);
}

document.addEventListener("DOMContentLoaded", function () {
  // id가 todo인 tag를 todo라는 변수에 저장하라
  // todo는 id가 todo인 document object가 된다.
  let todo = document.getElementById("todo");
  // 화면에 다 그려지고 나면
  // id가 todo인 input box에
  // 반갑습니다 라는 문자열을 settiong하라
  // todo.value = "반갑습니다 :)";

  // tag에 id값을 지정했을 때 사용하는 코드
  // id가 btn-save인 tag(button)에 click event 핸들러 등록

  // $("#btn-save")

  JS의 Query 선택자

  document.querySelector()
    : id가 지정된 tag를 선택할 때 = 결과 1개
        document.querySelector("#id값")
        만약 tag와 class에 querySelector()를 적용하면
        조건에 맞는 첫번째 element만 가져올 수 있다.
        보통 본문에 해당하는 tag나 class가 1개만 있을 때 사용하기도 한다.
  document.querySelectAll()
    : class가 지정된 tag나 tag이름으로 선택할 때 = 결과가 배열로
        document.querySelectAll("tag이름")
        document.querySelectAll(".class값")

document.querySelector("#btn-save").addEventListener("click", function () {
    // 만약 html 문서내에 같은 tag가 1개만 있거나
    // 같은 class가 지정된 tag가 1개만 있을 경우 querySelectAll()을 사용하지 않고
    // querySelector()를 사용해서 조회를 할 수 있다.
    let todo_input = document.querySelector("input");

    todo_input = document.querySelector(
      "section.todo_main form input[name='todo']"
    );

    let todo_value = todo_input.value;

    if (todo_value === "") {
      alert("할일을 입력해주세요 :)");
      document.querySelectorAll("input")[0].focus;
      return false;
    }

    if (confirm("저장할까요?")) {
      document.querySelector("form").submit();
    }
  });

 

오래된 JS코드가 섞여있는 코드

document.getElementById("btn-save").addEventListener("click", function () {
    // alert(todo.value);
    let todo_value = todo.value;

    if (todo_value == "") {
      alert("할일을 작성해주세요 :)");
      todo.focus();
      return false; // 더이상 진행하지 마라
    }

    if (confirm("저장하시겠습니까?")) {
      // 서버로 데이터를 전송하라
      document.getElementsByTagName("form")[0].submit();
    }
  });

 

  id가 지정되지 않았을 때

  tag 이름으로 찾을 경우는

  같은 이름의 tag가 여러개 있을 수 있기 때문에

  무조건 배열로 값이 추출된다.

  tag이름으로 getElements를 수행한 다음에는 배열요소를 지정하여

  어떤 tag를 선택할 지 지정을 해주어야한다.

  let btn_save = document.getElementsByTagName("button")[0];
  btn_save.addEventListener("click", function () {
    let inputs = document.getElementsByName("input");
    let todo_input = inputs[0];
    let todo_value = todo.value;

    if (todo_value === "") {
      alert("할일을 입력해 주세요 :)");
      document.getElementsByTagName("todo")[0].focus();
      return false;
    }

    if (confirm("저장하시겠습니까?")) {
      document.getElementsByName("form")[0].submit();
    }
    alert("todo_value");
  });

>> public/todo_main.js

---

 

논리연산자 설명 부분

>> eq.js