[ JavaScript ] 전화 키패드 만들어 보기 (태그 제어 이해)
2024. 4. 30. 22:07ㆍ· FRONT-END/└ JS
환경: Visual Studio Code
- 과정과 함께 휴대전화 키패드 구현을 진행해보자
[조건]
- 0-9,*,#을 누르면 누른 대로 기록이 되어야 함
- 전화 버튼을 누르면 기록되어 보여지던 숫자들이 지워져야 함
[ 풀이 과정 ]
- (1) 버튼이 작동되도록 구현하기
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현-->
<script type="text/javascript">
function number1() {
var target = document.querySelector(".display");
//target.textContent = "1";
target.textContent += "1";
}
function number2() {
var target = document.querySelector(".display");
target.textContent += "2";
}
function number3() {
var target = document.querySelector(".display");
target.textContent += "3";
}
function number4() {
var target = document.querySelector(".display");
target.textContent += "4";
}
function number5() {
var target = document.querySelector(".display");
target.textContent += "5";
}
function number6() {
var target = document.querySelector(".display");
target.textContent += "6";
}
function number7() {
var target = document.querySelector(".display");
target.textContent += "7";
}
function number8() {
var target = document.querySelector(".display");
target.textContent += "8";
}
function number9() {
var target = document.querySelector(".display");
target.textContent += "9";
}
function numberStar() {
var target = document.querySelector(".display");
target.textContent += "*";
}
function number0() {
var target = document.querySelector(".display");
target.textContent += "0";
}
function numberSharp() {
var target = document.querySelector(".display");
target.textContent += "#";
}
function clearKeypad() {
var target = document.querySelector(".display");
target.textContent = "";
//target.textContent = '';//외따옴표도 가능
}
</script>
</head>
<body>
<div class="container w-500">
<div class="cell center">
<h1>휴대전화 키패드</h1>
</div>
<div class="cell">
<span class="display"></span>
</div>
<div class="cell">
<button onclick="number1();">1</button>
<button onclick="number2();">2</button>
<button onclick="number3();">3</button>
<button onclick="number4();">4</button>
<button onclick="number5();">5</button>
<button onclick="number6();">6</button>
<button onclick="number7();">7</button>
<button onclick="number8();">8</button>
<button onclick="number9();">9</button>
<button onclick="numberStar();">*</button>
<button onclick="number0();">0</button>
<button onclick="numberSharp();">#</button>
<button onclick="clearKeypad();">C</button>
</div>
</div>
</body>
</html>(+) 각각의 숫자들 마다 함수를 부여하여 기록하도록 설정하는 방식이다.
(+) 단점 : 같은 식을 가지고 있는 함수가 많아짐.
- (2) 함수의 재사용성을 높이기
<script type="text/javascript">
//자바스크립트 함수에서 매개변수에 자료형을 쓸 필요가 없다(구분안하니까)
function touchNumber(value) {
var target = document.querySelector(".display");
target.textContent += value;
}
function clearKeypad() {
var target = document.querySelector(".display");
target.textContent = "";
//target.textContent = '';
}
</script>(+) 함수에 매개변수를 받아 그 값을 적어주는 형태로 구현하였다.
(+) 텍스트를 지우는 경우, 자바스크립트는 온따옴표(""), 외따옴표('') 둘 다 가능하다.
[ 전체 코드 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript 예제</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=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<!-- 내가 구현한 스타일 -->
<link rel="stylesheet" type="text/css" href="../css/commons.css">
<link rel="stylesheet" type="text/css" href="../css/test.css">
<!-- font awesome 아이콘 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
</style>
<!-- javascript를 의도적으로 head 자리에 배치해서 가장 먼저 실행되도록 구현-->
<script type="text/javascript">
//자바스크립트 함수에서 매개변수에 자료형을 쓸 필요가 없다(구분안하니까)
function touchNumber(value) {
var target = document.querySelector(".display");
target.textContent += value;
}
function clearKeypad() {
var target = document.querySelector(".display");
target.textContent = "";
//target.textContent = '';
}
</script>
</head>
<body>
<div class="container w-300">
<div class="cell center">
<h1>휴대전화 키패드</h1>
</div>
<div class="cell">
<h2 class="display ellipsis"></h2>
</div>
<div class="cell flex-cell auto-width">
<button class="btn" onclick="touchNumber('1');">1</button>
<button class="btn" onclick="touchNumber('2');">2</button>
<button class="btn" onclick="touchNumber('3');">3</button>
</div>
<div class="cell flex-cell auto-width">
<button class="btn" onclick="touchNumber('4');">4</button>
<button class="btn" onclick="touchNumber('5');">5</button>
<button class="btn" onclick="touchNumber('6');">6</button>
</div>
<div class="cell flex-cell auto-width">
<button class="btn" onclick="touchNumber('7');">7</button>
<button class="btn" onclick="touchNumber('8');">8</button>
<button class="btn" onclick="touchNumber('9');">9</button>
</div>
<div class="cell flex-cell auto-width">
<button class="btn" onclick="touchNumber('*');">*</button>
<button class="btn" onclick="touchNumber('0');">0</button>
<button class="btn" onclick="touchNumber('#');">#</button>
</div>
<div class="cell center">
<button class="w-33" onclick="clearKeypad();">C</button>
</div>
</div>
</body>
</html>
개인 공부 기록용입니다:)
728x90
'· FRONT-END > └ JS' 카테고리의 다른 글
| [ JavaScript ] 입력 창의 정보를 읽어 출력하기 (0) | 2024.05.02 |
|---|---|
| [ JavaScript ] 두 영역의 내용 교체하기 (0) | 2024.05.01 |
| [ JavaScript ] 태그 제어 (0) | 2024.04.29 |
| [JavaScript] 함수 호출 기능 (0) | 2024.04.27 |
| [ JavaScript ] 조건문과 반복문 (0) | 2024.04.26 |