각진 세상에 둥근 춤을 추자

Ajax를 이용해 서버의 데이터를 요청해 출력할 수 있었다. 이번에는 직접 JSON 데이터를 생성하여 전송해 본다. 먼저, JSON 데이터를 입력할 폼을 구현한다. 1. 전송 폼 구현하기 Ajax 데이터 전송 2. 기능 구현하기 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 전송 데이터 전송 url을 네이버로 하였다. 검증되지 않은 데이터이기 때문에 네이버에서는 수락하지 않는다. 위 기능 구현 코드에서 e.preventDefault(); 라는 코드를 작성했다. 이 코드는 form 내에 submit 버튼을 눌렀을 때 새로 실행하지 않아도 작동되게 한다.

이번에는 데이터 하나가 아닌 여러 개의 데이터를 Ajax를 이용해 요청해 출력해 본다. http://chhak.or.kr/data/users.json 1. 화면 구현하기 클라이언트가 데이터를 받아 올 화면을 아래 사진과 같이 구현한다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이 2. 기능 구현하기 Ajax를 이용해 서버의 데이터를 요청한다. 3. 전체 코드 화면 구현과 기능 구현을 합친 전체 코드는 다음과 같다. Ajax 데이터 처리 데이터 요청 아이디 이름 휴대폰 나이

아래의 링크는 JSON객체로 생성된 서버이다. http://chhak.or.kr/data/user.json Ajax를 통해 위 JSON 데이터를 요청해 본다. Ajax는 비동기 방식 통신 기술이다. 즉, 클라이언트가 화면을 구현하고 서버는 해당 화면에 알맞는 데이터만 전송한다. (1) 화면 구현하기 다음과 같은 폼을 작성한다. Ajax 데이터 요청 데이터 요청 아이디 : 이름 : 휴대폰 : 나이 : (2) 기능 구현하기 데이터를 요청하는 코드를 작성하기 전 제이쿼리를 적용하는 라이브러리를 구글에서 가져온다. https://developers.google.com/speed/libraries 호스팅된 라이브러리 | Hosted Libraries | Google Developers 가장 많이 사용되는 오픈소스..

Ajax(Asynchronous JavaScript and XML)란 JSON 또는 XML 형태의 데이터를 비동기적(비순서적)으로 전송하기 위한 통신 기술을 말한다. 아래 그림을 통해 간단하게 동기 방식과 비동기 방식의 차이에 대해 알아본다. (1) 동기 방식 동기 방식은 클라이언트가 서버에 신호를 요청하면 응답이 돌아와야 다음 동작을 수행할 수 있다. (2) 비동기 방식 비동기 방식은 클라이언트가 서버에 신호를 보냈을 때 서버의 응답 상태와 상관 없이 다음 동작을 수행할 수 있다. 즉, Ajax를 이용하면 클라이언트가 서버에 자료를 요청할 때 화면 전환 없이 요청한 자료를 전송받을 수 있으며, 클라이언트가 기다릴 필요 없이 바로 다른 작업을 수행할 수 있다. Ajax 관련 함수 $.ajax({옵션});..

문서 조작 즉, 객체 조작 메서드를 통해 객체를 생성, 복제, 삭제를 하거나 속성을 변환시킬 수 있다. jQuery 조작함수 attr함수 css함수 box1 box2 text, html함수 서울 대전 대구 부산 광주 추가, 이동함수 경기도 충청도 강원도 경상도 창원 수원 목포 부여 원주 파주 전라도 클래스 함수 box1 box2 box3

탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. jQuery 탐색 함수 서울 대전 대구 부산 서면 경성대 해운대 남포동 광주

제이쿼리란? 제이쿼리(jQuery)는 자바스크립트를 이용해 만든 라이브러리 언어로, 자바스크립트를 쉽게 사용할 수 있도록 돕는 오픈소스 라이브러리를 말한다. 즉, 자바스크립트 코드를 좀 더 직관적으로 이해할 수 있도록 짧고 단순한 형태의 코드로 작성할 수 있다. // 자바스크립트 document.getElementsById("p").innerHTML="웹 프로그래밍"; // 제이쿼리 $(선택자).동작함수(); $("#p").html("웹 프로그래밍"); 제이쿼리 파일은 아래 사이트를 방문해 다운한다. https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes t..

브라우저 객체 브라우저에 내장된 객체를 브라우저 객체라고 한다. 브라우저 객체는 다음 그림과 같이 계층적 구조로 이루어져 있다. window 객체 window는 브라우저 객체의 최상위 객체이다. 메서드 종류 설명 open("URL", "새 창 이름", "새 창 옵션") URL 페이지를 새 창으로 나타낸다. alert(data) 경고 창을 나타내고 데이터를 보여준다. [확인]버튼을 누르면 alert()를 사용한 다음 위치의 코드를 수행한다. prompt("질문", "답변) 질문과 답변으로 질의 응답창을 나타낸다. confirm("질문 내용") 질문 내용으로 확인, 취소 창을 나타낸다. [확인] -> true 반환 [취소] -> false 반환 moveTo(x, y) 지정한 새 창의 위치를 이동한다. res..

문자열 객체(String Object)는 문자형 데이터를 객체로 취급한다. let 참조 변수 = new String(문자형 데이터) let 참조 변수 = 문자형 데이터 let str1 = new String("Hello"); let str2 = "Hello"; 문자열 객체의 메서드와 속성은 다음과 같다. 종류 설명 charAt(index) 인덱스 번호에 해당하는 문자 반환 let str ="hello this is JS".str.charAt(2); -> 'l'을 반환함 indexOf("찾을 문자") 왼쪽부터 제일 먼저 일치하는 문자의 인덱스 번호를 반환 만약 찾는 문자가 없다면 -1을 반환 let str="hello this is JS".str.indexOf(is); -> 11 반환 lastIndexOf..

변수에는 데이터가 하나씩 저장된다. 여러 개의 데이터를 하나의 장소에 저장하려면 배열 객체(Array Object)를 생성한다. // 방법1 let 참조변수 = new Array(); 참조변수[0]=값1; 참조변수[1]=값2, 참조변수[2]=깂3, ... 참조변수[n-1]=깂n; // 방법2 let 참조변수 = new Array(값1, 값2, 값3, ... 값n); // 방법3 let 참조변수 = [값1, 값2, 값3, ... 값n]; [예제1] 배열 객체 생성 및 저장된 데이터 출력 배열 객체에서 사용하는 메서드와 속성은 다음과 같다. 종류 설명 join(연결문자) 배열 객체의 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환 reverse() 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환 s..