"jQuery"

저번에 이어서 jQuery를 계속해서 알아보겠다.

• attr( ) 속성에 관련된 함수

function my_func() {
    $(html:'[type = text]').val() 
    // 입력상자안에 사용자가 입력한 값을 알아오거나 그값을 다른값으로 대체!
    $(html:'[type = text]').val(value_function:'소리없는아우성') 
    //버튼 클릭시 안에 내용으로 바뀜 
    $(html:'[type = text]').attr(attributeName: 'value', value_function:'변경변경!')
}

• 위 두가지 방식을 이용하여 내용 변경이 가능하다!

function my_func() {
    $(html:'[type = text]').attr(attributeName:'disabled', value_function:'disabled') 
   //입력할수가 없는 상태로 바뀜!

  // 버튼을 눌렀을 때 사용가능한 형태로 만드는 방법
  // 일단 disabled로 잡혀있다. 속성 자체를 제거하면 된다.
    $(html:'[type = text]').removeAttr(selector:'disabled') 
  // disabled라는 속성을 날려버려라! 라는 의미
}

• 즉 removeAttr은 속성을 날려버림!

삭제에 대한 method

remove(), empty()

• remove() : 자기 자신과 후손을 모두 삭제함!
• empty() : 자기자신은 삭제하지 않고 후손만 삭제함!
• 형식

$(html:'ul').remove()
$(html:'ul').empty()

지금까지는 selector를 이용해서 element를 선택하고 method를 적용하는 방식을 이용했다.

새로운 element를 만드는 것은 해보지 않았다.
그렇담 새로운 element를 만들려면 어떻게 해야하나?

일단 selector를 사용하지 않는다!. selector는 기존에 만들어진 element를 찾아오는 역할을 담당한다.

그렇기 때문에 selector를 사용하지 않는다.

• element를 만드는 형식

• 태그를 직접 작성해 주면된다.
• 끝 태그를 반드시 같이 병시해 줘야한다!

$(html:'<li></li>')
// 여기까지 작성하면 <li></li>가 만들어진다!

$(html:'<li></li>').text(text_function:'신사임당')
// element => <li>신사임당</li> 이런식으로 만들어진다!

• 그렇다면 img처럼 끝 태그가 없는 경우는 어떻게 작성하는가?

// ex) <img src = "img/캡처.PNG">
$(html:'<img />').attr(attributeName:'src', value_function:'img/캡처.PNG')
// 이런식으로 작성하면된다 끝 태그가 없는 경우 '/'를 붙여서 끝을 닫아 주도록 하자!

• 위에 나온바와 같이 element를 생성하면 이제 method를 통해 화면에 추가할 수있다!
• 화면에 추가하는 method는 4개가 있다
  • appdne()
  • prprend()
  • after()
  • before()
• 각 형식에 대해서 알아보자! 당연히 구분할줄 알아야한다!

• append( ) : 자식으로 추가하고 맨 마지막 자식으로 추가한다!

<!--html-->
<!-- input button이 생략되었다. 참고하길 바란다 -->
<!-- 작성 형태가 이해가 안되면 앞서 작성한 여러 예제 코드를 참고하길 바란다-->
<ul>
  <li>아이유</li>
  <li>홍길동</li>
  <li>김연아</li>
</ul>

// javacrript
function my_func() {
	let li = $(html:'<li></li>').text(text_function:'신사임당')
    // li라는 변수를 <li>신사임당</li>이라는 태그를 넣어준다.
    $(html:'ul').append(li)
    // 선언한 변수를 append안에 집어넣어 select된 ul안에 집어 넣는다
}

결과

<!--html-->
<ul>
  <li>아이유</li>
  <li>홍길동</li>
  <li>김연아</li>
  <li>신사임당</li>
</ul>

• 다음과 같이 출력되는 것을 볼 수 있다!

• prepend( ) : 자식으로 추가하고 맨 앞에 추가한다.

<!--html-->
<ul>
  <li>아이유</li>
  <li>홍길동</li>
  <li>김연아</li>
</ul>

// javacrript
function my_func() {
	let li = $(html:'<li></li>').text(text_function:'신사임당')
    // li라는 변수를 <li>신사임당</li>이라는 태그를 넣어준다
    $(html:'ul').append(li)
    // 선언한 변수를 prepend안에 집어넣어 select된 ul안에 집어 넣는다
}

