반응형
객체란?
자바스크립트는 객체 기반 언어이며 객체는 기능과 속성을 가지고 있다.
스피커로 예시로 들자면 기능은 스피커를 키거나 끄고, 소리를 음소거하거나 높낮이를 조절하는 기능이 있습니다.
이렇게 기능은 동작하는 것을 말하며 메서드라고도 합니다.
속성으로는 스피커의 너비나 높이, 색상, 무게 등을 속성에 포함됩니다.
객체.메서드();
객체.속성; 또는 객체.속성 = 값;
- 객체.메서드 : 객체의 메서드를 실행한다.
- 객체.속성 : 객체의 속성값을 가져온다.
- 객체.속성 = 값 : 객체 속성의 값을 바꾼다.
자바스크립트로 속성과 메서드를 적용한 예시
Speaker.width; (Speaker의 너비) 또는 Speaker.color; (Speaker의 색상) // Speaker의 속성값을 가져옵니다.
Speaker.color = black; // Speaker의 속성값을 바꿉니다.
객체의 종류로는 다음과 같이 세가지가 있습니다.
첫 번째는 내장 객체는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있습니다.
두 번째 브라우저 객체 모델은 window, sceen, location, history, navigator 객체 등이 있습니다.
마지막으로는 문서 객체 모델은 HTML 문서 구조를 말합니다.
하나씩 구체적으로 알아봅시다.
내장 객체
자바스크립트 자체에 내장된 객체를 말한다.
앞서 말한 거처럼 내장 객체의 종류로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체가 있습니다.
내장 객체 생성방법
참조 변수(인스턴스명) = new 생성 함수()
내장 객체를 생성하는 실습 예제 (1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정의 객체</title>
</head>
<body>
<h3>사용자 정의 객체</h3>
<script>
// 사용자 정의 객체를 생성하는 문법
// let 변수명 = new 생성자함수();
// 단순한 데이터 1개 저장
// 예) let speaker = "브리츠";
// 1번 유형
// new = 기억장소(메모리)를 생성하는 기능
let speaker = new Object(); // 컨테이너 성격의 기억장소를 만들고, 그곳에 주소를 Speaker에 저장한다.
// Speaker 객체에 필요한 정보(상태)를 저장하기 위한 실질적인 기억장소를 설계 (속성: property)
speaker.color = "white"; // 색상의 기본값
speaker.price = 300000; // 가격의 기본값
// Speaker 객체의 기능. (메서드 : method)
speaker.info = function(){
document.write("Speaker 색상 : " + this.color, "<br>");
document.write("Speaker 가격 : " + this.price, "<br>");
}
// 2번 유형
// let 변수명 = {속성명: 값, 속성명: 값, 메서드 : function(), ...};
var mouse = {
color: "black",
price: 5000,
info: function(){
document.write("mouse 색상 : " + this.color, "<br>");
document.write("mouse 가격 : " + this.price, "<br>");
}
}
// 객체 사용법
document.write("<h1>Speaker 객체 메서드 호출</h1>");
speaker.info(); // tv info 메소드 호출
document.write("<h1>Mouse 객체 메서드 호출</h1>");
mouse.info(); // mouse info 메소드 호출
mouse.color = "Pink"; // mouse 색상 변경
mouse.info();
</script>
</body>
</html>날짜 정보 객체
날짜나 시간 정보를 제공받고 싶을 때 사용한다.
참조 변수 = new Date();
날짜 정보 객체 사용 실습
날짜 정보 객체를 사용하여서 오늘 날짜 정보를 가져온 후, 오늘 날짜의 월/일/요일을 출력합니다.
2002년 월드컵 날짜를 객체에 입력받아 월드컵 날짜의 월, 일, 요일을 출력합니다.
또한, 본인의 생일을 객체에 입력받아 생일의 월, 일, 요일을 출력합니다.
이때, 특정 날짜의 월을 입력할 때는 1월이 0의 값을 가지며, 12월은 11의 값을 가집니다.
출력했을 때 요일은 일요일이 0의 값을 가지며, 토요일은 6의 값을 가집니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내장객체 : Date 객체</title>
</head>
<body>
<h3>Date 객체</h3>
<p>날짜 정보와 관련된 기능</p>
<script>
// 현재 날짜와 시간 정보
let today = new Date();
// 월, 일, 요일
let nowMonth = today.getMonth(); // 월 0~11 범위로 값을 반환. 반환값에 + 1을 해야
let nowDate = today.getDate(); // 일
let nowDay = today.getDay(); // 요일
document.write("<h1>오늘의 날짜 정보</h1>");
document.write("현재 월 : " + nowMonth + "<br>"); // 현재 월 - 1
document.write("현재 일 : " + nowDate + "<br>");
document.write("현재 요일 : " + nowDay + "<br>"); // 일요일 ~ 토요일 (0~6)
// 특정 날짜와 시간을 지정하여 사용
// 월 부분은 0-11로 처리된다. 0은 1월을 의미한다. 11은 12월을 의미한다.
// 날짜 파트에 범위가 초과되면, 캐리(carry)가 발생한다.
let worldcup = new Date(2002, 4, 31);
let theMonth = worldcup.getMonth();
let theDate = worldcup.getDate();
let theDay = worldcup.getDay();
document.write("<h1>월드컵 날짜 정보</h1>");
document.write("2002년 월드컵 몇 월 : " + (theMonth+1) + "<br>"); // 현재 월 - 1
document.write("2002년 월드컵 몇 일 : " + theDate + "<br>");
document.write("2002년 월드컵 몇 요일 : " + theDay + "<br>"); // 일요일 ~ 토요일 (0~6)
document.write("전체 날짜 및 시간 : " + worldcup);
// 나의 생일을 지정해서 출력하기
let birthday = new Date(1998, 6, 7);
let birtMon = birthday.getMonth();
let birtDate = birthday.getDate();
let birtDay = birthday.getDay();
document.write("<h1>나의 생일 정보</h1>");
document.write("나의 생일 몇 월 : " + (birtMon + 1) + "<br>"); // 현재 월 - 1
document.write("나의 생일 몇 일 : " + birtDate + "<br>");
document.write("나의 생일 몇 요일 : " + birtDay + "<br>"); // 일요일 ~ 토요일 (0~6)
</script>
</body>
</html>
날짜 정보 객체 실습 (2)
getTime() 함수는 1970년 1월 1일부터 경과된 시간을 초단위로 표시하는 메서드입니다.
이 함수를 사용하여 현재까지 경과된 시간과 현재 날짜를 구하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내장객체 : Date</title>
</head>
<body>
<h3>내장객체 : Date</h3>
<script>
let now = new Date();
// 스프링에서 데이터베이스의 날짜 정보를 JSON으로 변환되어 보내질 때, 밀리세컨드단위로 처리가 된다.
let time = now.getTime();
let now2 = new Date(time);
//getTime() -> 1970년 1월 1일부터 경과된 시간을 밀리초로 표기함
document.write("1970년 1월 1일부터 현재까지 경과된 시간 : " + time + "<br>");
document.write("현재 날짜 : " + now2);
</script>
</body>
</html>
날짜 정보 객체 실습 (3)
현재 날짜와 시간 정보를 가져오고, 연말(24년 12월 31일)까지 얼마나 남았는지 알아보는 실습 예제입니다.
현재 날짜와 시간 정보를 today 변수에 저장하고, 현재의 년도를 nowYear 변수에 저장합니다.
그리고 theDate로 연말에 해당되는 24년 12월 31일의 값을 설정합니다.
getTime() 메서드를 사용하여 theDate(연말) 변수와 today(현재) 변수와의 차이값을 diffDate 변수에 저장합니다.
60(1분 = 60초) * 60 (1시간 = 60분) * 24(24시간은 1일)을 곱한 값을 diffDate로 나눕니다.
그 값을 Math.ceil()로 소수점을 올림하는 함수를 사용하여 result 변수에 저장합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내장객체 : Date</title>
</head>
<body>
<h3>내장객체 : Date</h3>
<p>두 날짜의 간격을 일수로 구하는 예제</p>
<script>
let today = new Date(); // 현재 날짜와 시간 정보
let nowYear = today.getFullYear(); // 2024-01-28
let theDate = new Date(nowYear, 11, 31); // 2024-12-31
document.write("현재 오늘 날짜 : " + today + "<br>");
document.write("임의의 날짜: " + theDate + "<br>");
// 1970년 1월 1일 시작 (기준) 날짜
let diffDate = theDate.getTime() - today.getTime(); // 밀리세컨드 단위로 저장
// 1000 : 밀리세컨드는 초를 1000분 1로 환산
// 60 : 1분은 60초
// 60 : 60분은 1시간
// 24 : 24시간은 1일
let result = Math.ceil(diffDate / (60 * 1000 * 60 * 24)); // Math.ceil() 소수점을 올림 기능
document.write("<h1>오늘부터 올해 연말까지 남은 날짜</h1>");
document.write("연말 D-day : " + result + "일 남았습니다.");
</script>
</body>
</html>
수학 객체
수학과 관련된 기능과 속성을 제공하는 수학 객체입니다.
종류로는 다음과 같이 있습니다.
| 종류 | 설명 |
| Math.abs(값) | 숫자의 절대값을 반환함. |
| Math.max(값1, 값2, 값3, 값4) | 숫자 중 가장 큰 값을 반환함. |
| Math.min(값1, 값2, 값3, 값4) | 숫자 중 가장 작은 값을 반환함. |
| Math.pow(숫자값, 제곱값) | 숫자의 제곱값을 반환함. |
| Math.random() | 0~1 사이의 난수를 반환함. |
| Math.round(값) | 소수점 첫째 자리에서 반올림한 값을 반환함. |
| Math.ceil(값) | 소수점 첫째 자리에서 무조건 올림한 값을 반환함. |
| Math.floor(값) | 소수점 첫째 자리에서 무조건 내림한 값을 반환함. |
| Math.sqrt(값) | 숫자의 제곱근값을 반환함. |
| Math.PI | 원주율 상수를 반환함. |
수학 객체 실습 예시
수학 객체를 사용하여 최대값(max), 최소값(min), 내림(floor)/올림(ceil)/반올림(round), 랜덤값(random), 원주율(PI)을 출력하는 실습 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내장 객체 : Math</title>
</head>
<body>
<h3>내장객체 : Math</h3>
<p>수학관련 기능 제공</p>
<script>
let num = 2.1234;
let maxNum = Math.max(10, 5, 8, 30); // 최대값
let minNum = Math.min(10, 5, 8, 30); // 최소값
let roundNum = Math.round(num); // 소수점 첫째자리를 반올림
let floorNum = Math.floor(num); // 소수 부분을 내림 함수
let ceilNum = Math.ceil(num); // 소수 부분을 올림 함수
let rndNum = Math.random(); // 랜덤 함수
let piNum = Math.PI; // 원주율 함수
document.write("최대값 : " + maxNum + "<br>");
document.write("최소값 : " + minNum + "<br>");
document.write("첫째자리를 반올림 한 값 : " + roundNum + "<br>");
document.write("소수 부분을 내린 값 : " + floorNum + "<br>");
document.write("소수 부분을 올린 값 : " + ceilNum + "<br>");
document.write("랜덤값 : " + rndNum + "<br>");
document.write("원주율 : " + piNum + "<br>");
</script>
</body>
</html>
배열 객체
배열 객체는 변수처럼 한 개의 데이터가 아닌 여러개의 데이터를 저장하는 저장소를 말합니다.
let 참조 변수명 = new Array();
참조 변수명[0] = 값1; 참조 변수명[1] = 값2; 참조 변수명[2] = 값3; ...
참조 변수명[n-1] = 값 n;
let 참조 변수명 = new Array(값1, 값2, 값3, ... 값n);
let 참조 변수명 = [값1, 값2, 값3, ... 값n];
배열 객체 실습 예제(1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열(Array)</title>
</head>
<body>
<h3>배열(Array)</h3>
<p>배열은 동일한 목적의 여러개의 기억장소를 하나의 대표하는 이름으로 관리하는 형태</p>
<script>
// 배열 생성 방법 1
/*
let d = new Array();
d[0] = 30;
d[1] = "따르릉";
d[2] = true;
// 배열 생성 방법 2
let d = new Array(30, "따르릉", true);
// 배열 생성 방법 3, 권장 방법
let d = [30, "따르릉", true];
*/
let arr = [30, "따르릉", true, 30, "따르릉", true]; // 데이터의 형식이 달라도 배열이 가능하다.
document.write("<h3>배열값 읽어오기 - 1</h3>");
document.write(arr[0], "<br>"); // 30
document.write(arr[1], "<br>"); // 따르릉
document.write(arr[2], "<br>"); // true
document.write(arr[3], "<br>"); // 30
document.write(arr[4], "<br>"); // 따르릉
document.write(arr[5], "<br>"); // true
document.write("<h3>배열값 읽어오기 - 2</h3>");
for (let i = 0; i < arr.length; i++){
document.write(arr[i], "<br>");
}
document.write("<h3>배열값 읽어오기 - 3</h3>");
for (i in arr){
document.write(arr[i], "<br>");
}
</script>
</body>
</html>
배열 객체 실습 예제 (2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열(Array)</title>
</head>
<body>
<h3>배열 메서드</h3>
<script>
let arr_1 = ["사당", "교대", "방배", "강남"];
let arr_2 = ["신사", "압구정", "옥수"];
// 배열 구분자를 이용하여, 연결하기
let result = arr_1.join("-");
// document.write(result, "<br>") 화면 출력
console.log(result); // 화면에 출력하는 것이 아니라, 콘솔에 출력
// 배열 합치기
result = arr_1.concat(arr_2);
console.log(result);
// 배열의 일부를 읽어오기
result = arr_1.slice(1, 3); // 교대, 방배 -> index 1(교대)에서 3(강남) 이전까지의 값만
console.log(result);
// 배열 정렬 (오름차순). 내림차순 명령어는 지원 안 함. sort로 정렬 후 reverse를 하면 내림차순을 할 수 있다.
arr_1.sort(); // arr_1 배열의 데이터가 정렬됨.
console.log(arr_1);
arr_2.reverse(); // arr_2 배열의 데이터가 역순으로 변경
console.log(arr_2);
</script>
</body>
</html>
배열 객체 모델 실습 예제 (3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>배열(Array)</title>
</head>
<body>
<h3>배열 메서드</h3>
<script>
let greenArr = ["교대", "방배", "강남"];
let yellowArr = ["미금", "정자", "수서"];
// index 2 위치에서 1개를 삭제하고, 해당 위치에 데이터를 삽입한다
greenArr.splice(2, 1, "서초", "역삼");
console.log(greenArr);
let data1 = yellowArr.pop(); // yellowArr의 마지막 요소의 데이터를 꺼내와서 data1에 저장한다.
console.log(yellowArr); // 수서
let data2 = yellowArr.shift(); // yellowArr의 맨앞 요소의 데이터를 꺼내와서 data1에 저장한다.
console.log(yellowArr); // 미금
yellowArr.push(data2); // 배열에 데이터가 끝부분에 추가
console.log(yellowArr); //현재 배열의 상태
yellowArr.unshift(data1); // 배열의 앞부분의 삽입
console.log(yellowArr); // 현재 배열의 상태
</script>
</body>
</html>문자열 객체
문자형 데이터를 객체를 취급하는 것을 문자열 객체라고 한다.
let 참조 변수명 = new String(문자형 데이터);
문자열 객체 실습 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>String - 문자열</title>
</head>
<body>
<h3>String - 문자열</h3>
<script>
// 문자열을 표현시 큰따옴표, 작은따옴표 사용 가능. 혼용해서는 사용할 수가 없다.
let str = "Hello Thank you good luck to you";
document.write(str.charAt(16), "<br>"); // 인덱스 16 위치를 읽어온다. (17번째 문자) -> g
document.write(str.indexOf("you"), "<br>"); // you 라는 검색어가 존재하면, 일치된 첫번째 문자의 인덱스를 반환한다. -> 12
document.write(str.indexOf("you", 16), "<br>"); // 인덱스 16 위치에서 "you" 문자열을 검색, 나머지는 위와 동일.
document.write(str.lastIndexOf("you"), "<br>"); // 검색위치를 뒤(오른쪽)에서부터 "you" 문자열을 검색, 나머지는 위와 동일.
document.write(str.lastIndexOf("you", 25), "<br>"); // 검색위치를 뒤(오른쪽)에서부터 "you" 문자열을 검색. 그런데 인덱스 25에서부터
document.write(str.match("luck"), "<br>"); // "luck" 문자열을 검색하여, 존재하면 "luck"이 반환되고, 존재하지 않으면 null 출력
document.write(str.search("you"), "<br>"); // 15줄과 결과는 동일. indexOf() 메서드와 차이점은 정규식이 지원
document.write(str.substr(21, 4), "<br>"); // 인덱스 21 위치에서 4개 문자를 읽어오기.
document.write(str.substring(6, 12), "<br>"); // 인덱스 6에서부터 12 이전 범위까지의 문자열을 읽어온다.
document.write(str.replace("you", "me"), "<br>"); // "you"를 검색하여, 존재하면 "me"라는 문자열로 바꾼다.
document.write(str.toLowerCase(), "<br>"); // 소문자로 변환.
document.write(str.toUpperCase(), "<br>"); // 대문자로 변환.
document.write(str.length, "<br>"); // 문자열의 길이를 반환.
let s = str.split(" "); // 빈칸 문자열을 구분자로 사용하여 배열로 생성 ex) hello, thank, you, good, luck, to, you
document.write(s[0], "<br>"); // hello
document.write(s[4], "<br>"); // luck
let str2 = "A"; // 아스키코드 65 (소문자 a는 아스키코드 97)
let t = str2.charCodeAt(0); // 65 아스키 코드값 반환
document.write(t, "<br>");
document.write(String.fromCharCode(65), "<br>"); // 65 아스키 코드 문자를 반환
let str3 = "金"; // 아스키코드 65 (소문자 a는 아스키코드 97)
let t1 = str3.charCodeAt(0); // 65 아스키 코드값 반환
document.write(t, "<br>");
document.write(String.fromCharCode(37329), "<br>"); // 65 아스키 코드 문자를 반환
alert();
prompt();
confirm();
</script>
</body>
</html>
브라우저 객체 모델
브라우저에 내장된 객체를 말한다. window는 브라우저 객체의 최상위 객체이다.
문서 객체 모델
HTML의 문서 구조를 말하며, HTML 문서 기본 구조는 최상위 객체로 <html>가 있다.
그 하위 객체로 <head>, <body>가 있다.
반응형
'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글
| [JavaScript] 함수 (0) | 2024.01.28 |
|---|---|
| [JavaScript] 제어문 (3) - 반복문 while문, do while문, for문, 중첩 for문, break문, continue문 (0) | 2024.01.28 |
| [JavaScript] 제어문 (2) - 선택문 switch문 (0) | 2024.01.28 |
| [JavaScript] 제어문 (1) - 조건문(if, else, else if, 중첩 if) (0) | 2024.01.28 |
| [JavaScript] JavaScript 시작하기 (4) - 연산자 (0) | 2024.01.17 |