Ajax 기술 문서(작성자 : 김연수)
(첫 회사에 입사하여 만든 사내 배포용 기술 문서)
Ajax In Action 도서를 참고하며 자료를 만들었으며, 이 자료를 만들면서 AJAX에 대한 많은 이해를 하게 됐던 거 같다.
작성일자는 잘못된 것이고, 2007년에 만들고 발표한 것으로 추정된다.
Ajax 기술 문서(작성자 : 김연수)
(첫 회사에 입사하여 만든 사내 배포용 기술 문서)
Ajax In Action 도서를 참고하며 자료를 만들었으며, 이 자료를 만들면서 AJAX에 대한 많은 이해를 하게 됐던 거 같다.
작성일자는 잘못된 것이고, 2007년에 만들고 발표한 것으로 추정된다.
JSP 프로그래밍 #01 웹 프로그래밍
1.1 웹 (온라인 강의: https://youtu.be/qDZXXHhMr4A)
1.2 서블릿 (온라인 강의: https://youtu.be/a8hHeUhbz2k)
1.3 JSP(Java Server Page) (온라인 강의: https://youtu.be/Q4ezLP6KLwM)
1.4 프로그래밍을 위한 환경 설정 (온라인 강의: https://youtu.be/k2eR6gLULA8)
This document discusses the basics of CSS3 and HTML. It covers setting the character encoding to UTF-8, creating unordered lists with <ul> tags, the order of opening and closing tags, using comments with <!-- -->, and applying CSS styles either inline with the style attribute or with an external CSS file. The goal is to beautify HTML pages with CSS.
JSP 프로그래밍 #01 웹 프로그래밍
1.1 웹 (온라인 강의: https://youtu.be/qDZXXHhMr4A)
1.2 서블릿 (온라인 강의: https://youtu.be/a8hHeUhbz2k)
1.3 JSP(Java Server Page) (온라인 강의: https://youtu.be/Q4ezLP6KLwM)
1.4 프로그래밍을 위한 환경 설정 (온라인 강의: https://youtu.be/k2eR6gLULA8)
This document discusses the basics of CSS3 and HTML. It covers setting the character encoding to UTF-8, creating unordered lists with <ul> tags, the order of opening and closing tags, using comments with <!-- -->, and applying CSS styles either inline with the style attribute or with an external CSS file. The goal is to beautify HTML pages with CSS.
This document summarizes an introductory workshop on web technologies including HTML, CSS, and the document object model (DOM). It provides an overview of the history and basics of HTML, how to set up a basic website, and introductions to CSS, the DOM, and additional web technologies covered in the workshop like forms and positioning.
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
2. www.javaspecialist.co.kr
1. Selector API
함수 설명 비고
getElementById( )
특정 id 속성값에 해당하는 요소를 반환
<div id ="foo">
getElementById("foo");
HTML5 이전에 사
용
getElementsByName( )
특정 name 속성값에 해당하는 요소를 반환
<input type="text" name="foo">
getElementsByName("foo");
getElementsByTagName( )
특정 태그 이름과 일치하는 모든 요소를 반환
<input type="text">
getElementsByTagName("input");
getElementsByTagNameNS()
태그의 name 속성의 값과 일치하는 모든 요소를 반환
<input type="text" name="emai");
getElementsByTagNameNS("email");
querySelector()
페이지내에서 특정 선택자 규칙과 일치하는 첫 번째 요소를 반환
<input class="error">
querySelector("input.error");
HTML5에 추가됨
CSS 선택자에 대한
이해가 필요함querySelectorAll()
특정 선택자 규칙 또는 여러 규칙과 일치하는 모든 요소를 반환
<div id="results"><table><tr><td>…
querySelectorAll("#results td")
• DOM Tree에서 요소를 빠르고 쉽게 찾아낼 수 있다.
• 기존 자바스크립트 라이브러리(jQuery 등)들이 지원하던DOM Selector의 네이티브 구현이다.
• getElementByClassName도 추가적으로 사용할 수 있게 되었다.
• 검색 조건에는 우리가 일반적으로 많이 사용하는 CSS 선택 문법을 그대로 사용할 수 있으며, 쉼표(',')로 구분하여 하나 이
상의 검색 조건을 추가할 수 있다.
2
3. www.javaspecialist.co.kr
2. Selector API 사용 예
• // 클래스 이름이 'warning', 또는 'note'인 단락 요소(<p>)를 모두 찾음
• var special = document.querySelectorAll("p.warning, p.note");
• // id 가 'main', 'basic', 'exclamation'인 요소들 중 첫 번째 발견된 요소를 찾음
• var el = document.querySelector("#main, #basic, #exclamation");
• // HTML 문서의 <body>에 속한 <style> 요소들 중
• // 'type' 속성이 없거나, 'text/css'인 첫 번째 발견된 요소를 찾음
• var style = document.body.querySelector("style[type='text/css'], style:not([type])");
• // id 가 'fruits'인 요소의 <input> 요소(체크박스)들 중 선택된(checked) 요소를 찾음
• var list = document.querySelectorAll("#fruits input:checked");
• // 또는
• var list = document.getElementByID('fruits').querySelectorAll("input:checked");
• //또는
• var fruits = document.getElementById("fruits");
• var list = fruits.querySelectorAll("input:checked"); //이 부분의 실행 횟수가 많을 때 권장함
3
4. www.javaspecialist.co.kr
3. HTML 파싱과 자바스크립트 코드 실행
• Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립
트 코드이 실행이 HTML 문서가 파싱된 다음 실행되어야 함
• HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객
체를 DOM Tree 에서 찾지 못함
– 이 때 Selector API는 null을 반환함
• 자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서 다음 3가지 방법 중
하나를 사용할 수 있음
– 1. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함
• 권하고 싶지 않음
– 2. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킴
• 이때 onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록
함
– 3. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함
• <script src="xxx.js" defer></script>
4
5. www.javaspecialist.co.kr
4. 본문의 맨 아래에 자바스크립트 코드 삽입
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Emp 목록</title>
</head>
<body>
<!-- 여기서부터 본문의 내용이다. -->
<div>
<!-- 이곳에 본문, 즉 HTML 문서의 본문이 작성된다. -->
</div>
<!-- 여기까지 본문의 내용이다. -->
<script>
var nameList = document.querySelectorAll("table tr > td:nth-child(2)");
var salList = document.querySelectorAll("table tr > td:nth-child(6)");
// 생략…
</script>
</body>
</html>
5
6. www.javaspecialist.co.kr
5. head 안에 삽입 후 onload 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Emp 목록</title>
<link rel="stylesheet" href="./default.css" type="text/css" >
<script>
window.onload = function() {
var nameList = document.querySelectorAll("table tr > td:nth-child(2)");
var salList = document.querySelectorAll("table tr > td:nth-child(6)");
//생략…
}
</script>
</head>
<body>
</body>
</html>
6
7. www.javaspecialist.co.kr
6. 외부 파일로 작성 및 defer 속성 이용
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Emp 목록</title>
<link rel="stylesheet" href="./default.css" type="text/css" >
<script src="sample.js" defer></script>
</head>
<body>
</body>
</html>
-------------------------------
sample.js 파일
(function(){
var nameList = document.querySelectorAll("table tr > td:nth-child(2)");
var salList = document.querySelectorAll("table tr > td:nth-child(6)");
//생략…
})();
7
8. www.javaspecialist.co.kr
• HTML 태그를 포함한 요소를 추가할 경우
– 태그를 포함한 컨텐츠를 갖게 함
– 링크 또는 이미지 등을 동적으로 추가하거나 제
거해야 할 경우 사용
• 방법
– innerHTML 속성을 이용
• HTMLElement 객체의 속성
• 직접 태그를 문자열 리터럴로 입력
– appendChild()/removeChild() 등 메서드를 이용
• Node 객체(document, element 객체, attribut
e 객체, Text, comment)의 속성
• createElement()로 요소를 생성한다.
• Element 객체의 setAttribute() 메서드로 속성
의 값을 지정한다.
• appendChild()로 다른 요소의 자식 요소로 추
가한다.
• 예)
– <div id="content"></div>에 <img
src="sample.png">를 포함하여 동적으로 이미
지가 보여지게 해야 할 경우
– 오른쪽 예에서 주석처리된 부분은 바로 윗 라인
과 동일한 기능을 함
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="euc-kr">
5. <title>컨텐츠 제어</title>
6. <script>
7. window.onload = function() {
8. var contentArea = document.getElementById("content
");
9.
10. var showBtn = document.getElementById("show");
11. var hideBtn = document.getElementById("hide");
12.
13. var imgElem = document.createElement("img");
14. imgElem.setAttribute("src", "victory.png");
15.
16. showBtn.onclick = function() {
17. contentArea.innerHTML = "<img src='victory.png
'>";
18. //contentArea.appendChild(imgElem);
19. }
20.
21. hideBtn.onclick = function() {
22. contentArea.innerHTML = "";
23. //contentArea.removeChild(imgElem);
24. }
25. }
26. </script>
27. </head>
28.
29. <body>
30. <input type="button" id="show" value="Show">
31. <input type="button" id="hide" value="Hide">
32. <div id="content"></div>
33. </body>
34. </html>
7. HTML 요소의 컨텐츠 제어 (1/2) (SelectorAPI/appendChild.html)
9. www.javaspecialist.co.kr
• 단순 텍스트(CDATA)의 데이터를 조회하거나
변경할 경우
– 태그가 포함되지 않는 텍스트(Char Data)를
포함하도록 함
– 요소의 텍스트 컨텐츠를 변경하거나 조회함
• 방법
– textContent 속성
• Node 객체(document, element 객체, attri
bute 객체, Text, comment)의 속성
• 폼 요소가 아닐 경우
– value 속성
• Text객체의 속성
• input 엘리먼트 등 폼 요소일 경우
• 예)
– <div id="content"></div>에 입력 필드에 입력
한 내용을 보여지게 하거나 입력필드에 값을
지정한다.
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="euc-kr">
5. <title>텍스트 컨텐츠 제어</title>
6. <script>
7. window.onload = function() {
8. var contentArea =
document.getElementById("content");
9.
10. var getBtn = document.getElementById("get");
11. var setBtn = document.getElementById("set");
12.
13. var textField =
document.querySelector("[type=text]");
14.
15. getBtn.onclick = function() {
16. contentArea.textContent = textField.value;
17. textField.value = "";
18. }
19.
20. setBtn.onclick = function() {
21. textField.value = "Some Value";
22. }
23. }
24. </script>
25. </head>
26.
27. <body>
28. <input type="text">
29. <input type="button" id="get" value="Get">
30. <input type="button" id="set" value="Set">
31. <div id="content"></div>
32. </body>
33. </html>
7. HTML 요소의 컨텐츠 제어 (2/2) (SelectorAPI/textContent.html)
10. www.javaspecialist.co.kr
Lab - HTML 문서 파싱하기
• 다음 HTML 문서가 로드되면 HTML 문서를 파싱하여 모든사원의 이름과 연봉(급여*12 + 커
미션)을 브라우저 콘솔에 출력하고, 표 아래에 총 급여액을 출력하는 프로그램을 작성세요.
– 외부 파일로 작성되어야 한다.
– 제공되는 HTML 소스코드의 표 아래에 <div id="total_sal"></div>를 추가하고 이곳에 총 급
여액을 출력하라.
– document.querySelectorAll()
– document.querySelector()
– 배열의 길이는 .length
• nameList.length
– 요소의 내용 텍스트는
• DOM객체.textContent
– 요소의 내용 HTML은
• DOM객체.innerHTML
– window.parseFloat("문자열");
– for 문 이용해서 반복 처리
– (function() {
//코드 작성
})();
10
11. www.javaspecialist.co.kr
Lab - Solution (SelectorAPI/Lab/end/emp.js)
1. (function(){
2. var nameList=document.querySelectorAll("table tr > td:nth-child(2)");
3. var salList=document.querySelectorAll("table tr > td:nth-child(6)");
4. var commList=document.querySelectorAll("table tr > td:nth-child(7)");
5. var name,sal,comm;
6. var annualSal;
7. var totalSal=0;
8.
9. for(var i=0;i<nameList.length;i++){
10. name=nameList[i].textContent;
11. sal=parseFloat(salList[i].textContent);
12. comm=parseFloat(commList[i].textContent);
13. annualSal=sal*12+comm;console.log("%s님의 연봉은 %f입니다...",name,annualSal);
14. totalSal+=annualSal}document.querySelector("#total_sal").textContent=totalSal
15. }
16.)();
11