자바스크립트 (15) 썸네일형 리스트형 JAVASCRIPT ) 클릭했을 때 class 추가하고 재클릭하면 다시 없애기 글자를 클릭하면 주황색, 다시 클릭하면 파랑색, 다시 클릭하면 주황색... 무한 반복되는 예제이다.클릭하면 태그의 class에 active를 추가하고 다시 클릭하면 active를 삭제하고, 다시 클릭하면 추가하는..무한 반복되는 방식이다. const h1 = document.querySelector("h1");function clickEvent(){ if(h1.className === "active"){ h1.className = ""; } else { h1.className = "active"; }}h1.addEventListener("click", clickEvent); 위 예제는 스트링 "active"가 반복된다. 예제에서는 상관없겠지만 코드가 길어지고, class이름이 수정 .. Javascript addEventListener() - 이벤트 리스너 사용법과 종류 addEventListener() addEventListener()는 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다. 아래의 title이라는 변수(h1)를 addEventListener() 메소드를 사용하여 클릭이벤트 유형을 지정하고 클릭할 때 마다 clickEvent() 함수가 호출되도록 만든 예제입니다. const title = document.querySelector("h1"); function clickEvent(){ title.style.color = "blue"; } title.addEventListener("click", clickEvent); addEventListener() 대신? addEventListener() 대신 on으로 시작하는 메소드(?)를 써도.. Javascript document - HTML 요소 선택 메소드 document : HTML과 상호작용을 가능하게 해주고 브라우저에서 사용할 수 있는 객체 getElementbyId() : document 함수, HTML에서 id 속성을 통해 element를 찾습니다. id는 한 HTML안에 중복될 수 없습니다. 만약 주어진 id와 일치하는 element가 없으면 null을 반환합니다. document.getElementById(id); getElementbyClassName() : HTML에서 class 속성을 통해 element를 찾습니다. 배열을 반환합니다. document.getElementByClassName(class); getElementsByTagName() : div, li, p 와 같은 특정 태그명을 통해 element 의 집합을 가져오는 함수입니다.. Javascript 연산자 - 논리 연산자 논리 연산자 논리 연산자는 보통 불리언(true / false) 값과 함께 사용해서 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 사실 두 피연산자 중 하나를 반환하는 것으로, 만약 둘 중 하나가 불리언 값이 아니라면 논리 연산자의 반환 값도 불리언 값이 아닐 수 있습니다. 연산자 사용법 설명 논리 AND (en-US) (&&) expr1 && expr2 expr1을 false로 변환할 수 있으면 expr1을 반환합니다. 그 외의 경우에는 expr2를 반환합니다. 따라서 불리언 값과 함께 사용한 경우, 둘 다 참일 때 true를, 그 외에는 false를 반환합니다. 논리 OR (en-US) (||) expr1 || expr2 expr1을 true로 변환할 수 있으면 expr1을 반환합니다. 그 외.. Javascript 연산자 - 산술 연산자 산술 연산자 산술 연산자는 두 개의 숫자 값을 피연산자로 받아서 하나의 숫자 값을 반환합니다. 표준산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 입니다. 연산자 설명 예제 나머지 (%) 이항 연산자입니다. 두 피연산자를 나눴을 때의 나머지를 반환합니다. 12 % 5 는 2를 반환합니다. 증가 (en-US) (++) 단항 연산자입니다. 피연산자에 1을 더합니다. 전위 연산자(++x)로 사용하면 피연산자에 1을 더한 값을 반환합니다. 반면 후위 연산자(x++)로 사용한 경우 피연산자에 1을 더하기 전의 값을 반환합니다. x가 3일 때, ++x는 x에 4를 할당한 후 4를 반환합니다. 반면 x++는 3을 먼저 반환한 후 x에 4를 할당합니다. 감소 (en-US) (--) 단항 연산자입니다.. Javascript 연산자 - 비교 연산자 비교 연산자 비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반환합니다. 피연산자로는 숫자, 문자열, 논리형, 객체 값을 사용할 수 있습니다. 문자열은 Unicode 값을 사용한 표준 사전식 순서를 기반으로 비교합니다. 만약 두 피연산자가 서로 다른 타입일 경우, 자바스크립트가 피연산자를 비교하기에 적합한 타입으로 변환하며, 대개 숫자로 변환해 비교하는 결과를 낳습니다. 비교 연산에서 발생하는 타입 변환의 유일한 예외는 === 와 !== 연산자를 사용해 엄격 일치와 불일치 비교를 수행하는 경우입니다. 두 연산자는 비교하기 전에 피연산자를 변환하려는 시도를 하지 않습니다. var var1 = 3; var var2 = 4; 연산자 설명 true를 반환하는 예제 동등 (==) 피.. Javascript 연산자 - 연산자란? 연산자란 연산자란 프로그래밍에서 쓰이는 기호를 말합니다. 자바스크립트는 이항 연산자와 단항 연산자를 포함함며, 유일한 삼항 연산자로는 조건 연산자도 가지고 있습니다. 이항 연산자 이항 연산자는 연산자의 앞과 뒤에 하나씩 피연산자가 필요합니다. 피연산자1 연산자 피연산자2 ex) x + y 단항 연산자 단항 연산자는 연산자의 앞이나 뒤에 하나의 피연산자가 필요합니다. 연산자 피연산자 ex) ++x 피연산자 연산자 ex) x++ 할당 연산자 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값이 할당하는 등호(=)로, x=y는 y의 값을 x에 할당합니다. 복합 할당 연산자 복합 할당 연산자는 연산과 할당을 동시에 수행합니다. 단축 .. Javascript 함수 - isNaN() isNaN() 숫자가 아닌게(NaN)이 맞는지(true) 아닌지(false) boolearn값으로 반환함 const age1 = 15; const age2 = "열다섯"; if (isNaN(age1)) { console.log("NaN이 맞습니다."); } else { console.log("NaN이 아닙니다."); } if (isNaN(age2)) { console.log("NaN이 맞습니다."); } else { console.log("NaN이 아닙니다."); } if문 if(조건 코드) { 조건 코드가 참일 때 실행할 코드; } else { 조건 코드가 거짓일 때 실행할 코드; }; 이전 1 2 다음
