! includes('@')

티스토리 뷰

Language/JavaScript

! includes('@')

채._. 2025. 1. 24. 19:34

문제

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>복합 조건 처리</title>
</head>
<body>
  <label for="name">이름</label>
  <input type="text" id="name" placeholder="이름을 입력하세요">

  <label for="age">나이</label>
  <input type="number" id="age" placeholder="나이를 입력하세요">

  <label for="email">이메일</label>
  <input type="email" id="email" placeholder="이메일을 입력하세요">

  <button class="submit-btn">확인</button>

  <script>
    const nameInput = document.querySelector("#name");
    const ageInput = document.querySelector("#age");
    const emailInput = document.querySelector("#email");
    const submitBtn = document.querySelector(".submit-btn");

    submitBtn.addEventListener("click", function () {
      // 여기 로직 작성
    });
  </script>
</body>
</html>

빈 곳을 채우면 된다.
1, 2, 4는 완성했지만 3번에서 막혔다!

문제 풀이

1. 이름, 나이, 이메일 중 하나라도 입력되지 않은 경우: alert "모든 정보를 입력해주세요."

submitBtn.addEventListener("click", function () {
    if(nameInput.value === "" || ageInput === "" || emailInput === ""){
    alert("모든 정보를 입력해주세요.");
      }

입력한 값은 변수명.value를 통해 을 가져올 수 있다.
값이 공백인 경우는 ""로 나타낼 수 있다.
하나라도 입력되지 않은 경우는 or(||)로 표현할 수 있다.
(true || false || false => true 이기 때문에 true일 경우 alert가 나타남!)

2. 나이가 18세 미만일 경우: alert "미성년자는 가입할 수 없습니다."

if(ageInput.value  18) {
  alert("미성년자는 가입할 수 없습니다.")
}

변수명.value가 18 미만일 경우 alert가 나타난다.

🚨문제의 3번

🔎 구글에 'javascript 포함된 문자열'을 검색하여 includes라는 메서드를 알아냈다!

includes 참고 링크

시도 1. 변수 지정하여 != 활용하기

const evalue = emailInput.value
-> email의 값을 'evalue'라는 변수로 지정한다.

if(evalue != evalue.includes('@')){
-> 만약 evalue의 값이 @를 포함한 값과 같지 않다면

alert("유효한 이메일 주소를 입력해주세요.")
-> alert를 띄운다.

} else{
-> 그게 아니라면(포함했다면)

alert("가입 성공!")}
-> alert를 띄운다.

라고 나름 코드를 짜보고 혹시나 싶어 console.log도 찍어봤으나
'@'를 입력해도 '가입 성공' alert가 뜨지 않는다ㅜㅜ

깨달은 점

혼자 끙끙대다가.. 팀원분께 여쭤봐서 방법을 알아냈다!
그건 바로 ! 를 활용하는 것!!

if(!emailInput.value.includes('@')){
   alert("유효한 이메일 주소를 입력해주세요.")
}

변수 지정은 생략하고 맨 앞에 !만 붙여주면 문장 전체를 부정하는 의미가 된다고 한다.

+) if(){} 식을 따로따로 사용해도 결과는 같지만
모든 식을 합치기 위해서 if ~ else if ~ else를 사용한다.

최종 답안

'Language > JavaScript' 카테고리의 다른 글

[JS] if문과 switch문 (0)	2025.01.31
typeof를 통해 자료형을 확인해야 하는 이유 (0)	2025.01.24
[🍦] 단축 평가 (Short Circuit Evaluation) (0)	2025.01.20
[🍦] 화살표 함수 (Arrow function) (0)	2025.01.20
[🍦] JS 문법 - Rest operator (0)	2025.01.20

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰

! includes('@')

문제

문제 풀이

🚨문제의 3번

깨달은 점

최종 답안

'Language > JavaScript' 카테고리의 다른 글

티스토리툴바