hacosa js study 6th
DESCRIPTION
하코사 자바스크립트 스터디 6주차TRANSCRIPT
HACOSA JS STUDY#8 ENHANCING CONTENT
하면 안되는 것
• 문서 내에 중요한 내용을 추가하기 위한 DOM 사용
‒ 단계적 기능 축소의 혜택을 제공할 수 있는 여지가 없음
‒ 자바스크립트를 지원하지 않는 브라우저 사용자는 해당 내용을 볼
수 없게 됨
‒ 처음 문서 구조를 만들 때 주의를 기울여야…
축약어 목록 표시 p.203• <html>
<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<title>문서 객체 모델</title>
</head>
<body>
<h1>문서 객체 모델(Document Object Model)이란 무엇인가?</h1>
<p>
<abbr title=“World Wide Web Consortium”>W3c</abbr>는
<abbr title=“Document Object Model”>DOM</abbr>을 다음과 같이 정의 한다.
</p>
<blockquote cite=http://www.w3c.org/DOM>
<p>
특정 문서에 대한 내용과 구조, 외양을 동적으로 접근해 변경할 수 있도록 스크립트나 프로그램이 이용
가능한 플랫폼과 언어 중립적인 인터페이스
</p>
</blockquote>
<p>
즉 <abbr title=“HyperText Markup Language”>HTML</abbr>이나 <abbr title=“eXtensible Markup Language”
>XML</abbr> 문서를 다루는데 사용하는 <abbr title=“Application Programming Interface”>API</abbr>라고
할 수 있다.
</p>
</body>
</html>
의 title 속성만 모아 본 정의 목록 만들기
축약어 목록 표시 p.203
• DOM을 사용하여 자동으로 목록 만들기
1. 문서 내에 abbr 요소를 반복문을 통해 찾는다.
2. 각 abbr 요소의 title 속성을 저장한다.
3. 각 abbr 요소의 값을 저장한다.
4. 정의 목록을 만든다.
5. 저장한 title 속성 및 abbr 요소 값을 반복문을 통해 구한다.
6. 정의 제목 요소를 만든다.
7. abbr 요소 값을 정의 제목에 넣는다.
8. 정의 설명 요소를 만든다.
9. title 속성 값을 정의 설명에 넣는다.
10. 각 정의 제목을 정의 목록에 추가한다.
11. 각 정의 설명을 정의 목록에 추가한다.
12. 마지막으로 정의 목록을 문서 body에 추가한다.
축약어 목록 표시 p.203
• 함수 만들기1. 함수 이름 정의
→function displayAbbrviations()
2. 1. 문서내 abbr 요소를 반복문 통해 찾기→var abbreviations = document.getElementsByTagName(“abbr”);
for(var i = 0; i < abbreviations.length; i++){
}
3. 2. 각 abbr 요소의 title 속성을 저장한다.3. 각 abbr 요소의 값을 저장한다.
→var defs = new Array();var abbreviations = document.getElementsByTagName(“abbr”);for(var i = 0; i < abbreviations.length; i++){
var definition = abbreviations[i].getAttribute(“title”);var key = abbreviations [i].lastChild.nodeValue;defs[key] = definition;
}
축약어 목록 표시 p.203
4. 4. 정의 목록을 만든다.→var dlist = document.createElement(“dl”);
5. 5. 저장한 title 속성 및 abbr 요소 값을 반복문을 통해 구한다→for (key in defs){
var definition = defs[key];
var dtitel_text = document.createTextNode(key);
}
6. 6. 정의 제목 요소를 만든다.
7. abbr 요소 값을 정의 제목에 넣는다.→for (key in defs){
var definition = defs[key];
var dtitle = document.createElement(“dt”);
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
}
축약어 목록 표시 p.203
7. 8. 정의 설명 요소를 만든다.
9. title 속성 값을 정의 설명에 넣는다.→for (key in defs){
var definition = defs[key];
var dtitle = document.createElement(“dt”);
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement(“dd”);
var ddesc_text = document.createTextNode(difinition);
ddesc.appendChild(ddesc_text);
}
8. 10. 각 정의 제목을 정의 목록에 추가한다.
11. 각 정의 설명을 정의 목록에 추가한다.→ for (key in defs){
:
dlist.appendChild(dtitle);
dlist.appendChild(ddesc);
}
축약어 목록 표시 p.203
12. 마지막으로 정의 목록을 문서 body에 추가한다.
→ document.body.appendChild(dlist);
인용구 출처 표시 p.219• <html>
<head>
<meta http-equiv=“content-type” content=“text/html;charset=utf-8” />
<title>문서 객체 모델</title>
</head>
<body>
<h1>문서 객체 모델(Document Object Model)이란 무엇인가?</h1>
<p>
<abbr title=“World Wide Web Consortium”>W3c</abbr>는
<abbr title=“Document Object Model”>DOM</abbr>을 다음과 같이 정의 한다.
</p>
<blockquote cite=http://www.w3c.org/DOM>
<p>
특정 문서에 대한 내용과 구조, 외양을 동적으로 접근해 변경할 수 있도록 스크립트나 프로그램이 이용
가능한 플랫폼과 언어 중립적인 인터페이스
</p>
</blockquote>
<p>
즉 <abbr title=“HyperText Markup Language”>HTML</abbr>이나 <abbr title=“eXtensible Markup Language”
>XML</abbr> 문서를 다루는데 사용하는 <abbr title=“Application Programming Interface”>API</abbr>라고
할 수 있다.
</p>
</body>
</html>
의 인용(blockquote) 의 cite 속성을 표기
인용구 출처 표시 p.219
• DOM을 사용하여 인용 출처 표시
1. 문서 내 모든 blockquote 요소를 찾아낸다.
2. Blockquote 요소로부터 cite 속성을 얻어낸다.
3. “출처”라는 텍스트 요소를 링크 요소에 추가한다.
4. Cite 속성 값을 이 링크에 추가한다.
5. 인용구 마지막에 이 링크를 추가한다.
인용구 출처 표시 p.219
• 함수 만들기
1. 함수 이름 정의→function displayCitations()
2. 1. 문서 내 모든 blockquote 요소를 찾아낸다.→var quotes = document.getElementsByTagName(“blockquote”);
for(var i = 0; i < quotes .length; i++){
}
3. 2. Blockquote 요소로부터 cite 속성을 얻어낸다.→var quotes = document.getElementsByTagName(“blockquote”);
for(var i = 0; i < quotes .length; i++){
if(!quotes[i].gettAttribute(“cite”) continue;
var url = quotes[i].getAttribute(“cite”);
}
인용구 출처 표시 p.219
• 함수 만들기
4. 3. “출처”라는 텍스트 요소를 링크 요소에 추가한다.→var quoteChildren = quote[i].getElementsByTagName(“*”);
var elem = quoteChildren[quoteChildren.length – 1];
var link = document.createElement(“a”);
var link_text = document.createTextNode(“출처”);
link.appendChild(link_text);
5. 4. Cite 속성 값을 이 링크에 추가한다.
→link.setAttribute(“href”, url);
6. 5. 인용구 마지막에 이 링크를 추가한다.
→var superscript = document.createElement(“sup”);
superscript.appendChild(link);
elem.appendChild(superscript);
접근키 표시
• 윈도우 웹브라우저 : ALT + 접근키
맥 웹브라우저 : COMMAND + 접근키
• <a href=“index.html” accesskey=“1”>첫화면</a>
• 브라우저에서 제공하는 단축키와 충돌할 가능성이 있음
접근키 목록 만들기
1. 문서 내 모든 링크의 노드셋을 가져온다.
2. 이들 링크를 반복한다.
3. 링크에 accesskey 속성이 있으면 값을 저장한다.
4. 링크 텍스트도 저장한다.
5. 목록을 새로 만든다
6. 각 링크의 접근키를 목록 항목으로 만든다.
7. 각 목록 항목을 목록에 추가한다.
8. 목록을 문서에 추가한다.
END