[학습일지]JAVA교육일지 19일차

11.3) 표준 내장 객체 사용

표준 내장 객체 : JS 기본 내장 객체, 스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용 가능

- 문자열을 다루는 String, 배열을 다루는 Array, 날짜와 시간을 다루는 Date, 수학 연산을 다루는 Math

​

※여기 없는 표준 내장 객체에 관해서는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects

​

11.3.1 문자열을 다루는 String 객체

• 문자열에서 사용할 수 있는 속성과 메서드가 정의되어 있음

​

* string 객체의 주요 속성과 메서드

구분		설명
속성	length	문자열의 길이 반환
메서드	includes()	메서드의 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함되어 있으면 true, 아니면 false 반환
	replace()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 한 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환
	replaceAll()	대상 문자열에서 메서드의 매개변수에 인자로 전달되는 문자열과 일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열 반환
	split()	메서드의 매개변수에 인자로 전달되는 구분자를 이용해 대상 문자열을 여러 개의 문자열로 분리, 분리한 문자열을 새로운 배열로 반환
	toUpperCase()	대상 문자열을 대문자로 변경해 반환
	trim()	대상 문자열 앞뒤 공백을 제거한 값 반환
	indexOf()	대상 문자열과 일치하는 첫 번째 문자의 인덱스 반환

• length 속성 : 최소 글자수나 최대 글자수 확인 할 때 유용

ex)

const pw = "124"; if(pw.length < 4){ console.log("비밀번호는 최소 4자리 이상 입력해 주세요."); }

• includes( ) 메서드 : 특정 문자열이 포함되어 있는지 확인할 때

ex)

const email = "test!naver.com"; if(email.includes("@") === false){ console.log("올바른 이메일 형식이 아닙니다."); }

• indexOf( ) 메서드 : 특정 문자열이 포함되어 있는지 확인, 특정 문자열과 일치하는 첫 번째 문자의 인덱스 반환, 찾이못하면 -1 반환

ex)

const email = "test!naver.com"; if(email.indexOf("@") === -1){ console.log("올바른 이메일 형식이 아닙니다."); }

※ string 객체의 나머지 속성과 메서드는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

​

​

11.3.2 배열을 다루는 Array 객체 ★실무에서 자주 사용됨

• 배열에서 사용할 수 있는 속성과 메서드가 정의돼 있음

​

* Array 객체의 주요 속성과 메서드

구분		설명
속성	length	배열의 요소 개수 반환
파괴적 메서드	push()	배열 맨 뒤에 데이터 추가
	pop()	배열 맨 뒤에서 데이터 추출
	unshift()	배열 맨 앞에 데이터 추가
	shift()	배열 맨 앞에서 데이터 추출
	sort()	배열 요소 정렬
	reverse()	배열 요소 역순으로 정렬
비파괴적 메서드	forEach()	배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback) 함수 호출
	filter()	요소마다 콜백 함수 호출해 true를 반환하는 요소만 추출 추출한 요소로 새로운 배열을 만들고 만들어진 배열 반환
비파괴적 메서드	find()	배열의 요소를 탐색하면서 주어진 판별 함수를 만족하는 첫 번째 값 반환
	findIndex()	값 대신 인덱스 숫자를 반환함, 나머지는 find() 메서드와 같음
	includes()	배열에 특정 값이 포함되어 있는지 확인. 포함됐으면 true, 아니면 false 반환
	join()	배열의 모든 요소를 주어진 구분자로 합침

• ength 속성 : 배열의 요소 개수, 즉 길이를 구할 수 있음, 배열의 길이를 이용한 반복문 처리가 가능

ex)

const arr = [10, 20, 30]; for(let i = 0 ; i < arr.length ; i++){ console.log(arr[i]); }

• 파괴적 메서드 : 메서드를 사용 했을 때 원본 데이터를 변경하는 메서드
• 배열에 데이터를 추가, 추출(제거하고 반환)하는 push( ), pop( ), unshift( ), shift( )

const arr = [10, 20, 30, 40]; arr.push(50); // 배열 맨 뒤에 추가 console.log(arr); // 실행결과) [10, 20, 30, 40, 50] arr.pop(); // 배열 맨 뒤에서 요소 추출 console.log(arr); // 실행결과) [10, 20, 30,40] arr.unshift(0); // 배열 맨 앞에 추가 console.log(arr); // 실행결과) [0, 10, 20, 30, 40] arr.shift(); // 배열 맨 앞에서 요소 추출 console.log(arr); // 실행결과) [10, 20, 30, 40]

