-
자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:52
자바스크립트 객체 (Object)
- 내장 객체
- 브라우저 객체
- 문서 객체 (DOM)
- 사용자 정의 객체
자바스크립트 내장 객체 (Built in Object)
- 미리 정의되어 있는 객체
- 선언 과정을 통해 객체 변수를 정의해서 사용
- 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고
- 대부분의 경우에는 내장 객체 많이 사용
대표적인 내장 객체
- Date : 날짜와 시간을 처리하기 위한 객체
- Array : 배열을 만들기 위한 객체
- String : 문자열을 다루기 위한 객체
- Math : 수학 계산을 위한 객체
- Event : 발생하는 이벤트에 관한 정보를 제공하는 객체
- Screen : 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체
객체 생성 및 사용 예
- 객체 생성
- var today = new Date(); // Date 객체 생성
- var arr = new Array(3); // Array 객체 생성
- 객체 사용 : 객체.메소드()
- today.getMonth()
- arr.sort()
Date 객체
- 날짜와 시간을 관리해주는 내장 객체
- 웹 페이지에 오늘 날짜와 시간, 요일 등 표시
- var today = new Date(); // Date 객체 생성
- var month = today.getMonth();
Date 객체의 시간/날짜 정보를 반환하는 메소드
Date 객체의 시간/날짜 정보를 설정하는 메소드
날짜/시간 정보의 포맷을 변경하는 데 사용하는 메소드
Date 객체 예제 : date.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 Date 객체</title> <script type="text/javascript"> // Date 객체 today 선언 var today = new Date(); //var year = today.getYear(); var year = today.getFullYear(); var month = today.getMonth() + 1; //.getMonth()가 0부터 반환 var date = today.getDate(); var day; // 요일 저장할 변수 // 요일 설정 switch(today.getDay()){ case 0: day="일"; break; case 1: day="월"; break; case 2: day="화"; break; case 3: day="수"; break; case 4: day="목"; break; case 5: day="금"; break; default : day ="토"; } document.write("오늘은 " + year + "년 " + month + "월 " + date + "일 " + day + "요일입니다"); var hour = today.getHours(); var minute = today.getMinutes(); var second = today.getSeconds(); var amPm; var amPm = "오전"; if (hour == 24) { hour -= 24; } else if (hour >= 12) { amPm = "오후"; if (hour > 12) { hour -= 12; } } document.write("<br>지금은 " + amPm + hour + "시 " + minute + "분 " + second + "초입니다"); </script> </head> <body> </body> </html>
Array 객체
- 배열 내장 객체
- var arr = new Array(3); // Array 객체 생성
- arr.sort() // 객체.메소드()
Array 객체 주요 메소드
Array 객체 예제 : arrayObject.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 Array 객체</title> <script type="text/javascript"> var fruits = new Array("사과" , "복숭아", "포도"); // var fruits = ["사과" , "복숭아", "포도"]; //결과 동일 document.write("모든 요소 출력 <br>"); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.shift(); // 첫 번째 요소 제거 document.write("<br> shift() : 첫 번째 요소 제거 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.unshift("배"); // 맨 앞에 요소 추가 document.write("<br> unshift() : 맨 앞에 요소 추가 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.pop(); // 마지막 요소 제거 document.write("<br> pop() : 마지막 요소 제거 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.push("딸기"); // 마지막에 요소 추가 fruits.push("수박"); // 마지막에 요소 추가 document.write("<br> push() : 마지막에 (딸기, 수박) 요소 추가 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.reverse(); // 역순으로 변경 document.write("<br> reverse() : 역순으로 변경 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.sort(); // 오름차순 정렬 document.write("<br> sort() : 오름차순 정렬 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); fruits.splice(2, 1, "망고", "오렌지"); // [2] 위치 요소 1개 삭제하고 '망고', '오렌지' 추가 document.write("<br> splice() : [2] 위치 요소 1개 삭제하고 '망고', '오렌지' 추가 - "); for(var i=0; i<fruits.length; i++) document.write(fruits[i] + " "); // slice()로 잘라서 새 배열 생성 var newFruits = fruits.slice(1, 4); // start~ end-1 : [1]~[3] 요초 추출하여 새 배열 생성 document.write("<br> slice() : [1]~[3] 요초 추출하여 새 배열 생성 - "); for(var i=0; i<newFruits.length; i++) document.write(newFruits[i] + " "); </script> </head> <body> </body> </html>
Math 객체
- 수학적 계산에 필요한 함수나 상수 값 제공
- 상수 값은 속성으로
- 수학 함수는 메소드로 제공
- Math 객체는 속성이나 메소드에 접근하기 위해 따로 객체 변수 선언하지 않고 Math 클래스 이름 그대로 사용
- 형식
- Math.속성
- Math.메소드
- 예:
- Math.PI
- Math.abs()
Math 객체의 주요 메소드
Math.random()
- 0.0x ~ 0.9x 사이의 실수 형태의 값으로 난수 발생
- 정수값으로 사용하기 위해서는
- 곱하기 10을 하고
- Math.floor() 메소드로 소수점 이하 값을 버리고
- 시작 값 더해서 사용
- 예 : 1 ~ 10 사이의 난수 발생
- var num = 1 + Math.floor(Math.random() * 10);
Math.random() 연습문제 : random.html
- 실행할 때마다 이미지 다르게 출력(그림1 ~ 3 중 1개가 임의로 출력)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 Math.random()</title> <script type="text/javascript"> var rand=1 + Math.floor(Math.random() * 3); document.write('<img src="image/그림' + rand + '.jpg">'); document.write('<br>그림' + rand + '.jpg'); // 또는 ${ranNum} 사용 var ranNum = 1 + Math.floor(Math.random() * 3); // 1~3 랜덤 숫자 document.write(`<img src="image/그림${ranNum}.jpg"><br>그림${ranNum}.jpg`); </script> </head> <body> </head> <body> </body> </html>
String 객체
- 문자열 객체
- var name = “홍길동”; // 상수 형태 문자열 (객체로 자동 변환 : 일시적)
- var name = new String();
- new를 이용해서 객체를 생성하지 않고 상수 형태(“문자열”)로 문자열을 만들어도 문자열 객체의 특징 모두 사용
String 객체의 주요 메소드
String 객체 예제 : string.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 String 객체</title> <script type="text/javascript"> //String 객체 name 생성 var name = new String("홍길동"); // var name = "홍길동"; // 해도 동일 // String 문자열 속성 메소드 document.write(name.bold()); document.write(name.sub()); document.write(name.sup()); document.write(name.italics()); document.write(name.fontcolor("red")); document.write(name.fontsize(5)); document.write(name.fontsize(6).fontcolor("blue")); </script> </head> <body> </body> </html>String 객체 주요 메소드
charAt()
- charAt(인덱스) : 인덱스로 지정된 위치의 문자 반환
- str.charAt(3) : 문자열 str에서 4번째 문자(w) 반환
- 인덱스 : 0부터 시작
- 예 : str = “flower”;
- 연습문제 : charAtEx.html
- 숫자를 입력 받아서 (1234abd111)
- 숫자가 아닌 값이 하나라도 들어 있으면 “숫자 형식이 아닙니다” alert() 출력
- 입력된 값 화면에 출력 (write())
substring()
- substring(start, end)
- 문자열 일부분 추출 : 인덱스 start ~ end-1까지의 문자열
- 인덱스 : 0부터 시작
- 예 : “19990115”
- substring(4, 6)
- start : 인덱스 4 (다섯번째)
- end-1 : 6-1은 인덱스 5 (여섯번째)
- 5 ~6 번째 문자열 : 01
- 연습문제 : substring.html
- “생년월일 (예: 19990125)”
- 화면에 출력 : ~ 년 ~월 ~일에 태어나셨군요
IndexOf()
- indexOf(‘문자’)
- 문자열에서 지정된 문자의 위치를 인덱스 값으로 반환
- 인덱스는 0부터
- 검색할 때 왼쪽부터 찾아서 처음 발견한 문자의 위치를 알려주는 것
- 예: email.indexOf(‘@’)
- email 문자열에서 세번째 위치하는 2 반환
- 찾고자하는 문자가 문자열에 없으면 -1 반환
- 연습문제 : indexOf.html
- “이메일 입력” 입력 받아서
- 이메일 형식이 아니면 “이메일 형식이 아닙니다” alert() 출력
- 화면에 “입력한 email : abcd@1234” 출력
- 이메일 형식이 아닌 조건
- @ 없는 경우
- . 없는 경우
- .이 @ 앞에 오는 경우
split()
- split(“구분자”)
- 구분자로 문자열 분리
- 예 : str = “1999-11-12”
- var date = str.split(‘-’); 하면
- 문자열이 ‘-’ 기준으로 분리되어 배열에 순서대로 저장
- date[0]에는 1999 가 저장되고
- date[1]에는 11 이 저장되고
- date[2]에는 12가 저장
- 연습문제 : split.html
- “생년월일 입력 (예: 1999-11-12)” 입력 받아서
- 화면에 출력 (write()) : 1999년 11월 12일
'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환 (0) 2022.01.27 브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 제어문 (if, switch, for, while...) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26