자바스크립트 기초 문법 정리 Part 2 - 객체
JavaScript 배우기
지난 Part 1 포스팅에 이어 자바스크립트 기초 문법에 대해 정리해보았습니다. 이번 포스팅에서는 여러 객체와 그 객체에서 제공하는 각 메서드에 대해 정리하였습니다. 다루는 객체의 여러 메서드에 대해 정리하였기 때문에 전 포스팅처럼 간략하지는 않지만 이번 포스팅을 저장해 두고 자바스크립트로 개발하면서 필요할 때마다 참고하여 보기에는 좋을 것 같습니다. 다만, 메서드 사용 예의 코드는 넣지 않았으니 예제 부분이 필요하다면 필히 공식 문서를 참고해주세요. 익히는 것 자체도 공식 문서를 통하여 보는 것이 가장 좋지만 혹여 영어에 취약하신 분이라면 이 포스팅을 참고하는 것도 괜찮을 것 같습니다. :)
내장 객체
브라우저의 자바스크립트 엔진에 내장된 객체. String/Date/Array/Nath/RegExp Object 등이 있음.
날짜 객체 Date
Date 객체 생성
new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Date Get 메서드
getDate() - 일 정보를 가져옴.
getDay() - 요일 정보를 가져옴. 0(일요일)-6(토요일)
getFullYear - 연도 정보를 가져옴. (yyyy)
getHours() - 시간 정보를 가져옴.
getMilliseconds() - 밀리초 정보를 가져옴. 0-999 (1/1000 초의 단위)
getMinutes() - 분 정보를 가져옴.
getMonth() - 월 정보를 가져옴. 현재 월에서 -1한 값으로 옴.
getSeconds() - 초 정보를 가져옴.
getTime() - 1970년 1월 1일부터 경과된 시간을 밀리초로 가져옴.
Date Set 메서드
setDate() - 일 정보를 설정.
setFullYear() - 연도 정보를 설정. 원한다면 월과 일 정보도 설정할 수 있다.
setHours() - 시간 정보를 설정.
setMillseconds() - 밀리초 정보를 설정.
setMinutes() - 분 정보를 설정.
setSeconds() - 초 정보를 설정.
setTime() - 1970년 1월 1일부터 경과된 시간을 밀리초로 설정.
기타 Date 메서드
now() - 1970년 1월 1일부터 지금까지의 밀리초를 반환.
parse() - 날짜 형태의 문자열을 변환하여 1970년 1월 1일부터 입력한 날짜까지의 밀리초를 반환.
toString() - Date 객체를 문자열로 변환.
toJSON() - Date 객체를 JSON 데이터로 변환.
valueOf() - Date 객체를 밀리초로 반환.
숫자 객체 Number
Number 생성
var num = 1;
var num2 = new Number(1);
Number 객체의 속성
MAX_VALUE - 표현 가능한 가장 큰 수.
MIN_VALUE - 표현 가능한 가장 작은 수.
POSITIVE_INFINITY - 무한대 수 표기.
NEGATIVE_INFINITY - 음의 무한대 수 표기.
NaN - 숫자가 아닌 경우 표기.
Number 객체 메서드
toExponential(n) - 자수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환.
toFixed(n) - 소수점 n자리만큼 반올림하여 문자형 데이터로 반환.
toPrecision(n) - 유효 숫자 n의 개수만큼 반올림하여 문자형 데이터로 반환.
toString() - 숫자형 데이터를 문자형 데이터로 반환.
valueOf() - 객체의 원래 값을 반환.
parseInt(값) - 데이터를 정수로 변환하여 반환.
parseFloat(값) - 데이터를 실수로 변환하여 반환.
수학 객체 Math
Math 메서드 및 상수
Math.abs(숫자) - 숫자의 절댓값을 반환.
Math.max(숫자1, 숫자2, 숫자3) - 숫자 중 최댓값을 반환.
Math.min(숫자1, 숫자2, 숫자3) - 숫자 중 최솟값을 반환.
Math.pow(숫자, 제곱값) - 숫자의 거듭제곱한 값을 반환.
Math.random() - 0~1 사이의 난수를 반환.
Math.round(숫자) - 소수점 첫째 자리에서 반올림하여 정수를 반환.
Math.ceil(숫자) - 소수점 첫째 자리에서 무조건 올림에서 정수를 반환.
Math.floor(숫자) - 소수점 첫째 자리에서 무조건 내림해서 정수를 반환.
Math.sqrt(숫자) - 숫자의 제곱근 값을 반환.
Math.PI - 원주율 상수를 반환.
배열 객체 Array
Array 생성
var array = new Array();
array[0] = 1;
array[1] = 2;
var array2 = new Array(1, "temp", true);
var array3 = [1, true, "문자열도 가능"];
Array 객체의 메서드 및 속성
join(연결문자) - 배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환.
reverse() - 배열 객체에 데이터의 순서를 거꾸로 바꾼 후 반환.
sort() - 배열 객체에 데이터를 오름차순으로 정렬.
slice(index1, index2) - 배열 객체에 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴.
splice() - 배열 객체에 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있음.
concat() - 2개의 배열 객체를 하나로 결합.
pop() - 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터 삭제.
push(new data) - 배열 객체에 마지막 인덱스에 새 데이터를 삽입.
shift() - 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제.
unshift(new data) - 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입.
length - 배열에 저장된 총 데이터의 개수를 반환.
문자 객체 String
String 생성
var str = "hello";
var str2 = new String("hi");
String 객체 메서드 및 속성
charAt(index) - 문자열에서 인덱스 번호에 해당하는 문자 반환.
indexOf("찾을 문자") - 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 문자의 인덱스 번호를 반환. 찾는 문자가 없으면 -1 반환.
lastIndexOf("찾을 문자") - indexOf와 동일하나 문자열의 오른쪽부터 찾음.
match("찾을 문자") - indexOf와 동일하나 찾는 문자가 없으면 null을 반환.
replace("바꿀 문자", "새 문자") - 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 최초로 찾은 문자를 새 문자로 치환.
search("찾을 문자") - 문자열 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 최초로 일치하는 인덱스 번호를 반환.
slice(a, b) - a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환.
substring(a, b) - a 인덱스부터 b 인덱스 이전 구간의 문자를 반환.
substr(a, 문자 개수) - 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환.
split("문자") - 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환.
toLowerCase() - 문자열에서 영문 대문자를 모두 소문자로 바꿈.
toUpperCase() - 문자열에서 영문 소문자를 모두 대문자로 바꿈.
length - 문자열에서 문자의 개수를 반환.
concat("새로운 문자") - 문자열에 새로운 문자열을 결합.
charCodeAt("찾을 문자") - 찾을 문자의 아스키 코드 값을 반환.
fromCharCode(아스키 코드 값) - 아스키 코드 값에 해당하는 문자를 반환.
trim() - 문자의 앞 또는 뒤에 공백 문자열을 삭제.
브라우저 객체 모델(BOM)
브라우저에 내장된 객체.
window 객체
브라우저 객체의 최상위 객체.
window 객체 메서드
open("url 경로", "창 이름", "옵션 설정") - 새 창을 열 때 사용.
- open() 메서드 옵션 설정: width/height/left/top/location/status/scrollbars/tollbars
alert("메세지") - 경고 창을 띄움.
prompt("질의 내용", "기본 답변") - 질의응답 창을 띄움.
confirm("질의 내용") - 확인/취소 창을 띄움.
- 확인 클릭시 true 반환, 취소 클릭시 false 반환.
moveTo(x 위치값, y 위치값) - 창의 위치를 이동시킬 때 사용.
resizeTo(너빗값, 높잇값) - 창의 크기를 변경시킬 때 사용.
setInterval("스크립트 실행문", 시간 간격) - 일정 간격으로 반복하여 실행문을 실행시킬 때 사용.
clearIntervar(참조 변수) - 참조 변수에 참조되어 있는 setInterval() 삭제.
setTimeout("스크립트 실행문", 시간 간격) - 일정 간격으로 한 번만 실행문을 실행시킬 때 사용.
clearTimeout(참조 변수) - 참조 변수에 참조되어 있던 setTimeout() 삭제.
screen 객체
사용자의 모니터 정보를 제공하는 객체.
screen 객체 속성
width/height/availWidth/availHeight/colorDepth(사용자 모니터가 표현 가능한 컬러 bit)
location 객체
사용자 브라우저의 주소 창에 url에 대한 정보와 새로 고침 기능을 제공하는 객체.
location 객체 속성 및 메서드
href - 주소 영역에 참조 주소를 설정하거나 URL 반환.
hash - URL의 해시값을 반환.
hostname - URL의 호스트 이름을 설정하거나 반환.
host - URL의 호스트 이름과 포트 번호를 반환.
port - URL의 포트 번호를 반환.
protocol - URL의 프로토콜을 반환.
search - URL의 쿼리를 반환.
reload() - 새로 고침.
history 객체
사용자가 방문한 사이트 중 이전에 방문한 사이트와 다음 방문한 사이트로 다시 돌아갈 수 있는 속성과 메서드를 제공하는 객체.
history 메서드 및 속성
back() - 이전 방문한 페이지로 이동.
forward() - 다음 방문한 페이지로 이동.
go(이동 숫자) - 이동 숫자만큼의 페이지로 이동. 음의 값이면 이전 페이지로 이동.
length - 방문 기록에 저장된 목록의 개수 반환.
navigator 객체
현재 방문자가 사용하는 브라우저 정보와 운영체제의 정보를 제공하는 객체.
navigator 속성
appCodeName - 방문자의 브라우저 코드명을 반환.
appName - 방문자의 브라우저 이름 반환.
appVersion - 방문자의 브라우저 버전 정보를 반환.
language - 방문자의 브라우저 사용 언어를 반환.
product - 방문자의 브라우저 사용 엔진 이름을 반환.
platform - 방문자의 브라우저를 실행하는 운영체제를 반환.
userAgent - 방문자의 브라우저와 운영체제의 종합 정보를 제공.
문자 객체 모델(DOM)
HTML 문서의 구조.
선택자
직접 선택자
직접 문서에서 요소를 선택함. (id/class/폼 명/요소 명 등)
document.getElementById("아이디 명") - 아이디를 이용해 요소를 선택.
document.getElmentsByTagName("요소 명") - 요소의 이름을 이용해 요소를 선택.
document.formName.inputName - 폼 요소에 name 속성을 이용해 요소를 선택.
인접 관계 선택자
직접 선택자를 사용해 선택해 온 문서 객체를 기준으로 가까이에 있는 요소를 선택함. (parentNode/childeNodes 등)
parentNode - 선택한 요소의 부모 요소를 선택.
childNodes - 선택한 요소의 모든 자식 요소를 선택. 선택한 모든 요소가 저장됨.
firstChild - 선택한 요소의 첫 번째 자식 요소만 선택.
previousSibling - 선택한 요소의 이전에 오는 형제 요소만 선택.
nextSibling - 선택한 요소의 다음에 오는 형제 요소만 선택.
문서 객체 이벤트 핸들러 적용하기
onclick - 선택한 요소를 클릭했을 때 이벤트 발생.
onmousevoer - 선택한 요소에 마우스를 올렸을 때 이벤트 발생.
onmouseout - 선택한 요소에 마우스가 벗어났을 때 이벤트 발생.
submit - 선택한 폼에 전송이 일어났을 떄 이벤트 발생.
<a gref"3" id="btn">버튼</a>
document.getElementById("btn").onclick = function() {
alert("welcome");
}
일단은 참고하는 책을 기준으로하여 정리해보았는데 후에 시간이 될 때마다 공식 문서를 참고하여 번역한다는 생각으로 보다 세부적인 사항을 정리해도 좋을 것 같다는 생각이 드네요. 우선적으로는 빠르게 함수와 이벤트에 대해 배우고 객체에 대한 더 자세한 사항을 정리하도록 하겠습니다. 다음 포스팅은 자바스크립트의 함수와 이벤트에 대해 다룰 예정입니다!
참고문헌:
Do it! 자바스크립트+제이쿼리 입문 - 정인용
JavaScript 튜토리얼 문서 (http://www.w3schools.com/js/default.asp)
티스토리 블로그와 동시에 포스팅을 진행하고 있습니다.
http://madeitwantit.tistory.com
