AI와 데이터 사이언스의 이론과 실전
JavaScript - Math 객체, String 객체, Date 객체, Window 객체 본문
1. Math 객체
- 수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체
- min() : 가장 작은 수 반환, 매개변수가 지정되지 않으면 infinity반환
- max() : 가장 큰 수 반환, 매개변수가 지정되지 않으면 -infinity반환
- round() : 소수점 첫번째 자리에서 반올림하여 그 결과를 반환
- floor() : 소수점을 버림한 결과를 반환
- ceil() : 소수점을 올림한 결과를 반환
- random() : 0보다 크거나 같고 1보다 작은 무작위 소수를 반환
※ toFixed
- 오브젝트프로토콜에서 상속받아서 사용됨
toFixed = 소수점 둘째자리에서 반올림
<!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>
<h2>Math 객체</h2>
<script>
console.log(Math.min())
console.log(Math.max())
console.log(Math.min(1,10,-10,1000,0,'-100')) // 자동형변환으로 -100 출력
console.log(Math.min(1,10,-10,1000,0,'마이너스백')) // NaN 비교불가니까 에러
console.log(Math.max(1,10,-10,1000,0,'-100')) // 1000
console.log(Math.min(1,10,-10,1000,0,'마이너스백')) // NaN 비교불가니까 에러
console.log('----------------')
console.log(Math.round(10.49))
console.log(Math.round(10.5))
console.log(Math.round(-10.5))
console.log(Math.round(-10.51))
console.log('-----floor은 버림------')
console.log(Math.floor(10.49))
console.log(Math.floor(10.5))
console.log(Math.floor(-10.5))
console.log(Math.floor(-10.51))
console.log('----ceil은 올림------')
console.log(Math.ceil(10.49))
console.log(Math.ceil(10.5))
console.log(Math.ceil(-10.5))
console.log(Math.ceil(-10.51))
console.log('----------------')
// 소수점 2번째 자리 기준으로 반올림하기
// toFixed
let num1 = 5.678
num1 = num1.toFixed(2)
console.log(num1)
const ran = Math.random();
console.log(ran)
const num = Math.ceil(Math.random()*10);
console.log(num)
</script>
</body>
</html>2. String 객체
- 문자열은 다루는 객체
- 서로 다른 생성방법으로 만든 스트링 객체는 타입이 다르다고 판단
생성방법1 - 리터럴 방법
const str1 = 'JavaScript'
생성방법2 - 객체를 생성
const str2 = new String('JavaScript')
str1 == str2 => true
str1 === str2 => false- length:문자열의 길이를 반환하는 프로퍼티
- indexOf() : 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 반환
- lastIndexOf : 특정 문자나 문자열이 뒤에서 처음으로 등장하는 위치를 인덱스로 반환
- charAt() : 특정문자열에서 전달받은 인덱스에 위치한 문자를 반환
- includes() : 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환
- substring(): 전달받은 시작 인덱스부터 종료인덱스 직전까지 문자열을 추출
- replace() : 원본 문자열의 일부를 전달받은 문자열로 치환
- split() : 구분자를 기준으로 나눈후 나뉜 문자열을 하나의 배열에 저장
- trim() : 문자열의 앞뒤 공백을 제거
- toUpperCase() : 문자열을 모두 대문자로 변환
- toLowerCase() : 문자열을 모두 소문자로 변환
<!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>
<h2>String 객체</h2>
<script>
const str1 = '안녕하세요! JavaScript!'
const str2 = new String('안녕하세요! JavaScript!')
console.log(str1==str2)
console.log(str1===str2)
console.log(str1.length)
console.log(str1.indexOf('J'))
console.log(str1.indexOf('Java')) // 대소문자 구분
console.log(str1.indexOf('a'))
console.log(str1.lastIndexOf('a'))
console.log(str1.charAt(7))
console.log(str1.includes('Java')) // 대소문자 구분함
console.log(str1.substring(7)) //7부터 끝까지
console.log(str1.substring(7,11)) // 7부터 10까지
console.log(str1.replace('안녕하세요','Hello'))
const str3 = '김사과,오렌지,반하나,이메론,채리,배애리'
const students = str3.split(',')
console.log(students) // 배열로 나옴
for(let i in students){
console.log(i,students[i])
}
console.log('-----------------')
const str4 = ' JavaScript '
console.log(`😎${str4}😎`)
console.log(`😎${str4.trim()}😎`)
console.log(`😎${str4.trim().toUpperCase()}😎`)
console.log(`😎${str4.trim().toLowerCase()}😎`)
</script>
</body>
</html>3. Date 객체
- 날짜, 시간 등을 쉽게 처리하기 위해 내장 객체
const 상수명 = new Date() // 현재 날짜 시간
const 상수명 = new Date(년,월,일,시,분,초,밀리초) // 현재 날짜 시간
시간에 대한 객체- 연도(year)
- 2자리로 표기 : 예) 23 -> 1923년으로 인식
- 4자리로 표기 : 2023 -> 2023년으로 인식
- 월(menth)
- 0~11까지만 넣음 0이 1월 11이 12월
3.1. Date 객체를 생성하는 방법
- new Date() 현재 날짜와 시간을 저장한 객체를 생성
- new Date('날짜 문자열) : 해당 특정 날짜와 시간을 저장한 객체가 생성
예) new Date('2023-10-19 00:00:00') - new Date('밀리초) : 1970년 1월 1일 0시0분0초를 기준으로 해당 밀리초만큼 지난 날짜와 시간을 저장한 객체가 생성
예) new Date('23135101561321')
new Date(년,월,일,시,분,초,밀리초) : 해당 날짜와 시간을 저장한 객체가 생성<!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>
<script>
console.log(new Date())
console.log(new Date(23,10,19)) // 1923년 11월 19일로 나옴
const current_time = new Date(2023,9,19,14,10,0)
console.log(`현재 연도: ${current_time.getFullYear()}`)
console.log(`현재 월: ${current_time.getMonth()}`)
console.log(`현재 일: ${current_time.getDate()}`)
console.log(`현재 시: ${current_time.getHours()}`)
console.log(`현재 분: ${current_time.getMinutes()}`)
console.log(`현재 초: ${current_time.getSeconds()}`)
</script>
</body>
</html>4. Window 객체
- 웹 브라우저의 창이나 탭을 설정하기 위한 객체들이며, 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음
- Window.alert()
- Window.confirm()
- Window.prompt()
4.1. setTimeout()
- 일정시간이 지난 후 매개변수로 제공된 함수 1번 실행
const 상수명 = function(){
실행문
}
const st = setTimeout(상수명, 밀리초) //1초면 1000이라고 적어주면 됨4.2. clearTimeout()
- 일정 시간후에 일어날 setTimeout()을 취소함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout</title>
</head>
<body>
<h2>setTimeout</h2>
<script>
const hello = function(){
alert('안녕하세요 자바스크립트!')
}
const st = setTimeout(hello, 3000)
clearTimeout(st)
</script>
</body>
</html>
4.3. setInterval()
- 일정시간마다 매개변수로 제공된 함수를 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setInterval</title>
</head>
<body>
<h2>setInterval</h2>
<script>
const hello = function(){
console.log('안녕하세요 자바스크립트!')
}
const si = setInterval(hello,2000) //2초마다 찍히게
const claerInter = function(){
clearInterval(si)
console.log('hello 함수가 중지되었습니다.')
}
</script>
<p><button onclick = 'claerInter()'>중지</button></p>
</body>
</html>4.4. clearInterval()
- 일정시간마다 일어날 setInterval()을 취소함
5. 시계만들기 실습
<!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>
<h2>시계만들기</h2>
<script>
let si
function makeClock(){
const date = new Date()
yy = date.getFullYear()
MM = date.getMonth()+1
dd = date.getDate()
hh = date.getHours()
mm = date.getMinutes()
ss = date.getSeconds()
console.log(`${yy}-${MM}-${dd}-${hh}-${mm}-${ss}`)
}
function startClock() {
si = setInterval(makeClock, 1000)
}
function stopClock() {
clearInterval(si)
console.log('종료!')
}
</script>
<button onclick="startClock()">시작</button>
<button onclick="stopClock()">중지</button>
</body>
</html>