160517: 44회차

Programming 2016. 5. 17. 18:24

종료하기 전 티스토리 네이버 로그아웃 할 것

1. 툴

동일

추가시:

2. 폴더

동일

추가시:

3. 사용할 사이트

동일

추가시:

4. 공부하는 것

Web Publishing

-webpub

Ajax 시작

http://www.lectureblue.pe.kr/reqtiles/read.jsp?bbsno=215&nowPage=1&col=&word=&code=14

D:\javadb\ojt 만들었음 :>

그리고 나서

\workspace 만든담에

encoding / web browser / server runtime environment 잡아줬음

[01] HTML DOM(Document Object Model)

- W3C에서 표준을 제작하고 있습니다.

- 자바스크립트는 HTML 태그를 생성, 삭제, 속성을 변경할 수 있는 기능을 가지고 있습니다.
- HTML을 조작하기위한 자바스크립트 함수들의 집합을 모델화하여 만든것을 DOM이라고 합니다.
- Ajax로 어플리케이션 서버로부터의 응답 결과를 전송받아 브러우저의 HTML상에 출력할 때에 DOM 모델을 이용합니다.
- Web Page가 로딩될때 브라우저는 그페이지의 Document Object Model를 생성합니다.

- HTML DOM은 Object들을 Tree 처럼 생성합니다.
- HTML DOM은 동적으로 HTML 태그를 생성할때 필요합니다.

Ajax - 비동기통신

동기 - 요청하면 데이터처리를 받고 새롭게 결과를 뿌려주는 것

비동기 - 이미 페이지는 뿌려져 있는데 한 부분만 계속 바뀌는 것

(이미 요청이 된 상태지만 바뀐 부분만 응답해서 바꾸는 것)

1. DOM은 내부적으로 HTML 태그를 Tree 형태로 표현합니다.

[01] HTML DOM 활용

html을 finding하는 dom 모델인것 ㅋㅋㅋㅋ

다 get임

get-얻어와야 하니까 찾는것

document.getElementByID(id) - 하나의 엘리먼트를 찾음

document.getElementsByTagName(name) - Elements니까 배열형으로 리턴해줌

document.getElementsByClassName(name) - 이것도 배열형으로 리턴해줌

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p id = "intro"> Hello World! </p>

<p> This example demonstrates the <b>getElementmentByID</b> method! </p>

var myElement = document.getElementById("intro");

document.getElementById("demo").innerHTML = "The text from the intro paragraph is " + myElement.innerHTML;

</script>

</body>

</html>

//body 안에서 script실행중

//innerHTML - 안쪽에 HTML:을 담아라 :>

그러면

<p id = "demo"> "The text from the intro paragraph is Hello World!" </p> 인 것

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

var x = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML =

'The first paragraph (index 0) is: ' + x[0].innerHTML;

</script>

</body>

</html>

//p태그를 이용해서 document.getElementsByTagName태그를 사용해봄

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

<p>Hello World!</p>

<p>The DOM is very useful.</p>

<p>This example demonstrates the <b>getElementsByTagName</b> method</p>

</div>

var x = document.getElementById("main");

var y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML=

'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>

</html>

//첫번쨰 p태그의 요소에 접근하려면 배열로 받아야 하는 것

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>

This example demonstrates the <b>getElementsByClassName</b> method.

</p>

var x = document.getElementsByClassName("intro");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro": '

+ x[0].innerHTML;

</script>

</body>

</html>

//크래스도 되지렁

<!DOCTYPE html>

<html>

<body>

<p>Hello World!</p>

<p class="intro">The DOM is very useful.</p>

This example demonstrates the <b>querySelectorAll</b> method.

</p>

var x = document.querySelectorAll("p.intro");

document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro": '

+ x[0].innerHTML;

</script>

</body>

</html>

//이런 것도 있음

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

<body>

First name: <input type = "text" name = "fname" value = "Donald"><br>

Last name: <input type = "text" name = "lname" value = "Duck"><br><br>

</form>

<p>Click "Try it" to display the value of each element in the form.</p>

function myFunction(){

var x = document.forms["frm1"];

var text = "";

var i;

for(i = 0; i < x.length; i++){

text += x.elements[i].value + "<br>";

}

document.getElementById("demo").innerHTML = text;

}

</script>

</body>

</html>

//form의 하위요소들을 참조할 수도 있음

text += x.elements[i].value + "<br>";

