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

자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 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 에 속성의 이름을 작성하면, 값을 읽어 올 수 있습니다.

 

 

---

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

 

---