🔥 부트캠프-웹 개발 🔥/JavaScript

상태 변수 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...

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..

재귀함수 고차함수 내장함수 1) 재귀함수 재귀함수는 함수 안에서 자기 자신을 호출하는 함수이다. let cnt = 1; const fn=()=>{ console.log(`${cnt}번 호출`); cnt++; if(cnt>5){ return; } fn(); } fn(); 1번 호출 2번 호출 3번 호출 4번 호출 5번 호출 fn함수를 정의한 뒤 맨 밑에서 호출을 하면 if문을 만족할 때까지 계속 실행하게 된다. 'use strict'; const fn = num =>{ console.log(`${num} 호출`); num--; if(num==0){ console.log(`${num} 호출 중단`) return } fn(num); } fn(10); 10 호출 9 호출 8 호출 7 호출 6 호출 5 호출 4 ..