모도리는 공부중

21.01.26. JavaScript - 본문

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

21.01.26. JavaScript -

공부하는 모도리 2021. 1. 26. 09:56
728x90
반응형

저번시간 복습

 

 

자바스크립트를 이용하면 2문장을 이용해야했지만 제이쿼리를 이용하면 한 문장으로 간단하게 끄읕.

 

compressed와 uncompressed가 있는데 이 중 compressed를 주로 사용. 차이는 공백이 있고 없고의 차이.

코드를 수정할 필요없이 어차피 그대로 가져다 쓸 것이기 때문에 현업에서는 compressed를 사용하는 편이다.

 

$ is not fined? 맞나? 암튼 달러를 못 찾겠다는 오류가 뜬다면 제이쿼리를 불러오지 않았을 가능성이 높으므로 항상 코드를 잘 들여다보자.

 

 

스타일을 객체화시켜서 한 번에 적용할 수 있다.

왼쪽보다 하나로 묶인 오른쪽을 더 선호한다. 실제 현업에서도 오른쪽을 주로 사용.

 

 

자, 그럼 오늘의 진도를 나가볼까요?

 

Element Selector

 

기본 선택자는 html 요소 선택

기본 선택자
$('*')
$('요소명')
$('#아이디명')
$('.클래스명')
$(this)
$('선택1,선택2,선택3,…,선택n')

 

계층 선택자는 css를 적용하기 위한 선택?

계층 선택자
$('요소선택 자손요소')
$('요소선택 > 자식요소')
$('요소선택+형제요소')
$('요소선택').parents()
$('요소선택').children()
$('요소선택').prevAll()
$('요소선택').nextAll()

 

 

on() 메소드로 적용할 수 있는 Event의 종류는 다음과 같다.

이벤트

설명

click / dblclick

마우스 버튼을 클릭한 순간 발생 / 마우스 버튼을 더블 클릭했을 때 발생

mouseover

마우스를 HTML요소 위에 올리면 발생

mouseout

마우스를 HTML요소 밖으로 벗어날 때 발생

mouseup

마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 발생

focus

HTML요소에 포커스 되었을 때 발생

blur

HTML요소가 포커스에서 벗어났을 때 발생

resize

요소의 크기를 다시 설정했을 때 발생

keydown

키를 누를 때 발생

keyup

키를 눌렀다가 떼는 순간 발생

load

웹 페이지에서 사용할 모든 파일의 다운로드가 완료되었을 때 발생

change

form 필드의 상태가 변경되었을 때 발생

submit

form 요소에 전송 버튼을 눌렀을 때 발생

 

Q. on()메소드를 이용하여 마우스를 글자 위에 올렸을 때 기능이 실행되는 스크립트 작성

<!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> 비가 오네요 </h1>

    <script>
        // h1태그에 마우스를 올렸을 때 글자색 변경하는 코드 작성.
        $('h1').on('mouseover', function () {
            $('h1').css('color', 'skyblue');
        })
        // h1에.기능을 붙인다('마우스 올렸을 때',뒤에 나올 기능을 실행하라(){
        //     h1에.스타일을 줘라('색깔','무슨색?');
        // })
        $('h1').on('mouseout', function () { // 마우스 뗐을 때도 기능을 줘야겠죠?
            $('h1').css('color', 'black');
        })
    </script>
</body>

</html>

'비가 오네요'라는 글씨에 마우스를 올리면 skyblue로 변하게 기능을 준 상태.

단순히 코드만 놓고 봤을 때는 hover가 더 편하다. 근데 어떠한 이유 때문에 이렇게 script를 통해서 효과를 주고 있는 건지 생각해보셨나요?

- 스타일 변경 외에도 다른 기능을 더 줄 수 있어서!

 

기능 구현을 더 해줄 수가 있다면 어떤걸 실험해볼까?

$('h1').on('mouseover', function () {
	$('h1').css('color', 'skyblue');
    alert('비가 오면 파전이지!');
})

이제 마우스만 올리면 팝업이 뜰 것이다. 계속 닫아줘야 돼. 귀찮고 신나는구나!

 

<!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> 아침인데 어두워요 </h1>

    <script>
        // 객체 타입을 한 번에 붙여 사용하는 방법. 다중 이벤트 등록.
        $('h1').on({
            'mouseover' : function(){
                $('h1').css('color','darkblue');
            },
            'mouseout' : function(){
                $('h1').css('color','black');
            }
        })
        // key에는 value가 존재한다. value에 어떤 기능을 줄 것인지 정의. 구분은 쉼표로.
    </script>
</body>

</html>

 

단독 이벤트와 그룹 이벤트의 차이는 무엇일까?

