lonelycat's cellar

9장 CSS와 DOM 연동하기를 읽으면서 간단 정리

1. DOM의 style 프로퍼티로는 외부 스타일 시트에서 선언한 style 객체 및 문서 내부의 미리 선언한 스타일 정보도 가져올 수 없다.
  오로지 인라인으로 선언된 style 속성의 정보만을 가져올 수 있음.

2. DOM으로 style 변경 시 기존 class 속성에 새 class 속성을 추가하고 싶을 때
  eleme.className += " newClass"; 이런 식으로 공백을 두고 추가.

Summary.
  DOM으로 style을 바꾸는 일이 얼마나 있을지는 모르겠음. 단, CSS에 정의되어 있는 class에 대한 정의를 이용해서 DOM으로 class를 변경하는 것 정도는 사용할지도 모르겠음.

10장 애니메이션 슬라이드쇼 만들기

1. setTimeout/clearTimeout

variable = setTimeout("function", interval); clearTimeout(variable);

변수명 = setTimeout(함수, 인터벌(밀리초));
clearTimeout(변수명); // 위에서 설정한 timeout을 취소

movement = setTimeout("moveMessage()", 5000); clearTimeout(movement);

2. parseInt

parseInt(string)

문자열을 정수로 반환
문자열 중 정수만 반환 : parseInt("39 degree") == 39

3. CSS: overflow
  overflow:visible --> 전체를 모두 표시. 내용을 포함하고 있는 요소 밖으로 삐져나가서 표시
  overflow:hidden --> 요소 밖으로 나간 것은 표시하지 않음
  overflow:scroll --> 요소 안의 것만 보이나 스크롤 바가 생김
  overflow:auto --> 내용이 클 경우 스크롤 바가 생김

4. 사용자 지정 프로퍼티

var elem = document.getElementById(elementID); elem.movement = setTimeout(repeat, interval); if(elem.movement) {     clearTime(elem.movement); }

elementID에 movement라는 프로퍼티를 추가.

5. @import

<style type="text/css" media="screen">   @import url("styles/layout.css"); </style>

css파일 안에서도 사용가능
js도 가능.

11장 총정리

1. margin, padding

* {     padding: 0;     margin: 0; }

전체 선택자로 마진과 패딩을 0으로 설정 -> 브라우저마다 제각각인 기본 스타일 문제를 해결

부록

DHTMLgoodies.com

일단 살짝 다 읽어본 감상.

저자는 어떠한 환경에서도 웹에 접근할 수 있어야 함을 강조.
그를 위해서 마크업/CSS/스크립트를 분리해야 한다고 말하고 있다.

옳은 말이라고는 생각하나 실제 프로젝트에서 이걸 100% 지키기는 힘들어 보인다.
한국이라서 그런가?

특히나 스크립트를 완전히 분리해서 쓰는 것은 어지간한 실력이 아니면 힘들 듯.
게다가 시간도 많이 필요하고...

ajax에 대해서도 ajax가 불가능한 브라우저도 고려해야 한다고 말하고 있음.

결국, 프로젝트에서 완벽하게 위의 사항들 - 저자의 주장 - 을 지키면서
개발을 할 수 있는가의 문제가 현실적인 문제가 되겠는데
내 짧은 생각으론 조금만 복잡한 웹사이트 또는 RIA를 만드는 경우에는
위의 사항들을 다 지키기는 어렵지 않을까 싶다.

또 꼭 이렇게까지 안해도 될 듯 싶고.
여러가지 좋은 javascript framework들도 나와있고 - jQuery 같은. ^^;;

var el = document.createElement("span");         el.setAttribute("title", key);         el.setAttribute("class", "dpCatLabel");       //el.setAttribute("onclick", "alert('TEST');"); // DOESN'T WORK. onclick is not attribute.       el.onclick=function(){alert("TEST");};         var txt = document.createTextNode(label);         el.appendChild(txt);

onclick 등은 이벤트라서 setAttribute로 붙일 수 없고,
el.onclick=function;  으로 붙이자.

createElement로 생성한 노드들을 지울때, 특정 노드 밑에 딸린 노드들을 몽창 한번에 지우는 메소드가 없는 건지 못찾은 건지,
아무튼 parentNode에 딸린 노드들을 전부 찾아서(getElementsByTag), for 루프 돌면서 지우는데 절반만 지워져서 헤매다가 원인을 찾았음

function deleteNodes(parentNode, tag) {     var nodes = parentNode.getElementsByTagName(tag);     var length = nodes.length;          // 이건 nodes가 실시간으로 줄어들면서 length 자체가 줄어든다.     // 따라서 아래의 for문에서 기존 nodes의 갯수만큼 루핑하면서 0번만 계속 지움.     // i번을 삭제하면 stack overflow 남     /*for(var i = 0; i < nodes.length; i++) {         var node = nodes[i];         parentNode.removeChild(node);     }*/          for(var i = 0; i < length; i++) {         var node = nodes[0];         parentNode.removeChild(node);     } }

위에 써놓은 것처럼

for(var i = 0; i < nodes.length; i++) {

8장 XSL는 읽고 넘겼음. 필요할 때 찾아보면 될 듯.

9장 DOM 기반 문서 처리 프로그래밍

<parent>
  <element>TEXT</element>
</parent>

위의 경우 TEXT 자체도 노드로 취급한다는 점에 주의.
parent <- element <- TEXT 이런 식으로 상위 노드에 종속되어 있다.


<parent attr="ATTR">TEXT1
  <element>TEXT2</element>
</parent>

예를 들다보니 위와 같이 되었지만, 위와 같은 것은 없는듯.
TEXT1과 element의 레벨이 같아지므로, 관리불가!? 어느게 TEXT이고 어느게 element인지 알 수 없다. 전부 NODE이므로..
책이나 웹 찾아봐도 MIXED라는 것이, 문자 데이터 또는! 자식 엘리먼트이지, 문자 데이터와 자식 엘리먼트는 아니었음.


<parent attr="ATTR">
  <element>TEXT2</element>
</parent>

위의 경우도 마찬가지로  TEXT2, ATTR은 전부 하나의 노드로 취급한다. 하지만 속성은 그 값을 얻는 방식이 다르다.
parent <- element <- TEXT2
  <- ATTR

parent에 ATTR, element가 종속되어 있으나, ATTR 과 element는 동일 레벨이 아니다.
속성값(ATTR)을 얻을 때는 parent.getAttribute("attr");
TEXT1을 얻을 때는 eText = element.getFirstChild() 한 후, eText.getData();