Jquery

세모네모동굴배이·2021년 4월 6일
0
post-custom-banner

jQuery

  1. javaScript 동일하다.

  2. javaScript 는 브라우저에 엔진이 포함되어 있어서 브라우저에 종속 되어 있다.
    브라우저( 또는 같은 브라우저라도 버전이 다르면)
    마다 자바스크립트 엔진이 달라서 기능이 상이하게 동잘 할 수 있다.

  3. 브라우저에 비종속 개념으로 javaScript를 함수 화 한 것이 jQuery 이다.

  4. jQuery 는 vender 만든 외부 라이브러리 를 사용한다. : CDN
    vender : jquery.com, google.com, oralce.com, daum.net, 카카오 .. etc.

  5. jQuery 도 버전이 현재 1, 2, 3version 까지 나왔는데
    jQuery 버전별로 브라우저를 지원하는 것이 달라서
    브라우저에 따라 jQuery 버전을 잘 선택해야 한다.

  6. javaScript --> jQuery --> ECMAScript 5, 6 을 사용하세요 ...

  7. compressed : 압축 버전 min : 서비스 할 때 사용
    uncompressed : 비압축 버전 : 개발할 때 사용
    외산 어플리케이션을 사용하는데 jQuery 가 있는데
    compressed, uncompressed 버전이 같이 있어 : 그냥 두는 것

compressed

uncompressed

보안을 위해서
intergrity : URL의 해시값 : 해시값 비교해서 값이 다르면 해당 스크립트를 실행하지 않음
subdomain
crossorigin : CORS(Cross Origin Resource Sharing) 사용 : 다른 도메인에서 연결

  1. jQuery 다운로드
    https://jquery.com/download/ 페이지 맨 밑에
    Past Releases
    All past releases can be found on the jQuery CDN.
    이용하기

  2. jQuery 는 함수로 구성 되어있다.
    함수를 사용하는데 함수를 여러개 사용할 때는 . (링크 연산자)를 이용해서
    chain 형태로 사용한다.
    (Method Chaining : 다른 함수를 지속적으로 호출하는 릴레이 방식의 프로그래밍 패턴).
    함수().함수().함수();

jQuery 선택자(Selector)

$(selector) or jQuery(selector)
: jQuery()보다 표현상 간단한 $()를 더 많이 사용.

CSS Selector

$(this) : 자기 자신을 나타냄.

$("*") : All Selector ; 모든 엘리먼트 선택

$("#id") : ID Selector : 유니크 하개 엘리먼트 하나만 적용

$(".class name") : Class Selector : 엘리먼트 여러개 할 때

$("element name") : Element Selector, 특정 요소 모두 가져오기
ex) $('div') : 문서안의 모든 div엘리먼트를 선택

$("element#id") : 특정 엘리먼트 중 해당 id 를 가진 엘리먼트 선택
$("element.class") : 특정 엘리먼트 중에 클래스명이 class 인 엘리먼트를 선택

// 엘리먼트는 계층구조를 가지고 있으며 배열 구조로 되어있다.
// 엘리먼트는 부모, 자식, 형제 관계를 가지고 있다.
// 자기자신 엘리먼트를 중심으로 부모, 형제, 자식 관계를 갔는다.
$("s1, s2, s3, ..") : Multiple Selector, 다중 선택자 : 다중 요소를 가져올때는 콤마(,) 사용 구분

$(":input") : 입력(Input)요소 가져오기 ; 모든 입력 관련되 요소에 대한 선택 기능.

$(":contains()") : 특정 요소의 내용에 포함된 요소 가져오기
//myContainer 단어가 포함된 div요소들 가져오기, 대소문자 구분.
ex) $('div:contains("myContainer")');

$(":even) 짝수번째 요소 가져오기
//인덱스 시작은 0부터 ; 짝수번째 글자색을 그린으로.
ex) $('ul li:even').css("color","green");

$(":odd") 홀수번째 요소 가져오기
//인덱스 시작은 0부터 ; 홀수번째 글자색을 블루로.
ex) $('ul li:odd').css("color","blue");

("요소:first−child"):특정요소의첫번째자식요소반환("요소:first-child") : 특정요소의 첫번째 자식 요소 반환("요소:last-child") : 특정요소의 마지막 자식 요소 반환
("요소:only−child"):특정요소를기준으로자식요소가딱하나인요소("요소:only-child") : 특정요소를 기준으로 자식요소가 딱 하나인 요소("요소:nth-child(n)") : 부모 요소를 기준으로 n번째 위치한 요소
("요소:empty"):부모요소를기준으로자식을갖지않는요소.("요소:empty") : 부모 요소를 기준으로 자식을 갖지 않는 요소.("요소:not(Selector)") : 다른 선택자를 제외한 요소

