노마드코더 클론코딩 크롬앱 만들기 #1 로그인화면
*Form은 submit이라는 이벤트를 가짐
<변수명>
var: 통합(구), const:바뀌면 안되는 변수명일 때(신), let: 바뀔 수도 있는 변수명일 때 (신)
var const let
<element가져오기>
getElementById는 Id명 hello인 element가져오기
querySelector는 CSS notation으로 가져옴 (첫번째 것만 가져옴 -> h2태그의 id hello인 것 가져옴)
querySelectorAll은 모든 값 가져옴 -> class name이 hello인 모든 값 가져옴).getElementById(hello); .querySelector(h2#hello); .querySelectorAll(.hello);
변수 hahaha를 string으로 바꿔주고 싶을 때
`${hahaha}`
<스트링 변수에 저장>
중복 사용되는 string은 오타방지를 위해 변수에 넣어줌. 이때 변수명은 중요한 역할을 하는 변수가 아니므로 대문자로 해주는 것이 일반적.
const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username";
<class값 추가 삭제>
Greeting이라는 변수에 HIDDEN_CLASSNAME변수라는 이름으로 클래스를 추가해줌:add, 삭제해줌:remove
loginForm.classList.add(HIDDEN_CLASSNAME); greeting.classList.remove(HIDDEN_CLASSNAME);
<값 저장 / 이벤트 감지>
username이라는 변수에 loginInput변수의 값을 할당해줌
submit이라는 Event를 감지하여 onLoginSubmit이라는 함수를 실행시켜주기const username = loginInput.value; loginForm.addEventListener("submit", onLoginSubmit);
<localStorage 저장/ 불러오기/ inner 텍스트추가>
localstorage에 키,값 저장하기:setItem, 불러오기:getItem
greeting이라는 변수 안에 "Hello "+ username 이라는 텍스트 추가해주기 (username 변수는 String으로 바꿔주기)localStorage.setItem(USERNAME_KEY, username); const savedUsername = localStorage.getItem(USERNAME_KEY); greeting.innerText = `Hello ${username}`;
Author And Source
이 문제에 관하여(노마드코더 클론코딩 크롬앱 만들기 #1 로그인화면), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@xxhaileypark/노마드코더-클론코딩-크롬앱-만들기-1-로그인화면저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)