6/1 목

Jquery UI

• https://jqueryui.com/sortable/#display-grid

• 연습해보면 좋은 것 : drag&drop (쇼핑카트, 체크박스)
  

Accordion 아코디언 메뉴탭

$(function(){
			$( "#accordion" ).accordion(
				{
					collapsible: true // 이게 있고 없고에 따라서 ui 다름
				}		
			);
		});	

Autocomplete 자동완성

Datepicker 달력

• 커스터마이징이 편리함

Dialog

• modal: true // 팝업창을 닫기 전까지는 부모 접근 불가
  

JS Async

JS Callbacks

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2) {
  let sum = num1 + num2;
  myDisplayer(sum);
}

myCalculator(5, 5);

아래처럼 쓰면 함수의 순서 보장받는다.
myCalculator 다 실행하고 호출 시점에 myDisplayer 호출!

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}

myCalculator(5, 5, myDisplayer);

주의 사항!!

• function myCalculator(num1, num2, myCallback)
  인자(parameter)로 전달하는 함수는 괄호를 붙이지 않고 이름만 쓴다.
  (**괄호를 붙이면 실행 되어버림!!)
• removeNeg(num, (x) => x>=0);

Ex02 Callback 중요!!

이거 이해하기!!

Asynchronous JavaScript

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

• 3초뒤에 setTimeout 실행 되는데 그 후에 myFunction이 실행돼서 console.log 찍힘.

http ajax

tool recommandation

• 비동기 api 처리
  https://www.postman.com/

• 더미 data 만들기
  https://www.mockaroo.com/

fetch

• Mdn
  https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

• 벨로그 fetch 함수
  https://velog.io/@seoltang/fetch-POST-Request

jquery Ajax

https://api.jquery.com/category/ajax/

6/2 금

JQuery API

shorthand method와 low-level interface

Low-Level Interface- jQuery.ajax()

• low-level : 자기가 가진 기능이 없어서 개발자가 만들어줘야함
  contentType : default
  클라이언트가 서버에 보낼때 정하는 타입
  dataType : 중요~! 서버가 클라이언트에게 응답하는 데이터의 형식을 정의할 수 있음

$(function () {
			$('#message').click(function(){
				//비동기 처리
				$.ajax(
						{
							url:"Ex02_menu.html",
							dataType:"html", // 서버가 클라이언트에게 응답하는 데이터 순수한 html 형식
							success:function(responsetext){ // 응답이 왔고, 정상, parameter로 데이터
								//console.log(responsetext);
							$('#menudiv').html($(responsetext).find('li'));
							}
						}
				)
			})
		})

Shorthand Methods - jQuery.get()