• KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_32일차(JQuery)

    2021. 9. 6.

    by. KAEY

    자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 32일차

    KT 자바교육 후기 (2021-07-22 ~ 2021-12-03) 

    2021-09-06 대면 중면 소면

    .JQuery, Mouse Event, KEY BORED, Event


    [오전]

      Event가 적용되는 대상

     jQuery는 Event 를 효율적으로 제어할 수 있도록 해줌. 

     Event 제어의 대상이 되는 객체는 $(document).ready(); 가 호출되기 전에 객체화 된 Element 들. 

     jQuery를 통해 동적으로 추가된($(document).ready() 이후 추가된) Element 들에 대해서는 Event를 할당할 수 없게 됨.

     

     

     

    $(document).ready(function(){
              $('button').on('click', function () {
                    .,,.....
                });
          });

    Button 이 새로 추가된 객체라면, click 이벤트는 동작하지 않는다.

     

     

     

    $('.vacation').on('click', 'button', function () {};

    새롭게 추가된 객체는 조금 다른 on 이벤트를 사용합니다. .vacation 하위의 button 객체에 click 이벤트를 할당합니다. 새롭게 추가된 객체라도 click 이벤트를 할당할 수 있습니다. 이 방법은 모든 객체에 접근할 수 있습니다

     

     


    Mouse Event

     

     

     


    Keyboard Event

     

     

     

     


    <li class="vacation" data-price='111.11'>
                .....
                <p><input type='number' class='quantity' value='1' /></p>
                <p>가격 $<span id='total'>111.11</span></p>
              </li>

    로 수정하여서, 111.11 (4번째 줄) 의 내용을 값에 따라서 변경하게 할 것임.

     

     

     

    $('.vacation').on('keyup', '.quantity', function(){
    		...
            }

    을 작성하여서 새로운 이벤트를 추가해준다. keyup (키입력)을 했을 때,

    그 값을 quantity에 저장해서 함수를 이용할 것임....

     

     

     

        	var price = $(this).closest('.vacation').data('price');
            var quantity = $(this).val();
            $('#total').text(price * quantity);

    또한 함수안에 가격과 양에 대한 내용을 작성하고, 이를 출력하게 할 것임.

    이를 적용하면 다음과 같이 출력이 된다.

     

     

     

     

    키 입력된 값에 따라서 111.11 * quantity 한 값이 가격 뒤에 출력이 되게 된다.

     

     


    [오후]

    AJAX

     

    일반적인 HTTP 요청

     

     

    AJAX 요청

     

     

     


    ajax 메소드 형식

    $.ajax({
      url: “전송페이지”,
      type: “전송방식”,
      data: “전송할 데이터“,
      dataType: “요청한 데이터 형식“,
      
       success: function(data){
          전송 성공 시 실행될 코드;
      },
      error: function(){
      	전송 실패 시 실행될 코드;
      }
    });

     

     

     

    AJAX 요청

    $(.confirmation').on('click', 'button', function(){
      $ajax('http://example.org/ex.html',{
        success: function ( response ) {
          $('.ticket').html(response).slideDown();
          }
        });
     });

    다음과 같이 작성된다.

    즉슨,   $ajax('http://example.org/ex.html', 는 Ajax 요청을 보낼 주소를 적습니다.

    이 주소는 아래의 웹페이지를 호출함다.

     

     

     

    success: function ( response ) {
          ...
          }

    응답의 Body가 response로 전달이 된다.

     

     

     

     $('.ticket').html(response).slideDown();

    는 호출이 성공적으로 이루어졌을 때 실행됩니다.

     

     

     

      $ajax('http://example.org/ex.html'
        ==   $ajax('ex.html'

    위와 같이, 절대 주소를 사용할 수 있지만, 지금처럼 상대 주소를 사용할 수 도 있음다..

     

     

     


    Short Cut 표현식

    $.get() 과 $.post() 로 사용할 수 있습니다!

     

     

     


    파라미터 전달하기

    여기에 파라미터를 보내려면…

     

     

     

    훨씬 더 구조적이에요. 알아보기도 편합니다. 게다가, 여러 파라미터를 보내기에도 수월해요.

     

     

     

    jQuery 요소를 파라미터로 보낼수도 있습니다

     

     

     

    URL로 보내는 것과 같아진다.

     

     

     


    AJAX Options

     

    Error 처리하기

    서버에서 timeout, abort, server error 가 발생하면 이 메소드가 실행됩니다.

     

     

     

    Timeout 설정하기

    헤딩 부분을 통해 타임 아웃을 설정할 수 있슘당~

     

     

     

     

     


    Form Element

    Input / Textarea 태그 공통

    <label for="email">이메일</label>
    
    <hr/>
    <input type="text" id="email" placeholder="이메일을 입력하세요." /><br/>

     

     

    var email = $("#email").val();

    Email input에 입력된 값을 가져옴.

     

     

     

    $("email").val("Eamil 입니다");

    Email input 에 값을 셋팅합니다. 입력 값 초기화에 유용하겠지요! 껄껄 ㅋㅋ!!

     

     

     


    Select Element

    var jobs = $("#jobs").val();

    으로 Jobs select의 선택된 값을 가져옵니다.

     

     

     

    $("#jobs).val("2");

    Jobs select에 값을 강제로 선택합니다.

     

     

     

    $("#jobs").on("change", function() {
       alert($("#jobs option : selected").text());
     })

    Jobs의 선택 항목이 바뀌었을 때, 옵션의 text 값을 가져와 경고창으로 보여슘당

     

     


    Radio / CheckBox 공통

     

     

    Radio / Checkbox 가 선택된 개수를 가져옵니다. 선택했는지, 안했는지 판단할 수 있습니다.

     

     

     

    Radio / Checkbox 를 강제로 선택하게 합니다. “모두선택"에서 사용할 수 있습니다.

     

     

     

    체크박스를 클릭했을 때, 체크가 된 경우 모든 체크박스를 체크합니다. 반대의 경우 모든 체크박스의 체크를 해제합니다.

     

     


    Form Submit

     

    Attr 을 이용해서 속성을 정의할 수 있다

     

     

     

    Attr 은 객체 리터럴로 정의할 수도 있다.

     

     

     

    submit 은 항상 마지막에 적용해야만 한다.

     

     

     

    Attr 에 속성의 이름을 작성하면, 값을 읽어 올 수 있습니다.

     

     


    프론트 엔드가 끝이 났습니다...^^ 이 세상은 안끝나려나?? 좀 끝났으면 ^^.. 눈치 좀 챙겨 세상아

     


     

    댓글 (비로그인 댓글 허용하지 않습니다.)