신한대학교 컴퓨터정보계열 고덕윤 [email protected]
Client Server Programming 2
HTML5 의 다양한 기능들
• 플러그인 없이 오디오/비디오의 멀티미디어를 지원
• 멋진 인터페이스와 애니메이션 제작
• 로컬 저장소와 캐시
• 모바일 웹 페이지
01
HTML 5의 다양한 기술의 원천
1. 브라우저는 Markup 과 CSS를 읽음
2. Markup 의 각 요소를 DOM형태의 객체 모델로 생성
3. 자바 스크립트 코드 실행
HTML5가 작동하는 방식02
JavaScript의 기능들
자바 스크립트로 무엇을 할 수 있을까?033
특정 위치 정보 제공 길안내 구글 지도 연동 브라우저 저장소 브라우저 캐시 비디오 제어 특수효과 픽셀 조작 기기간 상호작용 강력한 form과 상호작용HTML 5 기술
다양한 웹 기술의 집합04
HTML4를 HTML5로
어떻게 바뀌었을까요?05
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Learn About Whales</title>
<link type="text/css" rel="stylesheet" href="wstyle.css">
<script type="text/javascript" src="whales.js"></script>
</head>
<!doctype html>
<html> <head>
<meta charset="utf-8">
<title>Learn About Whales</title>
<link rel="stylesheet" href="wstyle.css">
<script src="whales.js"></script>
</head>
HTML 4
Hello HTML5 & JavaScript
06
HTML5 와 JavaScript의 상호작용
07
JavaScript 연습
08
이벤트 핸들링 연습
09
HTML5 문서
10
window.onload = init; function init() {
var button = document.getElementById("addButton"); button.onclick = handleButtonClick;
}
function handleButtonClick() {
// event when the button click
Hint!!
11
document.createElement("li");
ul.appendChild(li);
JavaScript 함수
12
• 인자의 타입은 따로 정의하지 않음 • 리턴형도 정의하지 않음 • 무조건 var 형 • 클래스의 선언도 function을 쓴다.JavaScript의 내장 객체
13
객체 실습
14
• movieList 배열은 전역함수로 선언한다.
• 필요 함수는 init(), search(title,location), handleButtonClick() 이다. • Movie(title, location, timeTable) 클래스형 function을 만든다.
• init() 함수에서 적어도 5개 이상의 movie 객체를 생성한다.
• 지점만 입력하면, 지점에서 상영하는 모든 영화와 시간을 보여준다.