결과

<!--html-->
<ul>
  <li>신사임당</li>
  <li>아이유</li>
  <li>홍길동</li>
  <li>김연아</li>
</ul>

• 다음과 같이 출력되는 것을 볼 수 있다!

• after( ), befor( )

<li>아이유</li>
<li>홍길동</li>
<li>신사임당</li>
<li>김연아</li>
<!--이렇게 사이에 신사임당 키워드를 추가하고 싶으면 어떻게 해야하나?-->
<!-- after와 befor를 사용하면 된다! -->

• after( ) : 형제로 추가하고 바로 뒤에 추가
• befor( ) : 형제로 추가하고 바로 앞에 추가

//<li>신사임당</li>가 생성된거로 치고 생략하겠다.
// 이제는 관계가 자식관계가 아닌 형제관계이기 때문에 형제 관계를 확인해서 작성해 주어야한다.
$(html:'ul > li:last').before(li)
$(html:'ul > li:eq(1)').after(li)

<li>아이유</li>
<li>홍길동</li>
<li>신사임당</li>
<li>김연아</li>
<!-- 위의 코드를 사용하여 after와 befor를 이용하면 두개다 같은 결과가 나온다!-->

"Event"

1. selector를 했고
2. method도 확인했다.
3. event에 대해 알아보도록 하자!

• event는 사용자가 행하는 모든 행위를 이벤트라고 할 수 다.

event가 가지는 개념

1. event source : 현재 event가 발생한 객체를 의미

• 예를들어 input 상자를 마우스로 클릭한다 했을 때 event source는 input element가 된다!

2. event handler : 이벤트가 발생이 되면 처리를 해야한다!

• 즉 이벤트가 발생했을 때 특정 처리를 하는 javascript 함수

3. event 속성(attribute)

• html에서 on~, on~ 이런식으로 만들어지는 속성이 event 속성이다.
• ex) onclick, onselect 등
• HTML 속성으로 event 처리를 지정해주기 위해서 사용한다!

즉 event를 event source가 직접 처리하지 않음, 대신 이벤트 속성을 통해 이벤트 핸들러를 이용해서 처리하는 방식
=> 이것을 Deligation Model 이라고함! (이벤트 위임 모델)

• event는 정해져 있음

  • event명
  • click
  • dbclick(더블 클릭),
  • keypress(키보드를 누르는것)
  • mouse move(마우스를 움직이는것)
  • ...

• 다양한 이벤트가 많다.

• event 속성은 다음과 같이 만들어진다.

  • [on + event명]

• 예제를통해 알아보자!

• input을 통해 버튼을 생성하는 과정은 편의상 생략하겠다.
• html

<li>아이유</li>
<li>홍길동</li>
<!-- on + event명 : event 속성을 이용해서 event 처리
이 방식은 순수 JavaScript Event 처리 방식 => this를 사용 못함
만약 this를 이용하고 싶으면
jQuery Event처리 방식으로 Event를 처리해야한다! -->
<li ondbclick="my_func2()">김연아</li>

• 주석처리 내용처럼 event를 처리하기위해선 this를 사용해야한다. 하지만 this를 이용하기 위해선 jQuery방식으로 작성해야한다.!
• javascript

function my_func2() {
    alert('소리없는 아우성!')
}

--> 화면에 출력되는 김연아를 더블클릭하면 알림창이 뜬다!

• 그렇담 각 이름을 더블 클릭시 화면에 각 이름알림창이 뜨도록 해보자!
• javascript

function my_func2() {
	// this : event handler안에서 의미를 가지는 객체
    // event source에 대한 문서객체(document object)를 지칭
    // $(selector or documet object) ==> jQeury 객체로 변환

   alert($(this).text()) // 해당 코드가 작동하지 않는다!?
  // jQuery Event에서만 사용이 가능하다.
}

• event를 작동시키기 위해 javascript event방식 말고 jquery 방식으로 event를 처리해보자!
• html

<ul>
  <li>아이유</li>
  <li>홍길동</li>
  <li>김연아</li>
</ul>
<input type = 'button' value='클릭클릭' onclieck='my_func()'>

• javascript

