반응형
슬기형의 자바스크립트 기초강의 - 문자열 다루기 04-1
이전 강의
[Web Front 개발공부/HTML과 JAVASCRIPT] - 슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03
슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03
슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03 이전 강좌 2022.12.25 - [Web Front 개발공부/HTML과 JAVASCRIPT] - 슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 슬기형의 자바스크립트
ecolumbus.tistory.com
| 문자열 길이를 확인 | length |
| 문자열을 검색 | indexOf, includes, startWith, endWith,search |
| 문자열을 추출 | charAt, slice, substring |
| 문자열을 변환 | replace, toLowerCase, toUpperCase |
| 문자열을 나누기 | split |
| 문자열을 결합 | + |
문자열의 길이를 확인한다.
'문자열'.length
Array.from('문자열').length소스
<!DOCTYPE html>
<html xmlns:v_on="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="UTF-8">
<title>슬기형과 함께하는 JAVASCRIPT</title>
<link rel="stylesheet" href="css/style.css">
<script>
window.onload = function () {
let textarea = document.querySelector('.textarea');
let string_num = document.querySelector('.string_num');
textarea.addEventListener('keyup', onkeyup);
function onkeyup() {
const inputText = textarea.value;
string_num.innerText = inputText.length;
}
}
</script>
</head>
<body>
<h1>슬기형의 자바스크립트 기초강의 - 문자열 다루기 04</h1>
<p>1 문자열 길이를 확인하고 싶을때</p>
<textarea class="textarea"></textarea>
<p>현재 <span class="string_num">0</span>글자를 입력했습니다.</p>
</body>
</html>실행
설명
textarea에 입력된 문자의 숫자를 실시간으로 표시한다.
document.querySelecrot는 html 태그의 id, class 속성을 읽을 수 있는 기능을 한다.
textarea.value는 textarea에 입력된 값을 알아내는 속성이며, innerText는 string_num 클래스를 가진 span 태그에 입력된 문자의 길이를 표시하는 기능을 한다. 위에서 설명한 length 함수를 이용해서 입력된 글자를 표시.
다음 포스팅에서는 문자열의 추출에 대해 알아본다.
반응형
'Web Front 개발공부 > HTML과 JAVASCRIPT' 카테고리의 다른 글
| 슬기형의 자바스크립트 기초강의 - 모달창 만들어보기 06 (0) | 2023.01.07 |
|---|---|
| 슬기형의 자바스크립트 기초강의 - JSON 문자열 객체로 변환하기 05 (0) | 2023.01.07 |
| 슬기형의 자바스크립트 기초강의 - 확인 및 취소 다이얼로그 03 (0) | 2022.12.26 |
| 슬기형의 자바스크립트 기초강의 - HTML 변경하기 02 (0) | 2022.12.25 |
| 슬기형의 자바스크립트 기초강의 - 알림박스, 다이얼로그 박스 표시 01 (0) | 2022.12.24 |
댓글