Hacosa js study 4주차
Upcoming SlideShare
Loading in...5
×
 

Hacosa js study 4주차

on

  • 572 views

 

Statistics

Views

Total Views
572
Views on SlideShare
561
Embed Views
11

Actions

Likes
0
Downloads
8
Comments
0

2 Embeds 11

http://www.mulder21c.com 8
http://mulder21c.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hacosa js study 4주차 Hacosa js study 4주차 Presentation 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