JQuery 연습

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

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

        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 q3_in = $('#input-q3').val();
            let temp_html = `<li>${q3_in}</li>`
            $('#names-q3').append(temp_html);
        }

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

    </script>
profile
못하면 열심히 하는 게 당연하니까💪 [Frontend/서비스기획]

0개의 댓글