// event handler
function my_func() {
	// <li>김연아</li>를 찾아서
    // Event 처리를 등록(jQuery방식으로)
    // Event 처리를 등록하려면 on method를 이용

   $(html:'ul > li').on(events:'click', handler: function() {
    	// this를 사용할 수 있어요!
    	alert($(this).text())
  })
}

• 이벤트 몇개만 더 알아 보겠다
• 특정 영역으로 들어가는 이벤트
  • mouse enter
• 특정 영역 벗어나면
  • mouse leavs

• 예제 ( html 문서는 위에와 일치하다고 치고 jQuery문만 작성하겠다)

// event handler
// 각각에 따라 다른 처리를 진행해야한다
function my_func() {
   $(html:'ul > li').each(function(idx, item) {
    	// jQuery Event 처리 방식
    	$(item).on('mouseenter',function() {
          $(this).css('color','red')
        })
        $(item).on('mouseleave',function() {
          $(this).css('color','black')
        })
   })
}

지금 까지는 버튼을 눌러서 이벤트를 처리해 봤다.
이번에는 버튼을 클릭하지 않고 글자색을 바꾸는 이벤트를 처리해 보도록하자!

• 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="js/jQuery09.js"></script>
</head>
<body>
    <ul>
        <li>아이유</li>
        <li>김연아</li>
        <li>홍길동</li>
        <li>신사임당</li>
    </ul>
</body>
</html>

• html 코드의경우 위에서부터 한줄 한줄 해석한다. 하지만 script태그안의 jquery를 참조하는 부분을 실행 하면 당장 body안에 들어간 내용이 아직 현재 browser에 없기 때문에(읽지 않았기 때문) 아무런 변화가 없다!
  
  
• 그렇담 위에 말한 이벤트를 처리하기 위해선 html문서를 다 읽은 다음 돔트리가 완성된 후 javascript안에 코드가 실행이 되어야 한다!
• 어떻게 해야할 까? 자체도 이벤트 처리하면 된다!

// 버튼을 클릭하지 않고 글자색 바뀌게 하기
// $(document) //내용나오는 흰색 browser화면을 지칭

// html에 내용이 브라우저에 나타나는 순간이 document ready가 실행되는 시점!
// 이 방식으로 쓰는 것이 원형!
// $(document).on('ready', function() {
//     $('ul>li').each(function(idx, item) {
//         // jQuery Event 처리 방식
//         $(item).on('mouseenter', function () {
//             $(this).css('color', 'red')
//         })
//         $(item).on('mouseleave', function () {
//             $(this).css('color', 'black')
//         })
//     })
// })
// 시점을 html이 다읽혀진 이후로 실행시간을 돌릴 수 있다!
// $(document).on('ready', function() 이것의 경우 위의 코드가 길어서 축약형태로 사용한다 
// 어떻게 축약하나?  $() : document ready를 의미 따라서
$(function() {
    $('ul>li').each(function(idx, item) {
        // jQuery Event 처리 방식
        $(item).on('mouseenter', function () {
            $(this).css('color', 'red')
        })
        $(item).on('mouseleave', function () {
            $(this).css('color', 'black')
        })
    })
})

"Ajax"

Asynchronous Javascript And XML

• 비동기 자바스크립트 통신방법이라고 부른다
• 자바스크립트로 서버쪽 프로세스를 호출하는 방법이다.
  
  

web client에서 web server로 request를 보냈을 때 static web의 경우 바로 response가 가능하다!

하지만 dynamic web 즉 프로그램 실행을 요청 했을 경우
web server가 그안에 있는 프로그램을 실행해서 결과를 리턴해 주는 식으로 진행된다
=> CGI (common gateway interface)라 부른다.

• 이러한 과정을 사용 하던 더중 web server의 로드도 길어지고 메모리도 많이먹고 프로세스 단위로 실행되는 단점이 있다.
• 결국 변경이 되는데

똑같이 dynamic web인데 안쪽에 있는 프로그램을 독립적으로 실행시키고 web server와 유사한 기능을 하는 container라는 프로그램을 사용하게 된다!

• client가 요청해서 실행시키고 싶은 프그램들을 container로 옮김
• 실행시켜 주는 주최가 container로 바뀜

web client -----> web server -----> container (WAS)라 부름(Web Application Server)

• 이런식의 구조를 가지게 된다.
  
  

• static web의 경우

1. client에서 web server에게 request하여 바로 처리 가능하면

