XML DOM이라는 것은 XML 파일을 HTML로 불러들이는 것이다. (원래 엄밀히 말하면 그런 건 아니지만, 수행평가를 위해서 복잡하게 알 필요는 없어서 자세한 설명은 생략한다)

1학기 때는 Data Binding을 이용했으나, 이번에는 XML DOM을 이용해 보는 것이다. 뭐, 그게 그거다..


일단 대충 XML 파일을 만들어본다.

이제는 Javascript를 이용하여 이 것을 HTML 파일에 띄워 볼 것이다.

여기서 Java의 객체 생성 기능을 새록새록 떠올려본다. Javascript는 Java라는 말이 들어있다 보니 Java스러운 부분이 있다.


일부 소스는 생략했다.

new라는 것은 Java시간에 배웠는데, 객체를 생성하는 것이다. new Car, new Soonok 등 우리는 2학년 떄 지긋지긋하게 써 봤다.

ActiveXObject라는 객체를 이용, DOM 객체를 생성한다. 딴 거 필요없고 저렇게만 쓰면 된다.

다음은 load라는 method를 통해 파일을 불러온다. 나중에는 HTML에서 파일을 불러오면 이를 Javascript에 전달받아서 쓰게 되겠지만, 일단은 직접 파일명을 쳐 보자. 예제의 파일명은 'list.xml' 이다.

다음의 코드는 XML 로딩이 실패했을 경우 알려주는 것인데, parseError라는 속성을 별도의 변수에 저장한다. 이 속성은 에러가 났을 경우 에러 정보를 가지고 있다.
이 속성 하위에는 또 다른 속성이 있는데, errorCode라는 속성은 XML 로딩 시 에러 여부를 판별한다. 에러가 있을 경우 true, 없을 경우 false이다. if문을 통해 true일 경우 alert를 이용해 XML 해석이 실패했다는 것과 err.reason 이라는 속성을 통해 이유를 알려준다.

만약 XML 로딩이 성공적으로 완료되었으면 if문 다음부분을 통해 XML문서를 만지작할 수 있다.

우선, 처음 엘리먼트의 내용을 출력해 보자. 예제 XML 파일의 많은 내용 중 첫번째 엘리먼트의 내용은 '멋진남자 히라이켄' 이 된다. (kind='수필' 부분은 속성이다)

다음은 이 소스 전문(全文)이다.


실행 결과는 다음과 같다



첫번째로 친 줄은 원래 소스에서 직접 파일 이름을 썼던 부분인데, HTML에서 파일을 읽어들일 수 있도록 'input type=file' 을 이용하여 HTML에서 파일을 불러들이게 했고, 그 파일 경로가 저장되어 있는 'form1.fileName.value' 속성을 기존의 'xmlDoc.load' 메소드에 인수로 넣으면 그 파일이 불러져 만지작할 수 있게 된다.

이번에 선언한 변수는 eRoot, eBook, eTitle, tTitle 4개이다.
eRoot는 말 그대로 루트, 그러니까 루트 엘리먼트인 <booklist> 태그 부분이다.
eBook은 XML 파일에서 <book> 태그 부분이다.
eTitle은 <book> 태그 밑에 있는 <title> <author> 등의 엘리먼트들이다.
tTitle은 eTitle에 있는 값을 가지고 있어서, tTitle.data 라는 메소드를 이용하여 이 값을 얻을 수 있다.

각각의 변수에 있는 firstChild 속성은 맨 처음 엘리먼트(태그) 를 가리킨다. 그러므로 무조건 맨 위에 있는 <booklist> - <book> - <title> - '멋진남자 히라이켄' 으로 가게 된다.


우리의 목표는 XML 파일의 모든 것을 만지작하는 것이다. 그런데 겨우 무조건 맨 첫번째 엘리먼트만 만지작거리겠다고 하는 건 말이 안 된다. 이젠 다음 엘리먼트를 만지작거릴 차례다.

여기서는 nextSibling이라는 속성을 이용한다. 이 속성은 다음 엘리먼트에 대한 속성을 담고 있다.


앞에서 빨갛게 칠해 진 부분을 이렇게 바꿔 nextSibling에 대해 알아보자.
먼제 책제목을 출력한 후, eTitle = eTitle.nextSibling을 통해 eTitle을 다음 엘리먼트, 즉 <title> 다음인 <author>에 위치시켰다. 데이터를 의미하는 tTitle은 데이터가 여러 개 있는 게 아니라 하나만 있으므로 firstChild로 한다. 그리고 출력.


이렇게 <author>에 있던 '정민호' 라는 내용도 출력할 수 있게 되었다. 이를 응용하면, <publisher>와 <price> 엘리먼트의 내용도 모두 출력할 수 있다. nextSibling을 계속 해주면 된다.

이제 맨 처음의 <book> 엘리먼트(멋진남자 히라이켄 등등)를 모두 출력할 수 있게 되었다. 그런데, XML 예제 파일을 보면 '멋진남자 히라이켄' 외에도 '홀롤로' '대출의 정석' 등 모두 3개의 <book> 엘리먼트가 존재한다. 이들을 모두 출력할 순 없을까.

답은 간단하다. <book> 하위의 <title> -> <author> -> <publisher>.. 로 가는 데 eTitle에 NextSibling을 걸어 주었으니, 이제는 이 상위인 eBook에 nextSibling을 걸어주면 된다. 우리는 이를 지난번의 데이터 바인딩처럼 버튼으로 만들어, <book> 엘리먼트를 넘나들도록 만들어 보려고 한다.

