반응형
#1 자료형(Data Type)
| 종류 | 설명 |
| 문자열 (string) | 시작과 끝이 작은 따옴표('')나 큰 따옴표("")로 감싸진 값 |
| 숫자 (number) | 따옴표를 사용하지 않은 숫자 |
| 논리형 (boolean) | 참(true)과 거짓(false)을 나타냄 |
| 배열 (array) | 하나의 변수에 여러 개의 값을 저장 |
| 객체 (object) | 함수와 속성들이 함게 포함된 경우 |
| undefined | 데이터의 유형이 지정되지 않은 상태 |
| null | 데이터의 값이 유효하지 않은 상태 |
JavaScript에서의 False
① false, ② ''(빈 문자열), ③ 0, ④ NaN, ⑤ undefined, ⑥ null, ⑦ document.all(이건 거의 사용하지 않으니 몰라도 됨)
#2 연산자
| 종류 | 설명 |
| 산술 연산자 | +, -, *, /, % |
| 단항 연산자 | ++, --, ! |
| 비교 연산자 | >, >=, <, <=, ==, ===, !==, != |
| 논리 연산자 | &&, || |
| 대입(복합 대입) 연산자 | =, +=, -=, *=, /=, %= |
#3 변수
프로그램을 만들때 특정한 값을 저장하고 저장한 값을 불러 올 수 있게 하는 것이 변수(variable).
변수를 만드는 행위를 선언(declaration)한다고 표현.
변수의 이름은 대소 문자를 구별하며 공백을 넣을 수 없다.
변수의 이름은 문자나 언더바(_), 달러 기호($)로 시작해야 하며, 첫 글자 이후로는 문자, 숫자, 언더바, 달러 기호만 쓸 수 있다.
자바스크립트 예약어를 변수명으로 사용할 수는 없다 (예약어 = 이미 자바스크립트에서 사용되고 있는 명령어라 생각하면 됨)
let 변수명 = 식;
#4 조건문
if 문
if (조건) {
조건이 true일 때 실행할 명령
}
if~else 문
if (조건) {
조건이 true일 때 실행할 명령
} else {
조건이 false일 때 실행할 명령
}
switch 문
switch (조건) {
case 값1:
값1일 경우 실행문;
break;
case 값2:
값2일 경우 실행문;
break;
...
default:
case 값이 아닌 경우의 기본 실행문;
}
조건부 연산자(삼항 연산자)
조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식
#5 반복문
while
while (조건식) {
실행문;
}
for 문
for (시작; 조건식; 종료식) {
실행문;
}
break 문과 continue 문
| break | 반복이 끝나기 전에 조건에 따라 반복문을 빠져나옴 |
| continue | 반복 과정을 한 차례 건너뛰고 반복문의 맨 앞으로 돌아감 |
#6 객체 - 배열과 함수
| 객체(object) | 프로그램에서 인식할 수 있는 모든 대상 |
| 프로퍼티(property) | 객체의 특징이나 속성 |
| 메서드(method) | 객체에서 할 수 있는 동작 |
객체의 종류는 크게 배열(array), 함수(function), 배열이나 함수가 아닌 객체로 나눌 수 있다.
1) 배열(array)
const fruits = ['사과', '오렌지', '배', '딸기'];
2) 함수(function)
// 함수의 선언
function 함수명() { 실행문 }
// 함수의 실행
함수명()
3) 익명함수
이름 없이 선언한 함수
function(매개변수) { 실행문 }
4) 즉시실행 함수
함수를 정의하는 것과 동시에 실행
(function(매개변수) { 실행문 } (인수));
#7 객체
1) 브라우저와 관련된 객체
• 자바스크립트 내장 객체
| 종류 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어짐. 브라우저 창 안의 요소 중에서 최상위 |
| document | 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어짐 |
| navigator | 현재 사용하는 브라우저의 정보가 있음 |
| history | 현재 창에서 사용자의 방문 기록을 저장 |
| location | 현재 페이지의 URL 정보가 담겨 있음 |
| screen | 현재 사용하는 화면 정보를 다룸 |
• window 객체의 프로퍼티
| 종류 | 설명 |
| document | 브라우저 창에 표시된 웹 문서에 접근 |
| frameElement | 현재 창이 다른 요소 안에 포함되어 있을 경우 그 요소를 반환, 반대로 포함되어 있지 않으면 null을 반환 |
| innerHeight | 내용 영역의 높이를 나타냄 |
| innerWidth | 내용 영역의 너비를 나타냄 |
| localStorage | 웹 브라우저에서 데이터를 저장하는 로컬 스토리지를 반환 |
| location | window 객체의 위치 또는 현재 URL을 나타냄 |
| name | 브라우저 창의 이름을 가져오거나 수정 |
| outerHeight | 브라우저 창의 바깥 높이를 나타냄 |
| outerWidth | 브라우저 창의 바깥 너비를 나타냄 |
| pageXOffset | 스크롤 했을 때 수평으로 이동하는 픽셀 수 |
| pageYOffset | 스크롤 했을 때 수직으로 이동하는 픽셀 수 |
| parent | 현재 창이나 서브 프레임의 부모 |
| screenX | 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리 |
| screenY | 브라우저 창의 위쪽 테두리가 모니터 위쪽 테두리에서 떨어져 있는 거리 |
| scrollX | 스크롤 했을 때 수평으로 이동하는 픽셀 수 |
| scroolY | 스크롤 했을 때 수직으로 이동하는 픽셀 수 |
| sessionStorage | 웹 브라우저에서 데이터를 저장하는 세션 스토리지를 반환 |
• window 객체의 메서드 종류
| 종류 | 설명 |
| alert() | 알림 창을 표시 |
| blur() | 현재 창에서 포커스를 제거 |
| close() | 현재 창을 닫기 |
| confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시 |
| focus() | 현재 창에 포커스를 부여 |
| moveBy() | 현재 창을 지정한 크기만큼 이동 |
| moveTo() | 현재 창을 지정한 좌표로 이동 |
| open() | 새로운 창을 연다 |
| postMessage() | 메시지를 다른 창으로 전달 |
| print() | 현재 문서를 인쇄 |
| prompt() | 프롬프트 창에 입력한 텍스트를 반환 |
| resizeBy() | 지정한 크기만큼 현재 창의 크기를 조절 |
| resizeTo() | 동적으로 브라우저 창의 크기를 조절 |
| scroll() | 문서에 특정 위치로 스크롤 |
| scrollBy() | 지정한 크기만큼씩 스크롤 |
| scrollTo() | 지정한 위치까지 스크롤 |
| sizeToContent() | 내용에 맞게 창의 크기를 맞춤 |
| stop() | 로딩을 중지 |
*새 창 옵션 : width, height: left, top, scrollbars, location, status, toolbars
2) 날짜 정보 객체의 메서드
참조 변수 = new Date();| 날짜 정보를 가져올 때 (GET) | 날짜 정보를 수정할 때 (SET) | ||
| gutFullYear | 연도를 4자리 숫자로 표기 | setFullYear() | 연도를 4자리 숫자로 설정 |
| getMonth() | 월 정보를 가져옴(현재 월 -1) | setMonth() | 월 정보만 수정함(월 -1) |
| getDate() | 1~31사이의 숫자로 일을 표시 | setDate() | 1~31 사이의 숫자로 일을 설정 |
| getDay() | 요일 정보를 가져옴(일:0 ~ 토:6) | '요일'은 날짜를 바꾸면 자동으로 변경됨 | |
| getHours() | 시 정보를 가져옴 | setHours() | 시 정보만 수정함 |
| getMinutes() | 분 정보를 가져옴 | setMinutes() | 분 정보만 수정함 |
| getSeconds() | 초 정보를 가져옴 | setSeconds() | 초 정보만 수정함 |
| getMilliseconds() | 밀리초 정보를 가져옴(1/1,000초) | setMilliseconds() | 밀리초 정보만 수정함 |
| getTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 표기 | setTime() | 1970년 1월 1일부터 경과된 시간을 밀리초로 수정 |
| toGMTString() | GMT 표준 표기 방식으로 문자형 데이터로 변환 | toLocaleString() | 운영 시스템 표기 방식으로 문자형 데이터로 변환 |
3) 수학 객체의 메서드 및 상수
| 종류 | 설명 |
| Math.abs(숫자) | 숫자의 절댓값을 반환 |
| Math.max(숫자 1, 숫자 2, 숫자 3, 숫자 4) | 숫자 중 가장 큰 값을 반환 |
| Math.min(숫자 1, 숫자 2, 숫자 3, 숫자 4) | 숫자 중 가장 작은 값을 반환 |
| Math.pow(숫자, 제곱값) | 숫자의 거듭제곱값을 반환 |
| Math.random() | 0~1 사이의 난수를 반환 |
| Math.round(숫자) | 소수점 첫째 자리에서 반올림하여 정수를 반환 |
| Math.ceil(숫자) | 소수점 첫째 자리에서 무조건 올림하여 정수를 반환 |
| Math.floor(숫자) | 소수점 첫째 자리에서 무조건 내림하여 정수를 반환 |
| Math.sqrt(숫자) | 숫자의 제곱근값을 반환 |
| Math.PI | 원주율 상수를 반환 |
4) 배열 객체의 메서드 및 속성
| 종류 | 설명 |
| join(연결 문자) | 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 |
| reverse() | 배열 객체의 데이터를 순서를 거꾸로 바꾼 후 반환 |
| sort() | 배열 객체의 데이터를 오름순으로 정렬 |
| slice(index1, index2) | 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴 |
| splice() | 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있음 |
| concat() | 2개의 배열 객체를 하나로 결합 |
| push(new data) | 배열 객체의 마지막 인덱스에 새 데이터를 삽입 |
| pop() | 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제 |
| unshift(new data) | 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입 |
| shift() | 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제 |
| length | 배열에 저장된 총 데이터의 개수를 반환 |
5) 문자열 객체의 메서드 및 속성
| 종류 | 설명 |
| charAt(index) | 문자열에서 인덱스 번호에 해당하는 문자를 반환 |
| indexOf("찾을 문자") | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환. 찾는 문자가 없을 경우 -1을 반환 |
| lastindexOf("찾을 문자") | 문자열에서 오른쪽부터 찾을 문자와 일치하는 문잘르 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없을 경우 -1을 반환 |
| match("찾을 문자") | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환 찾는 문자가 없을 경우 null을 반환 |
| replace("바꿀 문자", "새 문자") | 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환 |
| search("찾을 문자") | 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환 |
| slica(a, b) | a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환 |
| substring(a, b) | a 인덱스부터 b인덱스 이전 구간의 문자를 반환 |
| substr(a, 문자 개수) | 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환 |
| split("문자") | 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환 |
| toLowerCase() | 문자열에서 영문 대문자를 모두 소문자로 변환 |
| toUpperCase() | 문자열에서 영문 소문자를 모두 대문자로 변환 |
| length | 문자열에서 문자의 개수를 반환 |
| concat("새로운 문자") | 문자열에서 새로운 문자열을 결합 |
| charCodeAt(index) | 문자열 index에 해당 문자의 아스키 코드값을 반환 |
| fromCharCode(아스키 코드 값) | 아스키 코드값에 해당하는 문자를 반환 |
| trim() | 문자의 앞 또는 뒤에 공백 문자열을 삭제 |
6) screen 객체의 속성 종류
| 종류 | 설명 |
| screen.width | 화면의 너빗값을 반환 |
| screen.height | 화면의 높잇값을 반환 |
| scrren.availWidth | 작업 표시줄을 제외한 화면의 너빗값을 반환 |
| screen.availHeight | 작업 표시줄을 제외한 화면의 높잇값을 반환 |
| screen.colorDepth | 사용자 모니터가 표현 가능한 컬러bit를 반환 |
7) location 객체의 속성 종류
| 종류 | 설명 |
| location.href | 주소 영역의 참조 주소를 설정하거나 URL을 반환 |
| location.hash | URL의 해시값(#에 명시된 값)을 반환 |
| location.hostname | URL의 호스트 이름을 설정하거나 반환 |
| location.host | URL의 호스트 이름과 포트 번호를 반환 |
| location.protocol | URL의 프로토콜을 반환 |
| location.search | URL의 쿼리(요청값)을 반환 |
| location.reload() | 문서의 새로고침(F5) |
8) history 객체의 속성 종류
| 종류 | 설명 |
| history.back() | 이전 방문 사이트로 이동 |
| history.forward() | 다음 방문 사이트로 이동 |
| history.go(이동 숫자) | 이동 숫자에 -2를 입력하면 2단계 이전의 방문 사이트로 이동 |
| history.length | 방문 기록에 저장된 목록의 개수를 반환 |
9) 내장 함수의 종류
| 종류 | 설명 |
| encodeURI() | 문자를 유니 코드값으로 인코딩 *영문, 숫자, 일부 기호(;,/?:@&=+$)는 제외 |
| encodeURIComponent() | 문자를 유니 코드값으로 인코딩 |
| decodeURI() | 유니 코드값을 디코딩해 다시 문자화 |
| decodeURIComponent() | 유니 코드값을 디코딩해 닫시 문자화 |
| parseInt() | 문자열 데이터를 정수형 데이터로 반환 |
| parseFloat() | 문자열 데이터를 실수형 데이터로 반환 |
| String() | 문자형 데이터로 반환 |
| Number() | 숫자형 데이터로 반환 |
| Boolean() | 논리형 데이터로 반환 |
| isNaN() | is Not a Nmber. 숫자가 아닌 문자가 포함되어 있으면 true를 반환 |
| eval() | 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리 |
반응형