• 비파괴적 메서드 : 원본을 변경하지 않는 메서드
• forEach( ) : 배열 안의 요소를 순회하면서 콜백 함수인 function(v)를 호출해 접근한 요소의 값 출력, 반복문을 배열 요소에 접근하는 것과 비슷함

const arr = [10, 20, 30, 40]; arr.forEach(function(v){ console.log(v); }); console.log(arr); // 실행결과) 10 20 30 40

※ Array 객체의 나머지 속성과 메서드는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

​

​

11.3.3 날짜와 시간을 다루는 Date 객체

※Date 객체의 예제코드는 웹브라우저 콘솔창에서 입력, 실행해서 확인

​

* 인스턴스 만들기

• 인스턴스 : new 키워드로 Date 객체를 호출 했을 때 생성되는 날짜와 시간 데이터

​

- new 키워드로 Date 객체 호출 : 현재 날짜와 시간 정보를 기반으로 인스턴스 생성

- date 변수에 할당 된 데이터 = Date 객체의 인스턴스

const date = new Date();

​

- 연(year), 월(month), 일(date), 시(hour), 분(minute), 초(second) 정보를 숫자로 전달해 생성하는 방법

- 주의점 : 월은 0부터 시작, 1월은 0, 12월은 11

const date1 = new Date(2023, 11, 25); // Mon Dec 25 2023 00:00:00 GMT+0900(한국 표준시) const date2 = new Date(2023, 11, 25, 18, 30, 50); // MON Dec 25 2023 18:30:50 GMT+0900(한국 표준시)

​

- 문자열로 원하는 날짜와 시간 데이터 생성하는 방법

- 월은 그대로 전달하면 됨

const date1 = new Date("2023-12-25"); // Mon Dec 25 2023 09:00:00 GMT+0900(한국 표준시) const date2 = new Date("2023/12/25/18:30:50"); // MON Dec 25 2023 18:30:50 GMT+0900(한국 표준시)

​

* 메서드로 날짜와 시간 정보 가져와서 설정

- Date 객체의 인스턴스에 할당된 날짜와 시간을 일반적인 형식으로 가공하는 방법 : Date 객체 메서드 사용하기

- 날짜와 시간 정보를 가져오는 메서드 : get 메서드 (get 으로 시작하는 메서드)

- 날짜와 시간 정보를 설정하는 메서드 : set 메서드 (set 으로 시작하는 메서드)

​

• Date 객체의 메서드

종류	설명
getFullYear() / setFullYear()	연도를 4자리 숫자로 표시.
getMonth() / setMonth()	월을 0부터 11까지의 숫자로 표시 (1월 → 0, 12월 → 11).
getDate() / setDate()	일을 1부터 31까지의 숫자로 표시
getDay()	요일을 0부터 6까지의 숫자로 표시 (일요일 → 0, 토요일 → 6).
getTime() / setTime()	1970년 1월 1일 12:00 이후의 시간을 밀리초(1/1000초) 단위로 표시
getHours() / setHours()	시를 0부터 23까지의 숫자로 표시
getMinutes() / setMinutes()	분을 0부터 59까지의 숫자로 표시
getSeconds() / setSeconds()	초를 0부터 59까지의 숫자로 표시
getMilliseconds() / setMilliseconds()	밀리초를 0부터 999까지의 숫자로 표시

- Date 객체의 get 메서드를 사용해서 날짜와 시간 재구성 할 수 있음

