티스토리 뷰
KH 정보교육원 [ Java ]
KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****)
monimoni 2022. 6. 2. 15:261. 사용자 정의 객체를 만드는 방법
- 1 ) 객체 리터럴 방식
- + 객체 속성 접근 방법 : 객체명.속성명 또는 객체명[‘속성명’]
- + 주로 객체명.속성명을 사용한다. ( ex. car.speed )
- 2 ) 전역 자바스크립트 객체 ( 생성자 함수 : Object() 생성자 함수 이용 )
- + 사용 방법 : var car = new Object();
- + 사용 방법 : car.name = 'Sonata' ( 속성 정의 )
- 3 ) 직접 생성자 함수를 정의 (**)
- + 사용 방법 : function car (name, color, speed){ this.name = name; .... }
- + 3번의 방식은 필요할 때마다, 동일한 객체를 생성할 수 있다.
- + 1, 2번의 방식으로 만든 객체는 1회성이다.
2. 자바스크립트로 제어할 요소를 찾아 결과를 출력하는 방법
- 1 ) innerHTML 이용
- : 사용방법 - document.getElementById(“id명”).innerHTML;
- : 웹 문서 내에서 id명과 일치하는 요소를 찾아 내용을 출력해준다.
- 2 ) textContent 속성 이용
- : 사용방법 – var 변수명=document.getElementById(“id명”);
- : 사용방법 – 변수명.textContent;
- : 웹 문서 내에서 id명과 일치하는 요소를 찾아 변수에 반환한 후, 변수의 내용을 출력한다.
3. DOM ( Document Object Model )
- 현재 브라우저가 읽어드린 HTML 문서를 구성하고 있는 모든 태그 하나하나를 “HTML Element”라는 타입의 객체로 생성하고, 모든 이 문서객체들을 태그의 포함관계에 따라서 트리형태의 계층구조로 만들어 놓은 이 tree를 “DOM” 또는 “DOM tree”라고 불린다.
[ 1. 사용자 정의 객체 생성 - 객체 리터럴 방식 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 사용자 정의 객체 생성 - 객체리터럴 방식(***)</title>
</head>
<body>
<p id="var1"></p>
<p id="var2"></p>
<p id="var3"></p>
<script>
const car = {
name : 'Sonata',
speed : 100,
color : 'white'
}; // 사용자 정의 객체 생성
// 객체 리터럴 방식으로 만든 사용자 정의 객체 ( 1회성 - 재사용 불가능 )
// + DOM을 조작하기 위한 코드
document.getElementById("var1").innerHTML = "1. 자동차 이름 : " + car['name'];
document.getElementById("var2").innerHTML = "2. 자동차 속도 : " + car.speed;
document.getElementById("var3").innerHTML = "3. 자동차 색상 : " + car.color;
// id에 맞는 요소를 찾아서, 각각의 내용을 p태그 내에 콘텐츠로 넣어 준다. (***)
</script>
</body>
</html>
[ 2. 사용자 정의 객체 - 함수 호출 방식 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 사용자 정의 객체 생성 - 함수 호출</title>
</head>
<body>
<p id="msg1"></p>
<p id="msg2"></p>
<p id="msg3"></p>
<script>
const obj = {
m1 : function(){
return "Hello Sonata.";
}, // m1
m2 : function(a){
let result = a;
return result;
}, // m2
m3 : function(a, b){
let result = a + b;
return result;
} // m3
}; // 객체 리터럴 방식으로 1회성 객체 생성 ( 재사용 불가능 )
document.getElementById("msg1").innerHTML = obj.m1();
document.getElementById("msg2").innerHTML = obj.m2(100);
document.getElementById("msg3").innerHTML = obj.m3(100, 200);
</script>
</body>
</html>[ 3. 사용자 정의 객체 생성 - textContent 속성 이용 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 객체 생성 ( textContent 속성 이용 )</title>
</head>
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<p id="carspeed2"></p>
<script>
const car = {
name : 'Sonata',
speed : 50,
color : 'white',
start : function run(){ // 함수에 이름을 작성할 수도 있다. ( 하지만 사용할 수는 없다. )
console.debug(`start() invoked.`);
console.log("\t + this : ", this);
return this.speed + 10;
} , // start
start2 : () => { return this.speed + 10; }
// 람다식에서 this.은 Window를 의미하기에 NaN이 나타난다. (****)
}; // car 사용자 정의 객체
const cname = document.getElementById("carname");
cname.textContent = car.name;
const colname = document.getElementById("carcolor");
colname.textContent = car.color;
const colspeed = document.getElementById("carspeed");
colspeed.textContent = car.start();
const colspeed2 = document.getElementById("carspeed2");
colspeed2.textContent = car.start2();
</script>
</body>
</html>[ 4. 사용자 정의 객체 생성 - textContent 속성 이용 2 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 사용자 정의 객체 생성</title>
</head>
<body>
<p id="upspeed"></p>
<p id="downspeed"></p>
<p id="Orignspeed"></p>
<script>
const car = {
name : 'Sonata',
speed : 50,
color : 'white',
speedup : function(){
car.speed += 10; // 속도를 계속 증감시켜준다. (****)
return car.speed;
}, // speedup
speeddown : function(){
car.speed -= 10;
return car.speed;
} // speed down
}; // car 사용자 정의 객체
var upspeed = document.getElementById("upspeed");
upspeed.textContent = `속도 증가 : ${car.speedup()}`;
var downspeed = document.getElementById("downspeed");
downspeed.textContent = `속도 감소 : ${car.speeddown()}`;
var Orignpeed = document.getElementById("Orignspeed");
Orignpeed.textContent = `스피드 : ${car.speed}`;
</script>
</body>
</html>
[ 5. 사용자 정의 객체 생성 - Object 함수 이용 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 사용자 정의 객체 생성 방법 ( Object 함수 이용 )</title>
</head>
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<script>
const car = new Object(); // 비어있는 객체 생성
// 빈 객체에 새로운 멤버(필드 + 메소드) 추가
car.name = "Sonata";
car.speed = 100;
car.color = "blue";
car.speedup = function(){
this.speed += 10
return this.speed; // this.을 사용할 수 있다.
}; // speedup
car.speeddown = function(){
this.speed -= 10
return this.speed; // this.을 사용할 수 있다.
if ( this.speed < 0 ){
this.speed = 0;
return this.speed;
} // if
}; // speeddown
var cname = document.getElementById("carname");
cname.textContent = `자동차 이름 : ${car.name}`;
var colname = document.getElementById("carcolor");
colname.textContent = `자동차 색상 : ${car.color}`;
var cspeed = document.getElementById("carspeed");
cspeed.textContent = `자동차 스피드 : ${car.speedup()}`
</script>
</body>
</html>[ 6. 사용자 정의 객체 생성 - 생성자 함수 이용 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 생성자 함수 정의(***)</title>
</head>
<body>
<script>
function car(model, color){
this.model = model;
this.color = color;
this.speed = 0;
this.speedup = function() {
this.speed += 10;
return this.speed;
};
this.speeddown = function() {
this.speed -= 10;
return this.speed;
};
// 사용자 정의 함수를 생성할 때에는 쉼표( , )가 아닌 세미콜론(;)을 사용해서 구분해야 한다. (**)
} // car - 선언 문장에는 ;를 붙이지 않는다.
var car1 = new car('Avante', 'white');
// delete car1.color을 통해서 속성을 삭제할 수도 있다.(*)
// 각 객체마다 다르게 필드나 메소드를 추가할 수도 있고, 삭제할 수도 있다. (***)
var car2 = new car('Aveo', 'black');
car2.getcolor = function(){
return this.color;
}; // car2에 메소드 추가 (****)
</script>
</body>
</html>[ 7. 배열 객체 생성 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열 객체</title>
</head>
<body>
<script>
const arr = [
{model : 'Avante', color : 'white', price : 23000000 },
{model : 'Aveo', color : 'blue', price : 140000000 },
{model : 'Ionic5', color : 'silver', price : 70000000 }
]; // 배열 객체 생성
// 안에 있는 배열은 리터럴 방식의 사용자 정의 객체이지, 연관 배열이 아니다. ( 연관배열은 키가 문자열이어야 한다. )
// arr[1]을 통해서 원소를 뽑아내면, {model : 'Aveo', color : 'blue', price : 140000000 } 전체가 나오기 때문에
// arr[1].model처럼 인덱스번호.속성명을 작성해야 한다. (**)
// let car1mo = arr[1]을 통해서, car1no.model을 작성하여 알아볼 수도 있다.
// arr[0].getColor = function() {return this.color;}를 통해 메소드를 추가할 수도 있다.
// window 객체에서 메소드나 필드를 추가할 수 있다.
</script>
</body>
</html>[ 8. 배열 객체 - 2차원 배열 생성 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 배열객체 ( 2차원 배열 )</title>
</head>
<body>
<p id="car"></p>
<p>[ Car1 속성 ]</p>
<p id="car0"></p>
<p>[ Car2 속성 ]</p>
<p id="car1"></p>
<p>[ Car3 속성 ]</p>
<p id="car2"></p>
<script>
// Array 생성자 함수를 이용하여, 배열객체를 생성하되
// 생성자 함수의 매개변수의 인자값으로 3개의 1차원 배열을 주었다.
const car = new Array (
['Sonata', 'blue', 100],
['Jeep', 'red', 70],
['Passt', 'white', 150]
); // 2차원 배열 생성
// DOM에서 id가 car인 문서객체 선택
let cname = document.getElementById("car");
// 바로 위의 코드로 DOM에서 찾은 문서객체의 컨텐츠를 변경한다.
cname.textContent = `car[2][1] : ${car[2][1]}`; // 2차원 배열 원소
// 인덱스 번호는 0번부터 시작한다.
for( let i = 0; i < 3; i++ ){
// id값이 car0 ~ car2까지에 해당하는 요소를 선택한다.
cname = document.getElementById("car"+i);
cname.textContent = car[i]; // 선택한 각 요소의 컨텐츠를 텍스트로 변경
} // for
</script>
</body>
</html>더보기
자바 스크립트 - 배열객체 ( 2차원 배열 )
[ 출력 결과 ]
[ Car1 속성 ]
[ Car2 속성 ]
[ Car3 속성 ]
[ 9. Date 객체 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - Date 객체</title>
</head>
<body>
<p id="d1"></p>
<p id="d2"></p>
<p id="d3"></p>
<p id="d4"></p>
<script>
// 1. 기본 생성자
// document.getElementById("d1").innerHTML = new Date();
// -----------------------------------------------------------------------------------------------------
document.querySelector("#d1").innerHTML = new Date(); // 이 방법이 더 실전에 많이 사용된다. (***)
// document.querySelectorAll("#d1").innerHTML = new Date(); // 여러개를 한번에 선택하려고 할 때 사용한다.
// -----------------------------------------------------------------------------------------------------
// 2. 1970.01.01 이후의 밀리초 계산
// document.getElementById("d2").innerHTML = new Date(1491803527400);
// -----------------------------------------------------------------------------------------------------
document.querySelector("#d2").innerHTML = new Date(1491803527400); // 실전에서의 표준방식 (***)
// -----------------------------------------------------------------------------------------------------
// 3. 문자열 날짜
// document.getElementById("d3").innerHTML = new Date("October 15, 2018 06:18:07");
// -----------------------------------------------------------------------------------------------------
document.querySelector("#d3").innerHTML = new Date("October 15, 2018 06:18:07"); // (***)
// -----------------------------------------------------------------------------------------------------
// 4. 날짜 지정 ( 주의사항 : 월은 0부터 시작 )
// document.getElementById("d4").innerHTML = new Date(2018, 11, 25, 18, 30, 29);
// -----------------------------------------------------------------------------------------------------
document.querySelector("#d4").innerHTML = new Date(2018, 11, 25, 18, 30, 29); // (***)
// -----------------------------------------------------------------------------------------------------
// 자바스크립트는 함수의 오버로딩이 적용되지 않으나, Date 객체의 경우 타입스크립트로 보여주기 때문에 오버로딩이 가능한 것처럼 보인다. (****)
</script>
</body>
</html>더보기
자바 스크립트 - Date 객체
[ 출력 결과 ]
[ 10. Date 객체 2 + JSON ] (*****)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - Date 객체2 (****)</title>
</head>
<body>
<!-- p[id=p01]*9 -->
<p id="p01"></p>
<p id="p02"></p>
<p id="p03"></p>
<p id="p04"></p>
<p id="p05"></p>
<p id="p06"></p>
<p id="p07"></p>
<p id="p08"></p>
<p id="p09"></p>
<script>
var today = new Date();
document.querySelector("#p01").innerHTML = today.toDateString();
document.querySelector("#p02").innerHTML = today.toISOString();
document.querySelector("#p03").innerHTML = today.toJSON(); // 데이터를 주고받을때 가장 많이 사용하는 포멧팅 (********)
// JSON : JavaScript Object Notation ( 자바스크립트 객체를 문자열로 표현한 것 )
// JSON.stringify(arr); 를 통해 객체를 제이슨 문자열로 변형해주고, JSON.parse(arr);을 통해 다시 객체로 바꿔줄 수 있다.
document.querySelector("#p04").innerHTML = today.toLocaleDateString(); // (***)
document.querySelector("#p05").innerHTML = today.toLocaleTimeString(); // (***)
document.querySelector("#p06").innerHTML = today.toLocaleString(); // 우리나라 시간 체계에 가장 적합한 방법이다. (****)
document.querySelector("#p07").innerHTML = today.toString();
document.querySelector("#p08").innerHTML = today.toTimeString();
document.querySelector("#p09").innerHTML = today.toUTCString();
</script>
</body>
</html>[ 11. Date 객체 응용 ] (***)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - Date 객체 응용</title>
</head>
<body>
<div id="digclock"></div>
<script>
function digclock() {
let today = new Date();
let day = `${today.getMonth() + 1 }월 ${today.getDate()}일`;
let time = `${today.getHours()}시 ${today.getMinutes()}분 ${today.getSeconds()}초`;
// 월은 0월부터 시작하기에 1을 더해줘야 한다. (**)
document.querySelector("#digclock").innerHTML = day + time;
setTimeout('digclock()', 1000);
// setTimeout() 내장 함수는 매 1초마다 지정된 함수를 호출하는데 사용한다. (**)
// 이 함수는 1. 호출할 함수명, 2. 주기(timeout) 지정해야 한다.
// 단, 1회성 설정이다.
} // dig clock
digclock();
</script>
</body>
</html>더보기
자바 스크립트 - Date 객체 응용
[ 출력 결과 ]
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 69일차 - 제이쿼리 ( jQuery ) 선택자 (***) (0) | 2022.06.07 |
|---|---|
| KH 68일차 - 문서 객체 모델 (**) / 제이쿼리 시작 (0) | 2022.06.03 |
| KH 66일차 - 자바스크립트 ( 배열 / 객체 ) (****) (0) | 2022.05.31 |
| KH 65일차 - 자바 스크립트 ( 함수 / ES6 / 배열 (*****) ) (0) | 2022.05.30 |
| KH 64일차 - 자바 스크립트 (***) (0) | 2022.05.27 |
댓글