[JavaScript] #02 - 자바 스크립트 객체

객체

 

객체는 관련된 데이터와 함수의 집합이다. (일반적으로 여러 데이터와 함수로 이루어지는데 객체 안에

있을 때는 보통 프로퍼티와 메서드라고 부른다)

자바 스크립트는 객체 기반 프로그래밍 언어로 자바 스크립트를 구성하는 거의 모든것이 객체이다.

객체를 생성하는 것은 변수를 정의하고 초기화 하는 것으로 시작한다.

const person = {
  name: 'Hanamon',
  age: 20
};

• 객체는 0개 이상의 요소(property)로 구성된 집합이다.
• 요소(property)는 키(key)와 값(value)으로 구성된다.
• 자바 스크립트에서 사용할 수 있는 모든 값은 속성(property)값이 될 수 있다.

---

객체의 프로퍼티 (속성, property)와 메서드(method)

프로퍼티 : 객체의 상태를 나타내는 값(data)

메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)

const person = { 
    name: function(name) { 
        return `제 이름은 ${name}입니다.`;
    } 
}

• 자바스크립트의 함수도 객체의 프로퍼티 값으로 사용할 수 있다.
• 객체의 프로퍼티 값이 합수인 경우를 메서드라고 부른다
• 함수는 일급 객체이다. 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다.
• 객체는 곧 값이기 때문에 함수는 객체와 동일하게 사용할 수 있다는 의미이다.
• 따라서 함수는 값을 사용할 수 있는 곳이라면 어디서든지 리터럴로 정의할 수 있다.
  그래서 런타임에서 함수 객체로 평가된다.
• 함수는 객체이지만 일반 객체와는 차이가 있다. 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.
  그리고 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.

---

배열과 객체의 구조 이해

배열 (Array)	순서를 가진다.
객체 (Object)	의미를 가진다.

---

객체 기본 사용법

객체에 속성(property)를 추가, 조회하기

• dot notation : tweet.contant = 'codestates'
• bracket notation : tweet['contant'] = 'codestates'

---

객체 속성 삭제하기

• 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
• delete 키워드는 연산자이며, 객체도 삭제할 수 있고 자바 스크립트 내장 객체와 메서드도 지울 수 있다.
• delete를 서서 'array'의 특정 'index'를 지워버리면 그 자리가 'empty'가 된다.

---

객체를 위한 for문 사용법

• 배열과 객체, 반복문을 응용하여 대량의 정보를 다룰 수 있다.
• 객체에서 사용하는 반복문은 for in
  for(let key in obj)
  for in문은 객체안에 모든 키를 찾아 'key'라는 변수에 할당한다.
• 배열에서 사용하는 반복문은 for of
  for(let el of arr)
  for of 문은 배열의 'index'만큼 반복하여 엘리먼트를 'el'이라는 변수에 할당한다.

---

객체 (Object)의 메서드 (Method)

• Object.keys(obj)
  객체(object)의 속성(property)의 이름(key)을 배열(array)로 반환(return)한다.
• Object.values(obj)
  객체(object)의 속성(property)의 값(values)을 배열(array)로 반환(return)한다.

---

콘솔창에서 Object.keys()와 keys()의 차이

• 브라우저 콘솔창에서만 Object.keys()와 keys()는 결과값이 같다.
  이유는 브라우저(콘솔포함) 환경상에서는 Object가 전역 객체에 포함되어서 생략할 수 있기 때문이다.
  그러나 일반적인 자바스크립트 런타임환경(Node.js)와 같은 환경에서는 Object를 붙여야 정상적으로
  사용할 수 있다. 왜냐하면 Keys()는 객체의 자체 내장 메소드가 아닌, 객체 생성자인 ‘Object’가 직접
  가지고 있는 메소드이기 때문이다.
  결론은 브라우저가 아닌 일반환경에서는 앞에 Object를 붙여야한다.

---

내장 객체

브라우저의 자바 스크립트 엔진에 내장된 객체이다. String, Date, Array, Nath, RegExp Object 등이 있다.

---

날짜 객체 Date

Date 객체 생성

