수업 정리

47일차 수업정리(jquery)

Vita500cc 2020. 6. 12. 18:32

**javascript나 css에서 min.이 붙는 파일

    => 내용은 min.이 없는 파일과 같으나 줄바꿈이 공백을 없애서 파일의 크기를 최소화한 파일

    => min.이 없는 파일은 학습용, min. 배포용에서 사용

    => 특별한 경우가 아니면 다운로드 받아서 프로젝트에 삽입하는 형식으로 사용

 

**jquery

    => UI 구성, CrossBrowsing 구현을 쉽게 해주는 라이브러리

    => ajax 사용을 쉽게 해줌

    => 다양한 플러그인이 존재

1. 사용방식

    => 외부링크 이용

    => 다운로드 받아서 프로젝트에 포함시켜서 사용

2. jquery를 사용할 때 스크립트 순서

  1) jquery 링크 설정

  2) jquery plugin 링크 설정

  3) 사용자 스크립트

 

3. $(document).ready(function(){})

    => 문서의 구조파악이 끝나면 수행되는 이벤트 핸들러 지정

    => window의 load 이벤트와 유사한데 load 이벤트보다 먼저 처리

        - window.addEvnetListener("load", function(event){  })

    => jquery에서는 위의 코드 대신 아래 코드를 주로 사용

        - $(document).ready(function(){  })

 

4. jquery에서 선택자

    => 형식 : $('선택자')

    => 기본 선택자

        - $('*') : 전체 선택

        - $('태그이름') : 태그를 선택

        - $('.클래스이름') : 클래스를 선택

        - $('#아이디') : 아이디를 선택

 

5. 속성 접근

    => javascript : 속성에 직접 접근하여 값을 가져오거나 설정, jquery : 메소드를 호출하는 방식으로 속성에 접근

    => html 메소드와 val 메소드를 이용

        - html 메소드 -> innerHTML : 여는 태그와 닫는 태그 사이의 내용

        - val 메소드 -> value : 입력 도구의 값

        - html메소드나 val메소드에 매개변수 미대입시 getter의 역할, 매개변수 대입시 setter의 역할 수행

    => attr 메소드 : 속성이름 대입시 속성에 해당하는 값 리턴, 속성이름과 값 대입시 속성에 값을 설정

 

6. 객체의 순서를 설정하여 편집하는 메소드

    => after, before, append, appendTo, prepend, prependTo, clone 과 같은 메소드들이 존재

 

7. 스타일 시트 편집

    => 동적으로 스타일 시트를 편집하고자 하는 경우 style('속성명', '값')이용

 

8. 수치 조작

    => width, height, innerHeight, innerWidth등과 같은 메소드를 이용

 

9. 이벤트 핸들링

    => event : 객체에 발생하는 사용자의 동작이나 사용자의 동작으로 발생하는 시스템의 사건등

    => event handling : 이벤트가 발생했을 때 수행되는 코드를 작성

    => event handler : 이벤트가 발생했을 때 호출되는 함수나 메소드를 소유한 객체

  1) 별도의 함수를 이용

    => click(함수), dbclick(함수), hover(함수1, 함수2)등을 이용

  2) on, delegate, one등의 함수를 이용하여 이벤트와 함수를 같이 설정

    => delegate : 이벤트가 발생 했을 때 자신이 직접 처리하지 않고 다를 객체에게 이벤트처리를 위임

  3) preventDefault()

    => 기본적으로 제공되는 이벤트를 제거(수행하지 않음)

  4) stopPropagation()

    => 이벤트 버블링을 제거

    => 이벤트 버블링 : 부모와 자식요소에 동일한 이벤트에 대한 핸들러가 각각 존재하는 경우 자식 요소에 이벤트 발생

        시 자식 요소의 이벤트 핸들러가 호출되고 부모에게 이벤트를 전달

<!-- jquery 스크립트 설정-->
<script src="js/jqurey.js"></script>
<!-- 사용자 스크립트-->
<script>
/*     $(document).ready(function(){
        //자바스크립트를 이용한 스타일 변경
        document.getElementById("msg1").style.color="red";
        document.getElementById("msg1").innerHTML="글자 변경";
        //jquery를 이용한 스타일 변경
        $("#msg2").css('color', 'blue');
        $("#msg2").html("내용변경");

        //jquery의 이벤트 처리
        $('#outer').click(function(){
            $('#outer').css('color', 'red');
        });
        $('#inner').click(function(){
            $('#inner').css('color', 'blue');
            //이벤트 버블링을 취소
            event.stopPropagation();
        })
    }); */
</script>

<body>
<!--     <p id="msg1">javascript만으로 스타일 변경</p>
    <p id="msg2">jquery로 스타일 변경</p>

    <div id="outer">외부
        <p id="inner">내부</p>
    </div> -->
</body>

  5) trigger(이벤트 이름, 데이터)

    => 이벤트를 강제로 발생시키는 것

 

10. animation 관련 함수 추가

 

 

