javascript는 head태그 안에 script태그로 공간을 만들어 작성한다.

jQuery

jQuery 퀴즈를 통해 조금더 알아가는 시간을 가졌다.

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

        function q2() {
        // 1. input-q2 값을 가져온다.
        // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
        // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
        // 4. alert(도메인 값);으로 띄우기
        // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
            let value = $('#input-q2').val()
            if(value.includes('@')) {
                alert(value.split('@')[1].split('.')[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 name = $('#input-q3').val()
            let temp_html = `<li>${name}</li>`
            $('#names-q3').append(temp_html)
        }

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

나는 이런식으로 답을 작성하였고 해설지를 보았다.

Q2.

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

alert부분을 간소화 시켜서 작성을 했다. 나도 간소화 하는 습관을 좀 들여야할것같다.

Q3.

        function q3() {
            // 1. input-q3 값을 가져온다.
            let newName = $('#input-q3').val();
            if (newName == '') {
                alert('이름을 입력하세요');
                return;
            }
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
            let temp_html = `<li>${newName}</li>`;
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
            $('#names-q3').append(temp_html);
        }

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

처음부분 나와는 다르게 alert('이름을 입력하세요')라고 확인작업을 한번 더 했다. 나도 좀더 세세하게 확인할 필요가 있을것같다.

이로써 jQuery에 한발자국 더 다가간듯하다.. 아직 멀고 멀었지만, 화이팅이다!