<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자바스크립트 내장객체</title>
</head>
<body>
<h1>자바스크립트 내장객체</h1>
<h2>Date </h2>
<p>날짜와 시간을 다루는 객체</p>
<p>사용자 브라우저의 시간대 timezone을 기준으로 날짜와 시간을 다루는 객체</p>
<script>
let today =new Date();
document.write(today, '<br>');
today =Date.now();
document.write(today, '<br>'); //밀리 초로 환산됨 - 1970-01-01 기준
let someday = new Date(2022, 11, 25, 12, 35, 25);
// new Date(년월일시분초)
// 단, 월은 0~11임!
document.write(someday, '<br>');
let anotherday = new Date('Dec 25 2022');
document.write(anotherday, '<br>');
anotherday = new Date('dec 25 2023 12:35:35');
document.write(anotherday,'<br>')
// anotherday = new Date('2023-12-25/12:35:35');
anotherday = new Date('2023/12/25/12:35:35'); //이게 날자셋팅 편함
document.write(anotherday,'<br>')
</script>
<h2>날짜 구성요소 얻기</h2>
<p>Date 객체의 getXxx 메서드를 이용해서 날짜/시간의 각 요소를 얻을 수 있음 </p>
<script>
today = new Date();
document.write( today.getFullYear(),' ',
today.getMonth() + 1 ,' ',
today.getDate(), ' ',
today.getDay(), ' ', // 0 = 일요일
'<br>');
document.write(today.getHours(), ' ',
today.getMinutes(), ' ',
today.getSeconds(), ' ', '<br>')
</script>
<hr>
<script>
//현재 날짜를 입력하면 요일을 출력하는 함수 작성
// 입력값 : 2022 - 06 - 10 => 금요일
let date = '2022-06-10';
let WeekDay = (date) => {
today = new Date(date)
day = '';
switch ( today.getDay() ) {
case 0 : day = '일요일'; break;
case 1 : day = '월요일'; break;
case 2 : day = '화요일'; break;
case 3 : day = '수요일'; break;
case 4 : day = '목요일'; break;
case 5 : day = '금요일'; break;
case 6 : day = '토요일'; break;
} ;
return day;
};
document.write(date, ' ', WeekDay(date), '<br>');
</script>
<hr>
<script>
// 년, 월을 입력하면 마지막 날을 출력
// 입력 : 2022,06 => 30
let year = 2022;
let month = 6;
date = new Date(year, month, 1)
document.write(date.getDate(), '<br>')
date = new Date(year, month, 0)
document.write(date.getDate(), '<br>');
//날짜 생성시 '일'을 0으로설정하면 현재 월의 마지막 일 출력
</script>
<h2> JSON </h2>
<p> JavaScript Object Notation </p>
<p>데이터를 저장하거나 다른 시스템으로 전송시 많이 사용하는 데이터 교환 형식</p>
<p>자바스크립트의 Object 표기와 유사 </p>
<p>단, 키를 정의할때는 반드시 ""를 사용해야 함 </p>
<p>이전에 사용했던 데이터 교환형식인 XML에 비해 작은 코드로도 데이터를 정의할 수 있음 </p>
<script>
let user = { userid : 'abc123', passwd: '987xyz',
toString() {
return `userid: ${this.userid}, passwd: ${this.passwd}`;
}
};
document.write(user, '<br>');
// Object 객체에 정의한 멤버변수의 값을 출력하려면 for - in을 사용하거나
// toString()을 정의해야함
// 또한, 새로운 멤버가 추가되면 다시 toString()을 재정의해야함 번거로움
</script>
<h2>JSON.stringify / parse </h2>
<p>stringigy : 객체를 JSON 문자열로 변환하기 위해 사용,
데이터를 서버로 전송 시 또는 객체를 출력시 사용 </p>
<p>parse: JSON 문자열을 객체로 변환하기 위해 사용,
서버로부터 받은 데이터를 클라이언트에서 작업시 사용 </p>
<script>
user = { userid : 'abc123', passwd: '987xyz'};
let json = JSON.stringify(user);
document.write(json, '<br>')
</script>
<script>
user = '{ "userid" : "abc123", "passwd": "987xyz" }';
let obj = JSON.parse(user);
document.write(obj.userid, '<br>');
document.write(obj.passwd), '<br>';
</script>
<script>
sjs =
'{ "sjs" : [{ "name" : "혜교", "grd": "수"}, \
{"name" : "지현", "grd": "미"}, \
{"name" : "수지", "grd": "가"} ] }';
obj = JSON.parse(sjs);
document.write(obj, '<br>' );
document.write(obj.sjs, '<br>' );
document.write(obj.sjs[1], '<br>' );
document.write(obj.sjs[0].name, '<br>' );
document.write(obj.sjs[1].name, '<br>' );
document.write(obj.sjs[2].name, '<br>' );
// 혜교 학생의 학점 출력
sj = '';
for (let i =0; i < obj.sjs.length; ++i) {
if (obj.sjs[i].name == '혜교')
sj = obj.sjs[i];
break;
}
document.write(sj.name, ' ', sj.grd, '<br>' );
</script>
<hr>
<script>
// 혜교 학생의 학점 출력 2
let sj = obj.sjs.filter( function (sj) {
return (sj.name == '혜교'); // 만약 데이터를 찾는경우 배열에 저장해둠
});
document.write(JSON.stringify(sj), '<br>');
document.write(sj, '<br>');
document.write(sj[0].name, ' ', sj[0].grd, '<br>' );
</script>
<hr>
<script>
// 혜교 학생의 학점 출력 3
sj = '';
for (let item of obj.sjs ) {
if (item.name == '혜교')
sj = item;
break;
}
document.write(sj.name, ' ', sj.grd, '<br>' );
</script>
<script>
members = {users : [{userid: 'abc123', passwd: '987xyz' }] } ;
</script>
</body>
</html>