본문 바로가기
카테고리 없음

2주차 -Jquery 연습하기-

시영이형 2022. 4. 27. 00:27

사실 3일정도 강의의 진도를 나갈 수가 없었다.

jquery와 Java script를 이용한 Quiz를 풀 수가 없었기 때문이다. 

 

함수부터 자바스크립트 제이쿼리까지 이해하기 까지 다시 강의를 보고 구글링도 해보고,

현업에서 일하는 개발자(여자친구)의 자문(제일 많은 도움이 되었다.)을 들으며 겨우 겨우 이해가 되었다.

 

하지만 그마저도 퀴즈1번까지는 풀수 있었으나 2번부터는 풀 수 없었다 ..ㅠㅠㅠㅠㅠ

 

1번 퀴즈는 if문과 alert을 적절히 사용하면 비교적 어렵지 않게 풀 수 있었다.

<script>
    function q1() {
        let blank = $('#input-q1').val()
        if (blank == "") {
            alert("입력하세요!");
        } else {
            alert(blank);
        }

 

변수지정 -> 변수가 빈값일 시 alrert 명령문 '입력하세요!' -> 빈값이 아닐 경우 input 박스 값

 

2번 퀴즈는 includes를 구글링 하여 아래와 같이 직접 코드를 작성해 보았는데,

function q2() {
    let mail = $('#input-q2').val()
    if (mail.includes(@)) {
        alert(mail);
    } else {
        alert('이메일이 아닙니다');
    }

잘 작동하지 않았고 .split 도 어떻게 쓰는 줄 몰라서 강의를 볼 수 밖에 없었다 ㅠㅠㅠㅠ

 

function q2() {
    let mail = $('#input-q2').val()
    console.log(mail.includes('@'))

    if (mail.includes('@')) {
        alert('이메일입니다!');
    }else {
        alert('이메일이 아닙니다!');
    }

강사님을 따라 다시 코드를 작성했더니(미완성) 골뱅이사이에 ''(따옴표)를 빼먹은 것을 알 수 있었다.. 계속해서 따옴표와 {} 중괄호 뺴먹어서 오류나는중..

 

다음엔 split으로 도메인을 따로 떼는 법을 배웠는데 배우긴배웠었나;;;;;; 어쩐지 개발일지에도 없다. 다시 정리 해보면

 

변수명.split('문자열') = 문자열을 기준으로 두 문자열로 나뉘며 기준이 된 문자열은 빠짐

 

Ex) let txt = 'sparta@naver.com'                  ( 스플릿 할 변수 지정)

     txt.split('@')                                       (스플릿 할 기준 지정)

    (2) ['sparta', 'naver.com']                        ('@'를 기준으로 2개의 문자열로 나뉨)

    txt.split('@')[1]                                     ('@'를 기준으로 나뉜 2개의 문자열 중에 1번을 부름)

    'naver.com'                                         

    txt.split('@')[1].split('.')                           ('naver.com'을 다시 '.' 을 기준으로 나눔)

   (2) ['naver','com']                                  (0번 naver, 1번 com 으로 나뉨)

   txt.split('@')[1].split('.')[0]                        ('.'를 기준으로 나뉜 2개의 문자열 중에 0번을 부름)

   'naver'

 

이렇게 정리 된 split 식을  txt.split('@')[1].split('.')[0]  domain 변수 지정에 넣어주면 완성!!

function q2() {
    let mail = $('#input-q2').val()
    console.log(mail.includes('@'))

    if (mail.includes('@')) {
        let domain = mail.split('@')[1].split('.')[0]
        alert(domain)
        alert('이메일이 아닙니다!');
    }

만들고 나서도 솔직히 혼자서 다시 못 할 거같다는 생각이 들었다 솔직히 어려웠음

 

마지막 3번은 강사님 설명 듣고 따라하려다가 쉽다고 해서 다시 도전해보기로 했다..!! 하지만 결국 못품..........ㅠㅠ

function q3() {
    let txt = $('#input-q3').val();
    let temp_html = `<li>${txt}</li>`

    $('#names-q3').append(temp_html)
}

function q3_remove() {
    $('#names-q3').empty()
}

zcㅌㅊㅊㅊㅊ결국 강사님이 하는데로 따라 적고 이해가 하나도 안 되었다..

 

내일 복습을 해야 겠다.

 

Temp_html = 은 무엇인가 (단순한 변수이름인가?)

 

왜 <li></li> 가 붙는지..

 

.append의 명령어 는 무엇인지 (아마 붙이는 거일듯)

 

내일 다시 정리 해봐야겠다

 

 

 

 

 

 

티스토리툴바