Html5
This presentation is the property of its rightful owner.
Sponsored Links
1 / 36

9 장 . DOM 과 자바스크립트 활용 PowerPoint PPT Presentation


  • 291 Views
  • Uploaded on
  • Presentation posted in: General

HTML5 웹 프로그래밍 입문 ( 배포용 ). 9 장 . DOM 과 자바스크립트 활용. 목차. 9 .1 자바스크립트로 HTML 문서 다루기 9.2 이벤트 처리하기 9.3 동적 웹 문서 만들기. 9.1 자바스크립트로 HTML 문서 다루기. 9.1.1 DOM 의 정의 및 문서 구조 9.1.2 DOM 을 통한 HTML 문서 접근 9.1.3 브라우저 제공 내장 객체. DOM 과 자바스크립트. 자바스크립트 활용 자바스크립트를 이용하여 HTML 문서의 내용을 변경

Download Presentation

9 장 . DOM 과 자바스크립트 활용

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Html5

HTML5 웹 프로그래밍 입문(배포용)

9장. DOM과 자바스크립트활용


9 dom

목차

9.1 자바스크립트로 HTML문서 다루기

9.2 이벤트 처리하기

9.3 동적 웹 문서 만들기


9 1 html

9.1 자바스크립트로 HTML문서 다루기

9.1.1 DOM의 정의 및 문서 구조

9.1.2 DOM을 통한 HTML 문서 접근

9.1.3 브라우저 제공 내장 객체


9 dom

DOM과 자바스크립트

  • 자바스크립트 활용

    • 자바스크립트를 이용하여 HTML 문서의 내용을 변경

    • 사용자입력을 받아 처리

  • DOM

    • 자바스크립트는HTML 문서를 객체(Object)로바라보고 다룬다

      • 이 객체를 DOM(Document Object Model)이라고 부름

    • HTML 문서 뿐만 아니라 CSS 속성도 변경가능

    • 자바스크립트 관점에서 HTML 문서나 웹 브라우저를 바라보고 처리

      • 웹 문서를 자바스크립트 입장에서 구조적 객체의 형태로 바라보고 처리하는 모델

  • DOM 표준

    • 2000년에 DOM2 제정

      • 대부분의 웹브라우저가 지원

    • 2004년에 DOM3 까지 제정된 상태


Dom html

DOM과 HTML 웹 문서의 관계

DOM을 이용해 웹문서를 프로그램 언어에서의 변수나 구조체와 같은 데이터로 처리할 수 있도록 한다


9 dom

트리 구조의 DOM

  • HTML 문서는 태그 요소의 계층적구조

    • DOM도 트리 구조의 형태

    • 트리의 노드: HTML 태그 요소

    • 노드는 속성과 속성값을 가짐

  • DOM 구조는 웹 브라우저에서 확인가능


9 dom

웹 브라우저에서 DOM 구조 확인


9 dom

<html>

<body>

<head>

DOM 트리 구조

<footer>

<nav>

<article>

<header>

<meta>

<title>

<button>

<button>

<section>

<button>

<h3>

<ol>

<li>

<li>

<li>


Html dom

HTML 태그 요소와 DOM

<input type = "text" name = "username"/>

  • 태그 요소는 DOM의 객체로 표현 됨

    • 태그 요소에 포함된 다른 요소는 객체내에 소속된 객체 형태로 표현 (하위객체)

  • 태그 속성은 DOM 객체의 속성으로 표현 됨

  • 요소 전체가 하나의 객체

    • type과 name은 속성

    • "text"와 "username"은 type과 name의 속성값


Dom html1

DOM을 통한 HTML 문서 접근

  • 자바스크립트 입장에서는 웹 브라우저 환경과 HTML 문서를 모두 객체로 바라보고 처리

    • 일반 프로그래밍에서 처럼 객체에 접근해서 값을 읽어내거나, 저장하고 수정하는 작업을 수행함으로써 웹 브라우저나 HTML 문서에 대한 처리를 수행

  • DOM 접근 방법

    • document의 forms 속성을 이용해서 접근하는 방법

    • 요소 이름을 이용해 접근하는 방법

    • document 객체가 제공하는 getElementById등의 메소드를 이용해서 접근하는 방법

      • 가장 사용이 쉽고 많이 사용되고 방법인getElementById메소드 방법을 중심으로 설명


