실습(DOM 정리)
- 아래 이미지처럼 출력되는 프로그램
1. css
* {
margin: 30px 0;
font-family: 'Black Han Sans';
}
fieldset {
border-style: dashed none none none;
text-align: center;
border-top-color: #ab47bc;
border-top-width: 10px;
width: 50%;
margin: 10px auto;
font-size: 3em;
}
p {
font-family: 'Noto Sans KR';
font-size: 2rem;
margin-bottom: 100px;
}
input[type='text'] {
width: 50%;
border-style: none none solid none;
border-bottom-width: 5px;
border-color: black;
margin-top: 100px;
outline: none;
font-size: 0.5em;
text-align: center;
}
button {
background-color: #ab47bc;
color: white;
width: 15%;
font-size: 1em;
}
@media (max-width: 1300px) {
button {
font-size: 0.5em;
}
}
div#round {
margin: 0 0 0 25%;
border: 5px solid #ab47bc;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background-color: yellow;
font-family: 'Noto Sans KR';
font-size: 2em;
}
2. html
<!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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="task02.css">
</head>
<body>
<div id="round">1</div>
<fieldset>
<legend>숫자를 한글로 변경</legend>
<p id="result">결과 표시 부분</p>
<input type="text" name="input">
<br>
<button id="change" onclick="change()">변경</button>
</fieldset>
</body>
<script src="task02.js"></script>
</html>
3. js
- 참고
// ["공", "일", "이",... , "구"] 배열이 필요하다
// "공일이삼사오육칠팔구"
// 입력받은 정수의 자리수 분리
// 각 자리수 정수가 위 배열의 인덱스번호로 활용
- 코드
// 변경 버튼 클릭 시 준비한 getResult() 실행
document.getElementById("change").onclick = getResult;
// 외부에서 사용자가 입력한 숫자를 전달받는다.
function changeToHangle(number){
const pTag = document.getElementById("result");
const div = document.getElementById("round");
let hangle = "공일이삼사오육칠팔구";
let result = "";
// 1보다 작은 실수가 들어왔는 지 체크
let check = false;
// 숫자가 아닌 다른 문자를 작성했을 때
if(isNaN(number)){
pTag.innerHTML = "숫자만 입력해주세요.";
div.innerHTML = "4";
return;
}
// 실수 중 1보다 작은 값이 들어왔다면,
if(number < 1){
// 영을 먼저 붙여준다.
result += "영";
check = true;
}
// 실수든 정수든 우선 3으로 표기한다.
div.innerHTML = "3";
// 사용자가 입력한 숫자의 자리수만큼 반복한다.
for(let i in number){
if(check){ // 위에서 영을 붙였다면, 공이 붙지 않도록 continue를 사용한다.
check = false;
continue;
}
// 각 자리수를 처음부터 순서대로 접근하여 (number.charAt(i)),
// hangle 문자열의 인덱스로 사용한다.
// 해당 인덱스에는 한글이 있기 때문에 data에 차례로 누적 연결한다.
let data = hangle[number.charAt(i)];
if(!data){ // 마침표(점)가 있을 경우 undefined이기 때문에 false이다.
result += "점"; // undefined를 "점"으로 변경한다.
div.innerHTML = "2";
continue;
}
result += data;
}
pTag.innerHTML = result;
}
function getResult(){
const input = document.querySelector("input[name='input']").value;
changeToHangle(input);
}
'웹 개발 > JavaScript' 카테고리의 다른 글
| [Web_JavaScript] 16 (0) | 2022.05.12 |
|---|---|
| [Web_JavaScript] 15 (0) | 2022.05.11 |
| [Web_JavaScript] 13 (0) | 2022.05.09 |
| [Web_JavaScript] 12 (0) | 2022.05.08 |
| [Web_JavaScript] 11 (0) | 2022.05.07 |
