[17] 230119 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 4. DOM 노드 삭제와 추가, 5. 브라우저 객체 모델, 6. 이벤트 처리 [K-디지털 트레이닝 17일]

Notice

Recent Posts

Recent Comments

Links

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

In Total

관리 메뉴

A Joyful AI Research Journey🌳😊

[17] 230119 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 4. DOM 노드 삭제와 추가, 5. 브라우저 객체 모델, 6. 이벤트 처리 [K-디지털 트레이닝 17일] 본문

🌳Bootcamp Revision 2023✨/JavaScript, jQuery, Ajax, JSON

[17] 230119 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 4. DOM 노드 삭제와 추가, 5. 브라우저 객체 모델, 6. 이벤트 처리 [K-디지털 트레이닝 17일]

yjyuwisely 2023. 1. 19. 12:50

230119 Thu 17th class

Ch. 10 DOM과 이벤트 처리, 입력 검증
진도: p. 388 ~ (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에

product.kyobobook.co.kr

오늘 배운 것 중 기억할 것을 정리했다.

지난 수업 때 배운 것 중 다시 기억할 것

The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document object.

HTML 요소의 선택
HTML 요소를 선택하기 위해 제공되는 메서드는 다음과 같다.

메서드	설명
document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택한다.
document.getElementById(아이디)	해당 아이디의 요소를 선택한다.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택한다.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택한다.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택한다.

prompt() 함수

사용자에게 어떤 사항을 알려주고 사용자가 답변을 입력할 수 있는 윈도우를 화면에 띄운다.
사용자가 입력한 내용을 문자열로 반환한다.

예시) prompt("빈칸 위에 뜨는 문장", "빈칸에 뜨는 문장") 두번째 부분은 생략 가능하다.

<script>
var age = prompt("나이를 입력하세요.", "만나이로 입력합니다.");
</script>

결과)

- An integrated development environment (IDE) is software for building applications that combines common developer tools into a single GUI(Graphical user interface).

- 1 초 [s] = 1000 밀리초 [ms]

- 호출하다:
Calling a function is giving the computer a single instruction that tells it to do one thing.

Call [Computing] [with object] cause (a subroutine) to be executed
ex) one subroutine may call another subroutine (or itself)

execute COMPUTING carry out an instruction or program.

Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증

책의 목차
-문서 객체 모델(DOM)
-HTML 요소 찾기
-HTML 변경하기
-DOM 노드 삭제와 추가
-브라우저 객체 모델
-이벤트 처리
-폼의 유효성 검증

4. DOM 노드 삭제와 추가 p. 388

<img src="" alt="">
ex)

<img src="example.gif" alt="Example" width="200" height="100">

<a href=""> </a>
img, a: 태그명
src, href, alt: 속성

4.1 새로운 HTML 요소 생성

동적으로 웹 페이지에 새로운 요소를 만들어서 추가할 수 있다.

1. 첫 번째 단계는 추가하기를 원하는 노드를 생성한다.
2. 두 번째 단계는 문서 내에서 추가할 위치를 찾는다.
3. 세 번째 단계에서는 새로운 노드를 기존의 노드에 연결한다.

1. 노드 생성
document 객체의 creatTextNode() 메서드를 호출한다.
document.creatTextNode()는 텍스트 데이터를 가진 노드를 생성하여 반환한다.

var node = document.creatTextNode("동적으로 추가된 노드");

2. 문서 트리에서 노드를 추가할 위치를 찾는다.
가장 많이 사용되는 방법은 id를 이용해서 탐색하는 방법이다.
document.getElementById()를 호출한다.

예시)

<script>
function addtext(t){
	//노드를 추가할 수 있는지 검사
	if(document.createTextNode){
		//1 노드 생성
		var node = document.creatTextNode(t);
		//2 노드 추가
		document.getElementById("target").appendChild(node);
	}
}

</script>
</head>
<body>
	<div id="target" onclick="addtext('동적으로 텍스트가 추가됩니다.')" 
    style="font: 20px bold;">여기를 클릭하세요.</div>
</body>

4.2 기존의 HTML 요소 삭제

HTML요소를 삭제하려면 부모 노드를 알아야 한다. 부모 노드도 id를 알면 찾을 수 있다.
DOM의 구조상 반드시 삭제하고자 하는 요소의 그 부모 요소를 알아야한다.

