JavaScript (16) 썸네일형 리스트형 [JavaScript] 중복되는 string 값들은 하나의 변수로 관리하자/ innerText() 반복되는 문자열의 경우 대문자 변수로 저장해서 사용하는게 좋다. 그래야 오타로 인한 실수를 줄일 수 있고 무엇보다 변수로 선언해서 활용하면 좋은 이유는 실수가 나더라도 콘솔창에서 오류를 발생시켜 준다는 것이다. 대문자 변수로 저장해 놓는다면, 실수를 만들고 싶지 않은 문자열 변수라는 것을 명목적으로 표기해 줄 수도 있는 것이다. 태그 안에 string을 넣어주고 싶을때, Element.innerText를 사용해준다. const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#.. [JavaScript] 백틱을 이용한 문자열 결합 & localStorage 일반적으로 문자열(string)만 담고 있는 변수는 대문자(Upper Case)로만 적어주는 관습이 있다. 여러분 자판의 `` (백틱)이라는 게 있다 물결기호(~) 누를때 그 위치, ESC 바로 밑의 위치이다. (' , " 따옴표나 쌍따옴표가 아니다) string 을 담은 변수를 다른 string 과 결합하고 싶을때 + 를 쓸 수도 있지만 `hello ${변수명}` 이렇게 백틱 안에서 변수명을 중괄호와 달러사인을 이용해 호출해 줄 수가 있다. 이렇게 하면 문자열에 변수값을 반영해준다. Log In const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input.. [JavaScript] event[2] - EventListener, preventDefault 가끔은 event 의 기본 동작을 막아줘야 할때가 있다. 뭐가 클릭됐는지, 어디가 클릭됐는지와 같이 말이다. eventListenr 함수의 두번째 인자로 함수'명'만 주고 () 소괄호는 치지 않는 것은, 소괄호를 치면 한번 실행되고 끝인건데 실행하는 건 JS의 몫이다. JS는 이벤트리스너 함수의 첫번째 인자에 방금 일어난 일에 대한 정보를 Object 형태로 담아준다. function handleClick(event){ } element.addEventListener("type of event ex. click", handleClick) handleClick({information about the event that just happened}) 방금 일어난 이벤트에 대한 정보가 담긴 Object는 Ja.. [JavaScript] event : eventListener function,event, preventDefault() 1. 모든 것은 HTML에서 시작한다 2. 그리고 HTML의 element를 가져오고 3. 그 다음 JS 로 이것저것 해주는 것이다. Element 의 내부를 보고 싶으면 콘솔창에서 그 변수를 입력해서, 그것이 Object 형태의 하나임을 깨닫고 내부에서 필요로 하는 Property 한 항목을 가져와 활용하면 된다. input 태그의 입력값을 확인해 줄때 이미 HTML에 있는 기능들을 사용해 줄 수 있다 required MaxLength = 15 등등 그것을 해주는 게 form 이다. form 은 submit 된다. button 의 클릭 여부 보다 submit 의 여부가 더 중요해 졌다. submit 이벤트라는 것은 엔터를 누르거나 버튼을 누를 때 발생하는 것이다. eventListener 안에 소괄호를.. [JavaScript] HTML classList.toggle()로 클래스 추가/수정 className 을 통한 수정은 이전의 class 가 무엇있던지 관계없이 전부다 수정해버린다. 기존의 것을 두고 일부의 class를 추가하거나 수정하는 것에는 적합하지 않다. 그럴때 사용할 수 있는 것이 classList 이다 Element.classList.contains("") Element.classList.remove("") Element.classList.add("") 이러한 특정 class의 유무를 따져서 동작을 해주는 경우가 많다 if 문의 5줄의 코드를 요약해 줄 수 있는 기능의 함수가 classList에 있다 바로 toggle Element.classList.toggle() 클래스명을 인자로 주면, 클래스가 있는지(if ~ contains) 판단해서 없으면 추가(add)해주고, 있으면 .. [JavaScript] CSS 와 JavaScript의 분리/ 코드 작성법 style 에서 하는 게 좋다. 다른 종류의 코드들과 섞이지 않게 1. element를 찾아라 2. event 를 listen 해라 3. 그 event에 반응해라 style 이 JavaScript 안에 있는 것은 그렇게 현명한 방법이 아니다. style 작업에 적합한 도구는 CSS이다. animaition에 적합한 것은 JavaScript이고 이제 자바스크립트는 CSS와 직접 대화하지 않게 되었다. JavaScript 는 HTML 을 변경하고(.className) CSS 는 HTML을 바라보고 있다. 조건문을 추가해주어 클릭시 클래스 추가 및 삭제를 해주었다. CSS의 transition 갑을 주어 부드러운 색 전환을 할 수도 있다. active 라는 클래스 이름은 raw value라고 하는 개발자가 정.. [JavaScript] Event 의 종류 찾는 법 listen 하고 싶은 event를 찾는 가장 좋은 방법은 MDN Web APIs HTMLHeadingElement - Web APIs | MDN 여기에 가서도 볼 수 있지만 console.dir("대상 엘리멘트") 를 통해 on~ 으로 시작하는 property가 다 event listener들의 종류들이다. 따라서 이거를 on을 제외한 뒤의 구문들을 가져와 addEventListenr("여기에", 리스너 동작 함수) 넣어주면 된다. title 이란 element 객체 안에 다양한 on ~~~ 프로퍼티를 볼 수 있다. 이 중에서 mouse 와 관련된 event를 찾아 JavaScript 파일에 추가해보겠다. const title = document.querySelector(".hello h1"); // .. [JavaScript] Event Listener, 자바스크립트의 진짜 역할addEventListener() event를 listen 한다. listening for event event : 클릭을 하거나, 커서가 위로 올라가거나, 입력을 끝내거나, enter를 누르는 것, 와이파이 연결이 끊기는 것 까지도 JavaScript에서는 이러한 Event 들을 Listen 할 수 있다. addEventListener() const title = document.querySelector(".hello h1"); title.addEventListener("click") 자바스크립트는 누군가가 title 을 click 하는 것을 Listen 하게 된다. const title = document.querySelector(".hello h1"); function handleTitleClick() { console.log("T.. 이전 1 2 다음
