Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 라이브러리(JQuery) 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 라이브러리(JQuery)

호IT 2021. 2. 3. 16:29

이미지 출처 :        https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

- 라이브러리

라이브러리는 모듈과 비슷한 개념입니다.

하지만 모듈은 프로그램을 구성하는 작은 부품으로써 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 정리가 되어있는 코드들의 집합이라고 할 수 있습니다.

프로그래밍을 할 때 라이브러리를 만들어서 사용하는 것도 좋지만,

이미 좋은 라이브러리가 많기 때문에 잘 알아보고 선택하여 사용하는 것은 코딩을 할 때에 효율성을 높일 수 있습니다.

 

 

- 라이브러리 사용 (jQuery)

 

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('good~');
     })
    </script>
</body>
</html>

위의코드는 버튼을누르면 "empty"라고 가진 문자열 텍스트를 "good~" 으로 바꾸는 코드입니다.

 

 

해당코드의 중요한 부분만 간단히 설명하자면.

<script src="https://code.jquery.com/jquery-3.5.1.js"></script> jquery의 파일을 불러온다는 의미입니다.

 

$('#execute_btn').click(function(){

        $('#list li').text('good~');

     })

jquery는 $로 시작합니다.

"execute_btn" 인 id값을 클릭하게된다면 id가 list인 li속성의 text를 "good"으로 바꾸는 코드입니다.

버튼을 누르기 전 후

위의 예제는 매우 간단하게 약 3줄을 추가해 구현했습니다.

 

근데 만약 라이브러리를 사용안한다면 해당기능을 어떻게 구현해야할까요?

 

라이브러리를 사용안한다면

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <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('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'good';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

결괏값은 같지만,

위의 코드처럼 라이브러리를 사용하지않는다면 해당위의 코드처럼 많은 코드를 작성해야합니다.

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS 정규표현식  (0) 2021.02.03
[ JavaScript ] JS API,문서보는법  (0) 2021.02.03
[ JavaScript ] JS 모듈  (0) 2021.02.03
[ JavaScript ] JS 객체와 this  (0) 2021.02.03
[ JavaScript ] JS 배열 (push, concat, pop, unshift,splice, shift, sort) | 정렬, 추가  (0) 2021.02.03
'SUA 정보보안/JavaScript' Related Articles more
Comments