ajax -총 12시간 24분 / 강의당평균 : 37분12초

ajax

전체 : 12시간 24분 / 강의당평균 : 37분12초

01 ajax를 소개합니다.

ajax를 설명하고 공부하기 위한 환경을 설정합니다.

38분

책갈피 : [00:00] ajax란 무엇인가? / [04:46] ajax를 이루는 기술 / [15:13] java.com에서 jdk를 다운로드합니다. / [20:27] jdk 문서파일을 다운로드합니다. / [22:39] 자바관련 환경변수를 설정합니다. / [27:20] java설치 상태를 확인합니다. / [28:48] 톰캣서버를 다운로드합니다. / [30:58] 톰캣서버를 실행하고 확인합니다. / [33:35] editplus를 설치합니다. / [34:38] 사용자 도구를 설정합니다. / [36:39] 사용자 도구 설정을 확인합니다.

02 자바스크립트의 함수, 객체

Ajax에서 사용하는 자바스크립트와 객체에 대해서 알아봅니다.

41분

책갈피 : [00:00] 자바스크립트를 공부합니다. / [05:35] 인코딩 설정 입력하기 / [10:51] alert함수를 사용합니다 / [19:00] 템플릿을 변경합니다 / [21:02] confirm함수를 사용합니다 / [26:48] prompt함수를 사용합니다. / [27:53] window객체를 알아봅니다 / [32:58] document객체를 알아봅니다. / [37:41] 폼에서 발생하는 이벤트

03 클래스 상속, dom

클래스의 상속을 알아보고, dom을 알아봅니다.

50분

책갈피 : [00:00] 상속에 대해서 알아봅니다. / [02:30] inheritance.js파일을 만듭니다 / [03:03] 부모클래스를 생성합니다 / [05:07] 자식클래스를 생성합니다 / [08:10] inheritance.html파일을 만들고 클래스를 사용합니다. / [20:52] 상속을 할 때 유리한점 / [24:17] dom을 설명합니다 / [29:06] dom1.html을 만듭니다. / [34:24] dom1.js파일을 만듭니다. / [41:49] 인수가 있는 클래스

04 prototype으로 클래스 정의

prototype으로 클래스를 쉽게 사용하는 법을 공부합니다.

34분

책갈피 : [00:00] 정리. / [00:33] prototype.js를 다운로드합니다. / [02:35] prototype을 이용해서 클래스를 생성합니다. / [11:19] prototype을 이용해서 클래스 상속하기. / [21:12] 메소드 재정의합니다. / [31:24] 부모의 메소드를 사용합니다.

05 추상클래스, 노드생성

추상클래스를 만들고 구현합니다. 노드를 실시간 생성해서 붙여줍니다

44분

책갈피 : [00:00] 추상클래스에 대해서 알아봅니다. / [02:35] 추상클래스를 선언합니다. / [05:27] Member클래스를 생성합니다. / [06:55] 추상클래스를 구현하는 클래스를 생성합니다. / [10:33] 구현한 클래스를 사용하는 클래스를 만듭니다. / [21:57] 태그를 생성해서 기존 문서에 붙이는 작업을 합니다. / [28:13] 문서 로드 이벤트를 처리합니다. / [30:39] 버튼이 눌렸을 때 새로운 버튼을 생성합니다. / [41:59] 버튼이 눌렸을 때 만든버튼을 제거합니다.

06 버튼, 키입력으로 스타일 변경

버튼을 클릭하거나, 키입력을 했을 때 화면의 스타일을 변경합니다

36분

책갈피 : [00:00] 버튼을 눌러서 스타일을 변경합니다. / [02:02] xhtml을 위한 템플릿을 설정합니다. / [07:08] 스타일을 변경하기 위한 영역을 설정합니다. / [11:29] 로드이벤트를 설정합니다. / [18:51] 버튼을 클릭했을 때 스타일변경 소스를 작성합니다. / [28:21] 키보드로 숫자를 입력하면 스타일을 변경합니다. / [34:04] 키가 업에 됐을 때 이벤트를 처리합니다.

