전체보기

상태 변수 data- className classList 1) 상태 변수 하나로 두 가지 결과를 얻을 때 사용한다. true, 1 / open / 텍스트 변경 / 진행 false, 0 / close / 중지 HELLO 처음 ispaly는 true이고 버튼을 클릭했을 때 isplay가 true이면 BYE를 출력함과 동시에 isplay를 false로 바꾼다. 그 뒤에 버튼을 클릭하게 되면 isplay는 false이므로 else의 실행문이 실행되어 HELLO와 BYE를 반복하며 출력하게 된다. HELLO if의 true, false 실행문에 isplay를 넣지 않고 if문이 끝난 뒤 isplay를 반대값으로 바꾸어 주는 isplay=!isplay를 사용할 수도 있다. 이렇게 되면 클릭을 하면 isplay의 값..

animate 갤러리 갤러리+animate load this target / currnetTarget 1) animate css의 animation와 동일한 효과를 script에서 줄 수 있다. const a = [ { transform: "rotate(0) scale(1)" }, { transform: "rotate(360deg) scale(0)" }, { transform: "rotate(0deg) scale(2)" }, ]; const b = { duration: 2000, iterations: 3, }; div.addEventListener('click', function(){ div.animate(a,b); }); div.addEventListener('click', function(){ div..

dom querySelector inner 속성 추가 setAttribute / getAttribute 이벤트 종료 방식 증가/감소 1) dom dom : html 안에 요소 객체를 자바스크립트로 제어 dom api : 제어할 수 있는 명령어 모음 let arr = ['1번', '2번','3번', '4번','5번']; let dom = document.getElementById('box'); let ran = Math.floor(Math.random()*arr.length); dom.innerHTML = arr[ran]; dom.style.width = '250px'; dom.style.backgroundColor = 'tan'; dom.style.height = '50px'; dom.style.text..

이차원배열 Date Math dom 1) 이차원 배열 let arr = [ [10, 20, 30], [40, 50, 60] ] // arr = [[10, 20, 30], [40, 50, 60]] 위와 같은 배열을 이차원 배열이라 한다. let a = [10, 20, 30] let b = [40, 50, 60] let arr1 = [a, b] console.log(arr1); [ [ 10, 20, 30 ], [ 40, 50, 60 ] ] 배열 두 개를 합쳐 만들 수도 있다. console.log(arr[0][0]); console.log(arr[0][1]); console.log(arr[0][2]); console.log(arr[1][0]); 10 20 30 40 첫 번째 대괄호는 행을 의미하고 두 번째 ..

at splice filter find, findIndex map forEach reduce flat every some 1) at at 메서드는 배열을 뒤에서부터 부를 때 사용한다. let arr=[10, 20, 30, 40]; console.log(arr[arr.length-1]); console.log(arr[2]); console.log(arr.at(-1)); // at : 뒤에서 부터 인덱스 카운트 console.log(arr.at(-2)); console.log(arr.at(2)); console.log(arr[-2]); // 인덱스 번호로 부를땐 음수 불가능 40 30 40 30 30 undefined 첫 번째 console.log는 arr배열의 맨 마지막 요소를 length를 사용해 출력했..

array for~in for~of join push, pop shift, unshift sort filter 1) array 비슷한 성격의 요소들을 모아둔 것을 객체라고 부른다. 객체에는 숫자, 문자, 함수, 배열, 내장객체가 모두 들어갈 수 있고 처리속도가 빠르고 유지보수가 좋아 사용한다. 배열을 만드는 형식엔 두 가지가 있다. 형식1) let 배열명 = new Array(); 배열명[0] = 값; 배열명[1] = 값; 배열명[2] = 값; 배열명[3] = 값; 형식2) let 배열명 = []; 배열명[0] = 값; 배열명[1] = 값; 배열명[2] = 값; 배열명[3] = 값; let arr = new Array(); arr[0] = 10; arr[1] = 20; arr[2] = 30; arr[3]..

charAt slice substring toLowercase / toUppercase concat trim indexOf search includes split replace padstart 1) charAt charAt() 함수는 문자열에서 특정 위치(index)에 있는 문자를 반환할 때 사용한다. 반환된 값은 문자(string)로 인식된다. 'use strict'; let str = '안녕하세요'; console.log(`${str.length}`); console.log(`${str.charAt(0)}`); console.log(`${str.charAt(1)}`); console.log(`${str.charAt(2)}`); console.log(`${str.charAt(3)}`); console...

input 1) input 꾸미기 검색 html로 button을 추가하고 xi 폰트 아이콘을 불러온다. 그리고 css로 기존의 input의 border과 background를 보이지 않게 하고 form을 감싸고 있는 div에 원하는 색을 추가한다. 전체 제목 제목/본문 검색 위와 같은 방식으로 xi 아이콘을 불러오고 기존 input의 css를 제거한다. * .search-wrap .search-form input:focus { outline: none; } outline : none를 추가하면 input을 클릭했을 때 생기는 테두리를 제거할 수 있다.

setInterval dom 객체 length 1) setInterval 어제 잠깐 배웠던 setInterval를 활용해 간단한 출력을 해보았다. make함수를 1000(1초)의 인터벌을 두어 호출하게 된다. 처음엔 0이었던 cnt가 출력이 되고 ++로 인해 1씩 늘어나 출력이 된다. 2-1) dom#1 button인 btn을 click 하면 dom인 box안에 안녕이 추가된다. 2-2) dom#2 let dom = document.querySelector('.box'); let btn1 = document.querySelector('.btn1') let btn2 = document.querySelector('.btn2') let cnt = 0; let timerID = null, interval = 1..