-문자열을 다른 문자열로 바꾸고 싶을 때
-문자열 내 불필요한 줄바꿈 코드를 <br> 로 바꾸고 싶을 때
-빈칸을 제거하고 싶을 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<span>전화번호를 입력해주세요.</span>
<input id="phoneNumberText" placeholder="전화번호" type="tel">
<p>
<small>* 실제로 데이터는 전송되지 않음</small>
</p>
<button id="submitButton" type="submit">데이터전송</button>
</body>
<script src="../js/num34.js"></script>
</html>Document 전화번호를 입력해주세요.
* 실제로 데이터는 전송되지 않음
데이터전송// #submitButton 클릭 시의 처리 작업 설정
document.querySelector('#submitButton').addEventListener('click',
(event) => {
// 전화번호 가져오기
const phoneNumber = document.querySelector('#phoneNumberText').value;
// 전화번호에 하이픈(-)이 삽입된 경우 '' (공백)으로 전환
const trimmedPhoneNumber = phoneNumber.replace(/-/g, '');
//하이픈 없앤 전화번호 값 출력.
alert(`전화번호는 ${trimmedPhoneNumber} 입니다.`);
// 버튼의 기본 작동을 해제
event.preventDefault();
});-submiButton에 'click' 이라는 이벤트가 실행 되면, 아래의 함수가 실행된다. (버튼을 누르면 아래 함수 실행)
-#phoneNumberText에 있는 값을 phoneNumber 에 저장
-trimmedPhoneNumber 에는 하이픈을 공백으로 전환한 값이 들어감.
-/-/ : 정규식(g)를 사용하기 위해 //로 감쌌다.
- g = 문자열 전체를 확인한다.
-문자열 전체에서 - 이 있는지 검토하고, 있으면 '' 로 바꿔준다.
-$ : 제이쿼리 객체라는 뜻
- 알림창으로
${trimmedPhoneNumber}을 띄운다.
-event.preventDefault () : 버튼 타입이 submit. submit을 누르면 자동으로 input에 들어간 데이터를 보내주려고 하기 때문에 이 기능을 막아준다.
💻프론트엔드개발자
0개의 댓글