11. ajax 사용을 쉽게 해줌

    => ajax(Asynchronous JAvascript XML) : 비 동기적으로 데이터를 받아오는 기술

        - 전체화면의 갱신없이 데이터를 비동기적으로 받아와서 일부분만 수정하는데 주로 이용

        - SPA(Single Page Application)에서 많이 사용됨

    => 형식 : $.ajax(url, 옵션객체);

        - 옵션객체는 객체이므로 { }안에 묶어서 설정

        - async : Boolean 타입으로 설정하는데 비동기 여부

        - complete : 작업이 전부 끝나면 호출되는 핸들러 지정

        - data : 요청 파라미터(클라이언트가 서버에게 넘겨주는 데이터) - 객체의 형태로 설정

        - datatype : 결과로 넘어오는 데이터 타입을 설정 - xml, json, script, text등

        - success : 데이터를 가져오는데 성공한 경우 호출될 핸들러 설정

        - error : 데이터를 가져오는데 실패했을 경우 호출될 핸들러 설정

 

        - success에 핸들러를 지정할 때 매개변수를 1개 설정(매개변수는 전달된 데이터)

          => json : 파싱을 수행하여 객체형태로 대입, xml, html : 태그 형태로 전달

          => find메소드를 이용하여 원하는 태그를 골라내야 함

 

    => jsonp

        - ajax는 자신의 도메인 내의 데이터만 로드 가능, jsoup는 다른 도메인에서도 ajax 요청이 가능게 해주는 서비스

        - 서버에서 설정

        - 서버에서 jsoup를 미제공하는 경우 proxy서버를 구축하여 ajax로 요청시, 타 프로그래밍 언어가 다운로드를 받아

         서 다시 전달하는 형태로 구현 필요

 

12. 날씨 open api를 이용하여 ajax로 날씨를 가져와서 출력

  1) openweather API

    => https://openwheathermap.org 

    => 회원가입을 하고 api key를 받아야 함

    => api key : 8cb79fa7fc8457f9fc0c7c59625471a1

    => 도시이름으로 조회

        - http://api.openweathermap.org/data/2.5/weather?q=도시이름&APPID=앱키 

        - ex) http://api.openweathermap.org/data/2.5/weather?q=busan&APPID=8cb79fa7fc8457f9fc0c7c59625471a1

    => 도시 ID로 조회(서울)

        - http://api.openweathermap.org/data/2.5/weather?id=1835847&APPID=8cb79fa7fc8457f9fc0c7c59625471a1

    => 위도 경도를 이용하여 검색

        - http://api.openweathermap.org/data/2.5/weather?lat=위&lng=경&APPID=8cb79fa7fc8457f9fc0c7c59625471a1

 

  2) jquery 사용을 위한 설정

    => js 디렉토리 생성 : 자바스크립트, css, 사용하는 자원은 코드와 분리시켜 놓는 게 좋으므로 별도 디렉토리에 생성

    => 웹사이트에서 jquery를 다운로드

    => js 디렉토리를 만들고 코드를 붙여넣기

  3) html

  4) css 디렉토리를 만들고 

  5) weather.html 파일에 css 적용

  6) js 디렉토리에 javascript파일을 만들고 작성 - weather.js

  7) wather.html 파일에 스크립트 링크를 작성

    - <!-- 사용자 정의 스크립트 사용을 위한 설정 -->

       <script src="js/weather.js"></script>

    - { } : 객체 - 속성명  /  [ ] : 배열

 

13. openAPI 사용

  1) url : 요청 주소

    - http://dapi.kakao.com/v2/search/vclip 

  2) parameter - 클라이언트가 서버에게 넘겨주는 데이터

    => key-value 형태

    => 파라미터는 url?이름=값&이름=값...

    => ajax 요청을 할 때는 url뒤에 붙이지 않고 별도로 설정이 가능

        - {이름:값, 이름:값...}으로 생성한 후, javascript일 때는 send(생성한 객체)를 호출

        - jquery에서는 data:생성한 객체로 설정해도 됨

        - url 뒤에 붙이는 경우는 반드시 인코딩 해야하고 별도로 묶어서 전송하는 경우에는 자동으로 인코딩 설정

  3) header 존재 여부 확인

    => header도 파라미터와 동일한 방식으로 생성하고 data대신에 headers에 설정

  4) respons - result

    => open api 호출 결과

 

14. Kakao 동영상 검색 결과를 이용한 페이징 구현

  1) Kakao에서 검색 API를 사용하려면 rest api키가 있어야 함

    - key : f9e2c5d96fd9f8f18c1757ee858596ec

  2) html파일을 생성하고 본문을 작성

 

 

 

 

tip!

1. 디자인을 빠르게 하고 싶을때는 jqurey를 검색해서 넣고, bootstrap등의 사이트에서 가져다가 쓰자(font등)

2. 외래키 작성(primary key, unique)

1 : 1 -> 양쪽의 기본키를 상대방 테이블의 외래키로 추가

1 : N -> 1쪽의 기본키를 n쪽 테이블의 외래키로 추가

N : N -> 양쪽 테이블의 기본키를 외래키로 갖는 새로운 테이블을 생성 

저작자표시 (새창열림)