[웹개발 종합반 2주차] JQuery 연습하기

🔖05. JQuery 연습하기

🔎 입력된 값이 없는지, 있는지 ?

<script>
        function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
          if($('#input-q1').val() == ''){
            alert('입력하세요!')
          }
          else{
            alert($('#input-q1').val())
          }
        }
</script>

 

🔎 이메일인지, 아닌지

<script>
    function q2() {
    // 1. input-q2 값을 가져온다.
    // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
    // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
    // 4. alert(도메인 값);으로 띄우기
    // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
              if($('#input-q2').val().includes('@')){
                alert($('#input-q2').val().split('@')[1].split('.')[0])
              }
              else{
                alert('이메일이 아닙니다.')
              }
            }
</script>

 

🔎 html 붙이기

<script>
    function q3() {
    // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
    // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
    // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
              let txt = $('#input-q3').val()
              let temp_html = `<li>${txt}</li>`
              $('#names-q3').append(temp_html)
        }
</script>

 

🔎 버튼  누르면 html 삭제

<script>
	function q3_remove() {
    // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
              $('#names-q3').empty()
        }
</script>

---

☀️ 느낀점

퀴즈를 예전에 풀어봐서 그런가? 예전보다는 빠르게 풀었다.

다음 강의를 보고 느꼈다. ajax들어가야 서버와 통신해서 실시간 서버 데이터를 가져오겠구나! 아직 할게 엄청 많구나. 새삼 깨달았다.