CSS 스타일 우선순위 : CAS Style Precedence

CSS의 C는 캐스캐이딩(Cascading)의 약자로 '위에서 아래로 흐르는 스타일 시트'라는 뜻이다.
CSS는 중복선언을 허용한다.

중복되는 속성이 있을경우 아래와 같은 우선순위로 처리된다.

  1. 속성값 뒤에 !important 를 붙인 속성

  2. HTML에서 style을 직접 지정한 속성 : 태그에 inline으로 style 속성 지정 : 1000점

  3. #id 로 지정한 속성 : 100점

    #id-style-2 {
    background-color: skyblue;
    margin: 50px;
    padding: 50px;
    }

  4. .class 및 pseude(추상) 클래스(:hover 같은 것)로 지정한 속성 : 10점

    .ul-class {
    background-color: salmon;
    color: mediumpurple;
    }

    • 요소이름으로 지정한 속성 : 1점

      ul {
      color: black;
      }

      • 상속된 속성

    단: 같은 우선순위에 있는 경우, 나중에 선언된 것이 우선 적용된다.

    자바스크립트 인코딩

    escape
    문자열을 네트워크를 통하여 누구나 ASCII 글자로 접속할 수 있도록 엔코딩한다.
    사용방법 : escape("문자열");

    • 문자열의 각 문자들을 '%16진수코드값' 형태로 변환
    • 1바이트 문자는 '%XX' 형태로 표시
    • 영문 알파벳(대문자, 소문자)과, 숫자, 일부 특수문자(@, *, -, _, +, ., /)를 제외 문자만 인코딩
    • 한글이 깨지는 것을 방지하기 위하여 사용
    • 한글, 한자등(2바이트)은 '%u16진수4자리'로 표시

    unescape
    사용방법 : unescape("%16진수코드값");

    • 코드값에 맞는 문자로 변환 (escape 로 변환된 코드값만 문자로 변환)

    encodeURI
    사용방법 : encodeURI(uri);

    • 인터넷 주소에 사용되는 일부 특수문자(:, ;, /, =, ?, & 등)를 제외 문자만 인코딩
    • 보통 인터넷 주소의 파라미터 전체를 인코딩할 때 사용

    decodeURI
    사용방법 : decodeURI(encodeURI로 인코딩 한 문자열);

    • encodeURI 로 인코딩한 값을 다시 원래대로 디코딩

    encodeURIComponent
    사용방법 : encodeURIComponent(url 전체);

    • encodeURI이 제외한 일부 특수문자까지도 인코딩
    • url 전체(인터넷 주소 전체)가 파라미터로 전송될 경우 사용가능

    decodeURIComponent
    사용방법 : decodeURIComponent(decodeURIComponent로 인코딩 한 문자열);

    • encodeURIComponent 로 인코딩한 값을 다시 원래대로 디코딩

    Ajax : Asynchronous Javascript And XML

    FORM 태그와 Ajax 방식 차이

    브라우저(클라이언트) 에서 서버에 데이터를 요청할 수 있는 방법은 2가지 이다.
    1. form 태그를 이용해서 요청하는 방법 : response 후 refresh 해야 한다.
    : 동기 방식 : 요청후 응답이 모두 다 올 때 대기
    2. Ajax 를 이용해서 요청하는 방법 : resonse 후 refresh 없어도 렌더링이 된다.
    : 비동기 방식 default , 본인이 원하면 동기방식으로 구현해도 된다.

    1. 1번 과 2번의 가장 큰 차이는
      request 요청 후 response 응답한 후
      브라우저에서 응답 결과를 display 하기 위해서
      새로고침(refresh) 을 해야하는 경우가 있고
      하지 않아도 되는 경우가 있다.

    XMLHttpRequest

    XMLHttpRequest 객체 프로퍼티 : 자바스크립트 객체 

    onreadystatechange : readyState 값이 바뀔 때마다 호출되는 이벤트 처리기 : 쓰기 가능
readyState : 통신 상태를 가져온다( 0 ~ 4 사이의 값 ) : 읽기 전용
status : 요청에 대한 HTTP 상태 코드(200, 300, 400, 400)를 가져온다. : 읽기 전용
statusText : 요청에 대한 보충 메시지를 가져온다. : 읽기 전용

responseType : 응답 타입을 가져온다. : 쓰기 가능

