[Web] FE - jQuery

jQuery란?

jQuery란, 웹 사이트에서 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 JavaScript 라이브러리이다.

- JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것

- 직접 JS 코드를 작성하여 모든 기능을 구현할 수도 있지만,

이 경우에 코드가 복잡하고, 개발 환경과 다른 브라우저에서 잘 작동을 안 하는 등 브라우저 간 호환성을 직접 고려해야하는 등의 문제가 있기 때문에 전문 개발자가 작성한 라이브러리를 가져와서 사용하면 편하다.

- 대신, 쓰기 전에 임포트(import)를 해주어야한다.!!!!!

- jQuery와 순수 JavaScript의 코드를 비교해보면,

JS에서 element란 id를 가진 요소를 감추려면 이렇게 길고 복잡하게 써야하지만,

document.getElementById("element").style.display = "none";

JQ에서는 이렇게 간단하고 직관적으로 쓸 수 있다.

$('#element').hide();

////////////////////////////////////////////////////////////////////////////////////////
// jQuery test Code

$("p").hide();
$("#test").show();
$(".test").click(function(){
    alert("클릭!");
});

- jQuery : 라이브러리

- 부트스트랩 :프레임워크

* 따라서 부트 스트랩 프레임워크에서 jQuery 라이브러리를 사용할 수 있다라고 말할 수 있다.

---

jQuery 사용하기

- jQuery를 사용하기 위해서는 미리 작성된 JavaScript 코드를 임포트해와야하는데, 부트스트랩 CSS 파일을 가져올 때와 마찬가지로 내 컴퓨터에 해당 파일을 저장해서 사용할 수도 있지만 온라인 상의 파일을 참조할 수도 있다.

-와사이에 아래를 넣으면 되는데, 부트스트랩을 쓸 때 이미 임포트해왔던 4개의 파일 중 하나이다.

* 부트스트랩 템플릿을 사용하고 있으면 이미 구글 jQuery cdn이 부트스트랩 템플릿 안에 저장되어 있다.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous">
</script>

- jQuery를 사용하는 방법

CSS와 마찬가지로 jQuery를 쓸 때 특정 요소를 '가리켜야' 조작할 수 있다.

CSS에서는 선택자로 class를 주로 사용했는데, jQuery에서는 고유한 하나의 요소를 가리키는 id를 주로 사용한다.

---

자주 쓰이는 jQuery 다뤄보기

jQuery에는 정말 다양한 기능들이 있기 때문에 전부 외우려고 하는 것보다는 필요할 때 구글링해보며 사용하면 된다!

 

(1) input 박스의 값 가져오기

1. 값을 가져오기를 원하는 input 태그에 id를 부여해야 한다.

HTML 파일을 수정, 저장하고 브라우저 창을 새로고침하여 수정이 적용된 화면에서 다음 단계를 진행한다.

<div class="form-group">
    <label for="exampleInputEmail1">아티클 URL</label>
    <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
        placeholder="">    /*값을 가져오기를 원하는 input 태그에 id 부여*/
</div>

2. 코드를 크롬브라우저 개발자도구 콘솔창에 입력한다.

// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
let url = $('#post-url').val();
url // input 박스 안에 적혀있는 내용이 출력된다.

3. input 박스에 글을 입력하고 코드를 실행하면 값이 바뀌는 것을 확인할 수 있다.

4. input 박스에 적혀있는 글을 바꾸고 싶다면 다음 코드로 쓰면 된다.

$('#post-url').val("새 글입니다.");

---

 

(2) div 숨기기 / 보이기

1. 숨기거나 보이고 싶은 div 태그에 id를 부여한다.

<div class="posting-box" id="post-box">
    ...
</div>

2. 콘솔창에 입력하여 div 숨기고 보이는 것 확인한다.

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

3. div가 없어졌다 나타났다 할 때마다 개발자도구의 Elements 탭에서

해당 div에 적용된 CSS 중에 display 속성이 none과 block 둘 중 하나로 바뀌는 것을 확인할 수 있다.

---

(3) CSS의 속성 값 가져오기

Elements 탭을 보지 않고도 CSS display 속성이 변하는 것을 확인할 수 있다.

$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

---

 

(4) 태그 내 텍스트 입력하기

- 위에서 본 것처럼, input 박스 안에는 .val() 메소드를 이용하여 값을 입력할 수 있다.

- 그 외의 경우에는 대부분 시작태그와 종료태그 사이에 있는 텍스트가 화면에 표시되며, 이 값은 아래와 같이 .text() 메소드를 이용하여 접근할 수 있다.

 

1. 원하는 태그에 id를 부여한다. 

<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅박스 열기</button>

2. 아래 코드를 이용하여 글씨를 바꿀 수 있다.

let btn_text = $('#btn-posting-box').text();
btn_text	// '포스팅박스 열기'가 출력된다.
$('#btn_posting-box').text('포스팅박스 닫기');

---

(5) 태그 내 html 입력하기

포스팅하면 카드를 추가하는 등, 특정 태그 안에 새로운 html 요소를 동적으로 추가하고 싶을 때는 

 .append() 메소드를 사용할 수 있다.

 

1. 원하는 태그에 id를 부여한다. => div 태그에 id를 부여했다.

 

2. 아래 코드를 콘솔창에서 실행하여 카드들 뒤에 텍스트를 넣는다.

$('#cards-box').append("추가 텍스트");

 

3. Elements 탭에서 해당 div 안 가장 끝에 새 텍스트가 생긴 것을 확인할 수 있다.

 

4. 새로고침을 하여 페이지를 원래 상태로 만든 후, 이번에는 버튼을 넣어보자!!!

=> 작은 따옴표가 아니라 백틱(Template Literals)를 활용한다.

 

* 템플릿 리터럴(Template Literals)이란?

let temp_html = `<button>추가 버튼</button>`;
$('#card_box').append(temp_html);

 

5. 카드도 넣어보자!!!

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg';
let link_url = 'https://google.com/';
let title = '제목 - 구글';
let desc = '구글에 대한 설명이 여기에 들어간다.';
let comment = '여기는 개인적인 코멘트가 들어간다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

---

(6) 페이지 로딩이 완료되면 실행하기

어떤 기능이 페이지가 로딩되자마자 실행되기를 바란다면?

<script>

$(document).ready(function(){
	alert('페이지가 로딩되었습니다.')
});

</script>

---

연습 !

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>자바스크립트 & 제이쿼리 같이 쓰기 | jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

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

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

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

        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();
        }

    </script>
</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text"/> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>