웹 프로그래밍

웹 프로그래밍 - dom

2020. 9. 17. 14:35ㆍ전공 과목/웹 프로그래밍

웹 프로그래밍 - dom

DOM의 개념은 이렇다.

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스.

이렇게 듣는다면 이해가 잘 가지 않을 수도 있다. 쉽게 말하면 객체 지향 표현이다. 객체를 어떠한 방식으로 요리를 할 것인가에 초점을 맞추고 이를 사용한다면 쉽게 이해할 수 있다.

아래에 있는 나이를 쓰고 출력버튼을 누르면 입력한 나이에 나오는 프로그램을 작성해보자.

소스 코드

<!DOCTYPE html>
<html>
<head>
<script>
function myfun(){
	var a = document.getElementById("age").value;
	document.getElementById("good").innerHTML = a;
}
</script>
	</head>

<body>
	<form>
나이:<input type ="text" id=  "age"><button type = "button"  onclick = "myfun()">출력</button><br>
	입력한 나이 : <span id = "good">

</form>
</body>


</html>

script는 자바 스크립트로, 함수를 이용할 때 보통 쓰인다. 그리고 button 태그안에 onclick은 클릭했을 때 해당하는 함수를 실행한다는 뜻이다. 즉 함수가 실행되어 good이라는 id에 접근하여 a라는 값을 넣는것이다.

저작자표시

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

웹 프로그래밍 - 폼(실습) (0)	2020.09.17
웹 프로그래밍 - DOM-2 (0)	2020.09.17
웹 프로그래밍 - form의 응용 (0)	2020.09.17
웹 프로그래밍 - form (0)	2020.09.17
웹 프로그래밍- 팩토리얼, 과자 구매하기 (0)	2020.09.05

CS 기록장 💻

CS 기록장 💻

태그

최근글

댓글

공지사항

아카이브

웹 프로그래밍 - dom

'전공 과목 > 웹 프로그래밍' 카테고리의 다른 글

관련글

티스토리툴바