JavaScript 정리
짧고 간단하게 나열하는 식으로 작성
JavaScript의 위치
<script> 태그 사이에 작성하며, <head> 와 <body> 둘다 위치 가능
JavaScript Output
Window.alert() 경고창
documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제
innerHTML HTML출력 요소로 작성
console.log() 브라우저 콘솔에 작성
JavaScript 문법(Syntax)
세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성
변수는 const나 let으로 선언 ex) const x = 2;
주석은 //(한줄) /* */(여러줄) 로 작성
// 주석
/*
여러줄
*/대소문자 구별하여 사용
첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불가
camelCase 사용
JavaScript 키워드 ( keyword )
continue 루프 시작
debugger 디버깅 실행
do ...while 조건문이 참일때 실행,반복
for 조건문이 참인 조건 설정
function 함수 선언
if ...else 조건문 선언
return 함수 반환
switch 조건이 맞지 않을때 case 변환 break 스위치,루프 종료
try ... catch try에서 맞는 조건을 catch해서 실행
JavaScript 변수 ( variable )
const, let 변수 선언 ( = 할당연산자 == 동등연산자 === 일치연산자)
한번에 여러개 변수 설정 가능 ex) const a =1, b=2, c=3;
왼쪽에서 오른쪽으로 명령 수행
const x = "A" + 16 +4
const y = 16 + 4 +"A"
console.log(x) // A164
console.log(y) // 20A배열로 변수 선언 가능 ex) const z = ["a", "b", "c"]
JavaScript 함수 ( function )
function(a,b) {
return c
}
(a,b) => c함수 호출 방법
event / call / 자동
JavaScript 객체 ( object )
속성(properties) 선언 중괄호 사용
const person = { a:"hi", b="hello" };
빈 값은 null 사용
objectName.methodName() 으로 액세스
JavaScript Scope
함수 안에 const, let 선언시 function에서만 사용 가능 (local변수)
함수 밖에 선언시 전체에서 사용 가능 (global 변수)
함수 안에 const, let 없이 선언해도 전체에서 사용 가능 (권장x)
JavaScript 이벤트 (event)
onchange 변경되었을 때
onclick 클릭했을 때
onmouseover 마우스를 올렸을 때
onmouseout 마우스를 다른곳으로 옮겼을 때
onkeydown 키보드키를 눌렀을 때
onload 페이지로드완료
JavaScript 문자열 (strings)
"" 내에 "작성시 "로 작성
.length 문자열 길이 반환
.indexOf("a") a의 첫번째 시작 지점 반환
.lastIndexOf("a") a의 마지막 시작 지점 반환
문자열 추출 방법
slice(start, end) 시작,종료 위치에서 추출
substring(start, end) 두 사이의 내용 나머지 삭제
substr(start, length) 뒤에서부터 카운트, 삭제
.replace( a, b) a를 b로 교체
.toUpperCase() 대문자로 변환
.toLowerCase() 소문자로 변환
.concat(a, b) 두가지 이상 문자열을 결합
.charAt(0) 0번째 문자열 반환
.charCodeAt(0) 0번째 유니코드 반환
str[0] 0번째를 문자열에 액세스 (권장x)
.split(" ") " "안 기준으로 문자열 절단 후 배열로 반환
JavaScript 숫자 (numbers)
숫자는 64비트 값(0
51) 멱지수 (52
62) 기호 (63)
지수표기x시 15자리까지 정확한 것으로 간주
0x로 시작하는경우 16진수로 해석 ex) 0xFF = 255
.toString() 문자열로 숫자를 반환
.toExponential(숫자) 반올림 지수 표기법을 사용하여 작성된 숫자로, 문자열을 반환
.toFixed(숫자) 소숫점을 숫자만큼 문자열로 반환
toPrecision(숫자) 지정된 숫자의 길이만큼 문자열 반환
valueOf() 숫자로 순자를 반환
변수를 숫자로 반환하는법
Number()
parseInt() 문자열을 분석해 정수를 반환, 공백 허용/ 첫 번째 숫자 반환
parseFloat() 문자열을 분석해 수를 반환, 공백 허용/ 첫 번째 숫자 반환
속성
.MAX_VALUE 표현가능한 최댓값 반환
.MIN_VALUE 표현가능한 최솟값 반환
.NEGATIVE_INFINITY 음의무한대 반환
.NAN Not-a-Number 반환
.POSITIVE_INFINITY 무한대 반환
JavaScript 수학 개체(Math Object)
Math.round(a) 가까운 정수로 반올림 반환
Math.pow(a,b) a^b 반환
Math.sqrt(a) 루트a 반환
Math.abs(a) 양수값 반환
Math.ceil(a) 올림
Math.floor(a) 내림
Math.sin() sin값 반환
Math.cos() cos값 반환
Math.min(a, b, c, d) 최솟값 반환
Math.max(a, b, c, d) 최댓값 반환
Math.random() 임의의 수 반환 0에서1사이(0포함)
JavaScript 날짜(date)
.toString() 문자열로 날짜 반환
.toUTCString() UTC문자열로 날짜 반환
.toDataString() 읽기쉬운 형식으로 날짜 변환
시간지정x시 브라우저시간
JavaScript 배열(array)
배열 만드는 법
const x = [a, b, c]
const y = new Array(a, b, c)x.length 배열의 길이
x.push 배열에 삽입
xtypeof 사용으로 배열 확인
x.toString로 배열을 문자열로 반환
x.join(" * ") 구분기호를 포함해 배열 반환
x.pop 배열의 마지막 요소 제거
x.shift 배열의 첫번째 요소 제거
x.unshift 배열의 첫번째에 요소 추가
x[x.length] ="d"; 배열x에 d 요소 추가
delete x[0] 첫번째 요소 삭제
x.splice(2, 0, "a", "b") 시작점,삭제할 배열 수, 추가할 배열
a.concat(b) a와b배열을 연결
x.slice(1) 두번째 배열부터 표시
.sort((a,b) => b-a); 내림차순
.sort((a,b) => a-b); 오름차순
JavaScript 조건문
if (condition) {
} else if {
} else {
}
switch ( x ) {
case a:
break;
case b:
break;
default:
}JavaScript 디버깅 (debugging)
디버거 창에서 자바스크립트 표시 console.log() 사용
debugger; 사용시 다음코드 실행 중지