JavaScript
[모던 JavaScript] 4.6 ~ 5.3 과제 정리!
보라해바라기
2022. 12. 1. 22:03
SMALL
- 4.6 옵셔널 체이닝 '?.'
- 4.7 심볼형
- 4.8 객체를 원시형으로 변환하기
- 5.1 원시값의 메서드
- 5.2 숫자형
- 5.3 문자열
5.1 문자열에 프로퍼티를 추가할 수 있을까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자열에 프로퍼티를 추가할 수 있을까요?</title>
</head>
<body>
<script>
let str = "Hello";
str.test = 5;
alert(str.test);
// **엄격모드: undefined
// 엄격모드에선 래퍼객체 수정 시, error 발생
// **비엄격모드: An error
// 비엄격모드에선 래퍼객체 수정 시, error 발생 X
// 래퍼객체에 프로퍼티 test 추가
// but 래퍼 객체는 바로 삭제
// -> 마지막 줄 실행 시, 프로퍼티 test 찾을 수 X
</script>
</body>
</html>5.2(1) 수를 입력받아 덧셈하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>수를 입력받아 덧셈하기</title>
</head>
<body>
<script>
let a = +prompt("숫자 a 입력: ", 0);
let b = +prompt("숫자 b 입력: ", 0);
alert("두 수의 합은 " + (a+b) +"입니다.")
</script>
</body>
</html>5.2(2) 6.35.toFixed(1) == 6.3인 이유는 무엇일까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6.35.toFixed(1) == 6.3인 이유는 무엇일까요?</title>
</head>
<body>
<script>
alert( 1.35.toFixed(1) ); // 1.4
alert( 6.35.toFixed(1) ); // 6.3
// 6.3인 이유? => *정밀도 손실* 발생
// 6.35.toFixed(20) => 6.34999999999999964473
// 3.5보다 작음 -> 버림됨 -> 6.3
// ** 6.4로 수정 방법
// (6.35 * 10).toFixed(20) -> 63.50000000000000000000
// Math.round( (6.35*10) / 10 ) -> Math.round(6.35) -> 6.4
</script>
</body>
</html>5.2(3) 숫자를 입력할 때까지 반복하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자를 입력할 때까지 반복하기</title>
</head>
<body>
<script>
// ****
function readNumber(){
let num;
do{
num = prompt("숫자 입력", 0);
} while (!isFinite(num));
//*(핵심코드)*
if(num === null || num ==="") return null;
//*
return +num;
}
alert(`Read: ${readNumber()}`)
// ****
</script>
</body>
</html>5.2(4) 간헐적인 무한 루프
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간헐적인 무한 루프</title>
</head>
<body>
<script>
let i = 0;
while (i != 10) {
i += 0.2;
}
// 무한한 루프인 이유?
// i의 값이 계속 더해지며 "정밀도 손실 발생"
// 완벽하게 10.00000이 되는 경우가 발생 X
// 무한으로 돈다.
</script>
</body>
</html>5.2(5) 최소에서 최대까지 임의의 숫자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최소에서 최대까지 임의의 숫자</title>
</head>
<body>
<script>
function random(min, max) {
return min + Math.random() * (max-min);
}
alert( random(1, 5) );
</script>
</body>
</html>5.2(6) 최소에서 최대까지 임의의 정수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최소에서 최대까지 임의의 정수</title>
</head>
<body>
<script>
function random(min, max) {
let rand = min + Math.random(max + 1 - min);
return Math.floor(rand)
}
alert( random(1, 5) );
</script>
</body>
</html>5.3(1) 첫 글자를 대문자로 변경하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 글자를 대문자로 변경하기</title>
</head>
<body>
<script>
function ucFirst(str) {
if(!str) return str; //*
return str[0].toUpperCase() + str.slice(1);
}
alert( ucFirst("john") );
</script>
</body>
</html>5.3(2) 스팸 문자열 걸러내기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스팸 문자열 걸러내기</title>
</head>
<body>
<script>
function checkSpam(str) {
str = str.toLowerCase();
if(str.includes("viagra")||str.includes("xxx")){
return true
}
return false
}
/* function checkSpam(str) {
let lowerStr = str.toLowerCase();
return lowerStr.includes('viagra') || lowerStr.includes('xxx');
} */
alert(checkSpam('buy ViAgRA now'));
alert(checkSpam('free xxxxx'));
alert(checkSpam("innocent rabbit"));
</script>
</body>
</html>5.3(3) 문자열 줄이기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문자열 줄이기</title>
</head>
<body>
<script>
function truncate(str, maxlength) {
strLength = str.length;
let result = (strLength > maxlength-1)? str.slice(0, maxlength) + "...": str;
return result
}
alert(truncate("What I'd like to tell on this topic is:", 20)); // "What I'd like to te…"
alert(truncate("Hi everyone!", 20)); // "Hi everyone!"
</script>
</body>
</html>5.3(4) 숫자만 추출하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자만 추출하기</title>
</head>
<body>
<script>
function extractCurrencyValue(str){
return +str.slice(1);
}
alert( extractCurrencyValue('$120') === 120 )
</script>
</body>
</html>728x90