JQuery 다루기, 적용하기

JQuery란?

: HTML의 요소들을 조작하는 Javascript를 미리 작성해둔 것. 라이브러리!

  JQuery는 미리 작성된 Javascript다. 전문 개발자들이 짜둔거를 가져오는것, 그래서 꼭 '임포트' 해야함!

 

JQuery다루기

콘솔창에서

 let temp_html = ``               <---``안에 넣고싶은 것을 지정해주고

$('#card-box').append(temp_html)     <---넣고싶은위치(여기에선 card-box)에 append해주면 카드가 생성됨

 

여기서 `` 는 따옴표가 아니라 백틱 ! 물결표 자리에 있는 거

 

 

JQuery 적용하기

포스트박스 기록하기 누르면 열리고, 닫기 누르면 숨겨지는 코드

그리고 처음부터 닫게 하려고

style - mypost 에  display: none; 입력해줌

 

그러면

닫은채로 시작, 기록하기 누르면 열리고 닫기누르면 다시 닫힘

 

 

연습문제

완성본: http://spartacodingclub.shop/ajaxquiz/00_0

 

<Q1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기, 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기>

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

가져오는거 정의하는거를 let ~ 하는거 생각을 못함.. ㅋㅋ 그냥 냅다 $('~~ 써버림.

 

 

<Q2. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기, @가 없으면  '이메일이 아닙니다'라는 얼럿 띄우기>

처음에 쓴거

function q2() {
    let txt2 = $('#input-q2').val()
        if(txt2.includes('@'))
            alert(txt2.split('@')[1])
        else
            alert('이메일이 아닙니다.')

오류 1.

여기에서 잘못된건 includes함수는 ()안의 값이 포함되어있으면 True, 아니면 False를 출력하는 함수인데

그냥 포함되어있다면~ 정도로 해석해버림;ㅋㅋ

 

오류 2.

@로 나눠서 두번째 값을 빼기위해 [1]를 넣었는데

"gmail.com"이 추출됨

이걸 다시 .으로 나눠야 하는데

alert(txt2.split('@'), txt2.split('.')[1])

이렇게 하니까 안됐음.

 

그래서 맞은 답은

function q2() {
    let txt2 = $('#input-q2').val()
        if(txt2.includes('@') == true)
            alert(txt2.split('@')[1].split('.')[0])
        else
            alert('이메일이 아닙니다.')

@로 스플릿해서 2번째오는 것을 . 으로 스플릿해서 1번째 오는것을 알림

 

 

 

<Q3. 이름을 입력하면 아래 나오게 하기, 다지우기 버튼을 만들기>

function q3() {
    let txt3 = $('#input-q3').val()
    let temp_html = `<li>${txt3}</li>`
    $('#names-q3').append(temp_html)
// 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)을 이용하면 굿!)
}

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

선생님 화면에서 q3_remove에 input-q3 불러오는거랑 temp_html 선언 안해주길래 안했는데

작동안해서

똑같이 선언해주니까 됐음