자바스크립트 기초

변수선언

var 변수명; // 중복선언가능, 함수로 구분, 호이스팅가능
let 변수명; // 중복불가, 블록으로 구분({}), 호이스팅불가
const 상수명; //

데이터 타입

var 변수명 = ["a", "b"]; // 배열 데이터 생성
document.write(변수명[0]); // 배열 데이터 출력
변수명[0] = "데이터"; // 배열 데이터 변경

불린

&& : 왼쪽이 true = 오른쪽값, 왼쪽 false = 왼쪽값
|| : 왼쪽이 true = 왼쪽값, 왼쪽 false = 오른쪽값
?? : 왼쪽이 null,und = 오른쪽값, 왼쪽 아니면 = 왼쪽값

문자열

document.write(변수명.Length); // 변수길이 출력
document.write(변수명.charAt(n)); // n번째 데이터 확인
document.write(변수명.split("n")); // n으로 문자열 나누기
변수명.trim(); //양쪽 공백 지우기
변수명.replace(/ /g1, ''); //모든 공백 지우기
변수명.toUpperCase(); // 대문자로 바꾸기
변수명.toLowerCase(); // 소문자로 바꾸기
변수명.slice(시작수, 끝나는수); // 시작수부터 끝나는수까지 잘라오기

Math

Math.abs(숫자); // 절댓값
Math.max(여러가지 수); // 여러가지 수 중 가장 큰 값 리턴
Math.min(여러가지 수); // 여러가지 수 중 가장 작은 값 리턴
Math.ceil(숫자); // 올림값
Math.round(소수); // 반올림
Math.floor(숫자); // 내림값
Math.random(); // 임의의 숫자
Math.pow(x, y); // x의 y승
Math.sprt(숫자); // 숫자의 제곱근

객체

데이터이름: key, 프로퍼티 네임
데이터: value, 프로퍼티 밸류

자료형 변수명 = { 
데이터이름: '데이터1', //속성(프로퍼티)
데이터이름: 1234
}

변수명.데이터네임 // 데이터 접근
변수명['데이터네임'] // 데이터 접근

변수명.추가할 데이터네임 = '추가할 데이터' // 데이터 추가
변수명['추가할 데이터네임'] = '추가할 데이터' // 데이터 추가

delete 변수명.데이터네임 // 데이터 삭제

console.log('확인할데이터' in 변수명) // 데이터 있는지 확인
console.log(변수명.확인할데이터 !== undefined) // 데이터 있는지 확인

Object.assign({}, 변수명); // 객체 복사

객체 메소드

자료형 변수명 = {함수1: function(){}, 함수2: function(){} }; // 메소드 만들기
변수명.함수명(); // 메소드 호출
변수명['변수명'](); // 메소드 호출

배열

