[JavaScript] JavaScript 기초 2일차 (160319,토)

10:04 AM 오늘은 4분 지각을 했습니다.

아침도 먹고, 급한 전화도 받고....

 

=====================================    1      ======================================

 

자바스크립트의 이벤트

이벤트 : 웹브라우저에서 일어나는 어떤 사건

이벤트 헨들러 : 이벤트를 처리해 주는 것

실습1 : e_exam01.html

 

이벤트 헨들러를 등록하는? 두가지 방법을 실습을 해 보았습니다.

객체에 직접 Window프로그래밍 처럼 등록을 할 수도 있고 스크립트 수행이 끝나고 객체별로 등록을 할 수도 있습니다.

(위의 실습에 버튼 1이 전자, 버튼 2가 후자의 방식입니다.)

위에서 후자의 방식으로는 하나의 이벤트 헨들러만을 사용할 수 있어서 다른 방법을 추가로 실습하였습니다.

객체에 addEventListener를 사용하는 방법으로 하나의 객체에 여러개의 이벤트 핸들러를 등록할 수 있습니다.

구버전의 IE에서도 지원을 하기 위해 Cross 라는 JavaScript 파일을 만들어서 처리를 하는 것 또한 해 보았습니다.

실습2 : crossEvent.js , e_exam01.html

 

http://jquery.com/

JQuery Website를 방문하여 JQuery의 장점을 확인할 수 있었고 그중에는

Cross-Browser

IE, Firefox, Safari, Opera, Chrome, and more

위의 내용을 지원하는 것 또한 포함되어 있습니다.

즉, 실습 2의 내용을 굳이 하지 않아도 JQuery를 사용하면 크로스브라우저 기능을 지원합니다.

 

 

이벤트 버블링?

 

부모자식간의 관계에 의해서 자식의 이벤트가 부모에게도 흘러가는것?

 

캡쳐링은 부모에서부터 자식으로 흘러가는 것?!

 

아직 위의 부분에 대해서는 명확한 개념이 들어오지 않았습니다.

 

실습 3. e_exam02.html

버블링 또한 표준 브라우져와 IE구버전이 다릅니다.

(실습 중 실습 2에서 만든 JS파일을 추가하지 않아서 버블링이 되지 않기도 했습니다.)

 

 

=====================================    2      ======================================

(~ 12:44)

 

mission2 ,뭔가 고작 더하기 빼기 하는건데 더하기하면 그냥 붙어 나오는 문제가 발생했습니다.

5+6 = 56,

6-5=1 이 나오는 이상한 계산기입니다.

그 이유는 parseInt()함수를 사용해서 값을 처리해 주지 않았기 때문에 문자열로 처리가 되었습니다.

 

datatype을 명시하지 않는것의 장점만 있는것이 아니라는 것을 학인할 수 있었습니다.

 

 

 

THIS??!!!!란??

실습 !!! -> t_exam01.html ~ t_exam03.html

보통의 경우는 window 객체,

event handler 안에서는 event를 발생시키는 대상 객체

생성자함수나 객체의 Method내에서는 해당 객체가 this!!!!

 

브라우저 내장 객체

 - window와 document

 

실습 : w_exam01.html

 

=====================================    3      ======================================

(14:05  ~ 14:55)

실습 : w_exam01.html        

 

부모 자식간의 결과를 주고 받는식의 실습

실습 : mission.html , address.html

 

 

(이론수업)

사용자 정의 함수와 객체모델                             <다른 강의자료 사용하셨습니다>

 

각 문서의 태그들을 Node가 있는 트리구조로 해석해 낼 수 있다고 가정하는 것입니다.

그동안은 DOM Level 0방식으로 접근하였습니다.

 

DOM API

DOM Property (nodeName, nodeType, childNodes, firstChild, lastChild, 등...)

 

 

return false -> 기본 이벤트를 취소(실행하지 않도록)시키는 기능을 하도록.

 

 

 

=====================================    4      ======================================

(15:09 ~16:14)

 

DOM 폴더를 가져와서

실습 : gallery01.html ~ gallery03.html , showPic.js

 

gallery03.html 에서 뭔가가 잘 되지 않습니다. 현재.

 

=====================================    5      ======================================

(16:24쯤? ~ 17:10)

gallery03.html 마무리

 

뭔가 여전히 강사님과 다른 페이지 레이아웃이지만 뭔....

 

실습 : talbe.html , stripeTable.js-> 홀수에 노랑색으로 표시되게 하기

 

클레스를 추가하는 함수를 추가로 만들어 줄 필요가 있다는 설명과 함께 위의 실습을 시작하였습니다.

 

추가 실습  : talbe.html , stripeTable.js-> 마우스 올라가면 굵은 글씨로 바꿔주기

 

=====================================    6      ======================================

(17:17 ~ 17:51)

ajax!

웹 2.0 기술.

 

Page를 다시 불러오지 않는 . 기존 기술을 비 동기식으로 처리해준것이라고 설명 해 주셨습니다.

GET방식 POST방식?

 

ajax는 자바스크립트의 이벤트부터 시작된다고 하셨습니다.

xml과 json방식으로 돌아가는 코드를 설명과 함께 봤습니다.

ajax폴더에 있는 code들입니다.