728x90
- 영문과 숫자만 입력이 가능한 칸을 만든다.
- 확인해보기를 누르면 입력값 중 모음(a, e, i, o, u)의 개수를 소문자, 대문자 상관없이 구한다.
- 구해진 모음의 개수를 테이블 형식으로 출력한다.
1단계 : HTML 형식으로 표현
- 메인 화면의 틀을 html로 잡아준다.
<form>
<label for="alpha">문자 카운터(모음)</label><br/>
<textarea id="alpha" placeholder="영어와 숫자만 입력가능합니다" roww="4" cols="50" onKeyup="this.value = this.value.replace(/[^a-zA-Z0-9\s]/g,'');"></textarea></br>
<input type="submit" value="확인해보기" onclick="countVowel()"/>
</form>- 사용한 태그
- <form> 태그
- <input> 태그의 type="submit" 속성을 이용하기 위해 <form> 태그를 사용하였다.
- <label> 태그
- <textarea> 태그의 id="alpha" 속성을 이용하기 위해 for="alpha" 속성을 표시한 <label> 태그를 사용하였다.
- <textarea> 태그
- 영문과 숫자의 입력을 문자열로 받기 위해 <input> 태그의 type="text"가 아닌 <textarea> 태그를 사용하였다. <input> 태그의 경우 긴 문장을 적을 경우 문자열이 잘리는 현상을 방지하기 위함이다.
- <input> 태그
- <form> 에서 작성한 부분을 javascript의 countVowel() 함수와 연결하기 위해 type="submit" 속성을 이용하여 <input> 태그를 작성하였다.
- 확인해보기를 클릭하면 함수 countVowel()로 연결되기 위해 onclick속성을 사용하였다.
- <form> 태그
- 문자 카운터(모음)
- <textarea> 속성 중 onKeyup을 이용하여 영문과 숫자만 입력할 수 있도록 해두었다.
- 사용자가 <textarea>에 문자열을 입력하여 확인해보기를 누르면 문자열 중 모음의 개수를 표시해준다.
2단계 : 자바스크립트로 countVowel() 함수 구현
- <input> 태그의 onclick="countVowel()" 속성으로 클릭시 호출된다.
function countVowel() {
var alpha = document.getElementById("alpha").value;
var splitedAlpha = alpha.split('');
var alphaObj = {};
var alphaCount = ['a', 'e', 'i', 'o', 'u'];
// 모음 개수 출력
document.write('<table border = "1">');
for (i = 0; i < alphaCount.length; i++) {
var number_vowels = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (alphaCount[i] == splitedAlpha[j].toLowerCase()) {
number_vowels++;
}
}
alphaObj = {name: alphaCount[i], number: number_vowels};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
}728x90
- 사용한 변수
- alpha : <textarea>에서 id="alpha"로 입력받은 값을 alpha 변수에 담았다.
- splitedAlpha : alpha 변수를 한 문자씩 나눈 값을 splitedAlpha 변수에 담았다.
- alphaObj : 모음 문자와 개수를 각각 name, number로 표현해서 묶어주기 위해 alphaObj 객체를 사용하였다.
- alphaCount : 모음 문자와의 비교를 위해 이들을 배열로 담아 표현해두었다.
- 모음 개수 출력
- 테이블 형태로 표현하기 위해 우선 border="1"로 하여 테이블을 선언하였다.
- 모음의 개수만 확인하면 되기 때문에 alphaCount의 length 만큼 반복문을 도는 동안 splitedAlpha 문자열을 반복문을 돌며 확인하는 형태로 진행하였다.
- 이 때, 소문자와 대문자의 구별이 없게 진행되도록 하기 위해서 toLowerCase() 함수를 통해 모두 소문자로 바꾼 후 확인하도록 하였다.
- 각 모음마다 확인이 끝나면 모음 문자를 name에, 개수를 number에 넣은 객체 alphaObj를 만들었고 이를 각각 <td></td> 태그에 넣어주었다.
전체 코드
<!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>
<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="countVowel()">
</form>
<script>
function countVowel() {
var alpha = document.getElementById("alpha").value;
var splitedAlpha = alpha.split('');
var alphaObj = {};
var alphaCount = ['a', 'e', 'i', 'o', 'u'];
// 모음 개수 출력
document.write('<table border = "1">');
for (i = 0; i < alphaCount.length; i++) {
var number_vowels = 0;
for (j = 0; j < splitedAlpha.length; j++) {
if (alphaCount[i] == splitedAlpha[j].toLowerCase()) {
number_vowels++;
}
}
alphaObj = {name: alphaCount[i], number: number_vowels};
document.write('<tr><td>' + alphaObj.name + '</td><td>' + alphaObj.number + '개 </td></tr>');
}
document.write('</table>');
}
</script>
</body>
</html>728x90
'Project' 카테고리의 다른 글
| 자바스크립트 MVC 형태로 구구단 출력 프로그램 만들기 (0) | 2021.10.22 |
|---|---|
| 자바스크립트로 빈도 top10 문자 카운터 만들기 (0) | 2021.10.21 |
| 자바스크립트로 문자의 개수를 카운트해주는 프로그램 만들기 (0) | 2021.10.19 |
| 자바스크립트로 구구단 출력 프로그램 만들기 (0) | 2021.10.18 |
| 구구단 출력 프로젝트 04 - 뷰(View) 출력방식 수정 (0) | 2021.10.11 |