2. web server에서 client에게 response해준다.

   
   

• dynamic web의 경우

1. client에서 web server에게 프로그램 실행을 요청

2. web server에서 container에게 가지고 있는 프로그램을 실행을 요청 한다.

3. container에서 결과를 response해서 web server에게 넘겨준다.

4. web server는 다시 그 결과를 web client에게 response해주는 방식을 이용한다.

이렇게 client와 server가 데이터를 주고받으면서 browser를 띄워 실행시켰던 방식중 하나가 Round - Trip 방식이라 할 수 있다.

page refresh 방식이라고 부른다.

• web page가 강제로 갱신된다!
• server로부터 response가 올때마다 실행된다.
• 즉 클라이언트가 request를 요청했을 때 server로 부터 response를 받아 html,css,..등 모든걸 받으면
• 다시 web page가 강제로 갱신되면서 페이지가 다시 그려짐
  
  
• 예를 들어 우리가 네이버 창에서 스포츠 뉴스를 눌러 들어가면 그 페이지로 이동한다는 개념이 아닌 다시 그림이 그려진다고 보면된다!

• Round -Trip 방식은 두가지 특성이 있다!
  • 데이터 양이 많아짐
  • web 페이지가무조건 다시 그려짐
• 사람들은 이런 Round -Trip방식보다 더 효율적인 방식을 찾기 시작하였고 SPA라는 방식을 이용하게 된다!

SPA 방식

• 다음과 같은 형식을 가진다.

web client(내부에 ajxa engine존재) ---> web server ---> WAS

HTML / CSS / JavaScript로 된 Front_End web application을 다운로드한다.

• 최초의 한번은 이렇게 다운로드해서 화면에 찍음
• 그 다음 ajax engine을 통해 다음에 request를 보낼때 ajax를 통해서 보내게 됨
• response결과로 data(json)이 오게됨
• 결과 데이터를 가지고 이미 가지고 있는 화면에 데이터를 현재 화면에 적용시켜 바꿈
• 전체 page의 refresh가 일어나지 않고 일부분만 다시 그림
  
  
• 결국 data만 왔다갔다 하기 때문에 데이터의 양이 적고
• 화면에 refresh가 되지 않음
  = Single Page Application이라고 부름(SPA)
• 요즘은 이방식을 이용함

웹상에서 여러가지 목적으로 사람들이 만들어 놓은 프로그램이 있다.

영화 진흥 위원회가 제공하는 open api를 이용해 보도록 하자.

request URL을 이용하려면
기본 URL + 요청 Parameter 변수형식으로 작성하면된다

• 요청 Parameter변수 ==> [?변수=값&변수=>값&변수=값] 이런식으로 나온다.
• 이런 형식의 문자열을 Query string이라 한다.

• 영화 진흥 위원회 Open API
  
  
• 기본 URL(json형식으로 이용한다) :http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json
• 요청 Parameter(Query String)
  ?key=74a66d13424d80d8f869a5824b66a2d6&targetDt=20220206
• request URL 두개를 합친 값
  : http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=74a66d13424d80d8f869a5824b66a2d6&targetDt=20220206
  
  다음과 같은 창이 뜨는것을 볼 수있다!

json

json에 대해 잠깐알아보도록 하자

• JSON은 속성-값 쌍 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다.

• json의 발전 과정

1. csv (데이터 전송 표준) (comma seperated value)
ex) 아이유, 20, 서울, 김연아, 30, 대구, 홍길동, 50, 인천...

• 콤마 기준으로 데이터를 주고받음
• 장점)
  • 부가적인 데이커가 적음 -> 대용량 데이터 처리에 좋음
• 단점)
  • data paser를 직접 구현해야함!, data 구조 표현이 어려움, 유지보수 어려움

2. XML (Extended Markup Language)
ex) < name >아이유< /name >< age >20< /age >< address >서울< /adress >...

• html과 비슷 하지만 html과 다르게 내가 태그를 만들 수 있음!
• csv가 가지는 단점을 극복하기 위해 나옴
• 장점)
  • xml parser가 존재해서 직접 구현 안해도 됨!
  • 데이터 구조가 바껴도 paser가 알아서 처리하기 때문에 유지보수가 좋음
  • 데이터 구조화가 가능
• 단점)
  • 부가적인 data가 커짐
