728x90
본 포스팅은 학교 수업을 듣고 정리한 내용입니다.
객체의 기본 개념
객체 개념
현실 세계는 객체들의 집합
- 사람, 책상, 자동차, TV등
- 객체는 자신만의 고유한 구성 속성
- 자동차 : 제조사, 자동차 번호
- 사람 : 이름, 주민번호
자바스크립트 객체 구성
여러 개의 프로퍼티(Property)와 메소드로 구성
- 프로퍼티 : 객체의 고유한 속성(변수)
- 메소드(method) : 함수
브라우저가 제공하는 기본 객체(코어 개체)들의 종류
자바스크립트는 객체 기반 언어, 객체 지향 언어가 아님
자바 스크립트 객체의 유형
- 코어 객체
- 자바스크립트 언어가 실행되는 어디서나 사용 가능한 기본 객체
- 기본 객체로 표준 객체
- Array, Date, String, Math 타입 등
- 웹 페이지 자바스크립트 코드에서 혹은 서버에서 사용 가능
- HTML DOM 객체
- HTML 문서에 작성된 각 HTML 태그들을 객체화한 것들
- HTML 문서의 내용과 모양을 제어하기 위한 목적
- W3C의 표준 객체
- 브라우저 객체
- 자바스크립트로 브라우저를 제어하기 위해 제공되는 객체
- BOM(Brower Object Model)에 따르는 객체들
- 비표준 객체
코어 객체
코어 객체 종류
- Array, Date, String, Math 등
코어 객체 생성
- new 키워드 이용
- 객체가 생성되면 객체 내부에 프로퍼티와 메소들 존재
객체 접근
- 객체와 멤버 사이에 점(.) 연산자 이용
자바스크립트 객체 생성 및 활용 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>객체 생성 및 활용</title>
</head>
<body>
<h3>객체 생성 및 활용</h3>
<hr>
<script>
let today = new Date();
document.write("현재 시간 : " + today.toLocaleDateString + "<br>");
let mystr = new String("자바스크립트 공부하기");
document.write("mystr의 내용 : " + mystr + "<br>" );
document.write("mystr의 길이 : " + mystr + "<br>");
</script>
</body>
</html>
배열
자바스크립트 배열
배열
- 여러 개의 원소들을 연속적으로 저장
- 전체를 하나의 단위로 다루는 데이터 구조
배열 생성 사례
0에서 시작하는 인덱스를 이용하여 배열의 각 원소 접근
자바스크립트에서 배열을 만드는 방법
배열 만드는 2가지 방법
- []로 배열 만들기
- Array 객체로 배열 만들기
[]로 배열 만들기
- [] 안에는 원소들의 초기 값 나열
let week = ["월", "화", "수", "목", "금", "토", "알"];
let plots = [-20, -5, 0, 15, 20];
- 배열 크기 : 배열의 크기는 고정되지 않고 원소 추가 시 늘어남
- 배열의 끝에 원소 추가
- 주의 : 현재 배열보다 큰 인덱스에 원소를 추가하면 값이 비어 있는 중간의 원소들도 생기는 문제 발생
[]로 배열 만들기 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[]로 배열 만들기</title>
</head>
<body>
<h3>[]로 배열 만들기</h3>
<hr>
<script>
let plots = [20,5,8,15,20];
document.write("var plots = [20,5,8,15,20]<br>");
for(let i = 0; i<5; i++){
let size = plots[i];
while(size > 0){
document.write("*");
size --;
}
document.write(plots[i] + "<br>");
}
</script>
</body>
</html>
Array로 배열 만들기
초기 값을 가진 배열 생성
let week = new Array("월", "화", "수", "목", "금", "토", "알");
초기화 되지 않은 배열 생성
- 일정 크기의 배열 생성 후 나중에 원소 값 저장
let week = new Array(7);
week[0] = "월";
빈 배열 생성
- 원소 개수를 예상할 수 없는 경우
let week = new Array();
week[0] = "월"; // 배열 week 크기는 자동으로 1
배열의 원소 개수, length 프로퍼티
- 배열의 크기 : Array 객체의 length 프로퍼티
- length 프로퍼티는 사용자가 임의로 값 변경 가능
- length 프로퍼티는 Array 객체에 의해 자동 관리
- 사용자가 임의로 값 변경 가능
- 배열의 크기를 줄이거나 늘일 수 있음
Array 객체로 배열 만들기 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>객체로 배열 만들기</title>
</head>
<body>
<h3>객체로 배열 만들기</h3>
<hr>
<script>
let degrees = new Array();
degrees[0] = 15.1;
degrees[1] = 15.4;
degrees[2] = 16.1;
let sum = 0;
for(let i = 0; i < degrees.length; i++){
sum += degrees[i];
}
document.write("평균 온도는 " + sum/degrees.length + "<br>");
</script>
</body>
</html>
배열의 특징
배열은 Array 객체
- []로 생성해도 Array객체로 다루어짐
배열에 여러 타입의 데이터 섞여 저장 가능
Array 객체의 메소드 활용 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Array 객체의 메소드 활용</title>
<script>
function pr(msg, arr){document.wirte(msg + arr.toString() + "<br>");}
</script>
</head>
<body>
<h3>Array 객체의 메소드 활용</h3>
<hr>
<script>
let a = new Array("황","김","이");
let b = new Array("박");
let c;
pr("배열 a = ",a);
pr("배열 b = ",b);
document.write("<hr>");
c = a.concat(b); // c는 a와 b를 연결한 새 배열
pr("c= a,concat(b) 후 c = " , c);
pr("c= a,concat(b) 후 a = " , a);
c = a.join("##"); // c는 배열 a를 연결한 문자열
pr("c = a.join() 후 c = ", c);
pr("c = a.join() 후 a = ", a);
c = a.reverse();
pr("c = a.reverse() 후 c = ", c);
pr("c = a.reverse() 후 a = ", a);
c = a.slice(1,2);
pr("c = a.slice() 후 c = ", c);
pr("c = a.slice() 후 a = ", a);
c = a.sort();
pr("c = a.sort() 후 c = ", c);
pr("c = a.sort() 후 a = ", a);
cc= a.toString();
document("a.toString() : " + c);
</script>
</body>
</html>
Date 객체
- 시간정보를 담는 객체
- 현재 시간정보와 지정한 날의 정보 또한 담을 수 있다.
Date객체 생성 및 활용 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date 객체로 현재 시간을 알아내기</title>
</head>
<body>
<h3>Date 객체로 현재 시간을 알아내기</h3>
<hr>
<script>
let now = new Date();
document.write("현재 시간 : " + now.toDateString() + "<br><hr>");
document.write(now.getFullYear() + "년도<br>");
document.write(now.getMonth() + 1 + "월<br>");
document.write(now.getDate() + "일<br>");
document.write(now.getHours() + "시<br>");
document.write(now.getMinutes() + "분<br>");
document.write(now.getSeconds() + "초<br>");
document.write(now.getMilliseconds() + "밀리초<br><hr>");
let next = new Date(2023,7,15,12,12,12);
document.write("next.toLocaleString() : " + next.toLocaleDateString());
</script>
</body>
</html>
방문 시간에 따라 변하는 배경색 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>방문 시간에 따라 변하는 배경색</title>
</head>
<body>
<h3>페이지 방문 초시간이 짝수이면 violet, 홀수이면 LightSkyBlue 배경</h3>
<hr>
<script>
let current = new Date();
if(current.getSeconds() % 2 == 0){
document.body.style.backgroundColor = "violet";
} else{
document.body.style.backgroundColor = "lightskyblue";
}
document.wrte("현재 시간 : ");
document.write(current.getHours, "시");
document.write(current.getMinutes, "분");
document.write(current.getSeconds, "초<br>");
</script>
</body>
</html>
String 객체
String
- 문자열을 담기 위한 객체
- String 객체는 일단 생성되면 수정 불가능
문자열 길이
- String 객체의 length 프로퍼티 : 읽기 전용
- 문자열을 배열처럼 사용
- []연산자를 사용하여 각 문자 접근 가능
String 객체의 메소드 활용 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>String 객체의 메소드 활용</title>
</head>
<body>
<h3></h3>
<hr>
<script>
let a = new String("Boys and Girls");
let b = "!!";
document.write("a : " + a + "<br>");
document.write("b : " + b + "<br><hr>");
document.write(a.charAt(0), "<br>");
document.write(a.concat(b, "입니다") + "<br>");
document.write(a.indexOf("s") + "<br>");
document.write(a.indexOf("And") + "<br>");
document.write(a.slice(5,8) + "<br>");
document.write(a.substr(5,3) + "<br>");
document.write(a.toUpperCase() + "<br>");
document.write(a.replace("and","or") + "<br>");
document.write(" gildong ".trim() + "<br><hr>");
let sub = a.split(" ");
document.write("a를 빈칸으로 분리<br>");
for(let i = 0; i < sub.length; i++)
document.write("sub" + i + "=" + sub[i] + "<br>");
document.write("<hr> String 메서드를 실행 후 a와 b 변함 없음<br>");
document.write("a : " + a + "<br>");
document.write("b : " + b + "<br>");
</script>
</body>
</html>
Math 객체
Math
- 수학 계산을 위한 프로퍼티와 메소드 제공
- new Math()로 객체 생성하지 않고 사용
난수발생
- Math.random() : 0 ~ 1보다 작은 랜덤한 실수 리턴
- Math.floor(m)은 m의 소수점 이하를 제거한 정수 리턴
Math를 이용한 구구단 연습 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Math를 활용한 구구단 연습</title>
<script>
function randomInt(){
return Math.floor(Math.random()*9) + 1;
}
</script>
</head>
<body>
<h3>Math를 활용한 구구단 연습</h3>
<hr>
<script>
let ques = randomInt() + "*" + randomInt();
let user = prompt(ques + " 값은 얼마입니까?",0);
if(user == null){
document.write("구구단 연습을 종료합니다.");
} else{
let ans = eval(ques);
if(ans == user){
document.write("정답!!");
} else{
document.write("오답!!");
document.write("<br>정답은 " + ques + "=" + " <strong> " + ans + "</strong>입니다.<br>");
}
}
</script>
</body>
</html>
사용자 객체 만들기
사용자가 새로운 타입의 객체 작성 가능 : 3가지방법
- 직접 객체 만들기
- new Object() 이용
- 리터럴 표기법 이용
- 객체의 틀(프로토 타입)을 만들고 객체 생성하기
new Object() 로 만들기
과정
- new Object()로 빈 객체 생성
- 빈 객체에 프로퍼티 추가
- 새로운 프로퍼티 추가(프로퍼티 이름과 초기값 지정)
- 빈 객체에 메소드 추가
- 메소드로 사용할 함수 미리 작성
- 새 메소드 추가(메소드 이름에 함수 지정)
new Object()로 계좌 표현하는 account객체 만들기 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>new Object()로 사용자 객체 만들기</title>
<script>
function inquiry() {return this.balance;}
function deposit(money) {return this.balance += money;}
function withdraw(money) {
this.balance -= money;
return money;
}
let account = new Object();
account.owner = "홍길동";
account.code = "111";
account.balance = 35000;
account.inquiry = inquiry;
account.deposit = deposit;
account.withdraw = withdraw;
</script>
</head>
<body>
<h3>new Object()로 사용자 객체만들기</h3>
<hr>
<script>
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>
리터럴 표기법으로 만들기
과정
- 중괄호를 이용하여 객체의 프로퍼티와 메소드 지정
- 가장 많이 사용하는 방법
리터럴 표기법으로 게좌를 표현하는 account 객체 만들기 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리터럴 표기법으로 사용자 객체 만들기</title>
<script>
let account = {
owner : "홍길동",
code : "111",
balance : 35000,
inquiry : function() {return this.balance;},
deposit : function(money) {return this.balance += money;},
withdraw : function(money) {
this.balance -= money;
return money;
}
};
</script>
</head>
<body>
<h3>리터럴 표기법으로 사용자 객체 만들기</h3>
<hr>
<script>
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>
프로토 타입
프로토타입(prototype)이란?
- 객체의 모양을 가진 틀
- C++, Java에서는 프로토타입을 클래스라고 부름
- Array, Date, String : 자바스크립트에서 제공하는 프로토 타입
- 객체 생성시 new 프로토타입 이용
프로토 타입으로 객체 만들기 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>프로토 타입으로 사용자 객체 만들기</title>
<script>
function Account(owner, code, balance){
this.owner = owner;
this.code = code;
this.balance = balance;
this.inquiry = function() {return this.balance;}
this.deposit = function(money) {return this.balance += money;}
this.withdraw = function(money) {
this.balance -= money;
return money;
}
}
</script>
</head>
<body>
<h3>프로토 타입으로 사용자 객체 만들기</h3>
<hr>
<script>
let account = new Account("홍길동", "111", 35000)
document.write("account : ");
document.write(account.owner + ", ");
document.write(account.code + ", ");
document.write(account.balance + "<br>");
account.deposit(10000);
document.write("10000원 저금 후 잔액은 " + account.inquiry() + "<br>");
account.withdraw(5000);
document.write("5000원 인출 후 잔액은 " + account.inquiry() + "<br>");
</script>
</body>
</html>728x90
'Programming Language > HTML & CSS & JavaScript' 카테고리의 다른 글
| [HTML & CSS & JavaScript] 짝수의 합과 홀수의 합을 계산하는 계산기 실습 (0) | 2023.12.28 |
|---|---|
| [HTML & CSS & JavaScript] 계산기(+, -, *) 프로그램 실습 (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] 자바스크립트 (식과 연산자, 조건문, 반복문, 함수) (9주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #2 (3주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #1 (2주차) (0) | 2023.11.23 |
