반응형
객체에 대한 내용과 표준 객체 중에 자주 쓰이는 객체들에 대해 실습과 예제 위주로 내용을 포스팅 해보았다.
1. 객체(Object)
모든 객체들은 property(속성/멤버변수)와 method(기능)으로 이루어져있다. 예시를 들어 정리하자면 아래와 같다.
//객체의 생김새
var person={//괄호 내부가 객체의 필드
name:'홍길동',
age:'20',
hello:function(){console.log('저는 '+this.name+'입니다');}
}
//속성접근 연산자(.)를 통해 속성(멤버)로 접근이 가능하다.
person.hello(); //저는 홍길동입니다
console.log(person.name); //홍길동
아래와 같이 생성자를 만들어 객체를 생성하는 방법도 있다.
//생성자의 매개변수(input)는 속성값을 초기화하는 역할을 담당한다.
function Person(name, age){
this.name=name;
this.age=age;
this.hello=function(){
console.log(this.name+'학생 : '+this.age)
}
}
//객체생성
var p1=new Person('홍길동', 20);
var p2=new Person('아무무', 30);
//객체사용
console.log(p1); //person
console.log(p2.name); //아무무
p1.hello(); //홍길동학생 : 20
* 예제 *
Circle객체를 만들고, 해당 객체는 이름, 반지름을 속성으로 가지고 있다. 기능은 원넓이 출력, 입력값*반지름 출력이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>객체 예제</title>
</head>
<body>
<script type="text/javascript">
//생성자
function Circle(name,radius){
this.name=name;
this.radius=radius;
this.f1=function(){
var res=this.radius*this.radius*3.14;
return res;
}
this.f2=function(num){
var res=this.radius*num;
return res;
}
}
//객체 생성
var c1 = new Circle('동그라미', 2);
var c2 = new Circle('동그래미', 4);
var c3 = new Circle('동글람이', 8);
//객체 사용
console.log(c1.name); //동그라미
console.log(c1.radius); //2
console.log(c2.f1()); //50.24
console.log(c3.f2(2)); //16
</script>
</body>
</html>
2. Array객체
자바 스크립트에서 배열은 Array객체로 다루어진다. 이 Array객체의 특징은 다음과 같다.
1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있습니다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있습니다.
3. 자바스크립트에서 배열은 Array 객체로 다뤄집니다.
출처: http://www.tcpschool.com/javascript/js_array_basic
1) Array객체 생성
배열을 생성하는 방법은 아래와 같이 총 3가지가 있다.
// 배열 리터럴을 이용하는 방법
var arr = [배열요소1, 배열요소2,...];
// Array 객체의 생성자를 이용하는 방법
var arr = Array(배열요소1, 배열요소2,...);
// new 연산자를 이용한 Array 객체 생성 방법
var arr = new Array(배열요소1, 배열요소2,...);이때, 선언의 방법이 어떻든 같은 결과의 배열을 생성하며 배열의 속성과 메서드를 모두 이용할 수 있다.
2) 실습
배열을 활용하여 style을 적용해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<style type="text/css">
div{
width:100px;
height:100px;
margin:1px;
display:flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<script type="text/javascript">
//배열생성
var color=['cyan','magenta','crimson','orange'];
//배열 사용하여 속성적용
for(var i=0; i<color.length; i++){
var str='<div style="background-color: '+color[i]+'">'+color[i]+'</div>';
document.write(str);
}
</script>
</body>
</html>
3) 예제
주석이 상세하므로 설명은 생략하도록 하였다.
① 점수 5개를 배열에 담고, 합계&평균을 출력할 것
//배열생성
var score=[];
var sum=0;//합계
var avg=0;//평균
//5개의 랜덤 점수 생성하여 담기
for(var i=0; i<5; i++){
score[i]= Math.floor(Math.random()*(101));
}
//계산
for(var i=0;i<score.length;i++){//총합
sum += score[i];
}
avg=sum/score.length;//평균
//출력
console.log('총합 : '+sum);
console.log('평균 : '+avg);② 배열메서드를 활용하여, 배열의 요소추가&요소삭제를 구현할 것
//배열 생성 및 기초데이터 출력
var data=['티모', '아리', '아무무'];
console.log(data);
//배열 맨 앞 요소추가
data.unshift('제리');
console.log(data);
//배열 맨 뒤 요소 추가
data.push('제리');
console.log(data);
//배열 2번째 칸부터 1만큼 삭제
data.splice(2,1);
console.log(data);③ 상자 클릭시 색상이 변하게 설정할 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예제 3</title>
<!-- 상자 기본 스타일 설정 -->
<style type="text/css">
div{
width:100px;
height:100px;
margin:1px;
display:flex;
align-items: center;
justify-content: center;
background-color: black;
}
div:hover{
cursor: pointer;
}
</style>
</head>
<body>
<!-- div클릭시 change함수 사용 -->
<div onclick="change(this)">아주 멋진 네모</div>
<script type="text/javascript">
//색 정보 배열생성
var color=['cyan','magenta','crimson','orange'];
//색상 변경하는 함수 생성
function change (obj){
var rand = color[Math.floor(Math.random()*color.length)];
obj.style.backgroundColor = rand;
}
</script>
</body>
</html>
3. Date객체
D-day계산기 예제를 통해 해당 객체와 속성을 실습해보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Date객체:디데이계산기</title>
</head>
<body>
<script type="text/javascript">
var input=prompt('날짜를 입력하시면 D-day를 확인해드립니다. (ex)YYYY/MM/DD');
var dDay=new Date(input);//입력된 날짜
var toDay=new Date();//현재날짜
var gap = dDay.getTime() - toDay.getTime(); //시간차 계산
var result = Math.ceil(gap/(1000*60*60*24));//날짜로 환산 (Math.ceil(올림함수))
alert(result+"일 입니다");//결과 출력
</script>
</body>
</html>
date객체의 초기화 방법은 너무도 다양하여 아래 링크를 통해 확인할 수 있도록 하였다.
http://www.tcpschool.com/javascript/js_standard_date
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
* DATE메서드 *
다양한 메서드가 있지만 가장 사용도가 높을 4가지의 메서드만 아래 작성해보았다.
| 메서드 | 설명 |
| getFullYear() | 현지 시각으로 현재 연도를 4비트의 숫자(YYYY)로 반환함. |
| getDate() | 현지 시각으로 현재 일자에 해당하는 숫자를 반환함. |
| getDay() | 현지 시각으로 현재 요일에 해당하는 숫자를 반환함. |
| getTime() | 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환함. |
4. Math객체
Up&Down Game을 구현해보며 해당 객체와 속성을 실습해보았다. 주석이 상세하므로 내용에 대한 설명은 생략하였다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Math객체:업다운게임</title>
</head>
<body>
<script type="text/javascript">
var answer = Math.floor(Math.random()*(101));//정답 : 랜덤생성
var L=1;//최저점
var H=100;//최대점
var cnt=0;//실행회수
//작동 시작
while(true){
var input = prompt(L+'~'+H+'까지의 숫자를 입력해보세요!');
//유효범위 체크
if(input<L || input>H){
alert('범위를 다시 확인해보세요');
continue;//범위 이상하면 재입력
}
cnt++;//범위가 제대로 됐다면 cnt++
if (input>answer){
alert(input+"보다 작습니다.");
H=input-1;//정답이 아니면 H지점 재설정
} else if(input<answer){
alert(input+"보다 큽니다.");
L=Number(input)+1//정답이 아니면 L지점 재설정(형변환 필요)
} else {
alert(input+' 정답!'+cnt+' 만에 맞추셨습니다');
break;
}
}
</script>
</body>
</html>
* value(값)와 reference(참조) *
추가 내용으로 값과 참조에 대한 내용을 코드로 증명해보았다.
<script type="text/javascript">
var arr=[];
var obj={};
//값이 아닌, 참조로 전달한다.
obj.al=arr;
//이를 확인하기 위한 출력
arr.push(100);
console.log(arr); //100
console.log(obj); //100
console.log(arr===obj.al);//true
//참조가 되어 진행된다는 것을 증명하였다.
</script>반응형
'JavaScript' 카테고리의 다른 글
| URL, API (0) | 2022.02.22 |
|---|---|
| 타이밍 이벤트 & 단원 총정리 (0) | 2022.02.18 |
| BOM & Form (0) | 2022.02.17 |
| 이벤트 & DOM (0) | 2022.02.16 |
| 개요부터 기본 작동까지 (0) | 2022.02.14 |
