이차원배열 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..

select 꾸미기 checkbox 박스 꾸미기 radio 박스 꾸미기 1) select 꾸미기 네이버 다음 구글 아마존 .box2 { background-repeat: no-repeat; background-position: 210px 50%; background-image: url(images/select-bg.gif); } .box1, .box3 { width: 250px; height: 50px; margin: 30px; position: relative; } .box1 button { position: absolute; width: 30px; height: 30px; background-repeat: 50%; right: 20px; top: 50%; transform: translateY(-50..

재귀함수 고차함수 내장함수 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 ..

form 1-1) form#1 form은 회원가입, 로그인 게시글 등록 등을 위해 사용한다. 회원가입 text password checkbox tel file color date month number submit input type에 입력받고자 하는 형식을 적절하게 찾아 사용하면 된다. 날짜를 사용하면 날짜 형식과 달력이 추가로 나오게 된다. pssword는 기본적으로 작성 내용이 ***처리되어 표시된다. 1-2) form#2 예제1 아이디 size : 입력 박스 크기 설정 maxlength : 최대 입력 글자 수 title : 접근성용 placeholder : 입력 박스에 나타나 있는 안내글 (위의 경우 아이디, 비밀번호 입력에 해당) required : 필수 사항 (입력하지 않으면 submit이 되..