9 dom

DOM 접근 방법 예제

사용자 입력


9 dom

브라우저 제공 내장 객체

  • 브라우저에서 제공하는 자바스크립트 객체

    • 대표적으로 navigator, window, document 객체가 있다

    • document 객체

      • HTML 문서를 DOM을 통해 접근하기 위한 최상위 객체

    • 본 절에서는 navigator와 window 객체에 대해서만 설명


Window

window 객체

  • 웹 브라우저에 열려 있는 창을 뜻하며 브라우저 창에 관련된 다양한 속성과 메소드를 제공

    • open()

      • 새로운 창을 연다

    • close()

      • 열려 있는 창을 닫는다

    • alert(), confirm(), prompt()

      • 브라우저에서 사용자에게 경고창을 띄우거나 키보드 입력을 받아들이는메소드


Window1

[실행결과 9-3]

window 객체 예제

close()메소드 실행시 윈도우 닫힘

open()메소드로 새로운 윈도우 생성

URL 주소 입력

버튼 클릭

URL 주소를 입력받아 새로운 윈도우에 표시

close() 메소드로 그 윈도우를 닫는 예제


Navigator

navigator 객체

버튼 클릭

현재 사용하는 웹 브라우저의 종류와 버전을 알아내기 위해 사용

대표적인 속성: appName, appVersion, userAgent


9 dom

9.2 이벤트 처리하기

9.2.1 이벤트 처리 개요

9.2.2 이벤트의 정의와 종류

9.2.3 이벤트 핸들링 및 이벤트 등록

9.2.4 폼 다루기


9 dom

이벤트 처리 개요

  • 이벤트

    • 사용자가 웹 브라우저를 사용하는 중에 발생시키는 키보드, 마우스 등의 입력

  • 이벤트 처리

    • 이벤트가 입력 되었을때 미리 구현된 자바스크립트 코드를 수행

    • 이벤트의 정의

    • 이벤트 핸들러

      • 이벤트가 발생할때마다 호출되는 자바스크립트 코드

    • 이벤트 등록 (registration)

      • 이벤트와 이벤트 핸들러를 연결시키는 과정


9 dom

이벤트 처리 예제

add()함수가 호출됨

3과 5 입력

클릭


9 dom

이벤트의 종류

마우스 이벤트


9 dom

이벤트의 종류

키보드 이벤트


9 dom

이벤트의 종류

프레임/객체 이벤트


9 dom

이벤트의 종류

폼 이벤트


9 dom

이벤트 핸들링 및 이벤트 등록

  • 이벤트 핸들러(handler)

    • 이벤트가 발생시 실행하고자 하는 자바스크립트 함수나 코드

    • 사용자가 입력한 내용이 맞는지 검사하거나 입력한 내용에 따라 웹 문서를 수정하는 등의 작업을 통해 동적 웹 문서를 만든다

  • 이벤트 등록

    • 이벤트의 종류와 이를 처리할 이벤트 핸들러를 연결시키는 작업

    • 두가지 등록 방법

      • 태그 속성에 직접 이벤트 핸들러 기술

      • 객체의 이벤트 속성 값에 이벤트 핸들러 함수 기술


9 dom

태그 속성에 이벤트 핸들러 기술

<form action="">

<input id="username" type="text" value="Name of User"

onclick="alert('Please type your full name');" />

</form>

<form action="">

<input id="username" type="text" value="Name of User"

onclick="myEventHandler();" />

</form>

<script type="text/javascript">

function myEventHandler(){

alert("Please type your full name");

}

</script>

  • 이벤트 태그 속성에 직접 이벤트 핸들러 기술

    • 이벤트 핸들러: 자바스크립트 코드혹은 함수 이름


9 dom

객체의 이벤트 속성에 이벤트 핸들러 함수 기술

<form action="">

