안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
string API
- string 타입의 값 (객체)은 상속받은 string prototype 객체의 메소드를 사용할 수 있음
HTML 코드
<button onclick="test1();">확인</button>
Javascript 코드
toUpperCase() - 대문자 변환
toLowerCase() - 소문자 변환
function test1() {
const str = "Apple Samsung PinaApple";
console.log(str.toUpperCase());
console.log(str.toLowerCase());
}
indexOf() - 찾는 단어의 인덱스 반환
console.log(str.indexOf('Sam'));
console.log(str.indexOf('SSSS')); // 없는 문자열
없는 문자열은 인덱스가 없으니 -1이 반환됩니다.
charAt() - 해당 인덱스의 문자 반환
charCodeAt() - 해당 문자의 아스키 코드 값 반환
console.log(str.charAt(6));
console.log(str[6]);
console.log(str.charCodeAt(0)) // 해당 문자의 아스키 코드 값 반환
string은 유사배열처럼 관리되기 때문에 str[]을 해도 해당 인덱스의 문자를 반환해줍니다.
substring(start, end) - start문자 ~ end 미만 문자까지의 문자열 반환 (end 생략 시 끝까지 잘라옴)
console.log(str.substring(6, 9)); // 6번지부터 9번지 미만까지
console.log(str.substring(6)); // 6번지부터 끝까지
substr(start, lenght) - start로부터 lenght개까지의 문자열 반환
console.log(str.substr(6, 3)); // 6번지로부터 3개
console.log(str.substr(6)); // 6번지부터 끝까지
replace(old str, new str) - 첫번째 발생한 old 문자열을 new 문자열로 변경
console.log(str.replace('Apple', '사과'));
console.log(str.replace(/Apple/g, '사과'));
padStart(자리수, 채울문자) - 자리수만큼 채울 문자를 앞에 채워줌
padEnd(자리수, 채울문자) - 자리수만큼 채울 문자를 뒤에 채워줌
console.log("23".padStart(5, '0'));
console.log("23".padEnd(5, '0'));
@실습
- 사용자로부터 임의의 문자열을 받고(prompt), 영문자의 개수를 세서 콘솔출력
- 애플 apple 사과 → 5 출력
function test2() {
const input = prompt("문자열을 입력하세요.").toLowerCase();
let count = 0;
for(let i = 0; i < input.length; i++) {
// javascript 문자열 크기 비교는 사전등재순 비교
if(input[i] >= 'a' && input[i] <= 'z')
count++;
}
alert(`영문자를 ${count}개 입력하셨습니다.`);
}
Math API
HTML 코드
<button onclick="test3()">확인</button>
Javascript 코드
Math.ceil() - 올림처리
Math.floor() - 버림처리
Math.trunc() - 버림처리
Math.round() - 반올림처리
function test3() {
const num = 123.456;
// 올림
console.log(Math.ceil(num));
// 버림
console.log(Math.floor(num));
console.log(Math.trunc(num));
// 반올림
console.log(Math.round(num))
console.log(Math.round(num*10)/10);
}
소수점 자리에 대한 옵션 제공이 없기 때문에 자리수를 조정하고 싶다면 직접 조정해줘야 합니다.
Math.random()*경우의 수 + 시작 값 - 난수 추출
console.log(Math.floor(Math.random()*100+1)); // 1 ~ 100
0.0이상 1.0미만의 난수를 가져오기 때문에 버림 함수를 적용해야 합니다.
Date
- 날짜, 시각 정보를 관리하는 객체
- Date prototype 객체가 제공하는 메소드
HTML 코드
<button onclick="test4();">현재시각정보</button>
Javascript 코드
function test4() {
const now = new Date(); // 브라우저를 통해 시스템의 현재 시각정보를 가져옴
console.log(now);
}
.getFullYear() - 년도 가져오기
.getMonth() - 월 가져오기 (0~11)
.getDate() - 일 가져오기
console.log(now.getFullYear());
console.log(now.getMonth()+1); // 0 ~ 11
console.log(now.getDate());
getMonth()는 0~11으로 표현되기 때문에 +1처리를 해주었습니다.
getDay() - 요일 가져오기 (일(0) ~ 토(6))
console.log(now.getDay());
const days = ['일', '월', '화', '수', '목', '금', '토'];
console.log(days[now.getDay()]);
'수', '목' 과 같이 문자로 리턴되는 함수는 없기 때문에 위처럼 배열을 이용하여 요일의 이름을 출력할 수 있습니다.
getHours() - 시각 출력
getMinutes() - 분 출력
getSeconds() - 초 출력
console.log(now.getHours());
console.log(now.getMinutes());
console.log(now.getSeconds());
getTime() - 1970년 1월 1일부터 현재까지의 밀리초 출력
Date.now() - 1970년 1월 1일부터 현재까지의 밀리초 출력
console.log(now.getTime());
console.log(Date.now());
@실습 1-1
- yyyy/MM/dd hh:mm:ss 형식으로 현재 날짜/시각 출력하기
HTML 코드
<h2 id="clock">yyyy/MM/dd hh:mm:ss</h2>
Javascript 코드
function clockString() {
function f(n) {
return n < 10 ? '0' + n : n;
}
const now = new Date();
const yyyy = now.getFullYear();
const MM = f(now.getMonth()+1);
const dd = f(now.getDate());
const hh = f(now.getHours());
const mm = f(now.getMinutes());
const ss = f(now.getSeconds());
return `${yyyy}/${MM}/${dd} ${hh}:${mm}:${ss}`;
}
function displayClock() {
clock.innerHTML = clockString();
}
displayClock();
월, 일, 시, 분, 초가 한 자리 수가 아닌 두 자리수로 표현하기 위하여 10 이하라면 0을 추가하는 함수를 생성하였습니다.
@실습 2-1
실시간 시각 표시하기
function clockString() {
function f(n) {
return n < 10 ? '0' + n : n;
}
const now = new Date();
const yyyy = now.getFullYear();
const MM = f(now.getMonth()+1);
const dd = f(now.getDate());
const hh = f(now.getHours());
const mm = f(now.getMinutes());
const ss = f(now.getSeconds());
return `${yyyy}/${MM}/${dd} ${hh}:${mm}:${ss}`;
}
function displayClock() {
clock.innerHTML = clockString();
setTimeout(displayClock, 1000);
}
displayClock();
setTimeout(실행할 함수, 함수 실행 시간) 함수를 이용하여 1000밀리초마다 displayClock() 함수가 실행되도록 하였습니다.
1초마다 displayClock()함수가 실행되기 때문에 실시간으로 시각 정보를 확인할 수 있습니다.
특정 시각 정보를 가진 Date 객체
HTML 코드
<button onclick="test5();">특정시각 | 간격계산</button>
Javascript 코드
function test5() {
const d1 = new Date(2022, 2 - 1, 22);
const d2 = new Date(2022, 2 - 1, 22, 15, 30, 0);
const d3 = new Date('2022/02/22 15:30');
console.log(d1)
console.log(d2)
console.log(d3)
}
Date를 넘겨줄 때 월 정보는 (현재 월 - 1) 처리를 해줘야 하며, 년/월/일까지만 입력하면 00:00:00로 시각정보가 세팅 되며,
년/월/일 시:분:초를 넘겨주면 입력한 년/월/일 시:분:초 정보가 입력됩니다.
또한 string 형식의 날짜 포맷으로 넘겨주어도 pasing 처리하여 특정 시각 정보를 잘 출력해줍니다.
날짜 차이 계산
const now = new Date();
let diff = now - d3; // 밀리초 차이
console.log(diff);
위처럼 두 날짜의 밀리초 차이를 계산하여 리턴해줍니다.
getTime() 함수를 이용해서도 출력해줄 수 있습니다.
let diff2 = now.getTime() - d3.getTime(); // unix time(second);
console.log(diff2);
계산된 밀리초를 일자로 변환
diff = Math.floor(diff / 1000 / 60 / 60 / 24);
console.log(diff);