1. 부모 노드를 찾는다.
2. 자식 노드를 찾는다.
3. 부모 노드를 통하여 자식 노드를 삭제한다.
예시 1)

<script>
	function removeNode(){
		//부모 노드
		var parent = document.getElementById("target");
		//삭제하고자 하는 자식 노드
		var child = document.getElementById("p1");
		parent.removeChild(child);
	}
</script>

</head>
<body>
<div id="target">
	<p id = "p1">첫번째 단락</p>
	<p id = "p2">두번째 단락</p>
</div>
	<button onclick="removeNode()">누르세요!</button>
</body>

결과)

예시 2)

appendChild()

새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가한다.
The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

createElement()

새로운 요소 노드를 만들 수 있다.
The document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.

createTextNode()

새로운 텍스트 노드를 만들 수 있다.

참고: http://www.tcpschool.com/javascript/js_dom_nodeManage

<script>
function newRegister(){ 
	var newItem = document.createElement("li");
	var subject = document.getElementById("subject");
	var nextText = document.createTextNode(subject.value); //여기에 입력된 값이 리스트로 나옴 
	
	//The appendChild() method of the Node interface adds a node 
	//to the end of the list of children of a specified parent node.
	
	newItem.appendChild(nextText);//<li>javascript</li>: 입력란에 javascript 입력했다고 가정한다. 
	
	var itemList = document.getElementById("itemList");
	
	itemList.appendChild(newItem);
}
</script>
</head>

<body>
	<div>
		<h1>Web Programming</h1>
		<p>공부할 주제를 기록해보세요</p>
		<input type="text" id="subject">
		<button onclick="newRegister()">추가</button>
		
		<ul id="itemList"></ul>
	</div>
</body>

결과)

5. 브라우저 객체 모델 p. 391

5.1 브라우저 객체 모델

브라우저 객체 모델(BOM: Brower Object Model)은 웹 브라우저가 가지고 있는 모든 객체를 의미한다.
최상위 객체는 window이고 navigator, location, history, screen, document, frames 객체가 있다.
지금까지 많이 사용하였던 document 객체도 사실은 window 객체의 자식이다.
- window: 메인 브라우저 윈도우
- window.navigator: 브라우저에 대한 정보(ex. 버전 정보)
- window.screen: 사용자 화면
- window.history: 사용자가 방문한 URL 저장
- window.location: 현재 URL
- window.frames: 브라우저 윈도우를 차지하고 있는 프레임들
- window.document: 메인 브라우저에 표시된 HTML 문서

5.2 Window 객체

window 객체는 BOM에서 최상위 객체로서 웹 브라우저의 윈도우를 나타내고 있다.
모든 전역 자바스크립트 객체, 함수, 변수는 자동적으로 window 객체의 멤버가 된다.
ex) window 객체의 메서드: alert(), prompt()

모든 전역 변수는 윈도우 객체의 속성이다.
모든 전역 함수는 윈도우 객체의 메서드이다.
alert() 함수가 widow 객체의 메서드이기 때문에 다음 2개의 문장은 동일하다.

alert("Hello World!");
window.alert("Hello World!");

1) open()과 close()

open() 메서드는 새로운 브라우저 윈도우를 오픈한다.

window.open(URL, name, specs, replace);

예시) 팝업창을 만들 때 쓴다.

<input type="button" value="구글창 열기" 
onclick = "window.open('http://www.google.com/','_blank', 'width=300, height=300')">

2) setTimeout(), setInterval()

setTimeout() 메서드는 일정한 시간이 지난 후에, 인수로 전달된 함수를 딱 한 번만 호출한다. 시간의 단위는 밀리초이다.

setTimeout(code, millisec)

예시 1)

<script>
function showAlert(){
	setTimeout(function(){alert("setTimeout()을 사용하여 표시됩니다.")}, 3000)
}
</script>
</head>
<body>
<p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다.</p>
<button onclick="showAlert()">눌러보세요.</button>
</body>

setInterval() 메서드는 일정한 시간마다 주기적으로 함수를 호출한다. 반드시 개발자가 종료시켜야 한다. 시간의 단위는 밀리초이다.
주기적인 호출을 종료하려면 clearInterval()을 호출한다.

