Javascript : 객체(object), 내장객체 - 수학객체, 날짜객체
객체
자바스크립트는 객체 지향 언어이다.
객체를 구성하는 요소로는 속성과 기능이 있다.
[기본형]
객체.속성명 = 값;
: 특정 객체의 속성값을 바꾸고 싶을 때
객체.속성명;
: 특정 객체의 속성값을 알고싶을 때
객체.메서드();
: 특정 객체의 기능을 실행시킬 때
객체 종류
내장객체, 브라우저 객체모델(BOM), 문서객체(DOM)
내장객체 - 자바스크립트 엔진 안에 내장되어 필요한 경우에 생성해 사용, 꺼내 쓸 수 있다. 날짜객체, 문자, 배열, 수학객체가 있다.
브라우저 객체 - 브라우저에 계층구조로 내장되어있다. window, location, screen, history, navigator객체 등이 있다.
문서객체 - html문서 구조를 말한다. html태그는 최상위 객체로 안쪽에 다양한 하위 객체들을 포함하지만 자바스크립트 문서객체는 브라우저간 호환성이 낮은 단점이 있어 JQuery언어가 개발됨. 현재는 ES6버전으로 호환성을 높인 버전이 업데이트 되어 다양한 속성과 기능을 이용해 태그를 제어할 수 있다.
내장객체
자바스크립트 엔진 안에 내장된 객체를 말하며 필요한 경우 객체를 생성해 사용 가능
내장 객체를 생성할 때는 new 키워드로 생성한다
[기본형]
1. var 변수 = new Object();
변수.속성1 = 값;
변수.함수(메서드) = function(){코드};
Object는 생성함수라는 뜻으로 커스텀해 만들 객체를 선언할 때 사용
- ★ var 변수 = {
속성명1 : 값,
속성명2 : 값,
함수명 : function(){코드} -> 메서드
}
1번 기본형의 축약형으로 new object()가 곧 {}이다.
{}안의 속성과 메서드를 한번에 선언해 쓴다.
// 새로운 tv 객체 생성
var tv = new Object();
// tv객체에 color속성과 price속성 추가
tv.color = "white";
tv.price = 30000;
// tv객체에 info 메서드(=함수)를 추가.
tv.info = function () {
// this키워드는 해당 객체, 즉 tv를 가리킴
document.write("tv색상 : " + this.color, "<br/>");
document.write("tv가격 : " + this.price, "<br/>");
};
document.write("<h2>tv객체의 info메서드 호출</h2>");
tv.info();
// 새로운 car 객체 생성
var car = {
color: "black",
price: 500000,
info: function () {
//this키워드는 해당 객체, 즉 car를 가리킴
document.write("car색상 : " + this.color, "<br/>");
document.write("car가격 : " + this.price, "<br/>");
},
};
car.color; //balck
car.color = "pink"; //pink로 바꿈
// 객체.메서드명(); 메서드 실행
document.write("<h2>car객체의 info메서드 호출</h2>");
car.info();
객체를 이용하면 데이터를 관리하기 용이하다.
var username = "김땡땡";
var userid = "rlaEodEod";
var useremail = "rla@naver.com";
var userpw = "abc123";
var user = {
username: "김땡땡",
userid: "rlaEodEod",
useremail: "rla@naver.com",
userpw: "abc123",
};
user.username = "최땡땡"; // 유저네임 값 바꾸기
수학 객체
사칙연산이 아닌 어려운 연산을 쉽게 계산하도록 만들어진 객체이다.
[메서드와 상수 종류]
1. Math.abs(숫자) : 숫자의 절댓값 반환
2. Math.max(숫자1, 숫자2...) : 가장 큰 값 반환
3. Math.min(숫자1, 숫자2...) : 가장 작은 값 반환
4. Math.pow(숫자, 제곱값) : 숫자의 거듭제곱값 반환
5. Math.random() : 0~1 사이의 난수(랜덤)를 반환
6. Math.round(숫자) : 소수점 첫째 자리에서 반올림한 정수 반환
7. Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림한 정수 반환
8. Math.floor(숫자) : 소수점 첫째 자리에서 무조건 내림한 정수 반환
9. Math.sqrt(숫자) : 숫자의 제곱근값 반환
10. Math.PI : 원주율 상수 반환
<script>
var num = 2.1234;
var maxnum = Math.max(10, 5, 8, 30);
document.write(maxnum, "<br/>"); // 30
var minnum = Math.min(10, 5, 8, 30);
document.write(minnum, "<br/>"); // 5
var roundnum = Math.round(num);
document.write(roundnum, "<br/>"); // 2
var floornum = Math.floor(num);
document.write(floornum, "<br/>"); // 2
var ceilnum = Math.ceil(num);
document.write(ceilnum, "<br/>"); // 3
var randomnum = Math.random();
document.write(randomnum, "<br/>"); // 0 ~ 1사이의 랜덤한 수
var pinum = Math.PI;
document.write(pinum, "<br/>"); // 3.141592..
</script>임의의 구간에서의 랜덤한 수를 반환하고 싶을 때
- Math.random() * 최댓값
0 부터 최댓값 사이의 랜덤한 수를 실수로 반환한다(소수점 붙음)- Math.floor(Math.random() * (최댓값 + 1))
0 부터 최댓값 사이의 랜덤한 수를 정수로 반환- Math.floor(Math.random() * (최댓값 - 최솟값 + 1)) + 최솟값;
원하는 구간 사이의 랜덤한 수를 정수로 반환
<script>
// 0~10의 난수 반환
var num1 = Math.random() * 10;
document.write(num1, "<br/>");
// 0~10의 난수를 정수로 반환
num1 = Math.floor(Math.random() * 10); //10.xxxx가 나와도 9로 반환해 결국 0~9를 반환하게 됨
document.write(num1, "<br/>");
num1 = Math.floor(Math.random() * 11); //0~10의 난수 반환
document.write(num1, "<br/>");
//120~150의 난수를 정수로 반환
num1 = Math.floor(Math.random() * 31) + 120;
document.write(num1, "<br/>");
</script>묵찌빠 게임 만들기
<script>
document.write("<h2>컴퓨터 묵찌빠 게임</h2>");
var game = prompt("가위 바위 보!");
var gameNum;
switch (game) {
case "가위":
gameNum = 1;
break;
case "바위":
gameNum = 2;
break;
case "보":
gameNum = 3;
break;
default:
alert("잘못 작성하였습니다.");
location.reload(); //새로고침
}
var com = Math.ceil(Math.random() * 3); //1과 3 사이의 난수
//랜덤하게 컴퓨터가 내는 가위바위보
document.write("<img src='./img/math_img_" + com + ".png' />");
if (gameNum == com) {
document.write("사용자 승리!");
} else {
document.write("다시 한번 가위바위보!");
}
</script>
날짜 정보 객체(date)
날짜나 시간 관련 정보를 제공받고 싶을 때 사용한다.
변수 안에 선언할 때 new 붙이고 Date()를 붙인다.
new Date(); 는 현재 날짜 현재 시간을 남긴다.
특정 날짜 제공하는 경우 Date() 괄호 안에 날짜를 입력
문자형 숫자와 숫자를 넣을 수 있는데
프로그래밍 언어에서 시작 숫자는 0이므로 0이 곧 1월이 된다.
문자형으로 쓸 경우 연도 월 일을 / 구분
숫자형은 , 로 구분
[기본형]
1. 현재 날짜 현재 시간
- var 참조변수 = new Date();
- 특정 날짜 정보 제공
- var 참조변수 = new Date ('연/월/일'); 문자형 숫자.
var 참조변수 = new Date ('2000/5/31');- var 참조변수 = new Date (연,월-1,일); 숫자. ★ 더 많이 씀
var 참조변수 = new Date (2000,4,31);
날짜 관련 메서드
날짜나 시간 정보 가져오기 'get메서드'
날짜나 시간 정보 바꾸기 'set메서드'
[get 메서드]
1. getFullYear() 연도 정보
2. getMonth() 월 정보
월에서 -1 된 값으로 나옴 4가 나오면 실제로 5월을 뜻함
3. getDate() 일 정보
4. getDay() 요일 정보 - 0~6 숫자로 표현되며 0 일요일 6 토요일
5. getHours() 시 정보
6. getMinutes() 분 정보
7. getSeconds() 초 정보
8. getMilliseconds() 밀리초 정보 1000밀리초 = 1초 ★
9. getTime() 1970.1.1 부터 경과된 시간을 밀리초 단위로 표시
10. toGMTString() GMT 표준 표기 방식으로 문자형 데이터로 시간을 반환
[set 메서드]
1. setFullYear() 연도 정보 수정
2. setMonth() 월 정보 수정
월에서 -1 된 값으로 수정해야함 5월을 나타내려면 4를 넣음
3. setDate() 일 정보 수정
4. (setDay는 없음.)
5. setHours() 시 정보 수정
6. setMinutes() 분 정보 수정
7. setSeconds() 초 정보 수정
8. setMilliseconds() 밀리초 정보 수정 1000밀리초 = 1초 ★
9. setTime() 1970.1.1 부터 경과된 시간을 밀리초 단위로 수정
10. toLocalString() 운영 시스템 표기 방식으로 문자형 데이터로 시간을 반환
오늘 날짜 반환하기
<script>
var today = new Date(); //오늘날짜 정보를 가진 객체 생성
var nowMonth = today.getMonth() + 1; //월 정보
var nowDate = today.getDate(); //일 정보
var nowDay = today.getDay(); //요일 정보
document.write('<h2>오늘 날짜 정보</h2>');
document.write('현재 월 : ' + nowMonth, '<br/>');
document.write('현재 일 : ' + nowDate, '<br/>');
document.write('현재 요일 : ' + nowDay, '<br/>');
//getDay = 5를 "금요일"로 바꾸기
switch (nowDay) {
case 0:
nowDay = '일요일';
break;
case 1:
nowDay = '월요일';
break;
case 2:
nowDay = '화요일';
break;
case 3:
nowDay = '수요일';
break;
case 4:
nowDay = '목요일';
break;
case 5:
nowDay = '금요일';
break;
case 6:
nowDay = '토요일';
break;
default:
alert('해당하는 요일이 없습니다.');
}
document.write(
'오늘 날짜 : ' + nowMonth + '월 ' + nowDate + '일 ' + nowDay
);
</script>
2002년 월드컵의 요일 정보 구하기
<script>
document.write("<h2>2002년 월드컵의 요일 정보를 구해보자</h2>");
var worldcup = new Date(2002, 4, 31); //2002년 5월 31일
var theMonth = worldcup.getMonth() + 1; //월드컵 월 정보
var theDate = worldcup.getDate(); //월드컵 일 정보
var theDay = worldcup.getDay(); //월드컵 요일 정보
// 요일을 숫자에서 문자(요일)로 변환하기
switch (theDay) {
case 0:
theDay = "일요일";
break;
case 1:
theDay = "월요일";
break;
case 2:
theDay = "화요일";
break;
case 3:
theDay = "수요일";
break;
case 4:
theDay = "목요일";
break;
case 5:
theDay = "금요일";
break;
case 6:
theDay = "토요일";
break;
default:
alert("해당하는 요일이 없습니다.");
}
document.write(
"월드컵 개최일은 " + theMonth + "월 " + theDate + "일 " + theDay
);
</script>
디데이 계산기 만들기
현재 날짜부터 특정 날짜까지 며칠 남았는지 구하는 공식
남은 일수(밀리초) = 특정 날짜 객체 - 현재 날짜 객체
밀리초로 계산한 시간값
1초 = 1000msc
1분 = 1000 x 60 = 60,000 msc
1시간 = 1000 x 60 x 60 = 3,600,000 msc
1일 = 1000 x 60 x 60 x 24 = 86,400,000 msc
<script>
var today = new Date(); //오늘 날짜
var nowYear = today.getFullYear(); //현재 연도 정보
var theDate = new Date(nowYear, 11, 31); //올해 말일 정보
//남은 일수(밀리초) = 올해 말일(밀리초) - 오늘 날짜(밀리초)
var diffDate = theDate.getTime() - today.getTime();
// document.write(diffDate);
//반올림(남은 일수 / 하루)
var result = Math.ceil(diffDate / (1000 * 60 * 60 * 24));
document.write("연말 D-Day : " + result + "일 남았습니다.");
</script>
