Written by java-style
on 2021-10-20

자바스크립트로 입력값 모음 개수 카운터 프로그램 만들기

728x90

메인 화면 결과 화면

영문과 숫자만 입력이 가능한 칸을 만든다.

확인해보기 를 누르면 입력값 중 모음(a, e, i, o, u)의 개수를 소문자, 대문자 상관없이 구한다.

를 누르면 입력값 중 모음(a, e, i, o, u)의 개수를 소문자, 대문자 상관없이 구한다. 구해진 모음의 개수를 테이블 형식으로 출력한다.

1단계 : HTML 형식으로 표현

메인 화면의 틀을 html로 잡아준다.

문자 카운터(모음)

사용한 태그 태그 태그의 type="submit" 속성을 이용하기 위해 태그를 사용하였다. 태그 태그의 id="alpha" 속성을 이용하기 위해 for="alpha" 속성을 표시한 태그를 사용하였다. 태그 영문과 숫자의 입력을 문자열로 받기 위해 태그의 type="text" 가 아닌 태그를 사용하였다. 태그의 경우 긴 문장을 적을 경우 문자열이 잘리는 현상을 방지하기 위함이다. 태그

에서 작성한 부분을 javascript의 countVowel() 함수와 연결하기 위해 type="submit" 속성을 이용하여 태그를 작성하였다. 확인해보기 를 클릭하면 함수 countVowel() 로 연결되기 위해 onclick 속성을 사용하였다.

문자 카운터(모음) 속성 중 onKeyup 을 이용하여 영문과 숫자만 입력할 수 있도록 해두었다. 사용자가 에 문자열을 입력하여 확인해보기 를 누르면 문자열 중 모음의 개수를 표시해준다.

2단계 : 자바스크립트로 countVowel() 함수 구현

태그의 onclick="countVowel()" 속성으로 클릭시 호출된다.

728x90

사용한 변수 alpha : 에서 id="alpha" 로 입력받은 값을 alpha 변수에 담았다. splitedAlpha : alpha 변수를 한 문자씩 나눈 값을 splitedAlpha 변수에 담았다. alphaObj : 모음 문자와 개수를 각각 name, number로 표현해서 묶어주기 위해 alphaObj 객체를 사용하였다. alphaCount : 모음 문자와의 비교를 위해 이들을 배열로 담아 표현해두었다.

모음 개수 출력 테이블 형태로 표현하기 위해 우선 border="1" 로 하여 테이블을 선언하였다. 모음의 개수만 확인하면 되기 때문에 alphaCount 의 length 만큼 반복문을 도는 동안 splitedAlpha 문자열을 반복문을 돌며 확인하는 형태로 진행하였다. 이 때, 소문자와 대문자의 구별이 없게 진행되도록 하기 위해서 toLowerCase() 함수를 통해 모두 소문자로 바꾼 후 확인하도록 하였다. 각 모음마다 확인이 끝나면 모음 문자를 name 에, 개수를 number 에 넣은 객체 alphaObj 를 만들었고 이를 각각 태그에 넣어주었다.

전체 코드

Document 문자 카운터(모음) function countVowel() { var alpha = document.getElementById("alpha").value; var splitedAlpha = alpha.split(''); var alphaObj = {}; var alphaCount = ['a', 'e', 'i', 'o', 'u']; // 모음 개수 출력 document.write('

'); 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(''); } document.write('

' + alphaObj.name + '

' + alphaObj.number + '개

'); }

728x90

from http://ele-code.tistory.com/35 by ccl(A) rewrite - 2021-10-20 10:02:24

Top