<input id="username" type="text" value="Name of User" />

</form>

<script type="text/javascript">

function myEventHandler() {

alert("Please type your full name");

}

vardom = document.getElementById("username");

dom.onclick = myEventHandler;

</script>

  • 요소 객체의 해당 이벤트 속성에 이벤트 핸들러 함수를 지정

    • 이벤트 핸들러는 반드시 함수 형태로 미리 구현

    • 주의: 객체의 이벤트 속성에 ()없이 함수 이름만 적어야 함


9 dom

폼 다루기

자바스크립트를 이용해 폼의 값을 읽어내거나 계산하여 수정하는 것이 가능


9 dom

폼의 위젯 값 접근하기

(8) <inputid="book1"type="text"size="2"value="0"

(9) onclick = "this.select();" />

(40) <inputtype="button"value="합계계산"onclick="updateAll();" />

var n1 = document.getElementById("book1").value;

var p1 = 25000 * n1;

document.getElementById("book1Total").value = p1;

  • DOM을 통해 <input> 텍스트 박스 위젯에 입력한 값은 읽어 낸다

    • 요소 객체의 value라는 속성을 통해 읽거나 수정


9 dom

9.3 동적 웹 문서 만들기

9.3.1 동적 문서 정의

9.3.2 콘텐츠 변경을 통한 동적 문서 만들기

9.3.3 스타일 변경을 통한 동적 문서 만들기


9 dom

동적 문서 정의

  • 동적 문서

    • 웹 문서가 브라우저상에 처음에 표시된 이후에 콘텐츠나 스타일이 변경되어 화면에 표시되는 내용이나 표현 형태가 변경되는 문서

    • 웹 문서의 콘텐츠나 스타일이 변경되면 즉시 변경된 값을 바탕으로 화면의 문서를 갱신

  • 웹 문서의 콘텐츠나 스타일의 변경

    • 태그 요소, 태그 속성, 태그 콘텐츠, 요소의 CSS 스타일 등의 값을 자바스크립트를 이용해서 변경

    • 태그 요소의 화면내 표시 위치 변경, 애니메이션, 색상 및 글씨체 변경, 인터랙티브 사용자 인터페이스 등포함

  • 동적 문서 구현 방식

    • 웹 문서의 콘텐츠를 변경시키는 방법

    • CSS 스타일을 변경시키는 방법


9 dom

콘텐츠 변경을 통한 동적 문서

<p id = "example"> This is an example content </p>

  • 웹 문서 콘텐츠변경

    • 폼 위젯 요소의 value 값을 변경

    • 태그 요소의 콘텐츠를 변경

  • HTML 태그 콘텐츠 속성

    • “This is an example content” 부분이 <p> 태그의 콘텐츠

    • innerHTML속성

      • 속성에 저장된 값을HTML 태그로 해석

    • innerText속성

      • 속성에 저장된 값을 단순히 문자열로 해석


9 dom

콘텐츠 변경을 통한 동적 문서 예제

초기화면

마우스 커서가innerHTML버튼위에 위치

마우스 커서가innerText버튼위에 위치

마우스 커서가버튼 바깥으로이동


9 dom

스타일 변경을 통한 동적 문서

  • DOM을 이용하면 CSS 스타일에 접근가능

    • 일반적인DOM에 접근하는 방법과 동일

    • CSS 스타일 값변경으로 웹 문서를 보다 동적으로제작 가능

  • 예제 HTML 문서


9 dom

배경색 스타일 속성 접근

style.background속성 접근

Green과 Grey 버튼 클릭


9 dom

위치 스타일 속성 변경

style.left속성 접근

style.top속성 접근


9 dom

보이기/감추기 스타일 속성 변경

  • 화면 표시 여부를 결정

    • 보이기/감추기스타일 속성

      • 스타일 속성: visibility

      • 속성 값: visible 혹은 hidden

  • hidden으로 설정되도 웹 문서 내에 태그 요소로는 존재

    • 화면에 표시만 안될 뿐이다


9 dom

보이기/감추기 예제

Image3 클릭

Image1 클릭


  • Login