[강의정리]자바스크립트를 이용한 정보 수집

HTML)input태그.value

querySelector 혹은 getElement 메서드를 통해 input태그를 선택하면, .value를 통해 input태그에 입력된 값에 접근할 수 있다.

HTML)form태그.addEventListener('submit', f());

form을 제출하는 동작이 발생하면, 해당 동작을 감지하여 함수를 실행시킨다. submit은 일반적으로 form 안의 button태그를 눌렀을 때 발생하며, button 태그의 type을 통해 지정할 수 있으며 기본값이 submit이다.

HTML)이벤트함수의인자.preventDefault();

해당 이벤트와 관련하여 기본적으로 설정된 동작을 실행하지 않도록 한다. form이 submit동작을 진행하고 새로고침하는 동작을 막을 수 있다.

display:hidden을 이용한 동작

특정 이벤트 혹은 동작 후에 컴포넌트를 캄추기 위해 클래스를 생성하여(일반적으로 많이 붙이는 이름은 hidden) HTML태그.classList.add("hidden")을 통해 감출 수 있다.

JavaScript) 템플릿 리터럴

내장된 표현식을 허용하는 문자열 표기법이다. 일반적인 문자열이 작은따옴표 혹은 큰 따옴표로 감싸는 것과 달리 백틱(`)으로 감싸며 ${}의 중괄호 안에 작성된 내용은 내장된 자바스크립트 표현식으로 인식된다.

브라우저) localStorage

브라우저에서 제공하는 저장소로, 유저 정보와 같이 용량이 작은 데이터를 보관할 수 있다. 해당 값은 키-벨류 값으로 저장된다.

브라우저) localStorage.setItem('keyName', 'value')

keyName값으로 value값을 localStorage에 저장한다.

브라우저) localStorage.getItem('keyName')

localStorage에서 keyName으로 저장된 value값을 찾아 반환한다.

마무리

form 태그와 친해지는 시간