22.04.18 TIL - Jquery

자바스크립트를 배워보자!

jQuery는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리이다. 따라서 다른 사람들이 미리 짜둔 코드를 가져오는 것이므로 사용에 용이하다. 하지만 그렇다 보니 import를 통해 사용해야한다.

예를 들어 Javascript를 사용해 특정 id값이 보이지 않도록 하는 코드를 작성하면 다음과 같다.

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

여기에서 element라는 Id를 불러와 그에 대한 스타일로 "none"즉 아무것도 보이지 않게 display 하겠다는 코드다.

하지만 이를 jQuery를 사용하면 보다 직관적으로 작성 가능하다.

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

여기서 ("#textNode").css("color","red").appendTo("#someDiv"); 를 뜯어보자. ("#textNode")
: $라는 함수에 인자로 "#textNode"를 넘겨주겠다는 구문인데, jQuery는 $를 함수 이름으로 사용한다.

("~").css("color","red") or $("~").css({"color":"red"}) : jQuery의 메소드들은 리턴하는 데이터의 자료형이 jQuery이고, 메소드를 사용할 때는 자료형이 jQuery인 값에 붙여서 호출하도록 설계되어 있다. 즉, $("...")를 호출하여 찾고자 하는 DOM 요소를(여기서는 id가 textNode인 요소) jQuery형으로 리턴받고 .css() 메소드를 호출하여 작업을 수행하는 것. 메소드 이름을 보면 알겠지만 .css("color","red") 메소드는 대상의 css를 변경한다. 그리고 변경한 DOM 요소를 jQuery형으로 리턴한다.("~").css({"color":"red"})의 경우는 JSON 문법으로 여러 속성을 한꺼번에 지정할 때 사용한다.

$("...").css("...","...").appendTo("#someDiv") / $("...").css({"...":"..."...}).appendTo("#someDiv")
: 앞서 .css() 메소드로 색을 바꾸고 리턴한 요소에 .appendTo() 메소드를 적용하는 구문이다. 이게 가능한 이유는 플루언트(Fluent) 인터페이스 때문이다. 메서드의 반환값이 자기 자신의 참조가 되어 무한히 메서드를 이어붙일 수 있는 게 특징.

*DOM이란?
:문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

이처럼 jQuery의 어마무시한 직관성과 간편함이 곧 장점이다.

잠시 jQuery의 존재 의의를 따져보면 기존 자바스크립트 구현체가 이전의 인터넷 익스플로러, 파이어폭스, 구글 크롬에 호환되지 않는 부분이 있어서 유용하게 사용되었다.

하지만 현재는 점유율은 높지만 (jQuery 라이브러리를 통해 불러오면서 브라우저에 맞는 네이티브 자바스크립트로 변환된 뒤 실행되기 때문에) 해당 실행 명령을 처리하는데 시간이 오래걸리며, 즉 웹사이트의 동작이 느려지기 때문에 사용하지 않는 추세라고한다. 게다가 jQuery는 라이브러리이지 언어가 아니기 때문에 JavaScript의 사용법을 똑바로 숙지해야한다.

요즘은 React, Vue.js와 같은 SPA(뭐지?)용 프레임워크나 라이브러리로 트렌드가 변화한다고 하는데 이에 대해서는 추가로 알아보고 글을 작성하도록 하겠다.

다음은 jQuery를 사용한 javascript 예제 부분을 첨부한 것이다.

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

        function q3() {
            let txt = $('#input-q3').val()
            // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
            // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        }

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