[JS] 객체 종류_ 내장 객체 (Date, String, Array, Math) 연습문제

[JS] 객체 종류_ 내장 객체 (Date, String, Array, Math) 연습문제

2021. 10. 26. 15:13ㆍHTML + CSS + JS/JS 자바스크립트

728x90

1. 객체의 메서드와 속성

객체.메서드();

객체.속성;

2. 객체의 종류

1️⃣ 내장 객체

내장 객체는 자바스크립트 엔진이 내장되어 있어 필요한 경우에 생성해서 사용할 수 있다.

내장 객체의 종류로는 Date, String, Array, Math 객체들이 있다.

2️⃣ 브라우저 객체 모델

브라우저 객체 모델 BOM 은 브라우저의 계층구조로 내장되어 있는 객체를 말한다.

브라우저 객체로는 window, screen, history, navigotor, location 등이 있다.

3️⃣ 문서 객체 모델

문서 객체 모델 DOM은 HTML 문서 구조를 말한다.

3. 내장 객체

내장 객체는 브라우저의 자바스크립트 엔진에 내장되어 있는 객체로 필요한 경우 생성해서 사용할 수 있다.

참조변수 = new 생성함수();

tv와 car라는 객체를 생성하였다.

color와 price는 객체의 속성이고, info가 객체의 메서드이다.

1️⃣ 날짜 정보 객체

날짜나 시간 관련 정보를 얻고 싶다면 날짜 객체를 생성한다.

참조변수 = new Date();

- 날짜 정보 가져올 때 get

getFullYear()

getMonth() : 월 정보 가져옴 (현재 월 -1 )

getDate()

getDay() : 요일 정보 가져옴 ( 0일~ 6토)

getHours()

getMinutes()

getSeconds()

getMillseconds()

getTime()

toGMTString() : GMT 표준 표기 방식으로 문자형데이터 반환

- 날짜 정보 수정할 때 set

setFullYear()

setMonth()

setDate()

setHours()

setMinutes()

setSeconds()

setMillseconds()

setTime()

toLocaleString()

이때 seTDay가 없는 이유는 어차피 다른걸 수정하면 날짜는 자동으로 바뀌기 때문이다.

현재 월이 9월로 표시된 이유는 getMonth 는 1 빼서 반환하기 때문

* 연말까지 남은 날 계산하는 프로그램

1초 1000(msc)

1분 1000 * 60

1시간 1000 * 60 *60

1일 1000 * 60 * 60 * 24

2️⃣ 수학 객체

- 수학 객체 메서드 및 상수

Math.abs(숫자) : 절대값

Math.max(숫자,...)

Math.min(숫자,..)

Math.pow(숫자, 제곱값) : 숫자의 거듭 제곱값을 반환한다.

Math.random() : 0~1 사이의 난수 반환

Math.roud(숫자) : 소수점 첫째자리에서 반올림하여 정수로 반환

Math.ceil(숫자) : 소수점 첫째 자리에서 무조건 올림하여 정수로 반환

Math.floor(숫자) : 소수점 첫째 자리에서 무조건 내림하여 정수로 반환

Math.sqrt(숫자) : 숫자의 제곱근값을 반환

Math.PI : 원주율 구함

* Math.random()

Math.random() 은 0 ~ 1사이의 난수를 반환한다.

여기에 Math.random() * 10 하면 0부터 10 사이의 난수를 반환한다.

Math.floor(Math.random() * 11) 하면 0부터 10 에서 소수점 없앤 정수 반환

120 ~ 150 사이의 값을 구하고 싶다면

Math.floor(Math.random() * 31)) + 120;

즉 난 수를 발생하여 원하는 정수의 구간 값 구하는 방법

Math.floor(Math.random() * (최대값 - 최솟값 + 1 )) + 최솟값;

3️⃣ 배열 객체

여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체를 사용하면 된다.

- 배열 객체 선언 방법

var d = new Array();

d[0] = 30 ;

d[1] = "hello";

d[2] = true;

var d = new Array(30, "hello", true);

var d = [30, "hello", true];

- 배열 객체의 메서드 및 속성

join(연결문자) : 연결 문자를 기준으로 하나의 문자열로 반환함

