1) FORM/ INPUT
form태그는 사용자 입력을 수집하는데 사용하는 양식을 의미한다. html에서 다른 페이지(서버)에 정보를 보낼 때 사용된다.
input은 type속성에 따라 여러가지 방법으로 표시될 수 있다.
- input type="button" 단순한 푸쉬 버튼으로 렌더링 된다.
<input class="favorite styled"
type="button"
value="Add to favorite">- input type="submit" 클릭버튼이 만들어지는데 서버에 폼을 제출하는 식으로 만들어짐
<input type="submit" value="Send Request">
- input type="text" 텍스트를 집어넣을 수 있는 빈칸이 생긴다.
2. .innerText
자바스크립트 코드로 div, p태그 내부글 등을 가져올 때 innerText,innerHTML을 사용한다.(innerHTML은 보안이 취약하고 성능이 안좋음)
<div id="task">소설읽기</div>
<script>
var task= document.getElementByld('task').innerText='<h3>만화보기</h3>
</script>
//결과
<h3>만화보기</h3>
태그 포함한 문자열 그대로 출력innerHtml의 경우,
var task=document.getElementByld('task').innerHTML='<h3>만화보기</h3>
//결과 만화보기 (문자열을 html로 인식해 출력)3.Local Storage
로컬 스토리지 사용이유?
HTTP 요청에서 데이터를 주고받지 않고 LocalStorage를 이용하면 클라이언트와 서버간의 전체 트래픽과 낭비되는 대역폭의 양을 줄일 수 있다.
데이터가 유저의 로컬 디스크에 저장되어 있으면 인터넷이 끊어져도 데이터가 삭제되거나 지워지지 않기 때문이다.
또한 LocalStorage는 최대 5MB의 정보를 저장할 수 있습니다.
Local storage읽기 전용 속성을 사용하면 document출처의 storage객체에 접근할 수 있다.
저장한 데이터는 브라우저 세션 간에 공유된다.
로컬 스토리지는 window.localStorage에 위치한다. 키 벨류 저장소이기에 키와 벨류를 순서대로 저장. 값으로는 문자열, 불린, 숫자 등을 저장할 수 있지만 모두 문자열로 변환된다.
현재 도메인의 로컬 storage객체에 접근한 후, storage.setItem()을 사용해 항목 하나를 추가
localStorage.setItem('myCat','Tom');
위에서 추가한 localStorage항목을 읽는 방법은 다음과 같다.
const cat= localStorage.getItem('myCat');'
제거는 아래와 같다.
localStorage.removeItem('myCat');
메소드를 다시 간단히 정리해보면 localStorage.setItem(키,값)으로 로컬스토리지에 저장한 후,
localStorage.getItme(키)로 조회하면 된다. localStorage.removeItem(키)하면 해당 키가 지워지고 localStorage.clear()하면 스토리지 전체가 비워진다.
4. element.classList
이것은 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기전용 프로퍼티이다.
classList사용은 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법
const elementClasses= elementNodeReference.classList;element.classList 그자체는 읽기 전용 프로퍼티지만 add(),remove()메소드를 이용해 변형가능
add는 클래스를 필요에 따라 삽입한다는 의미, remove는 클래스를 필요에 따라 제거한다는 의미
5. Event Listener
이벤트가 발생했을 때 그 처리를 담당하는 함수, 이벤트 핸들러라고도 한다.
그렇다면 이벤트는 무엇인가?
사용자가 어떤 결과를 유발시킬만한 행동을 하는 것이다. 예를 들면 사용자가 특정 버튼을 클릭하면 경고창을 뜨게 한다거나,페이지를 넘긴다거나 하는 경우가 이벤트를 활용하는 경우.
addEventListener(이벤트 종류,함수이름)
removeEventListener(eventType, listenerFunction)
dispatchEventListener(event)
addEventListener등으로 등록할 수 있는 이벤트는 아래와 같음
change/ 변동이 있을 때 발생
click/클릭 시 발생
load/로드가 완료되었을 때 발생
mousedown/마우스 클랙했을 때 발생
mousemove/마우스가 움직였을 때 발생
mouseup/마우스가 움직였을 때 발생
출처 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