x[i]해도 되지만 x.elements라고 써서 하나하나 하위 요소를 참조하는 것

-----------------------------------------------------------

element.attribute랑 element.setAttribute(attribute, value)랑 같은 것

--------------------------------------------------------------

[02] HTML DOM 실습 1

아직 하고 있음

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

var divel = document.getElementById("divHolder");

alert("divHolder div의 자식노드의 개수는: " + divel.childNodes.length);

}

</script>

</head>

<body>

<div>JavaScript</div>

</div>

</body>

</html>

이거 하고 있음

이거는 열고 닫고 ./ 텍스트값 이런 것까지 다 포함인데

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

// 페이지가 로딩되면 자동 실행

window.onload = function(){

var count =0;

var divel = document.getElementById('divHolder');

// 자식 노드 수 만큼 순환

for (i=0; i < divel.childNodes.length ; i++){

if (divel.childNodes[i].nodeType == 1){ // 태그인지 검사

count++; // 태그의 갯수 증가

}

alert ("자식 엘레멘트(태그) 노드의 갯수는 " + count);

}

</script>

</head>

<body>

<div>JavaScript</div>

</div>

</body>

</html>

이렇게 divel.childNodes[i].nodeType == 1 이것만 검사해주면 자식 개수만 가져올 수 있음.

3. DIV 태그의 값을 가져오는 방법

- document.all : 도큐멘트 태그안의 태그의 id 또는 name속성을 통틀어 찾습니다.

비표준이므로 파이어폭스에서 실행하면 실행은 되지만 경고가

표시됩니다.

- innerText : 태그의 Text값에 접근합니다.

비표준이며, 파이어폭스에서는 동작하지 않습니다.

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

window.onload = function(){

// ⓐ innerText는 div 태그의 값을 가져옵니다.

var div1text = document.all.div1.innerText;

//비표준임! - id랑 class 속성을 다 찾아봄.

// ⓑ firstChild.nodeValue는 div2 태그의 값을 가져옵니다.

var div2el = document.getElementById('div2');

var div2text = div2el.firstChild.nodeValue;

//firstChild(처음 보이는 것 중에서).nodeValue(데이터값 - 이너텍스트랑 비슷한 것)

//이게 표준임!

// ⓒ 모든 브러우저를 호환함

// document.getElementById('div3').textContent 조건문은 FireFox인지 검사

// FireFox는 textContent 속성으로 DIV 태그의 내용을 가져옵니다.

var div3text = (document.getElementById('div3').textContent)? document.getElementById('div3').textContent : document.getElementById('div3').innerText ;

//이 브라우저가 인식하는 형태가 무엇인지에 따라서

//텍스트 형태 인식 - 그대로

//innertext로 인식 - innertext로 인식

//표...준...

// 경고창

alert ("div1text :" + div1text +"\r\n" + "div2text :" + div2text +"\r\n" +

"div3text :" + div3text );

}

</script>

</head>

<body>

</body>

</html>

근데 파이어폭스에서도 다 동작함 ㅋㅋㅋㅋㅋ

4. DIV 태그로 내용 저장

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function setDiv() {

var str = "<table><tr bgcolor='#00ff00'>";

str = str

+ "<td width='500' height='200' align='center' valign='middle'>";

str = str + "<font color='#ff0000' size='5'>";

str = str + "A0001 - 컴퓨터 A<br>";

str = str + "A0002 - 컴퓨터 B<br>";

str = str + "A0003 - 컴퓨터 C<br>";

str = str + "A0004 - 컴퓨터 D<br>";

str = str + "</font>";

str = str + "</td></tr></table>";

document.getElementById("div1").innerHTML = str;

}

</script>

function delDiv(){

document.getElementById("div1").innerHTML = "*****";

}

</script>

</head>

<body>

<br>

</body>

</html>

------------------------------------------

[03] HTML DOM 실습 2

1. 태그(Element)의 생성, 이미지 변경

>>>>> WebContent/dom/img.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

function imgShow(){

// img 태그 생성

var img = document.createElement("img");

// img 태그의 src속성 설정

img.src ="http://www.apache.org/images/ac2008us_343x114.jpg";

// imgPlaceHolder DIV 태그 검색

var holder = document.getElementById("imgPlaceHolder");

// div 태그에 img 태그 추가

holder.appendChild(img);

}

</script>

</head>

<body>

</body>

</html>

2. 갤러리의 제작

- images/showImg 폴더에 이미지를 저장하고 작업합니다.

>>>>> img2.html

<!DOCTYPE html>

<html>

<head>

window.onload = function(){

var img1 = document.createElement("img");

img1.src ="./images/showImg/01.jpg";

img1.width=80;

img1.height=80;

var show1Div = document.getElementById("show1");

show1Div.appendChild(img1);

var img2 = document.createElement("img");

img2.src ="./images/showImg/02.jpg";

img2.width=80;

img2.height=80;

var show2Div = document.getElementById("show2");

show2Div.appendChild(img2);

var img3 = document.createElement("img");

img3.src ="./images/showImg/03.jpg";

img3.width=80;

img3.height=80;

var show3Div = document.getElementById("show3");

show3Div.appendChild(img3);

var img4 = document.createElement("img");

img4.src ="./images/showImg/04.jpg";

img4.width=80;

img4.height=80;

var show4Div = document.getElementById("show4");

show4Div.appendChild(img4);

var img5 = document.createElement("img");

img5.src ="./images/showImg/05.jpg";

img5.width=80;

img5.height=80;

var show5Div = document.getElementById("show5");

show5Div.appendChild(img5);

}

function show(div){

// alert(div); return;

var temp = div.firstChild;

//alert(temp); return;

var mainImg = document.createElement("img");

mainImg.src = temp.src; // 이미지 경로 전달

mainImg.width=570;

mainImg.height=400;

var showMain = document.getElementById("showMain");

showMain.innerHTML="";

showMain.appendChild(mainImg);

}

</script>

</head>

<body>

<tr>

<tr>

</tr>

</table></td>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

--------------이거 div 테이블같이 만드는 걸로도 만들었음

<!DOCTYPE html>

<html>

<head>

.table {

display: table;

}

.tr {

display: table-row;

width: 500px;

}

.td {

display: table-cell;

}

</style>

window.onload = function() {

var img1 = document.createElement("img");

img1.src = "./images/showImg/01.jpg";

img1.width = 80;

img1.height = 80;

var show1Div = document.getElementById("show1");

show1Div.appendChild(img1);

var img2 = document.createElement("img");

img2.src = "./images/showImg/02.jpg";

img2.width = 80;

img2.height = 80;

var show2Div = document.getElementById("show2");

show2Div.appendChild(img2);

var img3 = document.createElement("img");

img3.src = "./images/showImg/03.jpg";

img3.width = 80;

img3.height = 80;

var show3Div = document.getElementById("show3");

show3Div.appendChild(img3);

var img4 = document.createElement("img");

img4.src = "./images/showImg/04.jpg";

img4.width = 80;

img4.height = 80;

var show4Div = document.getElementById("show4");

show4Div.appendChild(img4);

var img5 = document.createElement("img");

img5.src = "./images/showImg/05.jpg";

img5.width = 80;

img5.height = 80;

var show5Div = document.getElementById("show5");

show5Div.appendChild(img5);

}

function show(div) {

// alert(div); return;

var temp = div.firstChild;

//alert(temp); return;

var mainImg = document.createElement("img");

mainImg.src = temp.src; // 이미지 경로 전달

mainImg.width = 570;

mainImg.height = 400;

var showMain = document.getElementById("showMain");

showMain.innerHTML = "";

showMain.appendChild(mainImg);

}

</script>

<body>

</div>

<div width="80" height="400" border="0" cellspacing="0" cellpadding="1"

style="float: left;">

</div>

</body>

</html>

------------------------------------------------

3. 체크 상자의 선택 상태를 읽거나 변경하기

>>>>> WebContent/dom/checkbox.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

</head>

// id를 받지 않는 경우

function check(){

document.getElementById("chkLCD").checked=true

}

function uncheck(){

document.getElementById("chkLCD").checked=false

}

// id를 받는 경우

function check2(id){

document.getElementById(id).checked=true

}

function uncheck2(id){

document.getElementById(id).checked=false

}

// 선택된 체크 상자 구함

function getOption(){

var lcd = document.getElementById("chkLCD"); // 태그 검색

var ram = document.getElementById("chkRAM"); // 태그 검색

var printer = document.getElementById("chkPrinter"); // 태그 검색

var str = "";

if (lcd.checked == true){

str = lcd.value + " ";

}

if (ram.checked == true){

str = str + ram.value + " ";

}

if (printer.checked == true){

str = str + printer.value;

}

// alert(str); // 선택값의 출력

document.getElementById('opt').value = str;

}

</script>

<body>

<form>

<p>

</p>

<p>

</p>

<p>

</p>

<p>

</p>

</form>

</body>

</html>

-------------------------------------

cssclass.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<!--

.greenText {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

PADDING-BOTTOM: 4px;

MARGIN: 0px;

FONT: bold italic 26px/26px Georgia, serif;

COLOR: #7e9e50;

PADDING-TOP: 0px;

}

.redText {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

PADDING-BOTTOM: 4px;

MARGIN: 0px;

FONT: bold italic 26px/26px Georgia, serif;

COLOR: #FF493f;

PADDING-TOP: 0px;

}

.hide {

DISPLAY: NONE;

}

-->

</style>

function cssapply(cssName)

{

document.getElementById("content").className = cssName; // DIV tag

}

</script>

</head>

<body>

<div id="content">JAVA-MySQL, JSP-Oracle, MVC-Struts, OJT</div>

<input type="button" onclick="cssapply('greenText');"

value="CSS 적용 1(녹색 텍스트)" />

<input type="button" onclick="cssapply('redText');"

value="CSS 적용 2(적색 텍스트)" />

</body>

</html>

---------------------------------------

HTML DOM을 이용한 스타일 및 CSS 변경

HTML 스타일 변경하기

자바스크립트에서 HTML 엘리먼트의 스타일을 동적으로 변경할 수 있다. 문법은 다음과 같다.

document.getElementById(id).style.property="새 스타일";

다음 예제를 보자.

document.getElementById('image1').style.visibility="hidden";
document.getElementById("p1").style.color="green";

HTML CSS 클래스 변경하기

동적으로 엘리먼트의 class를 설정하면 엘리먼트에 적용된 스타일을 극적으로 변경할 수 있다.

자바스크립트에서는 HTML 엘리먼트의 className 프로퍼티를 동적으로 변경할 수 있다. 문법은 다음과 같다.

document.getElementById(id).className="새 CSS";

다음 예제를 보자.

document.getElementById('image1').className="new-css-1, new-css-2";
document.getElementById("p1").className="new-css-3, new-css-4";

스타일시트 활성화와 비활성화

자바스크립트에서는 <link>와 <style> 엘리먼트의 disabled 프로퍼티를 이용해 스타일시트를 활성화하거나 비활성화할 수 있다. disabled 프로퍼티가 true이면 <link>나 <style> 엘리먼트와 관련된 스타일시트가 비활성화되어 브라우저에서 무시하게 된다. 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
    <link rel="stylesheet" type="text/css" href="ss1.css" id="ss1">
    <link rel="alternate stylesheet" type="text/css" href="ss2.css" id="ss2">
    <style id="ss3" title="Sans Serif">
        body { font-family: sans-serif; }
    </style>
</head>
<body>
 
<script type="text/javascript">
    document.getElementById('ss1').disabled = true;
    document.getElementById('ss3').disabled = true;
</script>
 
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<script>
	var i = 0;
	function addf() {
	var parentdiv = document.getElementById("file");

	var divel = document.createElement("DIV");
	var file = document.createElement('input');

	i++;

	divel.appendChild(document.createTextNode("파일 선택 " + i));
	file.type = "file";
	file.name = "file"

	parentdiv.appendChild(divel);
	parentdiv.appendChild(file);
	}

	function del() {
	var parentdiv = document.getElementById("file");

	var lastChild = parentdiv.lastChild;

	i--;

	if(i <= 1) {
	i = 1;
	}

	parentdiv.removeChild(lastChild);

	parentdiv = document.getElementById("file");
	lastChild = parentdiv.lastChild;

	parentdiv.removeChild(lastChild);
	}
	</script>
	</head>
	<body>
	<input type="button" onclick="addf()" value="파일 선택 추가" />
	<input type="button" onclick="del()" value="파일 선택 제거" />
	<br/>

	<div id = "file">
	</div>
	</body>
	</html> ------------------------------------------------

160519: 46회차 (0)	2016.05.19
160518: 45회차 (0)	2016.05.18
160516: 43회차 (0)	2016.05.16
160513: 42회차 (0)	2016.05.13
160512: 41회차 (0)	2016.05.12

PC

160517: 44회차

HTML DOM을 이용한 스타일 및 CSS 변경

HTML 스타일 변경하기

HTML CSS 클래스 변경하기

스타일시트 활성화와 비활성화

관련 수업

'Programming' 카테고리의 다른 글

티스토리툴바