-
자바&파이썬 웹애플리케이션 전문가 양성과정 채용연계형 교육과정 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 에 속성의 이름을 작성하면, 값을 읽어 올 수 있습니다.
프론트 엔드가 끝이 났습니다...^^ 이 세상은 안끝나려나?? 좀 끝났으면 ^^.. 눈치 좀 챙겨 세상아
'KT_DS' 카테고리의 다른 글
KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_34일차(JSP) (0) 2021.09.08 KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_33일차(JSP) (0) 2021.09.07 KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_31일차(JQuery) (0) 2021.09.03 KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_30일차(JS,JQuery) (0) 2021.09.02 KTDS_자바&파이썬 웹애플리케이션전문가 양성과정교육_29일차(JS) (0) 2021.09.01 댓글 (비로그인 댓글 허용하지 않습니다.)