일단 만들고자 하는 버튼은 '이전' 과 '다음' 이다. '다음' 은 nextSibling을 이용하면 되고, '이전' 은 next가 아닌 '앞' 이라는 뜻의 previousSibling이라는 속성을 이용하면 된다. 버튼을 이용하려면 Javascript 함수를 만들어야 하므로, 스크립트 내에 '이전' 과 '다음' 의 역할을 하는 새로운 함수를 만들자.


일단 eBook을 전역변수로 바꿔버림에 따라, displayBook의 인수를 없앴다. 인수가 없어도 eBook이 전역변수이므로 쓸 수 있기 때문이다.
'이전' '다음' 버튼을 누르는 두 개의 함수는 previousSibling과 nextSibling을 적용한 이후 displayBook()으로 변경된 것을 재출력하도록 했다.
그렇다면 이젠 버튼을 만들어 보자. 밑의 소스는 맨 마지막 </td>와 </table> 사이에 넣으면 된다.


이제 각 버튼을 눌러보면 '멋진남자 히라이켄'에서 '홀롤로' '대출의 정석' 으로 넘겨간 것을 확인할 수 있다.
그런데 만약, 맨 마지막 엘리먼트에서 nextSibling을 해 버리거나, 맨 처음 엘리먼트에서 previousSibling을 하게 되면 에러가 난다. 당연하지만 다음에 나올 데이터가 없기 때문에 에러가 나는 것이다.

이러한 것을 막으려면 현재 있는 eBook이 첫 또는 엘리먼트와 같은지의 여부를 조사해서 같으면 Sibling을 안 해버리면 된다.


여기서 lastChild라는 속성이 새로 나오는데, firstChild이 맨 처음을 가리키는 속성이라면, lastChild은 말 그대로 맨 마지막 자식 엘리먼트를 가리키는 속성이 된다. 이것이 같으면, 결국 처음이나 마지막이라는 얘기다.

여기서 응용하여, '처음' '마지막' 버튼도 만들어 보자. eRoot.firstChild와 eRoot.lastChild를 이용하면 된다.


이제 처음과 마지막 버튼을 눌러보면 정상 작동되는 것을 확인할 수 있다.

여기서 우리는 잊은 게 있었다. <book kind = ''>
속성 부분인데, 아무래도 엘리먼트 내에 있는 '멋진남자 히라이켄' 같은 데이터가 아니다 보니 보통의 방법으로는 할 수 없고, 새로운 메소드를 써서 속성값을 가져오면 된다.

displayBook() 함수에 다음을 추가한다.


getAttribute라는 메소드는 엘리먼트의 속성을 가져오기 위한 메소드이다. 'kind' 라는 인수를 넣어 kind속성을 불러들여온다. 이 함수에서 form1.txtKind라고 하였으므로 역시 HTML 안의 form 태그 내에 다음을 추가한다.


한번 실행해 보자. 이젠 모든 내용을 출력할 수 있으며, 엘리먼트간 자유로운 이동도 할 수 있다.

* 여기서는 버튼을 눌러도 작동되지 않는다.

황호규 신임 교장 취임 (9월 1일 취임, 취임식은 9월 3일)

황호규 신임 교장은 3일 취임사에서 '선린의 명성은 익히 들어 잘 알고 있다. 전문계 고등학교의 TOP이라 할 수 있게 된 것을 영광으로 생각한다'고 소감을 밝히고, '즐거운 공부를 할 수 있는 학교를 만들겠다' 며 취임 이후의 포부를 밝혔다.

그런데..
천광호 전 교장으로부터 교내 정원에 대한 설명과 원예 방법 등을 지도받는 황호규 신임 교장.

---

학생식당 입구 TV 설치

9월 3일 급식업체는 급식 줄에서 기다리는 지루함을 없애기 위해 입구에 TV를 설치, 가동에 들어갔다. 박지숙 영양사는 8월 31일 '입구에 TV를 설치하여 EBS 수능 강의를 방송할 예정이다' 라는 계획을 말했으나, EBS 강의는 보류되고 대신 음악방송을 틀어주고 있다.

4일 공개된 TV의 초기화면. EBS는 없다.

---

기타

LCD를 90도 꺾어 세로로 긴 화면을 보여주는 기능이 시연되었다. 아직은 일부 프로그램이 이 기능을 지원하지 않지만, 네이버 등 세로로 긴 화면을 보여주는 홈페이지에서는 편리한 기능이 될 것으로 각광받고 있다.

'포켓몬 불가사의 던전 파랑 구조대'가 발매되었다. 시연을 보인 이현인군(19, 선린인터넷고 3)은 '포켓몬스터가 모두 한글로 나온다는게 신기하다'며 '이건 가히 혁명적인 것'이라고 포켓몬스터 게임의 한글화를 설명하였다.

2호관은 열심히 페인트칠중. 8월 1일부터 15일까지 매일 비가 내리는 기록적인 기후로 인해 개학 후에 페인트질을 하는 상황이 되어버렸다.

원래는 '야자 "화·목 파트너구함' 으로 해석하자면 '화요일과 목요일에 야자를 대신 해 줄 사람' 으로 했는데, 단어 선택의 부적절성으로 인해 이렇게 개조되는 운명을 맞았다.

일주일 남은 교장선생님. 일설에 의하면 퇴임 후에도 꽃을 가꾸신다고 한다.


누구의 사진일까요

심심한 용한

심심한 은석

Pro Evolution Soccer 2008 동영상