그룹의 경우 on을 만나면 등록된 이벤트를 일단 모두 불러오고 나서 특정사건을 찾아 실행을 한다. 이렇다보니 메모리적 측면에서 효율은 단독이벤트가 조금 더 좋지만 실제 현업에서의 이벤트 사용은 그룹을 더 많이 사용한다.

 

this, 아까 봤을 때 정말 궁금했던 이 키워드는 무엇일까? 이것을 확인하기 위해 글을 하나 더 입력해보자.

<!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> 아침인데 어두워요 </h1>
    <h1> 이미 집이지만 집에 가고 싶어요 </h1>

    <script>
        // 객체 타입을 한 번에 붙여 사용하는 방법. 다중 이벤트 등록.
        $('h1').on({
            'mouseover' : function(){
                $('h1').css('color','darkblue');
            },
            'mouseout' : function(){
                $('h1').css('color','black');
            }
        })
        // key에는 value가 존재한다. value에 어떤 기능을 줄 것인지 정의. 구분은 쉼표로.
    </script>
</body>

</html>

마우스를 올려보면,

 

두 줄 모두 색이 같이 변한다. 그럼 h1대신 this를 사용하면?

<!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> 아침인데 어두워요 </h1>
    <h1> 이미 집이지만 집에 가고 싶어요 </h1>

    <script>
        // 객체 타입을 한 번에 붙여 사용하는 방법. 다중 이벤트 등록.
        $('h1').on({
            'mouseover' : function(){
                $(this).css('color','darkblue');
            },
            'mouseout' : function(){
                $(this).css('color','black');
            }
        })
        // key에는 value가 존재한다. value에 어떤 기능을 줄 것인지 정의. 구분은 쉼표로.
    </script>
</body>

</html>

내가 마우스를 올린 글자에만 글자색이 변하는 것을 확인할 수 있다. 이처럼 this는 그 부분에만 속성이 적용되게끔 만들어주는 역할을 한다. 실제로 프로젝트를 진행하다보면 여러분도 this를 많이 이용하게 될겁니다!

 

 

 

 

<!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>
    <style>
        .box-style-1{
            background-color: red;
            width : 200px;
            height : 200px;
            cursor : pointer;
        }
        .box-style-2{
            background-color: black;
            width : 300px;
            height : 300px;
            cursor : default;
        }
    </style>
</head>
<body>
    <div id="box" class="box-style-1"></div>
</body>
</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>
    <script src='jquery-3.5.1.min.js'></script>
    <style>
        .box-style-1{
            background-color: red;
            width : 200px;
            height : 200px;
            cursor : pointer;
        }
        .box-style-2{
            background-color: black;
            width : 300px;
            height : 300px;
            cursor : default;
        }
    </style>
</head>
<body>
    <div id="box" class="box-style-1"></div>

    <script>
        $('#box').on('click',function(){
            $('#box').addClass('box-style-2');
        })
        // id가 box인 친구를 가져와서.on('클릭했을때',기능을줄겁니다())
    </script>
</body>
</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>
    <script src='jquery-3.5.1.min.js'></script>
    <style>
        .box-style-1{
            background-color: red;
            width : 200px;
            height : 200px;
            cursor : pointer;
        }
        .box-style-2{
            background-color: black;
            width : 300px;
            height : 300px;
            cursor : default;
        }
    </style>
</head>
<body>
    <div id="box" class="box-style-1"></div>

    <script>
        $('#box').on('click',function(){
            if($('#box').hasClass('box-style-1')){
                $('#box').addClass('box-style-2');
                $('#box').removeClass('box-style-1');
            }else{
                $('#box').addClass('box-style-1');
                $('#box').removeClass('box-style-2');
            }
        })
        // id가 box인 친구를 가져와서.on('클릭했을때',기능을줄겁니다())
    </script>
</body>
</html>

이제 클릭할 때마다 내가 원하는대로 바뀌는 것을 볼 수 있다.

 

 

.animate는 실습은 아니고 코드를 전달해주셨으니 그 코드를 뜯어보면서 직접 공부해보도록 하자.

 

 

비동기방식 : 내가 필요한 정보들만 서버에 요청한다.

 

비동기통신방식은 한 번 받은 내용을 계속 사용한다. 기존에 받은 정보는 그대로 두고 화면이 바뀔 때 화면 전체가 바뀌는 것이 아닌 딱 필요한 부분에만 새로고침이 적용되는 방식을 비동기방식이라고 부른다.

그럼 우리가 배운 동기통신방식은? - form태그. 값을 가지고 그대로 이동하는 form태그는 동기통신방식이라고 할 수 있다.

 

그럼 이런 비동기통신방식은 어디에서 주로 사용되는가?

 

Ajax (Asynchronous JavaScript and XML)
  • 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 진행하는 비동기적인 웹 어플리케이션을 제작하기 위한 웹 개발 기법
  • 사용자 입장에서는 화면갱신도 없고, 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다.

 

 

 

