본문 바로가기

언어공부

 (188)
제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩 제이쿼리(jQuery) 기초 문법 Ajax($.getJSON())로 JSON 데이터 바인딩 바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고, 데이터 베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라 부른다. 서버언어를 사용해 데이터베이스를 요청했다는 가정하에 가상의 회원정보 데이터를 만들어 사용할 수 있는데, mockaroo 사이트를 이용하면 데이터베이스에 데이터를 요청하여 받은 것 처럼 회원 정보 데이터 파일(JSON)을 생성할 수 있다. ** JSON(JavaScript Object Notation) 자바스크립트의 객체 표기법을 JSON(JavaScript Object Notation)이라고 부른다...
제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (2) 제이쿼리(jQuery) 기초 문법 Ajax 관련 메소드 Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. Ajax 관련 메소드는 모두 Ajax 기술을 기반으로 제작된 자료 요청 메소드이다. $.ajax() 메소드 $.ajax() 메소드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다. 이 때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있고. 선택한 ..
제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (1) 제이쿼리(jQuery) 기초 문법 Ajax 관련 메소드 Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. Ajax 관련 메소드는 모두 Ajax 기술을 기반으로 제작된 자료 요청 메소드이다. Ajax 관련 메소드의 종류 종류 설명 load() 외부 콘텐츠를 가져올 때 사용한다. $.ajax() 데이터를 서버에 HTTP POST, GET방식으로 전송할 수 있으며, HTML, XML, JSON, 텍스트 유형에 데이터를 요청할 수 있는 통합적인 메소드이다...
제이쿼리(jQuery) 기초 문법 - 제이쿼리 비동기 방식 연동 (AJAX) 제이쿼리(jQuery) 기초 문법 제이쿼리 비동기 방식 연동 (AJAX) Ajax(Asynchronous JavaScript and XML)란 비동기 방식의 Javascript와 XML을 가리킨다. 동기 방식 : 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있음. 비동기 방식 : 서버에 신호를 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있음. Ajax를 이용하는 이유는 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스를 제공하는 컴퓨터)간에 XML, JSON(JavaScript Object Notation), 텍스트, HTML 등의 정보를 교환하기 위해서이다. Ajax를 이용하면 사용자가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있다. 또..
제이쿼리(jQuery) 기초 문법 - 애니메이션 메소드 및 효과 제이쿼리(jQuery) 기초 문법 애니메이션 메소드 및 효과 문서 객체를 보이게 했다가 안보이게 하려면 스타일(CSS)의 display 속성을 이용해야 한다. 단, 스타일을 이용하는 방법은 객체를 단순하게 조절하는 정도의 효과만 기대할 수 있다. 하지만 효과(Effect)메소드를 이용하면 스타일(CSS)를 이용하는 것보다 좀 더 역동적으로 동작을 조절하여 객체를 화려하게 숨기거나 보이게 할 수 있다. 효과 메소드 효과(Effect)메소드에는 선택한 요소를 역동적으로 숨겼다가 보이게 만드는 기능을 가진 메소드가 있다. 효과 메소드 종류 구분 종류 설명 숨김 hide() 요소를 숨긴다. fadeOut() 요소가 점점 투명해지면서 사라진다. slideUp() 요소가 위로 접히며 숨겨진다. 노출 show() 숨..
제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (3) 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 이벤트가 발생한 요소 추적하기 사이트 방문자가 이벤트를 발생시킨 요소의 정보를 구해오는 방법에대해 알아보자. 이벤트가 발생한 요소를 선택해 오는 선택자 $(this)의 사용법과 이벤트가 발생한 요소의 인덱스 값을 반환하는 index() 인덱스 반환 메소드도 알아보자. $(this)선택자 이벤트 핸들러에서 $(this)를 사용하면 이벤트가 발생한 요소를 선택하여 이벤트가 발생한 요소를 추적할 수 있다. 메뉴1 메뉴2 메뉴3 id 속성값이 'menu'인 요소의 요소를 선택하여 click 이벤트를 등록하는 코드이다. 만약 메뉴1을 클릭하면 이벤트 핸들러에 사용된 $(this)는 이벤트가 발생한 메뉴1를 선택한다. index() 인덱스 반환 메소드 index()..
제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (2) 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 강제로 이벤트 발생 시키기 이벤트가 강제로 발생했다는 말은 사용자에 의해 이벤트가 발생한게 아니라 핸들러에 의해 자동으로 이벤트가 발생했음을 의미한다. 이벤트 제거 메소드 이벤트를 제거하는 메소드로 off()가 있다. 이벤트 객체와 종류 사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성되며, 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메소드가 포함되어 있다. 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX(Y) 마우스 포인터의 X(Y) 좌표값 반환(스크롤 이동 거리 무시) pageX(Y) 스크롤 X(Y)축의 이동한 거리를 계산하여 마우스 포인터의 X(Y)좌표값을 반환 screen..
제이쿼리(jQuery) 기초 문법 - 제이쿼리 이벤트 (1) 이벤트 등록 메소드 제이쿼리(jQuery) 기초 문법 제이쿼리 이벤트 이벤트 등록 메소드 이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 코드를 말한다. 이벤트 등록 메소드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있다. 이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 단독 이벤트 등록 메소드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메소드가 있다. 버튼 여기서 $("#btn")은 이벤트 대상이고, click()은 이벤트 등록 메소드, function(){...}는 이벤트 핸들러이다. 단독 이벤트 등록 메소드는 로딩이벤트, 마우스이벤트, 포커스이벤트, 키보드이벤트, 기타이벤트로 나눌 수 있다...

티스토리툴바