728x90
- a ~ z , A ~ Z , 0 ~ 9 까지의 문자를 카운트하는 프로그램을 만든다.
- 영문과 숫자의 입력만 가능하도록 입력받고 각각의 문자의 개수를 카운트한다.
- a ~ z , A ~ Z , 0 ~ 9 를 각각의 테이블로 만들어 출력한다.
1단계 : html 형식으로 표현
- 메인 화면을 html 태그를 이용하여 틀을 잡아준다.
<form>
<label for="alpha">문자 카운터</label><br/>
<textarea id="alpha" placeholder="영어와 숫자만 입력가능합니다." rows="4" cols="50" onKeyup="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g,'');"></textarea></br>
<input type="submit" value="확인해보기" onclick="count()"/>
</form>- 사용한 태그
- <form> 태그
- <input> 태그의 type을 submit 으로 설정하기 위해 <form> 태그를 적어주었다.
- <label> 태그
- <textarea> 태그를 문자 카운터라는 문자를 눌러도 사용할 수 있도록 하기 위해 for속성의 값을 <textarea> 태그의 id값인 alpha로 주었다.
- <textarea> 태그
- <input> 태그를 이용해서 문자의 입력을 받을 수도 있지만 이 경우 많은 문자를 작성하게 되면 모든 문자를 보기 힘들어진다.
<input type="text"/>의 경우 문자가 짤린다. - 때문에 여러 문자를 입력할 수 있는 <textarea> 태그를 활용하였다.
- <input> 태그
- type="submit"의 버튼을 생성하기 위해 <input> 태그를 활용하였다.
- value="확인해보기"로 주어 확인해보기 버튼을 클릭하면 <form> 을 전송하도록 하였다.
- 전송 위치는 onclick="count()"로 표현하여 count() 함수를 호출하게 하였다.
- <form> 태그
- 문자 카운터
- 영어와 숫자만 입력가능하도록 설정할 예정이기 때문에 이를 표시해주기 위해서 <textarea> 태그의 속성 중 placeholder 속성을 이용하였다.
- 기본적으로 화면에 표시되는 textarea 입력창의 크기를 조절하기 위해 rows="4" cols="50"의 속성을 추가하였다.
- a ~ z , A ~ Z , 0 ~ 9 까지의 문자만을 입력할 수 있도록 onKeyup 속성을 이용하여 정규표현식으로 이를 설정하였다.
2단계 : javascript로 count() 함수 구현
- 위의 html 코드의 <input onclick="count()"> 를 통해 자바스크립트의 count() 함수를 호출하도록 하였다.
function count() {
var alpha = document.getElementById("alpha").value;
var splitedAlpha = alpha.split('');
var alphaObj = {};
// a ~ z 테이블
document.write('<table border="1">');
for (i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
var number_lowerCase = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_lowerCase++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_lowerCase};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
// A ~ Z 테이블
document.write('<table border = "1">');
for (i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
var number_upperCase = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_upperCase++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_upperCase};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
// 0 ~ 9 테이블
document.write('<table border = "1">');
for (i = '0'.charCodeAt(0); i <= '9'.charCodeAt(0); i++) {
var number_number = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_number++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_number};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
}728x90
- 사용한 변수
- id가 alpha인 <input> 태그의 값을 변수 alpha에 담았다.
- 이 변수 alpha의 값을 한 문자 단위로 나누어 splitedAlpha 변수에 담기 위해 split() 함수를 사용하였다.
- 각 문자와 문자에 대한 수를 저장하기 위해 객체를 사용하기로 하고 이를 alphaObj 로 선언하였다.
- a ~ z 테이블
- a 부터 z 까지의 수를 세기 위해 문자 자체로의 코드가 필요했다.
- 이를 위해 charCodeAt() 함수를 이용하여 문자에 대한 코드를 사용하였다.
- a 부터 z 까지 for 반복문을 돌며 확인하도록 하였다.
- alphaObj 라는 객체에 name 값으로 문자를, number 값으로 개수를 넣기 위해 number_lowerCase를 선언해두었다.
- 입력한 문자열을 문자단위로 나누어둔 spllitedAlpha의 i 번째 값이 a ~ z 까지의 문자와 맞는지 확인하기 위해 String.fromCharCode() 함수를 사용하였다.
- 문자가 같다면 number_lowerCase를 1 증가시키도록 하였다.
- 문자의 이름과 수를 alphaObj에 저장하고 이를 테이블 형태로 출력해주었다.
- a 부터 z 까지의 수를 세기 위해 문자 자체로의 코드가 필요했다.
- A ~ Z 테이블과 0 ~ 9 테이블 역시 위의 방법과 동일하게 작업하였다.
전체 코드
<!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>Document</title>
</head>
<body>
<form>
<input type="text">
<label for="alpha">문자 카운터</label><br>
<textarea id="alpha" placeholder="영어와 숫자만 입력가능합니다." rows="4" cols = "50" onKeyup = "this.value = this.value.replace(/[^a-zA-Z0-9\s]/g,'');"></textarea><br>
<input type="submit" value="확인해보기" onclick="count()">
</form>
<script>
function count() {
var alpha = document.getElementById("alpha").value;
var splitedAlpha = alpha.split('');
var alphaObj = {};
// a ~ z 테이블
document.write('<table border="1">');
for (i = 'a'.charCodeAt(0); i <= 'z'.charCodeAt(0); i++) {
var number_lowerCase = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_lowerCase++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_lowerCase};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
// A ~ Z 테이블
document.write('<table border = "1">');
for (i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
var number_upperCase = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_upperCase++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_upperCase};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
// 0 ~ 9 테이블
document.write('<table border = "1">');
for (i = '0'.charCodeAt(0); i <= '9'.charCodeAt(0); i++) {
var number_number = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (splitedAlpha[j] == String.fromCharCode(i)) {
number_number++;
}
}
alphaObj = {name: String.fromCharCode(i), number: number_number};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
}
</script>
</body>
</html>
728x90
'Project' 카테고리의 다른 글
| 자바스크립트로 빈도 top10 문자 카운터 만들기 (0) | 2021.10.21 |
|---|---|
| 자바스크립트로 입력값 모음 개수 카운터 프로그램 만들기 (0) | 2021.10.20 |
| 자바스크립트로 구구단 출력 프로그램 만들기 (0) | 2021.10.18 |
| 구구단 출력 프로젝트 04 - 뷰(View) 출력방식 수정 (0) | 2021.10.11 |
| 구구단 출력 프로젝트 03 - 컨트롤러(Controller) 만들기 (0) | 2021.10.10 |