07 XMLHttpRequest객체

XMLHttpRequest객체를 생성하고 사용합니다.

37분

책갈피 : [00:00] XMLHttpRequest객체를 알아봅니다. / [04:29] XMLHttpRequest객체의 메소드 / [06:43] XMLHttpRequest의 프로퍼티 / [12:08] iframe으로 비동기 통신하는 방법입니다. / [19:17] XMLHttpRequest를 이용한 비동기 통신 방법입니다. / [23:21] ie5/6과 다른 브라우저를 구분해서 XMLHttpRequest를 생성합니다. / [26:12] 요청을 전송하는 함수를 만듭니다. / [29:34] 결과를 출력하는 함수를 만듭니다. / [33:55] 응답에 사용할 xml파일을 작성합니다.

08 xml 처리하기

XML을 처리해서 화면에 출력합니다.

31분

책갈피 : [00:00] 작업을 설명합니다. / [00:34] xml을 작성합니다. / [02:50] html을 생성합니다. / [06:15] js(자바스크립트)파일을 생성합니다. / [07:43] XMLHttpRequest객체 생성함수를 작성합니다. / [09:34] 요청을 실행하는 함수를 작성합니다. / [12:21] XML을 처리하는 함수를 작성합니다. / [28:33] 결과를 확인합니다.

09 JSON으로 처리

JSON을 받아 처리하는 방법을 공부합니다.

33분

책갈피 : [00:00] 추가설명 / [00:46] JSON처리법에 대해서 설명합니다. / [07:15] HTML파일을 생성합니다. / [11:05] 이벤트처리자를 붙여 줍니다. / [12:49] XHR을 생성하는 함수를 작성합니다. / [14:52] 요청하는 함수를 작성합니다 / [20:39] json을 처리합니다.

10 파일의 인코딩, XMLHttpRequest객체

파일의 인코딩처리를 알아보고, XMLHttpRequest객체를 별도파일로 분리합니다

36분

책갈피 : [00:00] text파일, jsp 파일의 인코딩을 알아봅니다. / [03:44] 처리를 위한 js 파일을 생성합니다. / [09:46] 각각의 인코딩 방식으로 파일을 생성합니다. / [17:19] XMLHttpRequest를 별도의 js파일로 분리합니다. / [18:49] XMLHttpRequest를 생성하는 함수 작성 / [24:37] 요청을 보내는 함수 작성

11 XMLHttpRequest를 완성, 제시어 기능

XMLHttpRequest를 완성하고 제시어 기능을 구현합니다.

44분

책갈피 : [00:38] XMLHttpRequest 객체를 테스트할 파일을 작성합니다. / [10:20] 요청을 처리할 jsp파일을 작성합니다. / [13:22] 오류를 수정합니다. / [16:22] 제시어 기능을 구현합니다. / [23:40] 요청에 응답

12 제시어 기능 완성

응답값을 처리해서 제시어 기능을 완성합니다.

36분

책갈피 : [00:00] 응답값을 처리하는 스크립트를 작성합니다. / [05:14] 제시어를 처리하는 함수를 작성합니다. / [06:35] 요청을 전송하는 함수를 작성합니다. / [15:00] 결과 출력 함수를 작성합니다. / [28:05] 키워드가 선택됐을 때 처리할 함수를 작성합니다.

13 xml 출력

xml을 응답으로 받아 출력합니다.

27분

책갈피 : [00:00] xml을 출력하는 작업을 합니다. / [01:09] xml을 담고 있는 jsp파일을 작성합니다. / [04:18] 처리용 html파일을 작성합니다. / [09:30] 응답으로 돌아온 xml을 처리합니다. / [19:05] 오류를 수정합니다. / [24:48] div로 출력해봅니다.

14 xsl처리하기