두 개의 html을 만들어봅시다.

 

txt.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>다른 페이지 데이터</h1>
</body>
</html>

0126_9.ajax.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>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <button onclick="txt()">데이터 요청</button>

    <script>
        function txt(){
            $.ajax({
                url : "txt.html", //쉼표를 찍어야 값을 구분지을 수 있다.
                type : "GET",
                success : function(result){ //매개변수 result
                    alert("연결 성공")
                },
                error : function(){
                    alert("연결 실패")
                }
            })
        }
    </script>
</body>
</html>

만약 '연결 실패'가 뜬다면 txt.html 파일명을 한 번 확인해보기를 권한다.

 

 

 

오우.. 잘 졸았나보다... 이 부분은 이따가 다시 정리하는 걸로~.

 

 

 

JSON (JavaScript Object Notation)

  • 속성-값 쌍으로 이루어진 데이터를 전달하기 위한 개방형 표준 포맷
  • 데이터 형식 - { "key" : "value" }
  • 데이터 자료형
    • 문자열 - "name" : "홍길동",
    • 숫자(정수) - "age" : 100,
    • 숫자(실수) - "weight" : 70.5,
    • true/false - "baby" : false,
    • JSON
    • object
    • null

 

 

 

 

<!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>
    <button onclick="txt()">영화 정보 요청</button>
    <div id="box"></div>

    <script>
        function txt(){
            $.ajax({
                // url은 우리가 직접 잘 구동되는 것을 확인했으니 오류가 날 수 없다.
                url : "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=07ab6ea2cfb6ab88fa504c44463e545b&targetDt=20210101",
                type : "GET",
                success : function(res){
                    alert("연결 성공")
                },
                error : function(){
                    alert("연결 실패")
                }
            })
        }
    </script>
</body>
</html>

이제 연결 성공이나 실패시 설정해놓은 팝업이 뜨는 것을 확인할 수 있다.

잘 연결되는 것을 확인했으면 alert를 지우고 console에서 해당 정보를 가져오는 코드로 변경.

<!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>
    <button onclick="txt()">영화 정보 요청</button>
    <div id="box"></div>

    <script>
        function txt(){
            $.ajax({
                // url은 우리가 직접 잘 구동되는 것을 확인했으니 오류가 날 수 없다.
                url : "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=07ab6ea2cfb6ab88fa504c44463e545b&targetDt=20210101",
                type : "GET",
                success : function(result){
                    console.log(result)
                },
                error : function(){
                    alert("연결 실패")
                }
            })
        }
    </script>
</body>
</html>

 

이제 콘솔에서 내가 원하는 정보를 찾기 위해 캡쳐본을 하나씩 들여다봅시다.

 key : value이며 value는 또 하나의 객체이다.

내가 원하는 경로를 찾았으니 이걸 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>
    <script src="jquery-3.5.1.min.js"></script>
</head>
<body>
    <button onclick="txt()">영화 정보 요청</button>
    <div id="box"></div>

    <script>
        function txt(){
            $.ajax({
                // url은 우리가 직접 잘 구동되는 것을 확인했으니 오류가 날 수 없다.
                url : "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=07ab6ea2cfb6ab88fa504c44463e545b&targetDt=20210101",
                type : "GET",
                success : function(result){
                    for(var i=0; i<result.boxOfficeResult.weeklyBoxOfficeList.length; i++){
                        console.log(result.boxOfficeResult.weeklyBoxOfficeList[i].movieNm)
                    }
                },
                error : function(){
                    alert("연결 실패")
                }
            })
        }
    </script>
</body>
</html>

 

영화 제목과 함께 개봉일까지 가져와봅시다. 개봉일은 아까 캡쳐본을 참고하면 어디에 위치해있는지 알 수 있으며 어렵다면 영화 오픈 api를 가져온 사이트를 참고해도 좋습니다.

<!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>
    <button onclick="txt()">영화 정보 요청</button>
    <div id="box"></div>

    <script>
        function txt(){
            $.ajax({
                // url은 우리가 직접 잘 구동되는 것을 확인했으니 오류가 날 수 없다.
                url : "http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchWeeklyBoxOfficeList.json?key=07ab6ea2cfb6ab88fa504c44463e545b&targetDt=20210101",
                type : "GET",
                success : function(result){
                    for(var i=0; i<result.boxOfficeResult.weeklyBoxOfficeList.length; i++){
                        console.log(result.boxOfficeResult.weeklyBoxOfficeList[i].movieNm); //영화제목
                        console.log(result.boxOfficeResult.weeklyBoxOfficeList[i].openDt); //개봉일
                    }
                },
                error : function(){
                    alert("연결 실패")
                }
            })
        }
    </script>
</body>
</html>

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

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

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