1 분 소요

라이브러리 vs 프레임워크

그냥 내가 정리하는 블로그라서 친절하게 설명하지 않을 것임 ㅎ

라이브러리(library)는 만들 때 쓰는 요긴한 재료, 프레임워크(framework)는 밀키트와 같다.

이외에 UI(User Interface)는 나(사용자) 스스로 시스템을 제어하는 장치이고, API(Application Programming Interface)는 업체에서 만들어놓은 제어 조작장치인 셈.

jQuery

jQuery는 JS의 유명한 라이브러리 중 하나로, 이걸로 최종_최최종_개선.ver의 버튼을 만들어보자.

나는 다운로드 받기 보다는 구글 CDN으로 간단히 src 속성을 써넣었다.

//colors.js
var Body = {
    setColor: function(color) {
        $('body').css('color', color);
    },
    setBackgroundColor: function(color) {
        $('body').css('backgroundColor', color);
    }
}
var Links = {
    setColor: function(color) {
        $('a').css('color', color);
    }
}
function nightDayHandler(self) {
    var target = document.querySelector('body');
    if (self.value === 'night') {
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day';

        Links.setColor('powderblue');
    } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue');
    }
}

$().css();와 같이 querySelector()를 대체할 수 있다!! 버튼 코드에는 script 태그에 src로 구글 CDN임을 써넣어주면 된다.

<!--토글 코드 개선6: jQuery 활용-->
<!DOCTYPE HTML>
<html>
    <head>
        <title>WEB1 - JavaScript</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="colors.js"></script>
    </head>
    <body>
        <h1><a href="index.html">WEB</a></h1>

        <input type="button" value="night" onclick="
            nightDayHandler(this);
        ">

        <div id="grid">
            <ol>
                <li><a href="1.html">HTML</a></li>
                <li><a href="2.html">CSS</a></li>
                <li><a href="3.html">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>JavaScript란 무엇인가?</h2>
                <p>JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS.
                    99% of websites use JavaScript on the client side for webpage behavior.
                    Web browsers have a dedicated JavaScript engine that executes the client code.
                    These engines are also utilized in some servers and a variety of apps.
                    The most popular runtime system for non-browser usage is Node.js.
                </p>
            </div>
        </div>

        <input type="button" value="night" onclick="
            nightDayHandler(this);
        ">
    </body>
</html>

이후에 더 탐구할만한 내용

저자가 마지막 페이지에 써놓은 것을 나열해본다.

Wanna know more ab't JS?

  • document 객체 / DOM 객체 - 웹 페이지
  • window 객체 - 웹 브라우저
  • Ajax - 현대적인 웹 개발 기법
  • cookie - 웹 페이지의 상태 유지(쿠키)
  • offline web application - 인터넷이 끊겨도 동작하는 웹 페이지
  • webRTC / speech~ API / WebGL / WebVR - 화상통신/음성인식/3D 그래픽/VR

이렇게 생활코딩!HTML+CSS+자바스크립트 책거리~~

출처: [생활코딩!HTML+CSS+자바스크립트 JS편 Chapter 29~34]

태그:

카테고리:

업데이트:

참고