웹 프로그래밍

땅콩 치즈 우유

자바스크립트를 사용하게되면 어쩔수 없이 페이지 하단이나 중간에 넣는 경우가 생긴다. 사실 이렇게 코딩을 하고나면 웬지 찝찝한 기분이 들곤 했다. 자바스크립트를 처음 배울때의 제일 먼저 하는 말이 "자바스크립트는 html 문서 header 안에 넣습니다." 이기 때문인다. 하지만 현장에서 종사하다보면 자바스크립트를 페이지의 중간중간 혹은 제일 하단에 삽입하지 않으면 페이지가 정상 동작하지 않는다는 것을 알게된다. 자바스크립트는 절차를 우선으로 하기 때문이다. 이럴 경우 본능적으로 잘못된 코딩을 하고 있다는 것을 직감하지만 얕은 나의 지식으로는 별다른 대처법이 없었다. . . . 해결책을 찾았다. addLoadEvent 함수.. 간단하고 멋져부리구만.. 더디지만 조금씩 알아가는 자바스크립트 슬슬 재밌어진다...

1. DOM 메소드나 프로퍼티를 해석하지 못하는 구형 브라우져를 위해 특정 스크립트를 동작하지 않게 만들기 ex) Example

1. window.onload를 활용하여 자바스크립트는 헤더안에 위치시켜야 한다. 2. 클래스를 활용 마크업하여 자바스크립트 동작을 처러힌다. ex) 돋보기 남양주시

단계적 기능축소 : 스크립트를 사용하지 않도라도 동작 가능한 문서 만들기 1. 슈도 프로토클 (태그 내에 "javascript:") 사용하지 않기 2. a href="#" 을 사용하지 않고 활용하기 ex) 기존사용방식 : 돋보기 //---------------- 자바스크립트 사용을 막은 브라우져에서 링크 불가능 추천사용방식 : 돋보기 //---------------- 자바스크립트 사용을 막은 브라우져에서 비롯 팝업은 아닐 지라도 페이지 연결이 가능해진다.

firstChild : 첫 번째 자식 노드 childNodes[0] 이다 node.firstChild lastChild : 마지막 자식 노드 childNodes[마지막배열] 이다 node.lastChild = node.childNodes[node.childNodes.lenght-1]

nodeName : 문서내의 요소가 무엇인지 확인 : 자바스크립트의 nodeName 요소는 항상 대문자로 반환한다. node.nodeName ex) if(place.nodeName != "IMG") return true;

nodeValue : 노드의 값을 가져오거나 설정 node.nodeValue ex) var str = document.getElementById("id명"); str.childNodes[0].nodeValue; ex) 안녕하세요 첫번째 노드값 결과값 : 얼럿 안녕하세요 첫번째 노드값

nodeType : 문서내에 찾으려는 노드형식 반환 : 숫자로 type 반환 1 -> 요소(태그) 2 -> 속성 3 -> 텍스트 node.nodeType ex) 가족 사진 아빠 엄마 딸 아들 결과값 : 1 반환

childNodes : 문서내 노드 트리에서 모든 요소의 자식에 대한 정보를 가지고 올수 있는 방법 : 모든 형식의 노드를 포함하는 배열을 반환 element.childNodes ex) 가족 사진 아빠 엄마 딸 아들 결과 : 얼럿 [boject NodeList] 반환 / 얼럿 3 반환

return false; : 자바스크립트가 태그의 기본동작을 취소할수 있다 : 자바스크립트 함수 호출 후 작성한다. ex) 네이버 아빠

setAttribute("속성","값") object.setAttibute(attribute,value) : 특정 속성 노드의 값을 바꾸는 함수 : 요소노드에서만 동작한다. : 속성, 값 의 인수를 갖는다. ex) 아래 물건 꼭 사오세요! 결과 : 첫번째 얼럿 -> 중요한 사항임 / 두번째 얼럿 -> 안 사오면 죽음