JQuery 예제

빈칸 체크 함수

<script>
  function q1() { // input-q1의 입력값을 가져옴
      let value = $('#input-q1').val();
      console.log(value) // 크롬 콘솔에서 문자 입력이 잘되는지 확인하고 삭제하기
      if (value == '') { // 만약 입력값이 빈칸이면 if(입력값=='')
  	 alert('입력하세요!') // 빈칸일때 나타남
      } else { // 입력값이 있일때는 입력값 그대로 나타남
  	 alert(value)
      }
  }
</script>

이메일 판별 함수

* 문자열 포함 체크
<script>
  function q2() { // input-q2 값을 가져온다.
      let email = $('#input-q2').val();
      console.log(email.includes('@')) // 콘솔에서 true 확인 후, 삭제하기
      if (email.includes('@')) {
  // dddg@abc.com -> abc만 추출해서 도메인 값 띄우기
         let domainWithDot = email.split('@')[1];
         let onlyDomain = domainWithDot.split('.')[0];
         alert(onlyDomain);
      } else {
         alert('이메일이 아닙니다.');
      }
  }
</script>

* 추출 방법(콘솔)
let txt = abc@abc.com
txt.split('@') // abc, abc.com으로 나뉨
txt.split('@')[1] // 첫번째 선택으로 abc.com만 나타남
txt.split('@')[1].split('.') // abc, com으로 나뉨
txt.split('@')[1].split('.')[0] // abc만 나타남
// if 밑에 'let domain = txt.split('@')[1].split('.')[0]' 작성해도 추출됨

HTML 붙이기/지우기

<script>
  function q3() { // input-q3 값을 가져옴
      let newName = $('#input-q3').val();
      if (newName == '') { // 빈칸일때 '이름을 입력하세요' 나타남
    	 alert('이름을 입력하세요');
         return;
    	}
* temp_html 사용시 꼭 `(백팁) 사용, 백팁 사용하지 않으면 적용이 안됨
      let temp_html = `<li>${newName}</li>`; // names-q3에 붙일 태그를 만듬
      console.log(temp_html) // 콘솔창에서 입력값 확인 후, 삭제

      $('#names-q3').append(temp_html); // jQuery 활용
  }

  function q3_remove() { // names-q3의 내부 태그를 모두 비움
      $('#names-q3').empty(); // jQuery 활용
  }
</script>