예시 2)

<script>
function showAlert(){
	setInterval(function(){alert("setTimeout()을 사용하여 표시됩니다.")}, 3000)
}
</script>
</head>
<body>
<p>버튼을 누르면 3초 후에 경고 박스가 화면에 표시됩니다.</p>
<button onclick="showAlert()">눌러보세요.</button>
</body>

결과)

예시 3) 사용자가 "중지" 버튼을 누를 때까지 글자가 깜빡이는 프로그램이다. p.395

<script>
	var id;
	function changeColor(){
    	//정지시키려면 반환값을 저장한다.
		id = setInterval(flashText,500);
	}
	function flashText(){
		var elem = document.getElementById("target");
        //조건 ? 참일 때 : 거짓일 때
		elem.style.color = (elem.style.color=="red") ? "blue" : "red"; 
		elem.style.backgroundColor = 
			(elem.style.backgroundColor=="green") ? "yellow" : "green"; 
	}
	function stopTextColor(){
    	//반환값을 이용하여 주기적 호출을 중지한다.
		clearInterval(id);
	}
</script>
</head>
<body onload = "changeColor();">
<div id = "target">
	<p>This is a Text.</p>
</div>
<button onclick = "stopTextColor()">중지</button>
</body>

결과) 중지시켰을 때의 결과이다. elem.style.color은 파란색이고, elem.style.backgroundColor은 노란색으로 설정되었다.

3) moveTo(), moveBy()

절대적인 위치로 이동하는 것은 moveTo()를 사용하고 상대적으로 이동하려면 moveBy()를 사용한다.

- resizeTo(), resizeBy(): 윈도우 크기를 변경한다.
- focus(): 특정 윈도우로 키보드 포커스를 이동시킨다.
- scrollTo(), scrollBy(): 윈도우 스크롤 위치를 이동시킨다.
예시) w.moveBy(10, 10): 한 번 누를 때마다 화면에서 (10,10)씩 이동한다. 기본 위치는 (0,0)으로 설정한 좌측 상단이다.

<script>
	var w;
	function openWindow(){
		w = window.open("","","width=200, height=100");
		//w.를 써서 팝업창 안에 내용이 나온다. 
		w.document.write("<p>오늘 다음과 같은 상품을 싸게 팝니다.</p>");
		w.moveTo(0,0);
	}
	function moveWindow(){
		//한 번 누를 때마다 화면에서 (10,10)씩 이동한다.
		w.moveBy(10, 10);
		w.focus();
	}
</script>
</head>
<body>
	<input type="button" value="윈도우 생성" onclick="openWindow()"><br>
	<input type="button" value="윈도우 생성" onclick="moveWindow()">
</body>

결과)

5.3 screen 객체 p. 397

availHeight, availWidth: 자바스크립트를 이용해 윈도우의 테스크 바를 가리지 않으면서 최대 크기로 윈도우를 오픈할 때 사용한다.

속성	설명
availHeight	화면의 높이를 반환(윈도우에서 태스크 바를 제외한 영역)
availWidth	화면의 너비를 반환(윈도우에서 태스크 바를 제외한 영역)
colorDepth	컬러 팔레트의 비트 깊이를 반환
height	화면 전체의 높이를 반환
pixelDepth	화면의 컬러 해상도(bits per pixel)를 반환
width	화면의 전체 너비를 반환

예시) 전체창으로 뜬다.

<script>
	function maxopen(url, winattributes){
		var maxwindow = window.open(url,"",winattributes);
		maxwindow.moveTo(0,0);
		maxwindow.resizeTo(screen.availWidth, screen.availHeight);
	}
</script>
</head>
<body>
<a href = "#" onclick = "maxopen('http://www.google.com',
		'resize=1, scrollbars=1, status=1'); return False">전체 화면 보기</a>
</body>

5.4 location 객체

location 객체는 현재 URL에 대한 정보를 가지고 있다. window 객체의 일부로서 widow.location을 통하여 접근된다.
location 객체의 속성

