JQuery 정복하기 1 (Library, JQuery, javascript와 비교)

🐤 Web/📌 JQuery

JQuery 정복하기 1 (Library, JQuery, javascript와 비교)

chamroro 2022. 7. 6. 14:05

작년에 자바스크립트 할때 잠깐 공부하고 연습 조금 했던 JQuery를 다시 파보려 한다. 거의 노베이스에 가깝기 때문에 이 글은 정말 A부터 시작한다 🐥

우선 노하우...라고 하긴 너무 거창해보이니까.. 공부법을 소개해보자면 필자는 공식문서를 중요시 여긴다. 코딩할 때 가장 중요한 언어가 영어 (우리 교수님께서 많이 하시는 말씀이다) 인 이유가 공식문서나 영어로 이루어진 문서를 읽기 위함이라는 말이 있다. TMI지만 컴공 공부하면서 구글링도 많이 하고 영문서를 많이 봤더니 영어공부 하나도 안했는데 토익점수가 올랐다 (..?)

하지만 절대 공식문서로 공부를 시작하지 않는다. 공부를 시작하려면 공부해야할 것이 무엇인지를 먼저 감을 잡아야하는데, 공식문서에 적인 딱딱한 영어 설명으로는 나에게 와닿지 않기 때문이다.

그래서 난 꼭 유튜브에 먼저 검색을 하고 영상 몇개를 본 뒤에 공부를 시작한다. 일종의 예습인 셈이다. 만약 괜찮은 강의 시리즈가 있으면 그것을 중심으로 공부하고, 만약 없다면 해당 플랫폼 또는 언어가 트렌드인지, 어떨 때 강점을 갖는지, 현업에서 어떤 식으로 사용되는 지를 반드시 알고 들어간다. 이후에 공식문서를 보면 내가 어떻게 사용할 지를 생각하며 공부할 수 있다.

웹앱 분야는 트랜드가 너무나 빨리 바뀌기 때문에 미리 사전조사는 더욱 필수라고 생각한다. outdated된 것을 공부할 순 없지!

그런 의미에서 JQuery에 대해 재밌게 읽었던 글 하나 남겨본다
https://www.samsungsds.com/kr/insights/jQuery.html

유튜버 중 가장 좋아하는 분은 🧑🏻‍💻생활코딩🧑🏻‍💻님이다. 이분의 강의로 기초를 탄탄히 다지고, 바로 내 프로젝트에 사용하여 본다. 그리고 프로젝트를 진행해가며 사전처럼 공식문서를 열어가며 살을 채운다.

찾아보니 생활코딩님이 JQuery 강의를 올려두신 게 있다. 무려 8년전..!

오늘은 그걸 보며 밤샘 각 🌕! 🌞!

라이브러리란?(library)

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들

jQuery란?

엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리

Hello world - 첫번째 jQuery

🌞 사용방법

직접 서비스 하는 경우
https://jquery.com/download/ 에서 jquery 소스코드를 다운로드 한다.
위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다.

구글의 자바스크립트 라이브러리를 사용하는 경우
https://developers.google.com/speed/libraries#jquery

<html>
     <body>
         <div class="welcome"></div>
         <div class="welcome"></div>
         <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
         <script type="text/javascript">
                 $('.welcome').html('hello world! coding everybody!').css('background-color','yellow');
         </script>
     </body>
 </html>

자바스크립트와 jQuery 비교

탭을 클릭했을 때 포커스를 변경하는 예제

👀 JavaScript

<html>
    <head>
        <script type="text/javascript">
            function addEvent(target, eventType,eventHandler, useCapture) {
                if (target.addEventListener) { // W3C DOM
                    target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
                } else if (target.attachEvent) {  // IE DOM
                    var r = target.attachEvent("on"+eventType, eventHandler);
                }
            }
 
     
            function clickHandler(event) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    child.className = '';
                }
                event.target.className = 'selected';
            }
  
            addEvent(window, 'load', function(eventObj) {
                var nav = document.getElementById('navigation');
                for(var i = 0; i < nav.childNodes.length; i++) {
                    var child = nav.childNodes[i];
                    if(child.nodeType==3)
                        continue;
                    addEvent(child, 'click', clickHandler);
                }
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>

🕵🏻‍♀️ jQuery

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
            $('#navigation li').live('click', function() {
                $('#navigation li').removeClass('selected');
                $(this).addClass('selected');
            })
        </script>
        <style type="text/css">
            #navigation li {
                list-style:none;
                float:left;
                padding:5px;
            }
            #navigation {
                cursor:pointer;
            }
            #navigation .selected {
                background-color:red;
                color:white;
            }
        </style>
    </head>
    <body>
        <ul id="navigation">
            <li>HTML</li>
            <li>CSS</li>
            <li>javascript</li>
            <li class="selected">jQuery</li>
            <li>PHP</li>
            <li>mysql</li>
        </ul>
    </body>
</html>