const date = new Date(2023, 11, 25, 18, 30, 50); const dateFormat = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHour()}:${date.getMinutes()}:${date.getSeconds()}`; console.log(dateFormat); // 실행결과) 2023-12-25 18:30:50

​

*날짜 간격 계산

• Date 객체의 getTime( ) 메서드 : 1970년 1월 1일 12:00 이후의 시간을 밀리초 단위로 반환
• 반환 결과를 활용하면 두 날짜 사이의 간격을 구할 수 있음

const date1 = new Date(`2023-12-23`); const date2 = new Date(`2023-12-25`); const dateDiff = date2.getTime() - date1.getTime(); const interval = dateDiff / (24 * 60 * 60 * 1000) console.log(`두 날짜의 차이는 ${interval}일 입니다.`) // 실행결과) 두 날짜의 차이는 2일 입니다.

- Date 객체로 인스턴스 생성

- 두 인스턴스에 getTime() 메서드로 반환받는 날짜를 미래 날짜에서 과거 날짜를 뺌

- 구한 밀리초를 24(시간) x 60(분) x 60(초) x 1000(밀리초)로 나누면 두 날짜 사이의 간격을 일수로 환상

​

※ Date 객체의 나머지 속성과 메서드는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

​

​

11.3.4 수학 연산을 다루는 Math 객체

※ Date 객체의 나머지 속성과 메서드는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

​

* Math 객체의 주요 메서드

종류	설명
Math.floor()	주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수 반환 (내림)
Math.ceil()	주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수 반환 (올림)
Math.round()	주어진 숫자를 반올림한 수와 가장 가까운 정수 반환 (반올림)
Math.random()	0 이상 1 미만의 난수 반환

• Math 객체는 Math 객체에 바로 메서드 사용

const floatNum = 10.52; Math.floor(floatNum); // 10 (내림) Math.ceil(floatNum); // 11 (올림) Math.round(floatNum); // 11 (반올림)

​

* 난수 구하기 : Math 객체의 random( ) 메서드 - 0이상 1미만의 난수 반환

const random = Math.random(); console.log(random); // 실행결과는 실행할 때 마다 달라짐

• 1이상의 난수를 구할 때? 주어진 숫자를 내림해서 정수를 반환하는 floor( ) 메서드를 추가해 난수 범위를 늘림

ex) 난수 범위를 0 이상 20 이하의 정수로 바꾸고 싶을 때

function getMaxRandom(max){ return Math.floor(Math.random() * max) +1 ; } const maxRandom = getMaxRandom(20); console.log(maxRandom); // 0 이상 20 이하의 무작위 정수

ex) 난수의 최솟값

function getMaxRandom(min, max){ return Math.floor(Math.random() * (max - min)) +1 + min ; // 20을 제외하고 싶으면 +1 삭제 } const maxRandom = getMaxRandom(10, 20); console.log(maxRandom); // 10 이상 20 이하의 무작위 정수

​

11.4) 브라우저 객체 모델 사용

• 브라우저 객체 모델 : 웹 브라우저에서 제공하는 객체

* 브라우저 객체 모델의 종류

종류	설명
window	웹 브라우저가 열릴 때마다 생성되는 최상위 관리 객체
document	웹 브라우저에 표시되는 HTML 문서 정보가 포함된 객체
location	웹 브라우저에 현재 표시된 페이지에 대한 URL 정보가 포함된 객체
history	웹 브라우저에 저장된 방문 기록이 포함된 객체
navigator	웹 브라우저 정보가 포함된 객체
screen	웹 브라우저의 화면 정보가 포함된 객체

• JS로 웹브라우저를 제어하려면 필수로 공부해야하는 부분
• window, document 객체의 속성과 매서드는 실무 활용도가 높음

​

11.4.1 window 객체의 속성과 메서드

* window 객체의 주요 속성과 메서드 (새로운 창 및 스크롤 제어 메서드)

구분		설명
속성	innerWidth	웹 브라우저 화면 너비를 px(픽셀) 단위로 나타냄
	innerHeight	웹 브라우저 화면 높이를 px 단위로 나타냄
	outerWidth	웹 브라우저 창 너비를 px 단위로 나타냄
	outerHeight	웹 브라우저 창 높이를 px 단위로 나타냄
	screenTop / screenY	웹 브라우저 위쪽 면과 모니터의 간격을 px 단위로 나타냄
	screenLeft / screenX	웹 브라우저 왼쪽 면과 모니터의 간격을 px 단위로 나타냄
	pageXOffset / scrollX	웹 브라우저의 수평 스크롤 위치를 px 단위로 나타냄
	pageYOffset / scrollY	웹 브라우저의 수직 스크롤 위치를 px 단위로 나타냄
메서드	alert()	알림창 표시
	confirm()	확인창 표시
	prompt()	입력창 표시
	open()	새로운 웹 브라우저 창을 염
	close()	웹 브라우저 창을 닫음
	setTimeout()	일정 시간(ms) 뒤에 콜백 함수를 한 번만 실행
	setInterval()	일정 시간(ms)마다 콜백 함수를 반복 실행
	clearInterval	setInterval() 메서드로 반복 실행되는 함수 중지
	scrollTo()	웹 브라우저의 스크롤을 특정 위치만큼 이동
	scrollBy()	웹 브라우저의 스크롤을 현재 위치에서 상대적 위치로 이동

※ 기능이 같은 속성들 : 반환하는 결과는 같지만 IE 버전을 고려해야 한다면 호환성이 좋은 속성을 사용하는 편이 좋음

IE 버전 호환성이 좋은 속성은 screenTop, screenLeft, pageXOffset, pageYOffset

IE 버전 호환성이 낮은 속성은 screenY, screenX, scrollX, scrollY

​

11.4.2 window 객체의 기본 속성 사용하기

예제) button 을 클릭했을 때 printInfo( ) 함수가 호출됨

<body> <button onclick="printInfo()">window 객체 속성</button> <script> function printInfo(){ console.log(`웹 브라우저의 너비: ${window.innerWidth}`); console.log(`웹 브라우저의 높이: ${window.innerHeight}`); console.log(`웹 브라우저 창의 너비: ${window.outerWidth}`); console.log(`웹 브라우저 창의 높이: ${window.outerHeight}`); console.log(`웹 브라우저 창 위쪽 면과 모니터 사이의 간격: ${window.screen Top}/${window.screenY}`); console.log(`웹 브라우저 창 왼쪽 면과 모니터 사이의 간격: ${window.screen Left}/${window.screenX}`); console.log(`웹 브라우저 창의 스크롤 가로 위치: ${window.scrollX}`); console.log(`웹 브라우저 창의 스크롤 세로 위치: ${window.scrollY}`); } </script> </body>

​

11.4.3 웹 브라우저에서 새 창 제어하기

• 웹 브라우저에서 새 창 열기 : window 객체의 open( ) 메서드, 매개변수로는 창의 경로, 이름, 속성 사용. 팝업창
• window.open(경로, 이름, 속성) ;

<body> <button onclick="popup()">팝업</button> <script> function popup(){ window.open('popup.html', '팝업', 'width=200, height=100'); } </script> </body>

window.open('popup.html', '팝업', 'width=200, height=100');

• 첫 번째 매개변수 popup.html : 새 창에서 열릴 파일의 경로
• 두 번째 매개변수 '팝업' : open( ) 메서드로 열리는 창을 내부적으로 구분하는 용도로 사용하는 이름 지정, open( ) 메서드는 이름이 같은 창은 1개만 열림, 버튼 여러번 눌러도 1개의 창만 열림
• 세 번째 매개변수 'width=200, height=100' : 새 창의 속성 지정하는 값

- 세 번째 매개변수에 사용할 수 있는 속성

속성	예	설명
width	width = 400	웹 브라우저 너비를 px 단위로 지정
height	height = 400	웹 브라우저 높이를 px 단위로 지정
left	left = 400	웹 브라우저 왼쪽에서의 위치를 px 단위로 지정
top	top = 400	웹 브라우저 위쪽에서의 위치를 px 단위로 지정

• window객체의 close( ) 메서드 : 창 닫기, open( ) 메서드로 열린 새로운 창 닫는 용도로 사용

​

11.4.4 웹 브라우저의 스크롤 이동하기

• window객체의 scrollTo( ) 메서드 : 웹 브라우저의 스크롤 위치를 특정 좌표로 이동
• window객체의 scrollBy( ) 메서드 : 웹 브라우저의 스크롤을 현재 위치에서 상대적인 위치로 이동
• 두 메서드는 매개변수에 x좌표, y좌표를 기본으로 받음
• window.scrollTo(x좌표, y좌표) ; ← 몇 번 호출해도 x좌표, y좌표 위치로 스크롤이 이동
• window.scrollBy(x좌표, y좌표 ) ; ← 호출할 때 마다 스크롤이 x좌표, y좌표씩 이동

​

• 객체 리터럴을 전달받을 수도 있음

window.scrollTo( { left:100, top:200 } ) ;

window.scrollBy( { left:100, top:200 } ) ;

​

• scrollTo( ) 메서드나 scrollBy( ) 메서드의 매개변수에 객체 리터럴을 전달할때 behavior 속성 전달 가능, behavior 속성값을 smooth로 하면 스크롤이 부드럽게 이동, IE와 사파리 는 지원X

window.scrollTo( { top:4000, behavior:'smooth' } ) ;

window.scrollBy( { top:600, behavior:'smooth' } ) ;

​

※ 다른 브라우저 모델 객체는 아래 페이지 참고

https://developer.mozilla.org/ko/docs/Web/API

​