1. Ajax 사용하기: 새 시대를 위한 웹 애플리케이션 지금까지의 웹 페이지 개선된 웹 페이지 그럼 무엇이 “Ajax”페이지를 만들어 줄까요? ‘롭’의 로큰롤 기념전 Ajax와 로큰롤 5단계 1단계: XHTML수정하기 2단계: 자바스크립트 초기화 하기 3단계: 요청 객체 만들기 4단계: 상품의 상세 정보 얻기 상품의 상세 정보를 요청하기 위한 코드를 작성해 봅시다 작업 전에 요청 객체가 잘 만들어 졌는지 항상 확인하세요 요청 객체도 하나의 객체입니다. 서버야! 답을 보내줄 때 displayDetails()함수를 호출할 수 있도록 꼭 알려줘야 해. 알았지? 요청을 보낼 때는 send() 함수를 사용하세요 서버는 보통 데이터를 Ajax 요청에 반환해 줍니다 Ajax는 서버기술을 의식하지 않습니다 5단계: 상세 정보 보여주기 요청 객체의 responseText 속성에서 서버의 응답을 얻어냅니다 옛날 방식의 웹 애플리케이션은 안녕… 2. Ajax 애플리케이션 설계하기: Ajax하는 사람의 고민 박중운의 구닥다리 방식의 웹 사이트 Ajax를 사용해서 비동기식으로 등록 요청을 해봅시다 회원 등록 페이지 갱신하기 이벤트 핸들러를 밝힌다 프로그래밍 방침에 맞추어 windows.onload 이벤트 핸들러 설정하기 함수 밖에 있는 자바스크립트 코드들은 해당 스크립트가 읽혀질 때 실행됩니다 언제 실행되어야 할까요? 그렇다면 서버는… Ajax 설계에서 어떤 부분들은 항상 반복됩니다 createRequest()는 항상 같습니다 요청 객체 만들기… 다양한 브라우저에서 동작하도록 Ajax 애플리케이션 설계는 웹 페이지와 서버단 프로그래밍 모두를 포함합니다 요청 객체는 당신의 코드를 웹 브라우저에 연결시켜 줍니다 당신은 서버가 아닌 브라우저와 통신합니다 브라우저는 서버에서 응답이 오면 콜백 함수를 호출합니다 박중운에게 Ajax 회원 등록 페이지를 보여주세요 웹 폼이 서버에게 요청을 보내는 방법은 현재 두 가지입니다 진생 상황을 보여주는 CSS클래스들을 만들어 봅시다 …그리고 자바스크립트에서 CSS클래스를 명시하는 부분을 변경합니다 더 이상 성가신 수정 작업은 없을 것입니다 회원 등록은 무든 준비가 완료된 후에 가능합니다 3. 자바스크립트 이벤트: 사용자에게 즉각 반응하세요 요가의 첫 번째 단계는 ‘아래를 보는 강아지 자세’입니다 Ajax 애플리케이션은 단순한 부품의 조합, 그 이상입니다 이것이 옥주영씨의 XHTML입니다 웹 페이지의 이벤트와 자바스크립트의 이벤트 핸들러를 연결해 주세요 window.onload 이벤트를 사용해서 웹 페이지의 상호 작용 기능을 초기화합니다 왼쪽 이미지를 클릭할 수 있도록 바꿔 주세요 XHTML이 보여주는 페이지의 구조와 내용을 사용하세요 hideHint() 함수도 추가해 보세요 탭: 시각적(시각 그래픽적)인 착각을 이용합니다 for 반복문을 사용해서 이미지들을 살펴보세요 CSS 클래스가 (다시 한번) 핵심입니다 엇… 하지만 탭이 〈a〉태그는 아니었잖아요! 이제는 자바스크립트가 작동하지 않는걸요? 요청 객체를 사용해서 클래스의 상세 설명을 서버로부터 가져오세요 서로 다른 두 개의 함수가 페이지의 어떤 하나의 부분을 갱신 수 있다면 조심스럽게 살펴봐야 합니다 스크립트를 사용해서 이미지를 변경하고 싶다면 ‘CSS 클래스 변경’을 고려해 보세요 XHTML의 링크들은 〈a〉 태그로 나타냅니다 활성화 상태의 이미지를 보여주는 함수와 이 이미지를 감수하는 함수가 필요합니다 4. 복수 이벤트 핸들러: 하나보다는 둘이 낫지 한 개의 이벤트에는 한 개의 이벤트 핸들러만 등록할 수 있습니다(또는 그렇게 보입니다) 이벤트 핸들러는 속성값이죠 하나의 속성은 단 하나의 값만 가질 수 있어요 addEventListener()로 하나 이상의 이벤트 핸들러 등록하기 객체들은 DOM 레벨 2로 하나의 이벤트에 여러 개의 이벤트 핸들러를 등록할 수 있습니다 익스플로러에 무슨 일이 있는 거죠? 익스플로러는 완전히 다른 이벤트 모델을 사용합니다 기능상으로는 attachEvent()와 addEventListener()가 동일하네요 addEventHandler()는 옥주영의 요가 페이지 뿐 아니라 모든 웹 페이지에서 동작합니다 initPage()에 새 유틸리티 함수를 적용해 봅시다 문제점 공략에는 alert() 경고 메시지를! 이번에는 뭐가 또 잘못됐다는 거죠? 익스플로러의 이벤트 핸들러들은 활성된 객체가 아니라 익스플로러의 이벤트 처리 프레임워크가 소유하고 있습니다 attachEvent()와 addEventListener()는 이벤트 핸들러에 또 다른 인수를 제공합니다 이벤트 인수에 이름을 지어줘야 이벤트 핸들러가 이를 활용할 수 있습니다 target이라 외치면, srcElement라고 말하죠 이벤트를 발생한 객체를 어떻게 얻어올까요 5. 비동기식 애플리케이션: 면허증 갱신하는 것과 같아요 비동기식이란 말이 대체 뭔가요? 지금까지 비동기식 애플리케이션을 작성해왔습니다 그렇지만 전혀 눈치채지 못할 때도 있습니다 서버단 작업에 대해 좀 더 알아본다면… (덤) 세 단계로 익히는 비동기식 프로그래밍 표지 이미지를 위한 〈div〉 태그와 2개의 비밀번호 태그가 필요합니다 새로운 작업이 수행되어야 한다면 새로운 이벤트 핸들러 함수가 필요합니다 요청 객체 하나만으로도 하나의 비동기식 요청을 안전하게 주고 받을 수 있습니다 비동기식 요청은 아무것도 기다리지 않습니다. 자기가 요청한 것도 마찬가지로… 만약 2개의 분리된 요청 작업을 수행한다면, 2개의 독립적은 요청 객체들을 사용하세요 비동기식이란 요청과 응답 순서에 의존하여 작업할 수 없다는 뜻입니다 모니터 함수는 당신의 프로그램을 관찰합니다. 바깥에서 말이죠 어떤 동작이 이루어져야 할 것 같으면 모니터 함수를 호출합니다 모니터 함수는 상태 변수들을 통해 현재 상황을 확인합니다 이제 마지막 단계입니다… 동기식 요청은 코드 전체가 다른 일을 수행할 수 없게 합니다 당신의 코드 대신 자바스크립트로 프로세스를 수행시키는 setInterval()을 사용합시다 6. DOM(Document Object Model): 도큐먼트 객체 모델: 웹 페이지 숲속 헤매기 페이지 내의 콘텐츠를 변경할 수도 있고… 페이지의 구조를 변경할 수도 있습니다 브라우저는 DOM을 사용하여 페이지를 표현합니다 당신이 작성한 XHTML은… …브라우저가 이렇게 이해하고 있지요 페이지는 관련된 객체들의 집합입니다 동적 애플리케이션 작성 시 DOM을 사용해 봅시다 XHTML로 시작하시죠 appendChild()는 노드에 새로운 자식 노드를 추가합니다 객체 이름이나 id를 사용하여 태그객체의 위치를 지정할 수 있습니다 새 부모님과의 인터뷰 클릭된 숫자판을 움직일 수 있나요? 가족 관계를 활용한 DOM 트리 주변을 움직일 수 있습니다 DOM 트리는 웹 페이지의 ‘모든 것’을 나타내는 노드들을 지니고 있습니다 문자 노드의 nodeName은 “#text” 제가 이겼나요? 제가 이겼죠? 정말 진지하게 말하는데요… 제가 이겼나요? 7. DOM 다루기: 시키는 대로 할께요 Webville Puzzles사의 사업확장 Woggle은 문자판을 만들 때 테이블 태그를 사용하지 않습니다 XHTML의 문자판들은 CSS를 이용해서 자리를 잡습니다 문자판을 완전히 무작위로 선택하지는 않습니다 페이지의 디자인은 CSS가 담당합니다 문자판에 대한 새로운 클릭 이벤트 핸들러가 필요합니다 각각의 문자판에 대해 클릭 이벤트 핸들러를 만들어 봅시다 이 이벤트 핸들러를 randomizeTiles()에서 할당할 수 있습니다 자바스크립트 속성 값은 문자열에 불과합니다 ‘currentWord’를 식별자로 갖는 〈div〉 태그에 내용과 구조를 추가시켜야 합니다 DOM을 사용해서 페이지의 구조를 바꿉니다 DOM 엘리먼트를 만들려면 createElement()를 사용하세요 당신이 만든 새로운 DOM엘리먼트를 어디에 넣어야 할지 브라우저에게 말해 주어야 합니다 문자판을 비활성화시켜야 합니다. 즉, CSS 클래스를 바꿔주어야 하지요 …그리고 addLetter() 이벤트 핸들러를 작동하지 않도록 합니다 단어를 전송하는 것은 (또 다른) 요청입니다 우리의 자바스크립트는 서버가 어떻게 요청에 대한 응답을 하는지 상관하지 않습니다 사용성 확인: submitWord()는 언제 호출해야 할까요? 8. 프레임워크와 툴킷: 아무도 믿지 마세요 프레임워크에는 어떤 것들이 있나요? 모든 프레임워크들은 제각기 기능을 구현합니다 구문은 바뀌기 마련이지만… 자바스크립트는 여전히 동일합니다 프레임워크를 사용할까요 말까요? 선택은 여러분 몫입니다 9. XML 요청과 응답: 이루다 말로 표현할 수 없어요 고전 로큰롤이 21세기를 맞아 대대적인 보수작업에 들어갔습니다 Rob wants 서버는 어떻게 여러 가지의 값을 응답해 줄까요? InnerHTML을 사용하면 웹 애플리케이션의 클라이언트단은 간단해집니다 XML을 사용하기 위해서는 XHTML에서처럼, DOM을 이용하는 것이 필수입니다 XML 스스로 자신에 대해 설명해 줍니다 10. json: 엄친아 자바스크립트 JSON은 문자 그리고 객체 하나 JSON은 자바스크립트 객체처럼 다뤄집니다 서버의 응답으로부터 JSON 데이터를 어떻게 획득할까요? 자바스크립트는 문자열을 실행합니다 eval()을 사용하여 수동적으로 문자열을 실행합니다 JSON 데이터를 계산하면 해당 데이터를 나타내는 객체를 반환합니다 자바스크립트 객체는 이미 동적이죠. 컴파일 된 객체가 아니니까요 객체의 멤버에 접근할 수 있으며, 멤버를 사용하여 객체의 값들에도 접근할 수 있습니다 서버의 응답을 바로 계산하는 것이 아니라 분리해야 합니다 11 폼과 검증: 하려고 했던 말을 하세요 검증은 웹 페이지로부터 서버에 이르기까지 전 과정에 걸쳐 동작해야 합니다 데이터 포맷을 검증할 수도 있고, 콘텐츠를 검증할 수도 있습니다 드라이(DRY: Don’t Repeat Yourself) ? 반복하지 말자! 이벤트 핸들러들을 좀 더 작성해봅시다 자바스크립트 아들래미의 귀환 속성값은 또 하나의 자바스크립트 객체입니다 입력 데이터에 문제가 발생했을 때는 옥주영의 고객들에게 경고 메시지를… 경고 상황이 아니라면 경고 메시지를 철회해야겠죠? 경고 메시지가 있다면 제거하세요 데이터의 중복은 서버의 문제입니다 12 포스트 요청: 편집증, 전 당신의 친구랍니다 GET 요청은 요청 인수로서 문자열을 네트워크 상에 그대로 전송합니다 POST 요청은 암호화되지 않은 문자열을 그대로 전송하지 않습니다 POST 요청의 데이터는 서버에 도착할 때까지 인코딩되어 있습니다 send()는 POST 요청 방식으로 데이터를 전송합니다 항상 당신의 요청 데이터를 제대로 받았는지 확인하세요 왜 POST 요청이 동작하지 않았을까요? 서버는 POST 데이터를 디코딩합니다 서버에 보내고 있는 것이 무엇인지 알려줘야 합니다 요청 객체의 setRequestHeader()를 사용하여 요청 헤더를 설정하세요 I 부록1: 아직 못다한 이야기들 ? 알아두면 좋은 이야기 II 부록2: 유틸리티 함수