반응형
10.2 Data 개체
자바스크립트에서 Data 객체는 날짜와 시간을 처리하는 데 사용된다. Data 객체에서는 1970녀 1월 1일 00:00(UTC)을 기점으로 현재 시간까지의 시간을 밀리초로 계산한 숫자로 날짜와 시간을 나타낸다.
협정 시계시, 즉 UTC(Universal Time, Coodinated)는 영국 런던 그리니치 천문대를 기점으로 하는 GMT(Greenwich Mean Time)와 동일한 의미로 사용된다. 한국 표준시(KST, Korea Standard Time)은 UTC에 9시간을 더한 시간이 된다. 따라서 UTC 00:00 AM은 한국 포준시로 09:00 AM이 된다.
10.2.1 현재 날짜와 시간
Date 객체에서 Date()는 생성자 함수이다. 다음은 new 연산자와 Date() 생성자 함수를 이용하여 현재의 날짜와 시간을 구하는 예제이다.
| 예제 10-10. Date() 생성자 함수로 현재 날짜와 시간 구하기 | data_now.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
document.getElementById("show").innerHTML = now;
</script>| 예제 10-10. Date() 생성자 함수로 현재 날짜와 시간 구하기 | data_now.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
// 생성자 함수 Date()를 사용해서 객체 생성하고 객체의 반환값을 변수 now에 저장
document.getElementById("show").innerHTML = now;
</script>new Date()는 현재의 날짜와 시간을 가진 Date 객체를 생성한다. 이 Date 객체를 브라우저 화면에 출력한다.
10.2.2 날짜 가져오기
Date 객체에서 날짜에서 사용되는 연, 월, 일을 가져오는 데는 getFullYear(), getMouth(), getDate() 메서드가 사용된다.
| 예제 10-11. 현재 날짜 가져오기 | date_get_date.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
let text = year + "년" + month + "월" + date + "일";
document.getElementById("show").innerHTML = text;
</script>| 예제 10-11. 현재 날짜 가져오기 | date_get_date.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
// new Date()는 현재 날짜와 시간을 가진 Date 객체를 반환한다.
const year = now.getFullYear();
// now.getFullYear()는 현재 날짜와 시간을 가진 객체 now에서 4자리로 된 연도를 반환한다.
const month = now.getMonth() + 1;
// now.getMont()는 현재 날짜와 시간을 가진 객체 now에서 월을 반환한다.
const date = now.getDate();
// now.getDate()는 객체 now에서 일자를 반환한다.
let text = year + "년" + month + "월" + date + "일";
// 년월일 출력
document.getElementById("show").innerHTML = text;
</script>
10.2.3 시간 가져오기
Date 객체에서 시간(시, 분, 초)을 가져오는 데는 getHours(), getMinutes(), getSeconds() 메서드가 사용된다.
| 예제 10-12. 현재 시간 가져오기 | date_get_time.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
const hour = now.getHours();
const min = now.getMinutes();
const second = now.getSeconds();
let text = hour + "시" + min + "분" + second + "초";
document.getElementById("show").innerHTML = text;
</script>| 예제 10-12. 현재 시간 가져오기 | date_get_time.html | 코드 원문 |
<p id="show"></p>
<script>
const now = new Date();
// 생성자 함수 Date()를 이용해서 Date 객체 생성후 객체 now에 연결
const hour = now.getHours();
// getHours() 메서드를 사용해서 객체 now의 시간을 가져오고 변수 hour에 저장
const min = now.getMinutes();
// getMinutes() 메서드를 사용해서 객체 now의 분을 가져오고 변수 min에 저장
const second = now.getSeconds();
// getSeconds() 메서드를 사용해서 객체 now의 초를 가져오고 변수 second에 저장
let text = hour + "시" + min + "분" + second + "초";
document.getElementById("show").innerHTML = text;
</script>
10.2.4 날짜와 시간 설정하기
Date 객체의 생성자 Date()를 이용하면 다음 코드에서와 같이 특정 날짜와 시간을 설정할 수 있다.
| 예제 10-13. 날짜와 시간 설정하기 | date_set.html | 코드 원문 |
<p id="show"></p>
<script>
const a = new Date(2025, 11, 25, 10, 30, 25);
const b = new Date(1998, 8, 13, 18, 20);
const c = new Date(2000, 1, 20);
text = "";
text += a + "<br>";
text += b + "<br>";
text += c;
document.getElementById("show").innerHTML = text;
</script>| 예제 10-13. 날짜와 시간 설정하기 | date_set.html | 코드 원문 |
<p id="show"></p>
<script>
const a = new Date(2025, 11, 25, 10, 30, 25);
/* 생성자 함수 Date()를 사용해서 날짜를 설정 인자는 2025, 11, 25, 10, 30, 25이다.
앞에서 부터 연, 월, 일, 시, 분, 초이다. */
const b = new Date(1998, 8, 13, 18, 20);
/* 생성자 함수 Date()를 사용해서 날짜를 설정한다. */
const c = new Date(2000, 1, 20);
text = "";
text += a + "<br>";
text += b + "<br>";
text += c;
document.getElementById("show").innerHTML = text;
</script>
10.3 Set 객체
Set 객체는 요소들이 중복되지 않는 유일한 값을 가진 집합이다. Set 객체는 수학에서 집합의 개념과 유사하다. Set 객체는 배열과 비슷하지만 다음과 같은 차이가 있다.
1. 요소가 중복된 값을 가지지 않는다.
2. 요소에 순서가 없다.
3. 인덱스를 사용하지 않는다.
10.3.1 Set 객체 생성
Set 객체를 생성하기 위해서는 다음 예에서와 같이 생성자 함수 Set()와 new 연산자를 이용한다.
| 예제 10-14. Set 객체 생성하기 | set.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set([2, 3, 5, 5, 7, 7 ]);
let text = "";
for(let value of set1) {
text += value + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>| 예제 10-14. Set 객체 생성하기 | set.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set([2, 3, 5, 5, 7, 7 ]);
/* 생성자 함수 Set()를 사용해서 set 객체 set1를 생성한다. 요소로
[2, 3, 4, 7, 7]를 집어넣는데 set 객체는 중복을 허용하지 않기 때문에
요소는 [2, 3, 4, 7]이 된다.*/
let text = "";
for(let value of set1) {
/* for of 문을 사용해서 set1 객체에 있는 값으로 루프한다.
text += value + "<br>";
}
document.getElementById("show").innerHTML = text;
</script>Set 객체에서는 요소의 순서가 없고 인덱스를 사용하지 않는다. 따라서 인덱스로는 요소에 접근할 수 없다. For Of 문을 이용해서 set1 객체의 요소를 순환한다.
10.3.2 add() 메서드
Set 객체에서는 add() 메서드를 이용해서 요소를 추가할 수 있다.
| 예제 10-15. Set 객체의 add() 메서드 | set_add.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set();
set1.add("사과");
set1.add("오렌지");
set1.add("수박");
let text = "";
set1.forEach(function(value) {
text += value + "<br>";
})
document.getElementById("show").innerHTML = text;
</script>| 예제 10-15. Set 객체의 add() 메서드 | set_add.html | 코드 분석 |
<p id="show"></p>
<script>
const set1 = new Set();
// new Set()은 빈 Set 객체를 생성한다.
set1.add("사과");
/* set1.add("사과")는 Set 객체 set1에 '사과'를 추가한다. Set 객체에서는
add() 메서드를 이용해서 요소를 추가한다. */
set1.add("오렌지");
set1.add("수박");
let text = "";
set1.forEach(function(value) {
/* forEach 문을 이용해서 set1 객체의 요소를 순회한다. 반복 루프에서
변수 value는 객체 set1의 요소 값을 가진다. */
text += value + "<br>";
})
document.getElementById("show").innerHTML = text;
</script>
10.3.3 size 프로퍼티
set 객체의 size 프로퍼티를 이용하면 요소의 개수를 구할 수 있다.
| 예제 10-16. Set 객체의 size 프로퍼티 | set_size.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set("hello");
let text = "";
for(let value of set1) {
text += value + "<br>";
}
text += "Set 크기: " + set1.size;
document.getElementById("show").innerHTML = text;
</script>| 예제 10-16. Set 객체의 size 프로퍼티 | set_size.html | 코드 분석 |
<p id="show"></p>
<script>
const set1 = new Set("hello");
/* 문자열 'hello'를 인수로 하여 Set 객체를 생성한다. 객체 set1의 요소는
'h', 'e', 'I', 'o'가 된다. */
let text = "";
for(let value of set1) {
text += value + "<br>";
}
text += "Set 크기: " + set1.size;
/* set.size는 set 객체 set1의 요소의 개수인 4 값을 가진다. 이와 같이 Set
객체의 size 프로퍼티는 요소의 개수를 의미한다. */
document.getElementById("show").innerHTML = text;
</script>
10.3.4 has() 메서드
Set 객체의 has() 메서드는 특정 요소의 존재 여부를 판단하는 데 사용된다.
| 예제 10-17. set 객체의 has() 메서드 | set_has.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set(["사과", "오렌지", "수박"]);
let text = "";
text += set1.has("사과") + "<br>";
text += set1.has("키위");
document.getElementById("show").innerHTML = text;
</script>| 예제 10-17. set 객체의 has() 메서드 | set_has.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set(["사과", "오렌지", "수박"]);
let text = "";
text += set1.has("사과") + "<br>";
/* 객체 set1에서 has() 메서드를 사용해서 객체 set1에 사고가 존재하는지 체크한다.
존재하므로 set1.has("사과")는 true를 반환한다. */
text += set1.has("키위");
document.getElementById("show").innerHTML = text;
</script>
10.3.5 delete() 메서스
Set 객체의 delete() 메서드는 특정 요소를 삭제하는 데 사용된다.
| 예제 10-18. Set 객체의 delete() 메서드 | set_delete.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set(["사과", "오렌지", "수박"]);
set1.delete("오렌지");
let text = "";
set1.forEach(function(value){
text += value + "<br>";
})
document.getElementById("show").innerHTML = text;
</script>| 예제 10-18. Set 객체의 delete() 메서드 | set_delete.html | 코드 원문 |
<p id="show"></p>
<script>
const set1 = new Set(["사과", "오렌지", "수박"]);
// 생성자 함수 Set()를 사용해서 객체 set1를 사용한다.
set1.delete("오렌지");
// 객체 set1의 요소 중에서 "오렌지"를 삭제한다.
let text = "";
set1.forEach(function(value){
// forEach() 메서드를 사용해서 객체 set1의 값을 출력한다.
text += value + "<br>";
})
document.getElementById("show").innerHTML = text;
</script>
반응형
'프로그래밍 > 예제로 배우는 자바스크립트 요약 및 분석(IT 전공 서적)' 카테고리의 다른 글
| 예제로 배우는 자바스크립트 요약 및 코드 분석 11장 11.1 ~ 11.2 (0) | 2023.10.16 |
|---|---|
| 예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.4 (0) | 2023.10.16 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 10장 10.1 (0) | 2023.10.15 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.3 ~ 9.5 (0) | 2023.10.14 |
| 예제로 배우는 자바스크립트 요약 및 코드 분석 9장 9.1 ~ 9.2 (0) | 2023.10.14 |