hacosa js study 4주차
TRANSCRIPT
HACOSA JS STUDY#5 꼭 알아야 할 핵심 기본기
#6 사진첩 기능 개선
꼭 알아야 할 핵심 기본기
• 꼭 필요한지 철저히 검토
‒ 사용자 경험을 고려한 스크립트 사용
• 단계적 기능 축소
‒ 자바스크립트 기능이 없는 브라우저 고려
‒ 슈도 프로토콜 지양
‒ 인라인 이벤트 핸들러 지양
• 스크립트 분리
• 하위 호환성
‒ 객체 판별법
사진첩 기능 개선
• 1. 자바스크립트 기능이 없다면?
‒ <a href=“image/dad.jpg” oncilck=“showPic(this); return false;”
title=“멋있는 아빠 사진”>아빠</a>
→JavaScript가 동작하지 않더라도 편의성은 떨어지나 접근성은 높음
‒ <a href=“javascript:showPic(„image/mom.jpg‟);return false;”
title=“멋있는 아빠 사진”>아빠</a>
→ 자바스크립트 기능을 켜야만 작동
‒ <a href=“#” oncilck=“showPic(this); return false;” title=“멋있는 아빠
사진”>아빠</a>
→ 자바스크립트 기능이 없으면 아무 쓸모 없는 사진첩이 됨
사진첩 기능 개선
• 2. 자바스크립트 코드가 마크업에 포함되어 있는가?
‒ onclick 이벤트를 외부 자바스크립트 파일에 추가
‒ 어떻게?
→ 특정 링크를 인식할 수 있는 표지가 필요
• 마크업 구조에 따라 class, id 속성 등을 이용
(getElementByTagName, getElementById 등의 메소드 이용)
• 예제에서는 class 속성을 추가하는 것은 각 링크마다 인라인 이벤트 핸들러를
추가하는 것은 좋지 않다라고 소개 하였으나, 마크업 구조에 따라 불가피한 상
황 등에는 사용 하는 것이 좋을 듯 생각 됨
• 정리하자면, 동작을 위한 인라인 속성 추가를 최소한으로 하여 사용하는 것을
권장
사진첩 기능 개선
• 이벤트 핸들러 추가
‒ 점검 사항
→ 프로그램의 안정성 점검 (DOM 메소드 처리 가능 여부 확인 등)
• 일종의 방어적 프로그래밍
• 다양한 환경에서 발생할 수 있는 오류를 예상하여 대처
• getElementById 등 DOM 메소드 처리 불가능한 브라우저
if(!document.getElementByID) return false;
• 프로그램에서 접근할 요소가 없을 경우에 대한 대처
if(!document.getElementById(„imagegallery‟) return false;
사진첩 기능 개선
• 변수 지정하기
‒ 가독성 상향
→ var gallery = document.getElementById(“imagegallery”);
→ 이후 gallery 로 호출
‒ 컴퓨터가 불필요한 반복 계산 하지 않도록 함
→ var gallery = document.getElementById(“imagegallery”);
→ gallery에 해당 객체를 대입시킴으로 이후 gallery를 호출 시 찾아진 객체
를 바로 불러 들임.
→ document.getElementById(“imagegallery”) 로 계속 호출 시 브라우저는
getElementById 함수를 계속 실행해야 함
‒ 주의 사항
→변수명 지정 시 예약어 사용 불가 ex) var, if 등
사진첩 기능 개선
• 동작 변경
‒ onclick 이벤트에 동작 추가
→links[i].onclick = function(){
}
‒ showPic 함수를 실행하고 링크 클릭하는 기본 동작을 취소해야 하
므로
→links[i].onclick = function(){
showPic(this);
return false;
}
사진첩 기능 개선
• 작업 나누기(?)
‒ 작성된 함수를 문서가 모두 읽힌 다음에 실행 되도록 처리
→window.onload 이벤트 이용
→window.onload = function(){
firstFunction();
secondFunction();
}
식으로 사용
→ window.onload = firstFunction;
window.onload = secondFunction;
으로 작성 시, 마지막 함수만 실행 됨
사진첩 기능 개선
• 작업 나누기(?)
‒ addLoadEvent
→ 사이먼 윌리슨이 고안한 방법
→ addLoadEvent(firstFucntion);
addLoadEvent(secondFuntion);
과 같은 방법으로 작성
사진첩 기능 개선
• 검증 코드 작성
‒ 앞서 나왔던 “프로그램의 안정성 점검” 과 비슷한 내용
‒ 프로그램의 무결점화
function showPic(whicpic){
if(!document.getElementById(“placeholder”)) return false;
var source = whicpic.getAttribute(“href”);
var placeholder = document.getElementById(“placeholder”);
placeholder.setAttribute(“src”,source);
if(!document.getElementById(“description”)) return false;
var text = whicpic.getAttribute(“title”);
var description = document.getElementById(“description”);
description.firstChild.nodeValue = text;
}
사진첩 기능 개선
• DOM Core, HTML-DOM
‒ DOM Core :
→ DOM을 지원하는 모든 프로그래밍 언어에서 공통적으로 사용
‒ HTML-DOM:
→ (X)HTML 문서에 적용되는 DOM
‒ DOM Core VS. HTML-DOM
document.getElementByTagName(“form”) : DOM Core
document.form : HTML-DOM
Element.getAttribute(“src”) : DOM Core
Element.src : HTML-DOM
END