ajax

강좌구성
(13강) 전체 : 6시간 26분|평균 : 29분41초

수강기간
2개월

전문강사
알지오 R&D [IT]

ajax 인강 평생교육원 교육 안내
특정한 기술이 아닌 비동기식 자바스크립트로 대화식 웹 애플리케이션 제작시 이용하면 좋습니다. 실행을 플랫폼이기 때문에 웹개발이 처음인 분이라면 html, css, javascript 개념이 학습되어있어야 개발을 쉽게 할 수 있습니다.

01.31분 ajax 시작하기
웹호스팅에서 ajax를 세팅하고 인코딩을 시작합니다.

책갈피[00:17] 웹호스팅에서 세팅하기/[00:57] 도메인 주소 확인/[02:28] 인코딩 방식 설정/[05:19] 출력 화면 확인/[08:45] If문 작성/[11:10] varInput 변수 생성/[16:20] 상속 효과 구현/[19:21] 새 함수 정의/[20:11] result 값 생성/[26:50] 상속 관계 구조/[28:06] 새 메소드 생성 예시/[30:35] 작업내용 백업
02.38분 DOM

책갈피[00:05] dom/[03:25] 인코딩 방식/[06:55] 인수를 받는 클래스 생성/[12:11] 클래스의 인스턴스화/[14:49] 프로토타입 js/[16:39] 이름을 저장하는 클래스 생성/[19:19] 상속/[25:01] 인스턴스화/[27:46] 상속받은 메소드 재정의/[31:05] 자식 클래스 생성/[36:28] 상속받은 클래스 사용
03.37분 추상클래스

책갈피[00:00] 추상클래스/[05:13] 추상클래스 상속 받기/[09:14] 부모 Array에 값 넣기/[14:10] for문/[19:23] dom 객체/[23:16] Event.observe/[28:30] 버튼 value값 설정/[32:48] appendChild/[35:39] 버튼 제거 이벤트 생성
04.18분 스타일 변경

책갈피[01:12] 윈도우 로드 시 이벤트 생성/[04:02] 스타일변경 클릭 시 스타일 변경/[10:29] 숫자 값 입력받기/[12:48] 입력된 숫자에 따른 컬러 변경/[15:33] div 배경색 설정
05.32분 XMLHttpRequest XHR, 비동기
XMLHttpRequest 내장객체, 프로퍼티와 비동기 통신에 대하여 알아봅니다.

책갈피[00:00] XMLHttpRequest, 내장객체/[04:55] 프로퍼티/[08:58] responseText/[12:41] iframe을 사용한 비동기 통신/[16:06] XMLHttpRequest 객체 이용 비동기 통신/[21:09] 요청버튼 클릭 시 처리/[25:07] 데이터를 받은 후 처리/[30:01] xhr.xml 파일 생성
06.27분 xml 문서 코딩
xml 문서를 코딩해봅니다.

책갈피[00:00] xml 문서 코딩/[04:01] 객체생성 메소드 정의/[08:14] xml 파싱/[11:45] createElement/[15:53] textNode 생성/[20:57] 결과확인/[22:18] 검수하는 방법/[26:04] Msxml2.XMLHTTP
07.22분 json
json 파일 생성과 읽어오는 방법에 대하여 알아봅니다.

책갈피[00:00] nodeValue/[00:32] json/[05:35] json 파일 읽기/[08:53] 클릭 이벤트 생성/[11:43] json을 table로 보여주기/[18:31] div에 내용 넣기
08.25분 인코딩 방식에 따른 버튼 출력
인코딩 방식에 따른 출력과 오류에 따른 객체 생성 및 요청 보내는 방법에 대하여 알아봅니다.

책갈피[00:00] 파일 인코딩 방식에 따른 출력/[01:53] 클릭 이벤트 정의/[06:31] 클릭 시 결과 확인/[09:28] 오류에 따른 객체 생성 및 요청 보내기/[11:29] try catch/[16:16] 요청 작업/[22:10] get, post 방식에 다른 url 처리
09.35분 이벤트 처리
요소별 이벤트 처리하는 방법에 대하여 알아봅니다.

책갈피[00:00] 요소별 이벤트 처리하는 방법/[05:14] this/[11:50] 요청작업 준비/[15:22] send 처리/[17:37] addEventListener/[21:58] removeEventListener/[22:18] html에서 ajax연동/[26:27] 버튼 클릭 시 함수 구현/[30:50] 결과확인
10.28분 이벤트 타겟, 마우스 이벤트
이벤트 타겟을 구하는 방법과 마우스 이벤트에 대하여 알아봅니다.

책갈피[00:00] 이벤트 타켓을 구하는 함수 생성/[04:35] window.onload=function()/[07:20] window.event ∥ e/[11:13] 마우스 이벤트 알아보기/[18:01] 마우스 버튼 이벤트 판별하기/[22:33] 스크롤 위치 알아내기
11.24분 키보드 이벤트, 이벤트 전달 및 중지
키보드 이벤트와 이벤트 전달, 이벤트 중지에 대하여 알아봅니다.

책갈피[00:00] 키보드 이벤트/[04:20] 이벤트 값 넣기/[06:11] 이벤트 전달/[08:55] ajax.Event.addListener/[12:10] capture 결과확인/[13:40] 이벤트 전달 중지/[16:19] 기본 이벤트 중지/[20:30] window.onload=function()
12.28분 this
이벤트 핸들러에서 this 문제를 해결하는 방법과 css 스타일 변경하는 방법에 대하여 알아봅니다.

책갈피[00:00] 이벤트 핸들러 this/[05:52] js 파일 생성/[10:05] 오류 확인/[13:30] 오류 해결/[16:45] apply/[20:24] css 스타일 변경/[24:43] 요소에 스타일 적용
13.41분 스타일 설정 및 정보 얻기
css class 변경과 Opacity 설정, 스타일 정보를 얻어오는 방법에 대하여 알아봅니다.

책갈피[00:18] css class 변경/[05:32] 실행 결과 확인/[06:16] opacity 설정/[11:44] window.onload=function()/[15:10] eval/[17:25] 스타일 정보 얻어오기/[24:44] 함수 정의/[29:31] element.style[property]/[33:29] 자바스크립트 스타일을 css로 변환/[37:53] defaultView.getComputedStyle().getPropertyValue()