xml과 xsl을 입력받아 html로 출력합니다.

41분

책갈피 : [00:00] xsl파일로 xml을 html로 변환하는 작업입니다. / [00:26] xsl파일을 생성합니다. / [04:41] html파일을 생성합니다. / [05:55] xml과 xsl을 요청해서 가져옵니다. / [12:00] xml을 처리합니다. / [23:50] XMLHttpRequest를 클래스로 작성합니다. / [30:20] 요청을 위한 메소드를 생성합니다.

15 XMLHttpRequest클래스

XMLHttpRequest 클래스를 완성하고 테스트 합니다.

38분

책갈피 : [00:00] XMLHttpRequest 클래스를 테스트할 파일을 생성합니다. / [02:32] xml, xsl을 요청합니다. / [07:45] xsl을 처리는 함수를 작성합니다. / [15:34] 이벤트 처리하는 방법 / [19:00] ajax.js에 이벤트리스너용 메소드를 추가합니다. / [29:26] 이벤트리스너 처리를 테스트합니다.

16 마우스이벤트 처리

마우스이벤트와 버튼을 구분하고 테스트합니다.

44분

책갈피 : [00:00] 이벤트의 타겟을 구합니다. / [02:12] 이벤트의 타겟을 구하는 메서드를 추가합니다. / [05:26] 만들어진 메서드를 테스트합니다. / [11:30] 마우스이벤트의 종류를 알아봅니다. / [14:51] 마우스이벤트를 테스트합니다. / [22:02] 마우스버튼을 판별합니다. / [24:33] 마우스 위치를 알아내는 메서드를 추가합니다. / [31:34] 왼쪽, 오른쪽 버튼을 구분하는 메서드를 추가합니다. / [37:05] 만들어진 메서드를 테스트합니다.

17 키보드이벤트 처리

키보드이벤트를 처리하고, 이벤트전파에 대해서 알아봅니다.

36분

책갈피 : [00:00] 키보드이벤트를 알아봅니다. / [10:26] 결과를 확인합니다. / [11:50] 이벤트의 전파에 대해서 알아봅니다. / [22:25] 결과를 확인합니다. / [24:27] 이벤트의 전파를 중지시킵니다. / [29:55] 이벤트 전파 중지메소드를 테스트합니다.

18 this속성과 스타일변경

이벤트핸들러와 this속성의 문제를 해결합니다, css스타일을 변경합니다.

32분

책갈피 : [00:00] 이벤트핸들러와 this속성 / [01:14] 브라우저별로 this속성값을 확인합니다. / [05:53] invalidButton 클래스를 작성합니다. / [11:33] invalidButton 클래스를 테스트합니다 / [14:45] ValidButton 클래스를 작성합니다. / [21:41] css스타일을 변경합니다.

19 css클래스 변경

css클래스를 ajax로 변경합니다, 투명 불투명처리를 합니다.

31분

책갈피 : [00:00] css의 클래스를 바꿉니다. / [00:52] css를 적용할 요소를 작성합니다. / [06:25] 처리하는 JavaScript를 작성합니다. / [12:28] 결과를 확인합니다. / [12:56] 투명, 불투명값을 지정합니다. / [14:47] ajax.js파일에 메서드를 작성합니다. / [22:30] 투명도를 조정하는 JavaScript를 작성합니다.

20 스타일 정보읽기

스타일정보읽기 메서드를 만들고 사용합니다.

35분

책갈피 : [00:00] 스타일 정보를 얻어옵니다. / [05:19] 스타일 정보를 제대로 읽어 오지 못하는 스크립트 / [06:26] 스타일 정보를 가져오는 코드 작성 / [11:33] 스타일 정보 가져오기 클래스 메서드를 작성합니다. / [26:21] 만들어진 클래스 메서드를 사용합니다. / [33:22] 결과를 확인합니다.

샘플확인 : 알지오 검색후 -> 강의검색란 -> ajax