Hacosa js study 4주차

  • 453 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
453
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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