- Object 객체
Java Script의 기본 자료형인 객체이다.
모든 타입을 받을 수 있는 특징이 있고 생성자 함수를 통해 만들 수 있다.
- Object 메소드
hasOwnProperty : 생성한 객체가 어떤 속성을 가지고 있는지 알 수 있다.
propertyIsEnumerable : 이 메소드는 Enumerable와 Nonenumerable과 관련이 있다.
Enumerable와 Nonenumerable는 열거 가능 여부를 의미하는데 이는 반복문에 영향을 끼치기 때문에
반복문 실행 가능 여부라고 생각하면 된다.
- toString
해당 객체의 속성들을 String으로 나열해준다. 보통 임의로 만들어 사용한다.
- Constructor
typeof는 new Number 객체 같은 클래스로 선언한 것은 비교할 수 없는데
Constructor은 이 문제를 해결해준다.
- Number(toFixed)
Number 클래스의 메소드인 toFixed는 숫자의 반올림 기능을 가지고 있다.
괄호 () 안에 숫자를 입력받아 자릿수를 정한다.
단, 반환된 반올림 값은 String 형으로 주의를 해야한다.
- HTML 관련 String 메소드
anchor : a태그로 포장, 감싸준다.
big : big 태그로 포장한다.
bold : 글씨 굵게
fontcolor : 폰트 색깔 변경
fontsize : 폰트 크기 변경
italics : 글자 기울여서 표현
link : 글씨에 링크달기
small : 글씨 작게
strike : 글씨 취소선(중간에 사선)
sub : 아래 첨자
sup : 위 첨자
- Date 객체
날짜 데이터를 관리 할 수 있는 객체
- Date 메소드
전부 현재 기준
getFullYear : 년도 반환
getMonth : 월 반환
getDate : 일 반환
getDay : 요일 반환()
getHours : 시간 반환
getMinutes : 분 반환
getSeconds : 초 반환
getMilliseconds : 밀리초 반환
getTimezoneOffset : GMT 시간 기준 현재 지역이 몇 시간 차이나는지 반환
getTime : 1970년 1월 1일 0시 0분 00초 기준으로 지난 밀리세컨 단위의 시간을 리턴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area{
height: 150px;
background: lightgray;
border: 1px solid black;
}
.area-big{
height: 400px;
background: lightgray;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>내장객체</h1>
<h3>object 객체</h3>
<p>자바스크립트의 가장 기본적인 내장 객체이다.<br>
Object 생성자 함수를 통해 만들어진 인스턴스이다.</p>
<button onclick="test1();">실행확인</button>
<script type="text/javascript">
function test1() {
var obj1 = {};
var obj2 = new Object();
console.log(obj1 instanceof Object);
console.log(obj2 instanceof Object);
}
</script>
<br>
<h3>Object 객체의 기본 메소드</h3>
<h4>hasOwnProperty()와 propertyIsEnumerable()메소드</h4>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script type="text/javascript">
function test1() {
var object = {age:20};
var area1 = document.getElementById("area1");
area1.innerHTML += "name속성을 가지고 있니? : " + object.hasOwnProperty('name') + "<br>";
area1.innerHTML += "age속성을 가지고 있니? : " + object.hasOwnProperty('age') + "<br>";
area1.innerHTML += "반복문을 사용할 수 있니? : " + object.propertyIsEnumerable('age') + "<br>";
area1.innerHTML += "반복문을 사용할 수 있니? : " + object.propertyIsEnumerable('name') + "<br>";
}
</script>
<br>
<h4>toString() 메소드</h4>
<button onclick="test3();"> 실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test3() {
var student = {
name:'이르므',
age:20,
toString:function(){
return "name : " + this.name + "\nage : " + 20;
}
}
//alert(student.toString());
alert(student);
}
</script>
<hr>
<h4>constructor 속성</h4>
<p>자료형 검사할 때 유용하게 사용할 수 있다.</p>
<button onclick="test4();">실행확인</button>
<div id="area3" class="area"></div>
<script type="text/javascript">
function test4() {
var num1 = 120;
var num2 = new Number(120);
console.log("num1의 자료형 : " + typeof(num1));
console.log("num2의 자료형 : " + typeof(num2));
console.log("num1 + num2 : " + (num1 + num2));
console.log(num2);
var area3 = document.getElementById("area3");
if(typeof(num1) == 'number'){
area3.innerHTML += "num1은 숫자입니다.<br>";
}else {
area3.innerHTML += "num1은 숫자가 아닙니다.<br>";
}
if(typeof(num2) == 'number'){
area3.innerHTML += "num2은 숫자입니다.<br>";
}else {
area3.innerHTML += "num2은 숫자가 아닙니다.<br>";
}
if(num1.constructor == Number){
area3.innerHTML += "다시 봐도 num1은 숫자입니다.<br>";
}else {
area3.innerHTML += "아무리 봐도 num1은 숫자가 아닙니다.<br>";
}
if(num2.constructor == Number){
area3.innerHTML += "다시 보니 num2은 숫자입니다.<br>";
}else {
area3.innerHTML += "아무리 봐도 num2은 숫자가 아닙니다.<br>";
}
}
</script>
<hr>
<h3>Number 객체</h3>
<button onclick="test5();">실행확인</button>
<p>toFixed() 테스트</p>
<div id="area6" class="area"></div>
<script type="text/javascript">
function test5() {
var num1 = 123.456789;
var num2 = 123;
var area6 = document.getElementById("area6");
area6.innerHTML += "num1의 기본값 : " + num1 + "<br>";
area6.innerHTML += "num2의 기본값 : " + num2 + "<br>";
area6.innerHTML += "num1.toFixed(1) : " + num1.toFixed(1) + "<br>";
area6.innerHTML += "num1.toFixed(4) : " + num1.toFixed(4) + "<br>";
area6.innerHTML += "num2.toFixed(4) : " + num2.toFixed(4) + "<br>";
area6.innerHTML += "num1.toFixed(4) + num2.toFixed(4) : " + (num1.toFixed(4) + num2.toFixed(4)) + "<br>";
// toFixed는 대상을 지정한 자리수 기준으로 반올림 해준다.
// 단, toFixed의 return 자료형은 string임을 주의하자
area6.innerHTML += "그럼 자료형은? : " + typeof(num1.toFixed(1)) + "<br>";
}
</script>
<hr>
<h3>String 객체의 HTML 관련 메소드</h3>
<p>String 객체의 메소드는 크게 기본메소드와 HTML 관련 메소드로 구분할 수 있다.</p>
<button onclick="test6();">실행확인</button>
<div id="area7" class="area-big"></div>
<script type="text/javascript">
function test6() {
var str = "javascript";
var area7 = document.getElementById("area7");
area7.innerHTML += "기본값 : " + str + "<br>";
// anchor() : a태그로 포장해줌
area7.innerHTML += "anchor() : " + str.anchor() + "<br>";
// big() : big태그로 포장해줌
area7.innerHTML += "big() : " + str.big() + "<br>";
// bold() : bold 글자 굵게, b태그
area7.innerHTML += "bold() : " + str.bold() + "<br>";
// fontcolor() : 글자 색깔 변경
area7.innerHTML += "fontcolor() : " + str.fontcolor("red") + "<br>";
// fontsize() : 글자 크기 변경
area7.innerHTML += "fontsize() : " + str.fontsize(20) + "<br>";
// italics() : 글씨 기울게
area7.innerHTML += "italics() : " + str.italics() + "<br>";
// link() : 글씨에 링크달기
area7.innerHTML += "link() : " + str.link("https://www.naver.com") + "<br>";
// small() : 글씨 작게
area7.innerHTML += "small() : " + str.small() + "<br>";
// strike() : 글씨 취소선
area7.innerHTML += "strike() : " + str.strike() + "<br>";
// sub() : 아래 첨자
area7.innerHTML += "sub() : " + str.sub() + "<br>";
// sup() : 위 첨자
area7.innerHTML += "sup() : " + str.sup() + "<br>";
}
</script>
<hr>
<h3>Date 객체</h3>
<p>날짜를 관리하는 객체</p>
<button onclick="test7();">실행확인</button>
<div id="area8" class="area"></div>
<script type="text/javascript">
function test7(){
var area8 = document.getElementById("area8");
//GMT 시간, 런던 기준의 그리니치 시간
var date1 = new Date();
var date2 = new Date('November 14');
var date3 = new Date('November 14, 2018');
var date4 = new Date('November 14, 2018, 14:41:30');
area8.innerHTML += "date1 : " + date1 + "<br>";
area8.innerHTML += "date2 : " + date2 + "<br>";
area8.innerHTML += "date3 : " + date3 + "<br>";
area8.innerHTML += "date4 : " + date4 + "<br>";
//UTC 시간
var date5 = new Date(2018, 10, 14);
var date6 = new Date(2018, 10, 14, 14, 46, 45);
var date7 = new Date(2018, 10, 14, 14, 46, 45, 1);
area8.innerHTML += "date5 : " + date5 + "<br>";
area8.innerHTML += "date6 : " + date6 + "<br>";
area8.innerHTML += "date7 : " + date7 + "<br>";
}
</script>
<hr>
<h3>Date 객체의 메소드</h3>
<button onclick="test8();">실행확인</button>
<div id="area9" class="area-big"></div>
<script type="text/javascript">
function test8() {
var area9 = document.getElementById("area9");
var date = new Date();
area9.innerHTML += "getFullYear() : " + date.getFullYear() + "<br>";
area9.innerHTML += "getMonth() : " + (date.getMonth() + 1) + "<br>";
area9.innerHTML += "getDate() : " + date.getDate() + "<br>";
area9.innerHTML += "getDay() : " + date.getDay() + "<br>";
area9.innerHTML += "getHours() : " + date.getHours() + "<br>";
area9.innerHTML += "getMinutes() : " + date.getMinutes() + "<br>";
area9.innerHTML += "getSeconds() : " + date.getSeconds() + "<br>";
area9.innerHTML += "getMilliseconds() : " + date.getMilliseconds() + "<br>";
area9.innerHTML += "getTimezoneOffset() : " + date.getTimezoneOffset() + "<br>";
// 1970년 1월 1일 0시 0분 00초 기준으로 지난 밀리세컨 단위의 시간을 리턴한다.
area9.innerHTML += "getTime() : " + date.getTime() + "<br>";
var date2 = new Date(new Date(2018, 10, 14, 15, 10, 00, 99).getTime());
console.log(date2);
// 날짜 사이의 간격 구하기
var now = new Date();
var start = new Date('August 13, 2018');
var interval = now.getTime() - start.getTime();
interval = Math.floor(interval / (1000 * 60 * 60 * 24));
alert("간격은 " + interval + "일!");
// 2019년 3월 14일 까지 남은 날짜는?
now = new Date('March 14, 2019');
start = new Date();
interval = now.getTime() - start.getTime();
interval = Math.floor(interval / (1000 * 60 * 60 * 24));
alert("간격은 " + interval + "일!");
}
</script>
</body>
</html>