브라우저에서의 자바스크립트 Javascript in Browser

[HTML에 연결]

~/app/public$ vi index.html

  HTML 문서의 body 제일 마지막에 넣어준다.

<script src="/script/index.js"></script>

~/app/public$ mkdir script
~/app/public/script$ vi index.js

alert("HTML과 JAVASCRIPT가 연결됐습니다!");

[페이지 이동]

location.href="/주소";

[localStorage 사용법]

// 키에 데이터 쓰기
localStorage.setItem("key", value);

// 키로 부터 데이터 읽기
localStorage.getItem("key");

// 키의 데이터 삭제
localStorage.removeItem("key");

// 모든 키의 데이터 삭제
localStorage.clear();

// 저장된 키/값 쌍의 개수
localStorage.length;

  localStorage에 접근은 서버에서 하는 것이 아니라, 클라이언트에서 하는 것이다. 저장되면 해당 도메인내에서는 어디서든 적용된다.

[DOM 제어]

2. 이벤트 발생 시키기

*인라인

<button onclick="fnTest()">클릭</button>

*리스너

var item = document.getElementById("item");
item.addEventListener("click", fnTest);

3. 추가하기

var list = document.createElement("li"); //엘리먼트 생성
var node = document.createTextNode("list"); //텍스트 노드 생성
list.appendChild(node); //엘리먼트에 텍스트 노드 추가
var element = document.getElementById("ul-1"); //엘리먼트 선택
element.appendChild(list); //엘리먼트에 엘리먼트 추가

---

[테이블 제어]

1. 행, 열 추가

1) 끝에 추가

function addRow() {
  // table element 찾기
  const table = document.getElementById('fruits');
  
  // 새 행(Row) 추가
  const newRow = table.insertRow();
  
  // 새 행(Row)에 Cell 추가
  const newCell1 = newRow.insertCell(0);
  const newCell2 = newRow.insertCell(1);
  
  // Cell에 텍스트 추가
  newCell1.innerText = '새 과일';
  newCell2.innerText = 'New Fruit';
}

2) 중간에 추가

function addRow() {
  // table element 찾기
  const table = document.getElementById('fruits');
  
  // 새 행(Row) 추가 (테이블 중간에)
  const newRow = table.insertRow(1);
  
  // 새 행(Row)에 Cell 추가
  const newCell1 = newRow.insertCell(0);
  const newCell2 = newRow.insertCell(1);
  
  // Cell에 텍스트 추가
  newCell1.innerText = '새 과일';
  newCell2.innerText = 'New Fruit';
}

2. 행, 열 삭제

HTMLTableElement.deleteRow(index);
//index 가 -1이면 테이블의 가장 마지막 행

---

[fetch]

* form 양식대로 POST 전달하기

function fnLogin() {
  let member;
  fetch("/login", {
    method: "POST",
    headers: {"content-type": "application/x-www-form-urlencoded"},
    body: new URLSearchParams(new FormData(document.getElementById("frm")))
  })
    .then(res => res.json())
    .then(pJSON => {
      member = pJSON;
      alert(member.member_id);
    })
}

---

[쿠키]

* 쿠키 생성

setCookie("쿠키명", 쿠키값, 저장기간[일])

* 쿠키 가져오기

getCookie("쿠키명")

---

[플랫폼 확인]

var isMobile = false;
// PC 환경
var filter = "win16|win32|win64|mac|macintel";
if (navigator.platform) {
    isMobile = filter.indexOf(navigator.platform.toLowerCase()) < 0;
}

  혹은

function isMobile(){
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
}

  PC 환경에서도 모바일 환경 테스트를 하길 원한다면 아래 방법을 사용하고, PC 환경에서는 모바일 환경으로 접속되지 않길 원한다면 위의 방법을 사용하자.