03.HTML5 & JavaScript II

(1)

신한대학교 컴퓨터정보계열 고덕윤 maniara.k@gmail.com

Client Server Programming 2

(2)

Geolocation의 기본 지식

위도 & 경도, 표현식

01

• 도/분/초 표현 신한대학교 : 북위 37도42분 35초 동경 127도 2분 43초 • 십진 표현 신한대학교 : 37.709927, 127.045536 • 변환 공식

(3)

Geolocation Tutorial

02

• 브라우저에 geolocation 객체가 존재하는가?

• 현재 위치를 얻어서 displayLocation 핸들러에게 전달한다.

(4)

Navigator API

(5)

그러나…

04

• 반응이 없는 브라우저 • 모바일 브라우저

(6)

Google Map JavaScript Tutorial

05

• Google Map API 위치 • 표시 위도/경도

(7)

Google Developer에서 API-KEY 가져오기

• https://developers.google.com/maps/documentation/javascript/

06

1 2 3 4

(8)

마커 추가하기

07

(9)

실습 1 : Google Map에 내 위치 표시하기

(10)

캔버스를 이용한 그래픽 만들기

• Canvas

• 그래픽을 자유롭게 그릴 수 있는 영역

• 캔버스의 고정된 영역 내에 다양한 그래픽 처리 가능

• Canvas 사용법

09

window.onload = function(){

var canvas = document.getElementById("draw");

var context = canvas.getContext("2d");

context.fillRect(10,10,100,100); };

(11)

원 그리기

10

context.arc(x, y, radius, startAngle, endAngle, direction)

context.arc(100,100,75,0,degreesToRadians(270),true);

context.lineWidth = 15;

context.strokeStyle = 'black';

context.stroke();

function degreesToRadians(degrees) {

return (degrees * Math.PI)/180;

(12)

실습2 : 명언 남기기

(13)

HTML 코드

12

<body>

<canvas id="draw" width="600"

height="200"></canvas>

<label for="backgroundColor">Select background color:</label>

<option value="white"

selected="selected">White</option>

<option value="black">Black</option>

</select> </p>

<p>

<label for="shape">Circles or squares?</label>

<option value="circles"

selected="selected">Circles</option>

<option value="squares">Squares</option>

</select> </p>

<p>

<label for="foregroundColor">Select text color:</label>

<option value="black"

selected="selected">Black</option>

<option value="white">White</option>

</select> </p>

<p>

<label for="foregroundColor">Write Text:</label>

<input type="text" id="sentence" size="40">

</p> <p>

<input type="button" id="previewButton"

value="Preview">

</p> </form> </body>

(14)

필요한 코드 조각들

이벤트 호출 함수

13

function draw(){ var canvas = _________________________; var context = _________________________; fillBackgroundColor(canvas, context);

var selectObj = document.getElementById("shape");

var index = selectObj.selectedIndex;

var shape = selectObj[index].value;

if (__________________) {

for (var squares = 0; squares < 20; squares++) { drawSquare(canvas, context);

}

} else if (__________________) {

for (var circles = 0; circles < 20; circles++) { drawCircle(canvas, context);

} }

drawText(canvas, context); }

(15)

필요한 다양한 코드 조각들

14

function fillBackgroundColor(canvas, context) {

var selectObj = ___________________________________;

var index = selectObj.selectedIndex;

var bgColor = selectObj.options[___].value;

context.fillStyle = bgColor;

context.fillRect(0, 0, 600, 200); }

function drawSquare(canvas, context) {

var w = Math.floor(Math.random() * 40);

var x = Math.floor(Math.random() * canvas.width);

var y = Math.floor(Math.random() * canvas.height);

context.fillStyle = "lightblue";

context.fillRect(_, _, _, _); }

(16)

필요한 다양한 코드 조각들

글씨 쓰기와 원 그리기

15

function drawText(canvas, context){

var selectObj = ________________________________________;

var index = ____________________;

var fgColor = __________________; context.fillStyle = fgColor;

selectObj = ______________________________;

var sen = selectObj.value;

context.font = "italic 1.2em serif"; context.fillText(sen, 30, 100);

}

function drawCircle(canvas, context) {

var radius = Math.floor(Math.random() * 40);

var x = Math.floor(Math.random() * canvas.width);

var y = Math.floor(Math.random() * canvas.height); context.beginPath();

context.arc(_, _, radius, 0, ______________, true); context.fillStyle = "lightblue";

context.fill(); }