자료형 배열명 = ['요소1', '요소2']; // 배열 만들기
배열명[index] // 요소 접근
배열명.length // 요소 갯수
배열명['length'] // 요소 갯수
배열명[추가할 자리] = '요소'; // 요소 추가
배열명.splice(삭제시작할자리, 삭제할갯수, '추가할요소1', '추가할요소2'); // 요소삭제 또는 추가
배열명.shift(); // 첫요소 삭제
배열명.pop(); // 마지막 요소 삭제
배열명.unshift('추가할요소'); // 첫요소로 값 추가
배열명.push('추가할요소); // 마지막요소로 값 추가
배열명.indexOf('요소'); // 앞에서 요소 위치 찾기: -1은 없다는 뜻
배열명.lastIndexOf('요소'); 뒤에서 요소 위치 찾기: -1은 없다는 뜻
배열명.includes('요소'); // 요소 있는지 확인하기: 불린으로 리턴
배열명.reverse('요소') // 뒤집기
배열.sort(); // 배열 오름차순정렬

반복문

for(변수 in 객체){동작부분;} // 객체의 네임에 한번씩 반복함
for(변수 of 배열){동작부분;} // 배열의 요소에 한번씩 반복함

if(조건) {실행문;}
else if(조건) {실행문;}
else {실행문;}

HTML DOM

노드선택

document.getElementsByTagName("태그명"); // 태그요소 선택
document.getElementById("id명"); // ID요소 선택
document.getElementsByClassName("class명"); // 클래스요소 선택
document.getElementByName("name속성값"); // name속성값 선택
document.querySelectorAll(); // 선택자 모두 선택
document.querySelector('.클래스 > .클래스'); // 선택자 선택
변수명.getAttribute('속성') // 속성접근(어떤 속성이든 접근가능)
변수명.setAttribute('속성', '값') // 속성추가,수정(어떤 속성이든 접근가능)
변수명.removeAttribute('속성') // 속성 제거
children[n] // 자식노드
firstElementChild // 첫번째 자식노드
lastElementChild // 마지막 자식노드
parentElement // 부모 노드
previousElementSibling // 이전 형제 노드
nextElementSibling // 다음 형제 노드

노드편집

변수명.innerHTML = '내용'; // 요소 내용 변경(해당 컨텐츠)
변수명.innerHTML += '내용'; // 요소 내용 추가
변수명.outerHTML = '내용'; // 요소 내용 변경(해당 컨텐츠 포함 다)
변수명.textContent = '내용'; // 텍스트로 내용추가(특문무시)
변수명.style.스타일속성 = "스타일데이터"; // 스타일 변경
변수명.className = '클래스명' // 클래스명 바꾸기
변수명.classList.add('클래스명'); // 클래스명 추가
변수명.classList.remove = '클래스명' // 클래스명 삭제
변수명.classList.toggle = '클래스명' // 클래스명 있으면 삭제 없으면 추가

노드만들기

변수 = document.createElement('태그'); // 요소만들기
넣을자리변수명.prepent(내용); // 내용을 첫번째 자식으로 넣기
넣을자리변수명.append(내용); // 내용을 마지막 자식으로 넣기
넣을자리변수명.append(이동할곳); // 내용 이동
넣을자리변수명.before(내용); // 내용을 이전 형제로 넣기
넣을자리변수명.after(내용); // 내용을 다음 형제로 넣기

노드삭제

변수명.remove();

이벤트

이벤트핸들러

변수명.addEventListener(이벤트타입, 이벤트핸들러) // 이벤트 핸들러 추가
변수명.removeEventListener(이벤트타입, 이벤트핸들러) // 이벤트 핸들러 삭제
target // 이벤트가 일어난 요소
stopPropagation(); // 이벤트 버블링 없애기
변수명.preventDefault(); // 못하게막기

마우스 버튼 이벤트

요소.onclick = function(){} // 클릭했을때 함수실행
MouseEvent.button // 마우스 이벤트(0-왼쪽 2-오른쪽)
click // 왼쪽버튼눌렀을때
contextmenu // 오른쪽버튼 눌렀을때
dbclick // 더블 클릭
mousedown // 버튼을 누른 순간
mouseup // 버튼을 눌렀다 뗀 순간
mousemove // 마우스 이동할때(clientX,Y=창기준위치, pageX,y= 문서전체기준위치, offsetX,Y=이벤트요소기준위치)
mouseover // 요소 밖에서 안으로 이동할때
mouseenter // 밖에서 안으로 이동할때(버블링없음)
mouseout // 요소 안에서 밖으로 이동할때
mouseleave // 안에서 밖으로 이동할때(버블링없음)

키보드 이벤트

keydown // 키보드 누른 순간
keyup // 키보드 눌렀다 뗀 순간

focus 이벤트

focusin // 포커스가 되었을 때
focusout // 포커스가 빠져나갈때
focus // 포커스가 되었을 때(버블링x)
blur // 포커스가 빠져나갈때(버블링x)

입력 이벤트

input // 사용자가 입력할때
change // 값이 변했을때

자료형 메소드

변수명.toFixed(자릿수)

반올림 후 소수점 표시하기

변수명.toString(진수)

진수로 변경

FileReader

자료형 변수명 = new FileReader(); // 객체 생성
reader.readAsDataURL(inputElement.files[0]);

Date

자료형 변수명 = new Date();

변수를 생성한 시간

자료형 변수명 = new Date('YYYY-MM-DDThh:mm:ss');
자료형 변수명 = new Date(YYYY, MM, DD, hh, mm, ss, ms);
자료형 변수명 = new Date(1970에서 지난시간ms);

시간 지정

변수명.getTime

시간 불러오기