자바스크립트 기기기초 (29) 썸네일형 리스트형 #4.6 Loading Username 반복되는 string은 변수로 저장 Username을 기억해두고 새로고침해도 사라지지 않도록 저장하기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; //string만 포함된 변수는 대문자로 표기 const USERNAME_KEY = "username"; function onLoginSubmit(event){ const userNameType = loginInput.value; ev.. #4.3 Events part Two addEventListener안에 있는 함수는 직접 실행하지 않음, 브라우저가 실행시켜 주는 것, 실행하면서 event에 관한 정보도 담아줌 정보를 담아줄수 있는 파라미터를 만들고, 그 파라미터는 preventDefault처럼 몇가지 함수도 실행가능함 const link = document.querySelector("a"); function onLinkClick(event){ event.preventDefault(); //링크를 클릭하면 해당사이트로 이동하는 기본동작을 막음 console.dir(event); } link.addEventListener("click",onLinkClick); #4.2 Events 모든 EventListener function의 첫번째 파라미터는 항상 방금 발생한 event들에 관한 정보임 submit되면 페이지 전체가 새로고침되는 기본 동작 막기 기본행동 : 어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작 const loginForm = document.querySelector(".login-form"); const loginInput = document.querySelector(".login-form input"); function onLoginSubmit(event){ //함수의 파라미터를 명시해주면(어떤이름이든 상관x) 자바스크립트에서 event를 채워줌 event.preventDefault(); // 어떤 이벤트의 기본 행동이 발생하지 않게 막는 것 //form을 s.. #4.1 Form Submission js로 username의 유효성 검사 function LoginButtonClick(){ const username = loninInput.value; if(username === ""){ //username이 공백이라면 alert("이름을 입력해 주세요."); }else if(username.length > 15){ //username의 길이가 15를 넘는다면 alert("이름이 너무 길어요"); } } html을 활용해서 username의 유효성 검사 -> input의 유효성을 검사하려면 input은 form안에 위치해야 함 form안에서 enter를 누르고 input이 더이상 존재하지 않으면 submit form안에 있는 버튼을 눌렀을 때도 form은 자동으로 submit -> 더 이상 click에.. #4.0 Input Values 요소 찾기 const loginForm = document.getElementById("login-form"); //html에서 login-form(html element)을 찾음 const loninInput = loginForm.querySelector("input"); const loninButton = loginForm.querySelector("button"); 로그인버튼 눌러서 값 가져오기 Log In const loninInput = document.querySelector(".login-form input"); //왜 .으로 해야 에러가 안뜨지 const loninButton = document.querySelector(".login-form button"); function LoginBu.. #3.8 CSS in Javascript part Three classList로 클래스 이름을 바꾸는 것이 아닌 classname 목록들 관리하기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked"; if(h1.classList.contains(clickedClass)){ //classList가 clickedClass를 포함하고 있다면 h1.classList.remove(clickedClass); //classList에 clickedClass를 제거 }else{ //포함하고 있지 않다면 h1.classList.add(clickedClass);//classList에 clickedClass를 추가 } } h1.addEventListener.. #3.7 CSS in Javascript part Two Click Me! //js파일 연결 body{ background-color: beige; } h1{ color: blue; transition: color.5s ease-in-out; } .clicked{ /*clicked라는 이름의 클래스 생성*/ color: tomato; } .sexy-font{ font-family: 'Courier New', Courier, monospace; } const h1 = document.querySelector(".hello h1"); function mouseClick(){ const clickedClass = "clicked sexy-font"; //string을 변수에 저장해서 이름 잘못쳐서 에러날수 있는거 방지 if(h1.className === clicke.. #3.6 CSS in Javascript 조건문으로 색 바꾸기 const h1 = document.querySelector(".hello h1"); function mouseClick(){ const currentColor = h1.style.color; let newColor; if(currentColor === "blue"){ newColor = "tomato"; }else{ newColor = "blue"; } h1.style.color = newColor; } h1.addEventListener("click",mouseClick); 핵심은 요소를 찾고, 이벤트 추가하고, 함수로 반응만들기 이전 1 2 3 4 다음