자바스크립트 기초 (4)

1. 객체

객체란?

자바스크립트에서의 객체는 속성과 함수들의 집합

1-1. 객체의 종류

• 내장 객체
  자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용가능합니다. 내장 객체의 종류로는 문자, 날짜, 배열, 수학 객체등 여러가지 객체가 존재합니다.
  

• 브라우저 객체 모델(BOM)
  브라우저에 계층 구조로 내장되어 있는 객체를 말합니다. 브라우저 객체의 종류는 window, screen, location, history, navigator 객체 등이 있습니다.

• 문서 객체 모델(DOM)
  문서 객체 모델은 HTML 문서 구조를 말합니다.

2. 내장 객체

• 날짜 정보 객체
  날짜나 시간 관련 정보를 제공받고 싶을 때 날짜 객체를 생성하여 사용합니다.

  기본형

  var 참조 변수 = new Date();

  특정 날짜 정보 객체를 만들 때

  var 참조 변수 = new Date("년/월/일");
  var 참조 변수 = new Date(년,월,일);

  • 날짜 정보를 가져올 때 사용하는 함수

    함수명	설명
    getFullYear()	연도 정보를 가져옴
    getMonth()	월 정보를 가져옴(현재 월 - 1)
    getDate()	일 정보를 가져옴
    getDay()	요일 정보를 가져옴(일(0) ~ 토(6))
    getHours()	시 정보를 가져옴
    getMinutes()	분 정보를 가져옴
    getSeconds()	초 정보를 가져옴
    getMilliseconds()	밀리초 정보를 가져옴
    getTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 표기함
    toGMTString()	GMT 표준 표기 방식으로 문자형 데이터로 반환함

    
    

  • 날짜 정보를 수정할 때 사용하는 함수

    함수명	설명
    setFullYear()	연도 정보만 수정
    setMonth()	월 정보만 수정(월 - 1)
    setDate()	일 정보만 수정
    setHours()	시 정보만 수정
    setMinutes()	분 정보만 수정
    setSeconds()	초 정보만 수정
    setMilliseconds()	밀리초 정보만 수정
    setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 수정
    toLocaleString()	운영 시스템 표기 방식으로 문자형 데이터로 반환함

    
    

• 수학 객체
  수학과 관련된 기능과 속성을 제공합니다.

  • 수학 객체의 메서드 및 상수

    종류	설명
    Math.abs(숫자)	숫자의 절댓값을 반환
    Math.max(숫자1,숫자2,...)	숫자 중 가장 큰 값을 반환
    Math.min(숫자1,숫자2,...)	숫자 중 가장 작은 값을 반환
    Math.pow(숫자, 제곱값)	숫자의 거듭제곱값을 반환
    Math.random()	0~1 사이의 난수를 반환
    Math.round(숫자)	소수점 첫째 자리에서 반올림하여 정수를 반환
    Math.ceil(숫자)	소수점 첫째 자리에서 무조건 올림하여 정수를 반환
    Math.floor(숫자)	소수점 첫째 짜리에서 무조건 내림하여 정수를 반환
    Math.sqrt(숫자)	숫자의 제곱근값을 반환
    Math.PI	원주율 상수를 반환

    Math.random() 함수를 이용하여 난수 생성방법

    Math.random() 숫자 // 0부터 숫자까지의 난수 반환
    Math.random() (최댓값 - 최솟값 + 1) + 최솟값
    // 최솟값 ~ 최댓값까지의 범위

