728x90
객체
- 객체(Object) 프로그램에서 인식할 수 있는 모든 대상
- 자바스크립트에서는 웹 과 관련된 대상을 모두 객체로 인식
- 자바스크립트의 객체
문서 객체 모델(DOM)
웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 document, image, link 객체 등
브라우저 관련 객체(BOM)
웹 브라우저에서 사용하는 정보를 객체로 나타냄
사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등
내장 객체
웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 함
객체의 인스턴스 만들기
- 객체를 참조 형태로 사용해야 함. 객체가 아니라 인스턴스 형태로 만들어서 사용해야 함
객체의 인스턴스를 만들 때는 new 예약어를 사용하고 new 뒤에 만들려고 하는 객체 이름
new 객체명
<script>
// Date 객체의 인스턴스 만들기
var date = new Date();
document.write("현재 시각은 : " + date);
</script>
프로퍼티와 메서드
- 프로퍼티는 객체의 특징이나 속성
- 메서드는 객체에서 할 수 있는 동작을 표현
마침표 표기법으로 프로퍼티와 메서드 작성
- 인스턴스는 객체의 프로퍼티와 메서드를 그대로 물려받아 똑같이 사용
- 프로퍼티와 메서드를 표시하려면 인스턴스명 뒤에 마침표를 붙이고 객체의 프로퍼티나 메서드 이름을 작성
<script>
// 로컬 형식으로 현재 시각 표시
var now = new Date();
document.write("현재 시각 toLocaleString() : " + now.toLocaleString());
</script>
자바스크립트의 내장 객체
- 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있음
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects 참고
Array 객체
<script>
// Array 객체 인스턴스 만들기 초기값이 없는 경우
var numbers = new Array(); // 배열의 크기를 지정하지 않음
var numbers = new Array(4); // 배열의 크기를 지정
var numbers = ["1","2","3","4"] // 배열 선언
var numbers = Array("1","2","3","4"); // Array 객체를 사용한 배열 선언언
</script>
Array객체의 메서드
<script>
// 배열끼리 합치는 concat()
var nums = [1,2,3];
var chars = ["a","b","c"];
var numsChars = nums.concat(chars);
var charsNums = chars.concat(nums);
document.write(numsChars + "<br>");
document.write(charsNums);
</script>
<script>
// 배열 안의 요소 합치기 join()
var nums = [1,2,3];
var chars = ["a","b","c"];
var string1 = nums.join();
document.write(string1);
document.write("<br>구분<br>")
var string2 = chars.join('/');
document.write(string2);
</script>
<script>
// 새로운 요소를 추가하는 push(), unshift()
var nums = [1,2,3];
var ret1 = nums.push(4,5); // 배열 맨 끝에 새로운 요소를 추가
document.write("배열의 길이 : " + ret1 + ", 배열의 요소 " + nums);
document.write("<br>구분<br>")
var ret2 = nums.unshift(0); // 배열 맨 앞에 새로운 요소 추가
document.write("배열의 길이 : " + ret2 + ", 배열의 요소 " + nums);
</script>
<script>
// 배열에서 요소 꺼내기 pop(), shift()
var nums = [1,2,3];
var rem1 = nums.pop(); // 마지막 요소를 꺼냄
document.write("꺼낸 요소 " + rem1 + ", nums의 요소 : " + nums);
document.write("<br>구분<br>")
var rem2 = nums.shift(); // 1번째 요소를 꺼냄
document.write("꺼낸 요소 " + rem2 + ", nums의 요소 : " +nums);
</script>
<script>
// 원하는 위치에 요소를 추가, 삭제하는 splice()
// splice() 메서드의 인수가 1개인 경우 요소 삭제
var nums = [1,2,3,4,5];
var newNums = nums.splice(2);
document.write("반환된 배열 : " + newNums + " 변경된 배열 : " + nums);
</script>
<script>
// splice() 메서드의 인수가 2개인 경우. 첫 번째 인수는 인덱스값, 두 번째 인수는 삭제할 요소의 개수
var lang = ["html", "css", "js", "java"];
var newLang = lang.splice(2,1);
document.write("반환된 배열 : " + newLang + "변경된 배열 : " + lang);
</script>
<script>
// splice() 메서드의 인수가 3개인 경우. 첫 번째 인수는 배열에서 삭제할 시작 위치, 두 번째 인수는 삭제할 개수, 세번째 인수는 삭제한 위치에 새로 추가할 요소 지정
var lang = ["html", "css", "js", "java"];
var newLang = lang.splice(1,1,"python");
document.write("반환된 배열 : " + newLang + "변경된 배열 : " + lang);
</script>
<script>
//기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice()
var color = ["black", "green", "yellow", "blue"];
var color2 = color.slice(2) // 인덱스 값이 2인 요소부터 마지막 요소까지 꺼내기
document.write(color2);
</script>
<script>
// slice() 메서드의 인수가 2개인 경우 요소 꺼내기
var color = ["black", "green", "yellow", "blue"];
var color2 = color.slice(2,4); // 인덱스값이 2부터 3인 요소까지 꺼내기(두번째 요소의 인덱스)
document.write(color2);
</script>
Date 객체
- 날짜와 시간 정보를 나타낼 수 있음
- 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마나 남았는지 알려주는 등 사이트에서 여러가지로 응용할 수 있음
<script>
// Date 객체 인스턴스 만들기
var date = new Date();
document.write(date);
</script>
<script>
// Date 객체로 특정 날짜 나타내기
var date = new Date("2025-01-01"); // 월, 일이 한 자리일 때는 앞에 0을 붙이지 않고 2025-1-1로 작성해도 됨
document.write("Date 객체로 특정 날짜 나타내기 " + date);
document.write("<br>")
// Date 객체로 특정 날짜와 시간 나타내기
var date1 = new Date("2024-12-30T17:00:00");
document.write("Date 객체로 특정 날짜와 시간 나타내기 " + date1);
</script>
<script>
// 자바스크립트의 날짜, 시간 입력 방식 알아보기
// YYYY 연도, MM 월, DD 일, HH 시간, MM 분, SS 초를 의미
// 1. YYYY-MM-DD 형식
new Date("2024");
new Date("2024-12");
new Date("2024-12-30");
// 2. YYYY-MM-DDTHH 형식
new Date("2024-12-30T17:00:00"); // 시간을 나타낼 때는 날짜뒤에 T를 붙이고 HH:MM:SS의 형태로 사용
new Date("2024-12-30T17:00:00Z"); // 맨 끝에 Z를 붙이면 UTC(국제 표준시)로 표시
// 3. MM/DD/YYYY 형식
new Date("12/30/2024");
// 4. 이름 형식
new Date("TUE Dec 30 2024 17:00:00 GMT+0900 (대한민국 표준시)");
</script>
Date 객체 메서드
| 날짜, 시간 정보 가져오기(get+) | 날짜, 시간 정보 설정하기(set+) |
| FullYear() : 연도를 4자리 숫자로 표시 | FullYear() : 연도를 4자리 숫자로 설정 |
| Month() : 0~11 사이 숫자로 월을 표시. 0이 1월을 의미 | Month() : 0~11 사이 숫자로 월을 설정. 0이 1월을 의미 |
| Date() : 1~31 사이 숫자로 일을 표시 | Date() : 1~31 사이 숫자로 일을 설정 |
| Day() : 0~6 사이 숫자로 요일을 표시. 0은 일요일을 의미 | Day() : 0~6 사이 숫자로 요일을 설정. 0은 일요일을 의미 |
| Time() : 1970/1/1 자정 이후 시간을 밀리초로 표시 | Time() : 1970/1/1 자정 이후 시간을 밀리초로 설정 |
| Hours() 0~23 사이의 숫자로 시를 표시 | Hours() 0~23 사이의 숫자로 시를 설정 |
| Minutes() : 0~59 사이 숫자로 분을 표시 | Minutes() : 0~59 사이 숫자로 분을 설정 |
| Seconds() : 0~59 사이 숫자를 초로 표시 | Seconds() : 0~59 사이 숫자를 초로 설정 |
| Millisecond() : 0~999 사이 숫자로 밀리초를 표시 | setMillisecond() : 0~999 사이 숫자로 밀리초를 설정 |
| 날짜, 시간 형식 바꾸기 | toLocaleString() | 현재 날짜와 시간을 현지 시간으로 표시 |
| toString() | Date 객체 타입을 문자열로 표시 |
Math 객체
- 수학 계산과 관련된 메서드가 많이 포함
- Date, Array 객체는 new 예약어로 객체의 인스턴스를 만든 후 프로그램에서 사용했지만, Math 객체는 인스턴스를 만들지 않음
- Math.프로퍼티명
Math.메서드명
Math 객체의 프로퍼티
- E : 오일러 상수
- PI : 원주율
- SORT2 : 루트2
- SORT1_2 : 1/루트2
- LN2 : 로그e의 2
- LN10 : 로그e의 10
- LOG2E : 로그2의 e
- LOG10 : 로그10의 e
Math 객체의 메서드
- 수학과 관련된 함수의 결괏값을 반환
- abs() : 절댓값을 반환
- ceil() : 매개변수의 소수점 이하 부분을 올림
- floor() : 매개변수의 소수점 이하 부분을 버림
- log() : 매개변수에 대한 로그값
- max() : 매개변수 중 최댓값을 반환
- min() : 매개변수 중 최솟값을 반환
- pow() : 매개변수의 지숫값을 반환
- random() : 0~1 사이의 무작위 수를 반환
- round() : 매개변수의 소수점 이하 부분을 반올림
- sqrt() : 매개변수에 대한 제곱근을 반환
728x90