모도리는 공부중

21.01.25. JavaScript - J Query 본문

K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVASCRIPT

21.01.25. JavaScript - J Query

공부하는 모도리 2021. 1. 25. 17:35
728x90
반응형

복습을 가지는데... 저번 시간 이해도가 부족한 제 자신이라서 그런지 이해 안가네요.

그냥 본론으로 바로 넘어가시길 추천합니다.

 

 

DOM (Document Object Model)

  • HTML문서의 요소를 효과적으로 다루기 위하여 모든 요소를 분리하고 상하관계를 설정한 후 배치한 구조

HTMLElement

  • 모든 종류의 HTML요소를 나타내는 인터페이스
  • getElement* 메소드를 통해서 원하는 객체를 조회
  • 조회된 객체들을 대상으로 구체적인 작업 처리

 

 

 

오늘의 진도를 나가봅시다.

 

 

getElementsByTagName(접근하고자 하는 요소의 이름 입력)

  • 접근하고자 하는 HTML태그의 이름을 이용하여 HTMLCollection객체 조회
  • Elements이므로 복수개의 데이터. 유사배열.
  • for문을 사용하여 출력.

 

실습을 진행해보도록 합시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

    <script>
        var li = document.getElementsByTagName("li");

        for(var i=0; i<li.length; i++){ // li는 유사배열. 배열처럼 length 사용 가능.
            alert(li[i]);
        }
    </script>
</body>
</html>

실행해보면,

객체를 가지고 온 것을 확인할 수 있다. 

 

li태그 안에 있는 내용을 가져오고 싶다면,

alert(li[i].innerHTML);

메소드

설명

Element.innerHTML = new html content

내부 내용 변경 ex) div.innerHTML=‘hello’

Element.attribute = new value

속성 변경 ex) img.src=‘a.png’

Element.setAttribute(attribute,value)

속성 변경 ex) img.setAttribute(‘src’,’a.png’)

Element.style.property

스타일 변경 ex) div.style.color=‘red’

 

HTML요소객체.style.property = 속성값

 

Q. 버튼 클릭 시, HTML요소의 스타일을 바꾸는 페이지를 만드시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="h1">날씨가 좋네요</h1>
    <button id="btn">디자인 변경</button>
    <!-- 우리가 지금까지 버튼을 활성화하기 위해 onclick을 썼다면 이번엔,
    바닐라js를 이용하도록 하겠습니다. -->
    <script>
        // 변경할 대상 h1
        // 액션을 줄 대상 btn
        // 그러므로 둘 다 불러오겠습니다.

        var h1 = document.getElementById('h1');
        var btn = document.getElementById('btn');
        
        // 버튼에게 함수를 직접 만들어준다.
        btn.addEventListener('click',function(){h1.style.color = "blue";})
        // .addEventListener - 추가한다 어떤 이벤트를 버튼에게! (직독직해야 뭐야)
        // 어느 때에 이벤트가 발생할 것이고 어떤 이벤트를 실행할 것인지 컴퓨터에게 알려줘야 한다.
        // ('click',function() - 기능은 'click'이고 클릭했을 때 뒤에 나오는 function()을 실행해줘 라는 의미.
        // 여기서 중요한 것은 바로 괄호 {}
            
    </script>
</body>
</html>

 

 

Element 스타일 변경 실습

원에서 직사각형으로 가는 것은 쉽지 않다.. 오히려 타원을 불러오는 문제를 일으킬 것.

 

 

script로 순수하게 디자인을 바꾸는 것은 거의 하지 않으며, 뒤에서 배울 제이쿼리에서 대부분 진행할 것입니다.

 

Q. '이미지변경' 버튼을 누르면 그림이 바뀌는 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="img" src="mstk_what.png">
    <br>
    <button onclick="ch()">이미지 변경</button>

    <script>
        var img = document.getElementById('img');

        function ch(){ // ch라는 기능 정의
            img.src = "mstk_ohyeah.gif"; // 내용을 바꾼다면 속성명을 명시해주면 된다.
            // img라는 객체에서 경로를 가져올 것이므로 src. 그리고 바꿔줄 이미지 경로 삽입.
        }
    </script>
</body>
</html>

 

오늘도 내 최애캐 망상토끼가 실습예제에서 빠지면 섭하지.

 

 

 

J Query

 

적게 쓰고 더 많이 구현하자!

버튼에 이벤트를 줄 때 chrome은 addEventListener, explorer는 attachEvent.

이렇게 각각 다르다보니, 크로스브라우징을 위해 나타난 것이 바로 제이쿼리라고 할 수 있다.

 

CrossBrowsing - 웹의 동등성을 유지하자!

 

모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반 라이브러리.

 

이미지 사이즈 조정하는 코드도 자바스크립트로 작성할 때보다 제이쿼리로 작성할 때 훨씬 간단하게 완성할 수 있다.

 

 

2번은 인터넷 연결이 필요하다보니 네트워크환경에 영향을 받는 관계로 실제 현업에서는 1번의 방식을 더 많이 사용하고 있다.

그럼 우리도 jQuery를 다운로드 받아보도록 합시다.

 

Download jQuery | jQuery

link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download

jquery.com

접속하면 이렇게 뜰건데,

여기서 압축버전을 받아주도록 한다. 클릭해서 들어가면

이런 화면이 뜰 것이고 여기서 마우스 오른쪽 단추를 눌러 다른이름으로 저장을 해준다. 저장한 js파일을 내가 작업중인 환경으로 그대로 끌어다놓으면 환경설정 완료.

 

