[Javascript] AJAX란 무엇인가? AJAX 란? AJAX (Asynchronous Javascript And Xml)은 비동기식 자바스크립트와 xml라는 의미로 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 브라우저 gangintheremark.tistory.com AJAX에 대해서 AJAX란 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 비동기 통신이기 때문에 새로고침 없이도 데이터 로드가 가능하다. 장점 서버에서 처리가 완료될 때까지 기다리지 않고 다른 프로세스를 진행 가능하다 웹페이지의 속도와 성능이 향상된다 단점 연속으로 데이터 요청 시, 서버 부하 증가 // Jquery 에서 AJAX ..
🎀 이벤트와 이벤트 핸들러 바로가기 이벤트 연결 (event binding) 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러 함수를 작성해야 한다. 작성된 이벤트 핸들러를 특정 요소(이벤트 소스)에 연결하는 것을 이벤트 연결(event binding)이라고 한다. $(이벤트소스).on("이벤트타입", 이벤트 처리 함수 ); OK text: 아이디 비밀번호 사과 바나나 수박 💡 this 이벤트에 의해 실행되는 함수 안에서 this를 사용할 수 있다. $(this)는 이벤트가 발생한 자기 자신을 감지할 수 있게 된다. 일반적으로 동일한 소스가 반복되는 곳에서 사용된다. 예를들어 class의 이름이 여러 개가 동일한 경우 한 군데에만 이벤트를 주고 싶을 때 사용한다. 동적으로 추가된 DOM 객..
Jquery의 유틸리티 메소드는 배열 순회, 배열 필터링, 데이터를 배열형식으로 변환, 배열 복제, 데이터의 공백 제거 등 효율적인 프로그램 개발이 가능하다. 메소드 설명 💡 $.each(arr, function) 배열의 데이터를 단순 반복 처리. return false하면 반복처리 중지 💡 $.grep(arr, function) 필터링 후 배열로 반환. 필터링 조건은 함수에서 return 💡 $.map(arr, function) 원본 배열을 함수를 적용하여 가공 후 반환 💡 $.merge(arr1, arr2) arr1과 arr2를 병합하여 arr1에 저장. 💡 $.trim(str) 지정된 문자열의 앞과 뒤의 공백제거 // 배열 데이터 관련된 유틸리티 메서드 var months = ['January', ..
Jquery의 Manipulation 메소드를 이용하여 DOM을 추가하거나 수정, 삭제, 복사하는 등의 처리를 하여 동적인 HTML 화면을 손쉽게 구현할 수 있다. 메소드 예시 설명 💡 .append() $("selector").append(html) 선택된 요소의 자식으로 들어가 뒤에 추가 💡 .prepend() $("selector").prepend(html) 선택된 요소의 자식으로 들어가 앞에 추가 💡 .before() $("selector").before(html) 선택된 요소의 형제로 들어가 앞에 추가 💡 .after() $("selector").after(html) 선택된 요소의 형제로 들어가 뒤에 추가 💡 .replaceWith() $("selector").replaceWith(html) 선..
Jquery의 속성 메소드를 사용하여 태그 속성 값을 가져오거나 설정할 수 있다. 메소드 예시 설명 💡 .attr() $("selector").attr("속성명") 지정된 속성명에 해당하는 속성값 반환 일치하는 요소가 다수면 처음 일치하는 요소 $("selector").attr("속성명", "속성값") 지정된 속성명에 속성값을 설정 일치하는 요소가 많으면 모두 설정 💡 .val() $("selector").val() 선택된 요소의 값을 반환 $("selector").val("값") 선택된 요소의 값을 설정 💡 .text() $("selector").text() 선택된 요소의 text 값 반환 (자손포함) $("selector").text("값") 선택된 요소에 text값 설정 💡 .html() $("se..
📚selectors 필터링 : DOM트리에서 1차 필터링 📚Traversing : 2차 필터링 필터링 Filtering 메소드 예시 설명 💡 .eq() $(selector).eq(index) 선택된 집합에서 index와 일치하는 요소 💡 .filter() $(selector1).filter(selector2) 선택된 집합에서 selector2 인 요소 💡 .not() $(selector1).not(selector2) 선택된 집합에서 selector2가 아닌 요소 💡 .is() $(selector1).is(selector2) 선택된 집합에서 selector2에 해당하는 요소가 존재하면 true 반환 💡 .has() $(selector1).has(selector2) 선택된 집합에서 selector2를 포함하..
📚 selectors 필터링 : DOM트리에서 1차 필터링 📚 Traversing : 2차 필터링 기본 선택자 선택자 설명 💡 $("*") 모든 요소 💡 $("tag명") 지정한 태그 요소 💡 $("#id") 지정한 id 요소 💡 $(".class") 지정한 class 요소 💡 $("[속성]") 지정한 속성 요소 💡 $("[tag1 > tag2]") 자식 요소 💡 $("[tag1 tag2]") 자손 요소 💡 $("[tag1 + tag2]") 바로 뒤 형제 요소 💡 $("[tag1 ~ tag2]") 바로 뒤 모든 형제 요소 💡 $("selector1 , selector2") 지정한 선택자들 요소 Selectors naver daum google 자식 선택자 선택자 설명 💡 :first-child 부모 기준..
JQuery 란? 제이쿼리는 자바스크립트언어를 쉽게 활용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다. 간결하고 직관적인 문법 : CSS 선택자를 사용해 HTML 요소를 선택하고 조작 이벤트 처리 : 다양한 이벤트에 대한 처리를 간편하게 구현 AJAX 요청 : AJAX 요청을 쉽게 생성하고 처리할 수 있는 기능 제공 애니메이션 효과 구현 : HTML 요소에 애니메이션 효과를 쉽게 적용 JQuery 적용 1. JQuery 파일을 다운로드 받은 후 적용 2. CDN(Content Delivery Network) 을 이용하여 로드 👉 URL 제공 JQuery 기본 문법 $(css선택자) $ 기호는 제이쿼리를 의미하며, 제이쿼리에 접근할 수 있게 해주는 식별자이다. 선택자를 이용하여 원하는..
