JavaScript에서 단어 카운터를 만드는 방법
단어 카운터는 텍스트의 단어 수를 세는 데 사용할 수 있는 도구입니다. 문서 길이를 확인하거나 단어 수 제한을 충족하는지 추적하는 데 사용할 수 있습니다.
HTML, CSS 및 JavaScript를 사용하여 자신만의 단어 카운터를 만들 수 있습니다. 웹 브라우저에서 단어 카운터를 열고 입력 필드에 텍스트를 입력하고 사용 중인 단어 수를 확인합니다.
이 프로젝트는 또한 JavaScript 지식을 연습하고 강화하는 데 도움이 될 수 있습니다.
단어 카운터용 UI를 만드는 방법
단어 카운터에 대한 UI를 만들려면 기본 HTML 페이지에 텍스트 영역 입력을 추가합니다. 여기에서 단어 수를 세고 싶은 문장이나 단락을 입력할 수 있습니다.
- “index.html”이라는 새 HTML 파일을 만듭니다.
- 파일 내부에 HTML 웹 페이지의 기본 구조를 추가합니다.
<!doctype html>
<html lang="en-US">
<head>
<title> Word Counter </title>
</head>
<body>
<div class="container">
<h1> Count Words </h1>
</div>
</body>
</html> - 컨테이너 div 내부와 제목 아래에 텍스트 영역을 추가합니다.
<textarea id="input" rows="10"></textarea> - 텍스트 영역 아래에 버튼을 추가합니다.
<button id="count-button">Count Words</button> - 사용자가 위의 버튼을 클릭할 때 단어 수를 표시하는 범위 태그를 추가합니다.
<div>
Words: <span id="word-count-result">0</span>
</div> - HTML 파일과 같은 폴더에 “styles.css”라는 새 파일을 만듭니다.
- CSS 파일을 일부 CSS로 채워 웹페이지 스타일을 지정합니다.
body {
margin: 0;
padding: 0;
background-color: #f0fcfc;
}* {
font-family: "Arial", sans-serif;
}.container {
padding: 100px 25%;
display: flex;
flex-direction: column;
line-height: 2rem;
font-size: 1.2rem;
color: #202C39;
}textarea {
padding: 20px;
font-size: 1rem;
margin-bottom: 40px;
}button {
padding: 10px;
margin-bottom: 40px;
} - HTML 헤드 태그 안에 링크 태그를 포함하여 CSS 파일을 HTML 파일에 연결합니다.
<link rel="stylesheet" href="styles.css"> - 웹 페이지의 UI를 테스트하려면 “index.html” 파일을 클릭하여 웹 브라우저에서 엽니다.
텍스트 영역 내부의 각 단어를 계산하는 방법
사용자가 텍스트 영역에 문장을 입력하면 웹 페이지는 단어 계산 버튼 을 클릭할 때 각 단어를 계산해야 합니다.
새 JavaScript 파일 내에 이 기능을 추가할 수 있습니다. 필요한 경우 JavaScript 지식을 연마해야 하는 경우 다른 초보자 JavaScript 프로젝트 아이디어를 수정하십시오.
- “index.html” 및 “styles.css” 파일과 같은 폴더에 “script.js”라는 새 파일을 추가합니다.
- body 태그 하단에 script 태그를 추가하여 HTML 파일을 JavaScript 파일에 연결합니다.
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - script.js 내에서 getElementById() 함수를 사용하여 textarea, button 및 span HTML 요소를 검색합니다. 이러한 요소를 세 개의 별도 변수에 저장합니다.
let input = document.getElementById("input");
let button = document.getElementById("count-button");
let wordCountResult = document.getElementById("word-count-result"); - 클릭 이벤트 리스너를 추가합니다. 이 함수는 사용자가 Count Words 버튼 을 클릭할 때 실행됩니다 .
button.addEventListener("click", function() {
}); - 클릭 이벤트 리스너 내에서 사용자가 텍스트 영역에 입력한 값을 가져옵니다. textarea HTML 요소를 저장하는 입력 변수에서 이 값을 찾을 수 있습니다.
let str = input.value; - 문자열을 별도의 단어로 분리하려면 split() 함수를 사용하십시오. 이것은 문자열에 공백이 있을 때마다 발생합니다. 이것은 각 단어를 새 배열의 요소로 저장합니다. 예를 들어 입력한 문장이 “I love dogs”인 경우 결과 배열은 [“I”, “love”, “dogs”]가 됩니다.
let wordsList = str.split(""); - 배열의 길이를 사용하여 단어 수를 찾습니다.
let count = wordsList.length; - 사용자에게 결과를 다시 표시하려면 범위 HTML 요소의 콘텐츠를 변경하여 새 값을 표시합니다.
wordCountResult.innerHTML = count;
예제 단어 카운터를 사용하는 방법
웹 브라우저를 사용하여 단어 카운터 웹 페이지를 테스트할 수 있습니다.
- 웹 브라우저에서 index.html을 엽니다.
- 텍스트 영역에 문장이나 단락을 입력합니다.
- 단어 개수를 업데이트하려면 단어 개수 버튼을 클릭 하세요 . Google Docs, Microsoft Word 또는 단어 수가 있는 다른 편집기에서 단어 수를 확인한 것처럼 단어 수를 표시합니다.
JavaScript를 사용하여 간단한 애플리케이션 만들기
이제 JavaScript를 사용하여 단어를 세고 HTML 페이지의 요소와 상호 작용하는 방법에 대한 기본적인 이해를 하셨기를 바랍니다. 프로그래밍에 대한 이해를 높이려면 JavaScript로 작고 유용한 프로젝트를 계속 만드십시오.
답글 남기기