response : 응답 내용을 가져온다 : 읽기 전용
responseText : 응답 내용을 텍스트 형식으로 가져온다 : 읽기 전용	 
responseXML : 응답 내용을 XMLDocument 객체로 가져온다. : 읽기 전용

timeout : 요청을 자동으로 끝내는 데 걸린 시간(밀리초)을 가져오거나 설정한다. : 쓰기 가능  
withCredentials : 크로스 오리진 통신에 인증 정보를 사용할지를 뜻하는 논리값 : 쓰기 가능 
ontimeout : 요청 시간이 초과할 때마다 호출되는 이벤트 처리기

    XMLHttpRequest 객체 프로퍼티 

    open(...) : HTTP 요청을 초기화 한다. 
GET 방식
	send(null) :  
POST 방식 : 
	send(date) : HTTP 요청을 보낸다. 
	setRequestHeader(header, value) : 요청 헤더에 정보를 추가한다.

abort() : 현재 실행 중인 비동기 통신을 중단한다. 
getAllResponseHeaders() : 수시한 모든 HTTP 응답 헤더를 가져온다. 
getResponseHeader(header) : 특정 HTTP 응답 헤더를 가져온다.

    readyState 프로퍼티의 값
    0 : UNSENT : 초기화되지 않음 : open 메서드가 호출된 상태가 아니다.
    1 : OPEND : 로드 중 : open 메서드는 호출되었지만 send 메서드가 호출되지 않았다.
    2 : HEADERS_RECEIVED : 로드 완료 : send 메서드는 호출 되었지만 응답이 되돌아오지 않았다.
    3 : LOADING : 응답 수신 중 : 응답 행과 응답 헤더는 가져왔지만 메시지 본문을 가져오지 못했다.
    4 : DONE : 모든 응답 메시지를 수신한다.

    요청 초기화 하기
    req.open(method, url, [,async [,user [,passwor]]]);
    method : HTTP 메서드
    url : 접근할 URL
    async : 비동기 여부(선택 사항, 기본값은 true(비동기 통신)
    user : 인증할 때의 사용자 이름(선택 사항, 인증이 필요한 경우에만 사용)
    password : 인증할 때의 암호(선택 사항, 인증이 필요한 경우에만 사용)

    GET 메소드로 요청 보내기
    req.open("GET", "test.jsp?name"+ encodeURLComponent(value), true);
    send(null);

    POST 메소드로 요청 보내기
    req.open("POST", "test.jsp", true);
    req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    send("name"+ encodeURLComponent(value));

    Ajax(Asynchronous JavaScript and XML)

    Web 화면을 갱신하지 않고 Server로부터 Data를 가져오는 방법 : 비동기 방식

    함수 : $.ajax(), load(), $.get(), $.post(), $.getJSON()

    url : 요청이 전송되는 URL이 포함된 문자열
    type : http요청 방식 : GET/POST
    timeout : http요청에 대한 제한 시간(단위 : ms)
    success : http요청 성공시 이벤트 핸들러
    error : http요청 실패시 이벤트 핸들러
    data : http요청 파라미터 문자열 key=value&key=value
    or http요청 후 리턴값
    dataType : http요청 후 return하는 데이터 Type
    xml, html, srcipt, json, jsonp, text
    async : 요청시 동기 유무 선택(true/false)
    true : async, false : sjax
    cache : 브라우저에 의해 요청되는 페이지를 캐시(true/false)
    true : 캐시사용, false : 캐시사용하지 않음

    $.ajax({
    "url" : "접속할 페이지 주소"
    ,"type" : "GET" or "POST"
    ,"dataType" : "XML" or "JSON"
    ,"data" : "파라미터 문자열 key=value&key=value" or { "key":"value", "key":"value"}
    ,"success" : function(data){
    // 통신에 성공했을 때 실행되는 함수
    }
    ,"error" : function(data){
    // 통신에 실패했을 때 실행되는 함수
    }
    });

    $.get({
    "url"
    ,{파라미터 Object(JSON)}
    ,function (){
    // 통신에 성공했을 때 실행되는 함수
    }
    });

    var ajax = $.get("url",{파라미터 Object(JSON)},function (){... });

    ajax.fail(function(){
    // 404, 500 에러등이 발생한 경우 실행
    });
    ajax.always(function(){
    // 통신 성공, 실패 여부에 상관없이 무조건 마지막에 호출됨
    });

    $.post({
    "url"
    ,{파라미터 Object(JSON)}
    ,function (){
    // 통신에 성공했을 때 실행되는 함수
    }
    });

    profile
    세모네모동굴배이
    개발
    이전 포스트

    JSP

    다음 포스트

    Http

    post-custom-banner

    0개의 댓글