reverse() : 배열 객체의 데이터 순서를 역순으로 바꾼 후 반환

sort() : 배열 객체의 데이터를 오름차순으로 정렬한다.

slice(index1, index2) : 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다.

splice() : 배열 객체의 지정 데이터를 삭제하고 그 구간에 새로운 데이터를 삽입할 수 있다.

concat() : 2개의 배열 객체를 하나로 결합

pop() : 배열의 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다.

push(new data) : 배열 객체의 마지막 인덱스에 새로운 데이터를 삽입한다.

shift() : 배열 객체에 저장된 데이터 중 첫번째 인덱스에 저장된 데이터를 삭제한다.

unshift(new data) : 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입한다.

length : 배열에 저장된 총 데이터의 개수를 반환한다.

4️⃣ 문자열 객체

문자열 객체는 문자형 데이터를 객체로 취급하는 것이다. (자바스크립트에서 가장 많이 사용함)

var 참조변수 = new String(문자형 데이터)

- 문자열 객체의 메서드 및 속성

charAt(index) : 문자열에서 인덱스 번호에 해당하는 문자 반환

indexOf("찾을문자") : 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1 반환함.

lastIndexOf("찾을문자") : 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환한다. 만약 찾는 문자가 없다면 -1 반환함.

match("찾을문자") : 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 반환함. 찾는 문자가 없다면 null 반환

replace("바꿀 문자", "새문자") : 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환함

search("찾을문자") : 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 인덱스 번호를 반환함.

slice(a,b) : a개의 문자를 자르고, b번째 이후의 문자를 자른 후 남은 문자를 반환함.

substring(a,b) : a인덱스부터 b 인덱스 이전 구간의 문자를 반환함

substr(a, 문자 개수) : a인덱스부터 지정한 문자 개수만큼 문자열 반환함

split("문자") : 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환한다.

toLowerCase() : 문자열에서 영문 대문자를 모두 소문자로 바꿔준다.

toUpperCase() : 문자열에서 영문 소문자를 모두 대문자로 바꿔준다.

length : 문자열에서 문자의 개수 반환해줌.

concat("새로운 문자") : 문자열에 새로운 문자열을 결합한다.

charCodeAt(index) : 문자열 index에 해당 문자의 아스키 코드값을 반환한다.

fromCharCode(아스키 코드 값) : 아스키 코드값에 해당하는 문자를 반환한다.

trim() : 문자열 공백 삭제

* 연습문제 1

영문 이름을 받아 대문자로 바꿔주고, 전화번호의 뒤 네자리는 *로 바꿔주는 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 문자 객체 </title>
<script>
 
    var userName = prompt("당신의 영문 이름은? " ,"");

    var upperName = userName.toUpperCase();
    document.write(upperName, "<br>");

    var userPhone = prompt("당신의 연락처는? ", "");

    var result = userPhone.substring(0, userPhone.length - 4 ) + "****";
    document.write(result, "<br>");
</script>
</head>
<body>
</body>
</html>

* 연습문제 2

입력한 이메일 유효성 확인하는 방법

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 문자 객체 </title>
<script>
	var userEmail = prompt("당신의 이메일 주소는?", "");
	var arrUrl = [".co.kr", ".com", ".net", ".or.kr", ".go.kr"];

	var check1 = false;
	var check2 = false;

	if(userEmail.indexOf("@") > 0 ) {check1 = true;}

	for(var i = 0; i< arrUrl.length; i++) {
		if(userEmail.indexOf(arrUrl[i]) > 0) {
			check2 = true;
		}
	}

	if(check1 && check2 ) {
		document.write(userEmail);
	}else{
		document.write("이메일 형식이 잘못됐습니다!");
	}
</script>
</head>
<body>
</body>
</html>

728x90

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

[JS] 객체 연습문제 1, 2 (0)	2021.10.26
[JS] 브라우저 객체 모델 (0)	2021.10.26
[JS] 선택문(switch)와 반복문(while, do-while, for) 연습문제 (0)	2021.10.26
[JS] 조건문 (if, if-else, 중첩 if )예제 (0)	2021.10.26
[JS] 기본연산자 연습문제 1, 2 (0)	2021.10.25

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS > JS 자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바