• 배열객체
  여러 개의 데이터를 하나의 저장소에 저장하려면 배열 객체를 생성합니다.

  기본형

  var 참조변수 = new Array();
  참조변수[0] = 값1; 참조변수[1] = 값2; 참조변수[2] = 값3;
  var 참조변수 = new Array(값1, 값2, 값3);
  var 참조변수 = [값1, 값2, 값3, ... , 값n];

  • 배열 객체의 메서드 및 속성

    종류	설명
    join(연결 문자)	배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반화
    reverse()	배열 객체의 제이터 순서를 거꾸로 바꾼 후 반환
    sort()	배열 객체의 데이터를 오름차순으로 정렬
    slice(값1, 값2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옴
    splice()	배열 객체의 지정 데이터를 삭제, 그 구간에 새 데이터를 삽입
    concat()	2개의 배열 객체를 하나로 결합
    pop()	배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제
    push(새 데이터)	배열 객체의 마지막 인덱스에 새 데이터를 삽입
    shift()	배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제
    unshift()	배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입
    length	배열에 저장된 총 데이터의 개수를 반환

    
    

• 문자열 객체
  문자열 객체는 문자형 데이터를 객체로 취급하는 것입니다. 자바스크립트에서 가장 많이 사용합니다.

  기본형

  var 참조변수 = new String(문자형 데이터);

  • 문자열 객체의 메서드 및 속성

  종류	설명
  charAt(인덱스)	문자열에서 인덱스 번호에 해당하는 문자를 반환
  indexOf("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없으면 -1을 반환
  lastindexOf("찾을 문자")	문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환 찾는 문자가 없으면 -1을 반환
  match("찾을 문자")	문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환 찾는 문자가 없으면 null을 반환
  replace("바꿀 문자", "새 문자")	문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환
  search("찾을 문자")	문자열에서 왼쪽부터찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환
  slice(a,b)	a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환
  substring(a,b)	a 인덱스부터 b 인덱스 이전 구간의 문자를 반환
  substr(a, 문자개수)	문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환
  split("문자")	지정한 문자를 기준으로 문자 데이터를 나누어 배열로 저장하여 반환
  toLowerCase()	영문 대문자를 모두 소문자로 변환
  toUpperCase()	영문 소문자를 모두 대문자로 변환
  length	문자열에서 문자의 개수를 반환
  concat("새로운 문자")	문자열에 새로운 문자열을 결합
  charCodeAt(인덱스)	문자열 인덱스에 해당 문자의 아스키 코드값을 반환
  fromCharCode(아스키 코드 값)	아스키 코드값에 해당되는 문자를 반환
  trim()	문자의 앞 또는 뒤에 공백 문자열을 삭제

3. 브라우저 객체 모델

브라우저에 내장된 객체를 브라우저 객체라고합니다. 브라우저 객체는 계층적 구조로 이루어져 있고 이를 브라우저 객체 모델(BOM, Browser Object Model)이라 합니다.

• window 객체
  브라우저 객체의 최상위 객체입니다.

  • window 객체의 함수 종류

    종류	설명
    open("URL","새창이름","새창옵션")	URL 페이지를 새 창으로 나타냄
    alert(데이터)	경고 창을 나타내고 데이터를 보여줌
    prompt("질문","답변")	질문과 답변으로 질의응답 창을 나타냄
    comfirm("질문")	질문 내용으로 확인/취소 창을 나타냄 확인을 누르면 true, 취소를 누르면 false 반환
    moveTo(X,Y)	지정한 새 창의 위치를 이동
    resizeTo(width,height)	지정한 새 창의 크기를 변경
    setInterval(function(){코드}, 시간)	지속적으로 일정한 시간 간격으로 함수를 호출하여 코드를 실행
    setTimeout(function(){코드}, 시간)	단 한 번 일정한 시간 간격으로 함수를 호출하여 코드를 실행

  
  
  • setIntervar()

    setIntervar()

    1.
    var 참조변수 = setInterval(function(){
    	자바스크립트 코드;
    },시간 간격)
    2.
    var 참조변수 = setIntervar("자바스크립트 코드",시간 간격);

    clearInterval()

    clearInterval(참조 변수);

  • setTimeout()

    setTimeout()

    1.
    var 참조변수 = setTimeout(function(){
    	자바스크립트 코드;
    },시간 감격)
    2.
    var 참조변수 = setTimeout("자바스크립트 코드", 시간 간격)

    clearTimeout();

    clearTimeout(참조변수);

• screen 객체
  사용자의 모니터 정보를 제공하는 객체입니다.

  • screen 객체의 속성

    종류	설명
    screen.width	화면의 너빗값을 반환
    screen.height	화면의 높잇값을 반환
    screen.availWidth	작업 표시줄을 제외한 화면의 너빗값을 반환
    screen.availHeight	작업 표시줄을 제외한 화면의 높잇값을 반환
    screen.colorDepth	사용자 모니터가 표현 가능한 컬러 bit를 반환

• location 객체
  사용자 브라우저와 관련된 속성과 함수를 제공하는 객체입니다.

  • location 객체의 속성 종류

    종류	설명
    location.href	주소 영역의 참조 주소를 설정하거나 URL을 반환
    location.hash	URL의 해시값을 반환
    location.hostname	URL의 호스트 이름을 설정하거나 반환
    location.host	URL의 호스트 이름과 포트번호를 반환
    location.protocol	URL의 프로토콜을 반환
    location.search	URL의 쿼리를 반환
    location.reload()	새로고침

    
    

• history 객체
  사용자가 방문한 사이트의 기록을 남기고 이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 속서과 메서드를 제공하는 객체입니다.

  종류	설명
  history.back()	이전 방문 사이트로 이동
  history.forward()	다음 방문 사이트로 이동
  history.go(이동 숫자)	이동 숫자에 따라 이전/다음 방문 사이트로 이동
  history.length	방문 기록에 저장된 목록의 개수를 반환

  
  

• navigator 객체
  현재 방문자가 사용하는 브라우저 정보와 운영체제 정보를 제공하는 객체입니다.

  • navigator 객체의 속성

    종류	설명
    navigator.appCodeName	현재 브라우저의 코드명을 반환
    navigator.appName	현재 브라우저의 이름을 반환
    navigator.appVersion	현재 브라우저의 버전 정보를 반환
    navigator.language	현재 브라우저가 사용하고 있는 언어를 반환
    navigator.product	현재 브라우저의 엔진 이름을 반환
    navigator.platform	현재 컴퓨터의 운영체제 정보를 제공
    navigator.onLine	온라인 상태 여부에 대한 정보를 제공
    navigator.userAgent	브라우저와 운영체제의 종합정보를 제공