이 압축버전을 사용하면서부터 우리가 스크립트를 입력할 때 세미콜론(;)을 꼭 사용해주어야하는 이유가 발생하게 된다.

why? - 세미콜론이 없으면 코드가 구분이 가지 않기 때문. 스크립트에서는 세미콜론 없어도 오류를 자동으로 잡고 지나가기 때문에 문제가 없었지만 제이쿼리는 이 세미콜론이 중요하므로 앞으로 우리는 제이쿼리를 사용하기 위해서 '세미콜론'이라는 습관을 들여주는 것이 좋다.

 

지금까지 우리는 h1에 접근해서 변경하기 위해 .innerHTML을 사용하는 식으로 접근해야했다면, 제이쿼리를 사용함으로써 '$(요소명 | 선택자)'를 통해 더욱 간편하게 사용할 수 있는 환경을 갖추게 된 것이다.

 

이렇게 간편한데 오픈소스는 순수 자바스크립트 코드로 이루어진 경우가 더 많다. 대체 왜?

- 순수 자바스크립트를 공부한 사람들이 더 많고 그 분들이 일부러 제이쿼리까지 공부한 경우가 많지 않다. 제이쿼리로 올려져 있으면 이 부분을 추가로 공부해야하기 때문에 여러사람의 편의성을 위해 순수코드만 올려져 있는 것. 결국 우리가 지금까지 스크립트언어를 배운 이유는 오픈소스를 활용하기 위해서라고 할 수 있다.

 

스크립트에서 inner만 뺐을 뿐인데 그만큼 코드가 단순해졌다.

.html은 태그로 인식, .text는 순수한 텍스트로 인식.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.min.js"></script>
    <!--스크립트 호출(임포트)-->
</head>

<body>
    <h1 id="h1">그만 자요</h1>

    <script>
        alert(document.getElementsByTagName('h1')[0].innerHTML);
        // alert($('#h1').html());
        $('#h1').html("<h1>자지 마요</h1>");
    </script>
</body>

</html>

 

css스타일 속성을 제이쿼리로 주는 방법

 

그럼 제이쿼리를 이용하여 버튼을 클릭했을 때 글씨의 색상과 크기가 변경되는 코드를 작성해보도록 합시다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>jquery 활용하기</h1>
    <button onclick="ch()">클릭!</button>

    <script>
        function ch(){
            $('h1').css('color','red');
            $('h1').css('font-size','50px');
        }
    </script>
</body>
</html>

 

잘 구현되고 있다. 하지만 이 코드는 비효율적이다. 왜?

- 인터프리터언어이기 때문에 위에서부터 한줄씩 내려오다가 $('h1').css('color','red');를 만나면 h1태그에 적용해주기 위해 맨 위에서부터 한줄씩 찾으며 내려와서 적용한다. 그 다음에 있는 코드 $('h1').css('font-size','50px');를 만나면 또 위에서부터... (바본가? - 응.)

 

이 바보를 속 시원하게 해줄 방법. 객체 처리.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1 id="h1">jquery 활용하기</h1>
    <button onclick="ch()">클릭!</button>

    <script>
        function ch(){
            // $('#h1').css('color','red');
            // $('#h1').css('font-size','50px');

            $('#h1').css({ // #h1에 css를 줄건데 여러개로 나누지 않고 하나로 묶어서 사용할거야!
                color : "red",
                fontSize : "50px"
            })
            // 객체 형식으로 묶어서 사용하면 한 번만 기능을 불러와도 디자인을 여러번에 나누어서 적용하지 않고 한 번에 적용 가능하다.
        }
    </script>
</body>
</html>

 

실제 현업에서는 이렇게 묶어서 사용하므로 객체 방식에 익숙해지도록 하자.

 

jQuery 글자색 변경하기의 색은 무엇일까?

인터프리터언어의 특징이 무엇인가? 바로 위에서부터 순서대로 읽어내려오며 실행한다는 것이다.

그럼 head에 작성된 script인 css는 적용이 될까? 안 될까?

- 적용되지 않는다. head에 위치한 script에서 h1을 찾으러 다시 위로 올라갈 것이므로 body에 위치해 있는 h1은 만날 수가 없다. 결국 h1태그에 있는 글자 색상은 orange가 되지 못하고 계속 black으로 머물러있을 것이다.

 

이 친구들은 영영 만날 수 없을까? 만나게 해주고 싶은데 말이지?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){ // (모든 문서가) .준비가 되면 (기능을 수행())해달라는 명령어
            $('#h1').css('color',"red");
        })
    </script>

    <h1 id="h1">견우와 직녀가 만나는 방법</h1>
</body>
</html>

$(document).ready(function(){ function()이 수행할 내용 })만 방법인가? 그렇지 않다.

위처럼 $(function(){ 코드 });를 사용해도 무방하다. 하지만 직관적이지 않은 언어는 나중에 코드 오류를 찾아 해결할 때 개발자와 유지보수하는 사람을 괴롭게 한다. 우리 모두 직관적인 코드를 작성하여 서로의 눈이 혹사되는 일이 없도록 도와주자.

728x90
반응형
저작자표시 비영리 변경금지

'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12 > JAVASCRIPT' 카테고리의 다른 글

21.01.26. JavaScript -  (0) 2021.01.26
21.01.19. JavaScript - 자료형, 연산자, 내부·외부·인라인스크립트  (0) 2021.01.19
'K-디지털 빅데이터 분석서비스 개발자과정 20.11.02~21.04.12/JAVASCRIPT' Related Articles more
Comments