• 하지만 예전에는 장점만 부각되고 단점은 부각되지 않음!

3. JSON( JavaScript Object Notation)
ex){name : "아이유", age : 20, address : "서울" }

• 장점)
• 유지보수 좋음
• 데이터 구조화 표현 쉬움
• XML에 비해 data size가 작음

=> 3 가지 방식 보두 데이터를 표현하는 문자열이다.

예제

• 이제 Open API를AJAX 방식으로 호출해 보도록 하겠다
• JavaScript를 이용해서 호출한다 -> jQeury로 호출이 쉽고 편하게 가기위해 사용하는 것이다.

• html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="js/jQuery10.js"></script>
</head>
<body>
    <div id="myDiv">여기에 내용이 나와야 합니다!</div>

    <input type="button" value="AJAX호출" onclick="my_func()">
</body>
</html>

• javascript

function my_func() {
    //button 클릭하면 AJAX 호출 할거임
    // JavaScript code로 Open API를 호출할 거임
    // $.ajax()로 AJAX를 호출을 함! 당연히 request에 대한 정보, 기타등등의정보
    // 이런내용이 호출에 포함되어야 한다!
    // 이런내용들은 여러정보들이 들어가야 하기 때문에 JavaScript 객체로 표현해서
    // AJAX()함수의 인자로 넘겨줌!
    // key값은 정해져 있다

    $.ajax({
        // async는 동기인지 비동기인지 알려줌
        async: true, //비동기인지 동기인지를 명시 / 대소문자 구분 // 비동기방식임

  // 기본 URL
        url:  'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json',

        // 입력 Parameter
        // 아까 기존에 사용한 Query String을 사용하지 않고 구분해서 사용한다.
        data: {
            key : '74a66d13424d80d8f869a5824b66a2d6',
            targetDt : '20220206'
        },

        // 호출방식 method를 사용한다.
        method : 'GET',

        // timeout 설정(밀리 세컨드 단위 1/1000초)
        // 정해진 시간안에 response가 오지 않으면 AJAX호출이 실패했다고 간주!
        timeout: 3000,

        // 결과로 전달되는 JSON은 문자열, 이문자열은 처리하기가 힘듦!
        // json은 javascript와 형태가 똑같음
        // javascript객체로 변환!
        dataType : 'json', //나한테 결과로 오는건 json문자열 이지만 너가 javascript객체로 바꿔주세요! 라는 의미

        // 만약 성공하면 아래의 함수가 호출(람다함수 호출)
        // result 나한테온 json 문자열을 javascript객체로 변환시켜 result로 들어옴
        success: function(result) {
            console.log(result)
        },
        // 만약 호출에 실패하면 아래의 함수가 호출(람다함수)
        error: function() {
            alert('오류?????!!!')
        }
    });
}

✍ 결과

• 다음과 같이 콘솔창에 영화진흥위원회를통해 나오는 정보를 가져올 수 있다!

이제 일별 박스오피스에서 1위에 있는 영화제목을 버튼 클릭 시"여기에 내용이 나와야 합니다!로 불러와 영화제목이 표시되도록 작성해 보도록 하자

• html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="js/jQuery11.js"></script>
</head>
<body>
    <div id="myDiv">여기에 내용이 나와야 합니다!</div>

    <input type="button" value="AJAX호출" onclick="my_func()">
</body>
</html>

• javascript

function my_func() {
    //AJAX 호출
    $.ajax({
        async: true,   // 동기 혹은 비동기 호출을 지청
        url : 'http://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json%27,// 내가 호출하려는 main 링크
        data: {
            key : '74a66d13424d80d8f869a5824b66a2d6',
            targetDt : '20220209'
        },
        method : 'GET',
        timeout : 3000,
        dataType :'json',
        success : function (result) {
           let m_title = result["boxOfficeResult"]["dailyBoxOfficeList"][0]["movieNm"]
           //리스트 형식으로 object안에서 찾을 데이터를 써주면 된다.
           //[0]은 인덱스 번호와 마찬가지로 첫번째를 의미한다.
            $('#myDiv').text(m_title)
        },
        error : function () {
            alert('먼가 이상해요!')
        }
    })
}

✍ 결과


다음과 같이 버튼을 클릭하면 그 날 박스오피스 순위 1위 내용으로 바뀌는 것을 확인 할 수 있다!