20220308 JavaScript, Dom, LocalStorage

JavaScript

• 객체지향
• 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
• HTML에서 <script> 태그를 사용
  • src와 type 속성을 사용하여 JavaScript를 선언
• 모든 변수는 var keyword를 사용
  • 변수의 타입지정 없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정
• console.log() 함수를 이용해 브라우저 콘솔창에 결과 출력
• timeout : 특정 milliseconds후에 한번만 호출
• setInterval() : 특정 milliseconds 주기마다 호출
• `을 이용하여 간단하게 문자열 출력
• boolean ⇒ 비어 있는 문자열, null, undefined, 숫자 0은 false로 간주됨
• null : 값이 없거나 비어 있음
• undefined : 값이 초기화 되지 않았음
• 변수 호이스팅(Variable Hoisting)
  • var 키워드를 사용한 변수는 중복해서 선언이 가능
  • 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성
    • ⇒ Javascript는 모든 선언문이 선언되기 이전에 참조가 가능
• 상수 사용 : const 혹은 let
• 연산자
  • == : 값이 일치하는지 확인
  • === : 값이 일치하는지 확인 (타입 포함)

함수

• JS에서 함수는 일급 객체로서 함수를 변수, 객체 , 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달 인자 또는 리턴 값으로 사용 가능함
• 함수 호이스팅 : 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능
• 콜백 함수
  • 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을떄 시스템에 의해 호출되는 함수
  • 일반적으로 매개변수를 통해 전달되고, 어느 특정시점에 실행됨

Web Browser와 Window 객체

• window 객체 사용
  • alert( ) : 브라우저의 알림창
  • confirm( ) : 브라우저의 확인/취소 선택창
  • prompt( ) : 브라우저의 입력 창
  • open( ) : 새 창 열기

DOM ( Document Object Model )

• HTML과 XML문서의 구조를 정의하는 API를 제공
• 문서 요소 집합을 트리 형태의 계층 구조로 HTML을 표현
• 최상위 루트에는 document 노드가 있다.

문서 객체 만들기

• 문서 객체는 text node를 갖는 객체와 갖지 않는 객체로 나뉨
• createElement(tagName) : element node를 생성
• createTextNode(text) : text node를 생성
• appendChild(node) : 객체에 node를 child로 추가
• setAttribute(name, value) : 객체의 속성을 지정
• getAttribute(name) : 객체의 속성값을 가져옴
• innerHTML : 문자열을 HTML태그로 삽입
• innerText : 문자열을 text node로 삽입

문서 객체 가져오기

• getElementById(id) : 태그의 id속성이 일치하는 element 객체 얻기
• getElementsByClassName(classname) : lass 속성이 일치하는 element 배열 얻기
• getElementsByTagName(tagname) : tagname과 일치하는 element 배열 얻기
• getElementsByName(name) : name 속성이 일치하는 element 배열 얻기
• querySelector(selector) : selector에 일치하는 첫번째 element 객체 얻기
• querySelectorAll(slecttor) : selector에 일치하는 모든 element 배열 얻기

EVENT

• 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트 발생

mouse event

• onclick : 클릭시
• ondblclick : 더블클릭시
• onmouseup : 마우스 버튼을 올렸을 때
• onmousedown : 마우스 버튼을 눌렸을 때
• onmouseover : 마우스 커서가 element 안으로 들어올 때
• onmouseout : 마우스 커서가 element 밖으로 나갈 때
• onmousemove : 마우스를 움직일 때

keyboard event

• onkeypress : 키보드가 눌려 졌을 때 (ASCII)
• onkeydown : 키보드를 누르는 순간 (KeyCode)
• onkeyup : 키보드키가 올라올 때
• 이벤트 핸들러 프로퍼티 방식
  • DOM 명령어를 이용하여 이벤트 핸들러를 등록
• addEventListener 방식
  • 이벤트 핸들러 내부에서 함수를 호출하는 방식으로 인수 전달

Web Storage

• WebStorage API : LocalStorage
  • 데이터를 사용자 로컬에 보존하는 방식
  • 데이터를 저장, 덮어쓰기, 삭제 등 조작 가능
  • JS로만 조작
• Cookie와의 차이점
  • 유효 기간이 없고 영구적으로 이용가능
  • 네트워크 요청 시 서버로 전송되지 않음
  • 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없음 ( JS로만 가능 )
• LocalStorage, SessionStorage 기본 구성
  • 키와 값을 하나의 세트로 저장
  • 도메인과 브라우저별로 저장
  • 값은 반드시 문자열로 저장됨
• 공통 메소트와 프로퍼티
  • setItem(key, value) : key-value를 쌍으로 저장
  • getItem(key) : key에 해당하는 값을 리턴
  • key(index) : index에 해당하는 key