new Date()
new Date(milliseconds)
new Date(dateString)
new Date(year, month, dayy, 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()	시간 정보를 설정한다.
setMilliseconds()	밀리초 정보를 설정한다.
setMinutes()	분 정보를 설정한다.
setSeconds()	초 정보를 설정한다.
setTime()	1970년 1월 1일부터 경과된 시간을 밀리초로 설정한다.

 

---

기타 Date 메서드

now()	1970년 1월 1일부터 지금까지의 밀리초를 반환한다.
parse()	날짜 형태의 문자열을 변환하여 1970년 1월 1일부터 입력한 날짜까지의 밀리초를 반환한다/
toStirng()	Date 객체를 문자열로 변환한다.
toJSON()	Date 객체를 JSON 데이터로 변환한다.
valueOf()	Date 객체를 밀리초로 반환한다.

---

숫자 객체 Number

Number 객체 생성

var num = 1;
var num2 = new Number(1);

 

Number 객체의 속성

MAX_VALUE	표현 가능한 가장 큰 수
MIN_VALUE	표현 가능한 가장 작은 수
POSITIVE_INFINITY	무한대 수 표기
NEGATIVE_INFIITY	음의 무한대 수 표기
NaN	숫자가 아닌 경우 표기

 

---

Number 객체 메서드

toExponential(n)	자수 표기법으로 소수점 n자리만큼 문자형 데이터로 반환한다.
toField(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.roud(숫자)	소수점 첫째 자리에서 반올림하여 정수를 반환한다.
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");

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,scrollbar,tollbars)
alert("메세지")	경고 창을 띄운다.
prompt("질의 내용", "기본 답변")	질의응답 창을 띄운다.
confirm("질의 내용")	확인/취소 창을 띄운다/. (확인 클릭 시 true 반환, 취소 클릭 시 false 반환)
moveTo(x위치값, y위치값)	창의 위치를 이동시킬 때 사용한다.
resizeTo(너빗값, 높잇값)	창의 크기를 변경시킬 때 사용한다.
setInterval("스크립트 실행문", 시간 간격)	일정 간격으로 반복하여 실행문을 실행시킬 때 사용한다.
clearIntervar(참조 변수)	참조 변수에 참조되어 있는 setInterval() 을 삭제한다.
setTimeout("스크립트 실행문", 시간 간격)	일정 간격으로 한 번만 실행문을 실행시킬 때 사용한다.
clearTimeout(참조 변소)	참조 변수에 참조되어 있던 setTimeout()을 삭제한다.

---

 

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 속성

addCodeName	방문자의 브라우저 코드명을 반환한다.
appName	방문자의 브라우저 이름을 반환한다.
appVersion	방문자의 브라우저 버전정보를 반환한다.
language	방문자의 브라우저 사용 언어를 반환한다.
product	방문자의 브라우저 사용 엔진 이름을 반환한다.
platform	방문자의 브라우저를 실행하는 운영체제를 반환한다.
userAgent	방문자의 브라우저와 운영체제의 종합 정보를 제공한다.

 

---

문자 객체 모델(DOM)

HTML 문서의 구조

선택자

- 직접 선택자

직접 문서에서 요소를 선택한다. (id / class / form name / element name)

document.getElementById("아이디 명")	아이디를 이용해 요소를 선택한다.
document.getElementByTagName("요소 명")	요소의 이름을 이용해 요소를 선택한다.
document.forName.inputName	폼 요소에 name 속성을 이용해 요소를 선택한다.

- 인접 관계 선택자

직접 선택자를 사용해 선택해 온 문서를 객체를 기준으로 가까이에 있는 요소를 선택한다.

parentNode	선택한 요소의 부모 요소를 선택한다.
childNodes	선택한 요소의 모든 자식 요소를 선택한다. 선택한 모든 요소가 저장된다.
firstChild	선택한 요소의 첫 번째 자식 요소만 선택한다.
previousSibling	선택한 요소의 이전에 오는 형제 요소만 선택한다.
nextSibling	선택한 요소의 다음에 오는 형제 요소만 선택한다.

---

이벤트

<button id="btn" onclick="alert9'event!')">버튼</button>

 

이벤트 종류

onclick	선택한 요소를 클릭했을 때 이벤트 발생
onmouseover	선택한 요소에 마우스를 올렸을 때 이벤트 발생
onmouseout	선택한 요소에 마우스가 벗어났을 때 이벤트 발생
onmousemove	마우스가 지정한 요소를 클릭했을 때 발생한다.
ondvlclick	마우스가 지정한 요소를 연속 두 번 클릭했을 때 발생한다.
onkeypress	지정한 요소에서 키보드가 눌렸을 때 발생한다.
onkeydown	지정한 요소에서 키보드를 눌렀을 때 발생한다.
onkeyup	지정한 요소에서 키보드를 눌렀다 뗐을 때 발생한다,
onfocus	지정한 요소에 포커스가 갔을 때 발생한다,
onblur	지정한 요소에 포커스가 다른 요소로 이동되어 잃었을 때 발생한다.
onchange	지정한 요소의 하위 요소를 모두 로딩했을 때 발생한다.
onunload	문서를 닫거나 다른 문서로 이동했을 때 발생한다.
onsubmit	폼 요소에 전송 버튼을 눌렀을 때 발생한다.
onreset	폼 요소에 취소 버튼을 눌렀을 때 발생한다.
onresize	지정된 요소의 크기가 변경되었을 때 발생한다.
onerror	문서 객체가 로드되는 동안 문제가 발생되었을 때 발생한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

정보 출처 : https://hanamon.kr/javascript-%EA%B0%9D%EC%B2%B4-%EA%B8%B0%EC%B4%88/

https://brunch.co.kr/@hee072794/28