외우지말고 이해하라.

외우는 것 보단 이해해서 내것으로 만들어 활용하기

WEB Front-End/JQuery 5

JQuery 학습 05 - 프로미스(promise), Deferred 객체

? Promise가 뭔가요? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. ? Promise가 왜 필요한가요? 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스입니다. 비동기 처리? 그게 뭔가요? 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 만약, 복잡한 코드가 있으면 이 코드를 실행하는 50초 동안은 아무 것도 할 수 없습니다. 50초 후에야 다음 행동이 실행될 겁니다. 사용자들은 멍하니 기다리거나 화가 나서 앱을 종료할 겁니다. $.Deferred 이..

JQuery 학습 03 - ajax 를 이용한 XML 데이터 접근

제이쿼리 플러그인을 사용하여 탭을 만들수 있음 - 나중에 따로 설명 find() 를 이용해 선택자를 선택하고 찾을 수 있음 $(xml).find("runner").each(function(){ }); 이런 식으로 사용 가능 - xml에 runner 태그들을 찾고 each 로 runner 태그들을 하나씩 가져와 다룰 수 있음 $.ajax() 를 통해 데이터를 가져올 수 있음 url : 불러올 파일 경로 , cache : 변수 결과를 컴퓨터에 캐시한다 data : 서버로 데이터를 전송할 때 이 옵션을 사용한다. dataType : 서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html 이다. 형식을 지정하지않으면 JQue..

JQuery 학습 02 - Dom 조작, Dom 이동, 배열, 필터

* 웹 페이지 조작 $("img#thumbnail").remove(); Dom 에서 요소를 완전히 제거 $("img#thumbnail").detach(); Dom 에서 제거하지만 요소를 기억해놨다가 다시 삽입 가능 변수에 저장 $f = $("img#thumbnail").detach(); $f - $를 붙이면 JQuery 에서 반환하는 요소를 저장하는 변수라는 뜻 * 요소 선택 $(".fish").parent() : fish 클래스 요소를 모두 선택후 요소 위에 있는 부모 요소 선택 $(".fish").children() : fish 클래스 요소를 모두 선택후 요소 아래에 있는 자식 요소 선택 $(".fish").prev() : fish 클래스 요소를 모두 선택후 요소 왼쪽에 있는 형제 요소 선택 $("...

JQuery 학습 01 - 액션, Math, 이벤트

1. 웹페이지 액션 - 슬라이드 - slideUp() : 요소의 높이를 0이 될때까지 줄이고 숨김 slideUp() : 요소의 높이를 원래값으로 만듬 - 페이드 - fadeIn() : 투명상태에서 불투명상태로 만드는것 ()안에 밀리초(ms)를 사용 fadeOut(), fateTo(), fadeToggle() 까지 총 4가지 - Math - floor 매서드는 가장 가까운 정수를 반환 ! random 매서드는 0 ~ 1 사이의 랜덤한 숫자를 반환 ! - 이벤트 - 이벤트 제거 : $("#myElement").unbind("click"); 모든 이벤트 제거 : $("#myElement").unbind(); 요소 전체에 대해 루프 : $("#myElement").each(function(){ $(this).u..