속성	설명
hash	URL 중에서 앵커 부분을 반환한다. (#section1과 같은 부분)
host	URL 중에서 hostname과 port를 반환한다.
hostname	URL 중에서 hostname을 반환한다.
href	전체 URL을 반환한다.
pathname	URL 중에서 경로(path)를 반환한다.
port	URL 중에서 port를 반환한다.
protocol	URL 중에서 protocol 부분을 반환한다.
search	URL 중에서 쿼리(query) 부분을 반환한다.

location 객체의 메서드

메서드	설명
assign()	새로운 문서를 로드한다.
reload()	현재 문서를 다시 로드한다.
replace()	현재 문서를 새로운 문서로 대체한다.

예시)

<script>
function replace(){
	location.replace("http://www.naver.com")
}
</script>
<!-- document.write(location.href); -->
<a href ="#" onclick="replace()">이동하기</a>

6. 이벤트 처리 p. 400

웹 페이지에서 상호작용이 발생하면 이벤트가 일어난다.

예시)
- 마우스 클릭
- 웹 페이지 로딩
- 호버링(hovering)으로 마우스를 어떤 요소 위에서 움직이는 것
- HTML 입력 양식에서 입력 박스를 선택하는 것
- 키보드의 키를 누르는 것

순서)

1. 사용자가 버튼을 클릭한다. ex) 눌러보세요!
2. 이벤트가 발생한다.
3. 등록된 함수가 실행된다. ex) function processEvent(){ ... }
4. 페이지에 변화가 발생한다.
ex) 과일들의 리스트
- 사과
- 바나나
- 오렌지
눌러보세요!

6.1 onclick 이벤트

가장 많이 사용되는 이벤트이다. 자바스크립트로 사용자가 버튼을 클릭하는 것 같은 이벤트가 발생하면 미리 정해놓은 코드가 실행되도록 할 수 있다.

//헤딩이 클릭되면 여기에 등록된 함수 change가 호출된다. 
<h1 onclick = "change()"> 이것은 클릭 가능한 헤딩입니다. </h1>

예시)

<script>
//선언문에 c 변수에 저장한다. 
function changeColor(c){
	//색상을 변수 처리해야한다.
	//id가 "target"인 요소의 배경색을 주어진 색으로 변경한다. 
	document.getElementById("target").style.backgroundColor = c;
}
</script>
</head>
<body id = "target">
	<form>
		<!-- 버튼이 클릭되면 여기에 등록된 함수 changeColor가 호출된다 --> 
		<input type = "radio" name ="c1" value = "v1" onclick = "changeColor('blue')">파랑색
		<input type = "radio" name ="c1" value = "v1" onclick = "changeColor('green')">녹색
	</form>
</body>

결과)

6.2 onload와 onunload 이벤트

사용자가 웹 페이지에 진입하거나 웹 페이지를 떠나면 각각 onload와 onunload 이벤트가 발생된다.
예시) 페이지가 로드되면 경고 대화상자를 띄우고 페이지의 배경색을 빨간색으로 변경하여 본다.

<script>
//문서가 로드되면 아래 함수가 호출된다. 
function onLoadDoc(){
	alert("문서가 로드되었습니다.");
	//<body>요소가 빨간색으로 변경한다.
	document.body.style.backgroundColor="red";
}
</script>
</head>
<body onload = "onLoadDoc()">
</body>

결과)

6.3 onchange 이벤트

입력 필드를 검증할 때 종종 사용된다.
예시) 사용자가 입력 필드의 내용을 변경하면 upperCase() 함수가 호출된다.

<script>
	//<input> 요소의 내용이 변경되면 호출된다. 
	//키보드 포커스가 입력 필드를 벗어나면 변경 여부를 검사하여 호출한다. 
	function sub(){
		var x = document.getElementById("name");
		x.value = x.value.toLowerCase();
	}
</script>
</head>
<body>
영어 단어: <input type="text" id="name" onchange="sub()">
<p>입력 필드를 벗어나면 소문자로 변경됩니다.</p>
</body>

결과)

6.4 onmouseover 이벤트

onmousover와 onmouseout 이벤트는 사용자가 HTML 요소 위에 마우스를 올리거나 요소를 떠날 때 발생한다.

예시)

<script>
function OnMouseIn(elem){
	//border: 테두리 
	elem.style.border = "2px solid red";
}
function OnMouseOut(elem){
	elem.style.border = "";
}
</script>
</head>
<body>
<!-- this: 객체이며 변수가 아니다. -->
<div style = "background-color: yellow; width: 200px"
	onmouseover = "OnMouseIn (this)" onmouseout = "OnMouseOut (this)">
	마우스를 이 요소 위에 이동하세요.
</div>
</body>

결과)

6.5 onmousedown, onmouseup, onclick 이벤트

마우스 클릭과 관련된 이벤트이다.
1. 먼저 마우스 버튼이 클릭되면 onmousedown 이벤트가 발생한다.
2. 이어서 마우스 버튼이 떼어지면 onmouseup 이벤트가 발생하고
3. 마지막으로 마우스 클릭이 완료되면서 onclick 이벤트가 발생한다.

예시) 마우스 버튼이 눌려지면 버튼의 색상을 빨간색으로 변경한다.

<script>
function OnButtonDown(button){
	//마우스 버튼이 눌러지면 버튼의 색상을 빨간색으로 변경한다. 
	button.style.color = "#ff0000";
}
function OnButtonUp(button){
	//마우스 버튼이 떼어지면 버튼의 색상을 검정색으로 변경한다.
	button.style.color = "#000000";
}
</script>
</head>
<body>
	<button onmousedown="OnButtonDown (this)" onmouseup="OnButtonUp (this)">
	눌러보세요!</button>
</body>

결과)

기타
개인 포트폴리오
1/25까지 개인포트폴리오 주제 및 메인 화면 설계 생각하기 (폼의 유효성 검사 적용시키기)
1. 주제
2. 메인 화면 설계
3. 메인 화면 구현

728x90

저작자표시 비영리 동일조건

'🌳Bootcamp Revision 2023✨ > JavaScript, jQuery, Ajax, JSON' 카테고리의 다른 글

[19] 230125 Ch. 12 jQUERY, Ajax, JSON: 1. jQuery, 2. 첫 번째 jQuery 프로그램, 3. jQuery 문장의 구조, 4. jQuery를 이용한 이벤트 처리 · 5. 애니메이션 효과 [K-디지털 트레이닝 19일] (0)	2023.01.25
[18] 230120 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 7. 폼의 유효성 검증 [K-디지털 트레이닝 18일] (0)	2023.01.20
[16] 230118 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 1. 문서 객체 모델(DOM), 2. HTML 요소 찾기, 3. HTML 변경하기 [K-디지털 트레이닝 16일] (0)	2023.01.18
[15] 230117 Ch. 9 자바스크립트 객체: 1. 객체, 2. 객체의 생성 및 사용, 3. 프로토타입, 4. 자바스크립트 내장 객체, 5. Array 객체, 6. 자바스크립트에서의 오류 처리 [K-디지털 트레이닝 15일] (0)	2023.01.17

'🌳Bootcamp Revision 2023✨/JavaScript, jQuery, Ajax, JSON' Related Articles

Comments

A Joyful AI Research Journey🌳😊

[17] 230119 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 4. DOM 노드 삭제와 추가, 5. 브라우저 객체 모델, 6. 이벤트 처리 [K-디지털 트레이닝 17일] 본문

[17] 230119 Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증: 4. DOM 노드 삭제와 추가, 5. 브라우저 객체 모델, 6. 이벤트 처리 [K-디지털 트레이닝 17일]

Ch. 10 자바스크립트 DOM과 이벤트 처리, 입력 검증

4. DOM 노드 삭제와 추가 p. 388

4.1 새로운 HTML 요소 생성

4.2 기존의 HTML 요소 삭제

5. 브라우저 객체 모델 p. 391

5.1 브라우저 객체 모델

5.2 Window 객체

1) open()과 close()

2) setTimeout(), setInterval()

3) moveTo(), moveBy()

5.3 screen 객체 p. 397

5.4 location 객체

6. 이벤트 처리 p. 400

6.1 onclick 이벤트

6.2 onload와 onunload 이벤트

6.3 onchange 이벤트

6.4 onmouseover 이벤트

6.5 onmousedown, onmouseup, onclick 이벤트

'🌳Bootcamp Revision 2023✨ > JavaScript, jQuery, Ajax, JSON' 카테고리의 다른 글

티스토리툴바