수업 내용
오늘: 3-10장 마무리 (navigator, screen, history 객체) + 3-11장 HTML5 Canvas 그래픽
1. navigator 객체 — 브라우저 정보
브라우저 자체에 대한 정보를 제공하는 BOM 객체.
<script>
function printNavigator() {
var text = "appCodeName: " + navigator.appCodeName + "<br>";
text += "appName: " + navigator.appName + "<br>";
text += "appVersion: " + navigator.appVersion + "<br>";
text += "platform: " + navigator.platform + "<br>";
text += "userAgent: " + navigator.userAgent + "<br>";
text += "language: " + navigator.language + "<br>";
text += "onLine: " + navigator.onLine + "<br>";
text += "cookieEnabled: " + navigator.cookieEnabled + "<br>";
// 설치된 플러그인 목록
for(j=0; j<navigator.plugins.length; j++) {
text += "plugins" + j + ": " + navigator.plugins[j].name + "<br>";
}
document.getElementById("div").innerHTML = text;
}
</script>
<body onload="printNavigator()">
수업에서 빠르게 스킵. 내용 파악 정도만.
2. screen 객체 — 스크린 장치 정보
속성 설명
| availHeight / availWidth | 작업표시줄 제외한 실제 사용 가능한 해상도 |
| height / width | 모니터 전체 해상도 |
| colorDepth | 표현할 수 있는 색깔의 수 ← 시험 |
| pixelDepth | 픽셀당 비트 수 |
screen.availHeight // 사용 가능한 화면 높이
screen.colorDepth // 색 깊이 (예: 24 → 2^24가지 색 표현 가능)
colorDepth가 뭐냐는 질문 나올 수 있음. "표현할 수 있는 색깔의 수"가 정답.
3. history 객체 — 외우기 ⭐
브라우저 방문 기록(URL 리스트)을 제어하는 객체.
메서드 설명
| history.forward() | 한 페이지 앞으로 |
| history.back() | 한 페이지 뒤로 |
| history.go(n) | n만큼 이동. 양수=앞으로, 음수=뒤로 |
<button onclick="history.back()">back()</button>
<button onclick="history.forward()">forward()</button>
<button onclick="history.go(-1)">go(-1)</button>
history.go(n)을 제일 많이 쓴다 — 꼭 기억. go(1) = 1칸 앞으로, go(-2) = 2칸 뒤로.
4. HTML5 Canvas 그래픽 — 3-11장 ⭐⭐
예제 11-11 시험 출제 예정. 3-11장은 대부분 스킵했고 이 예제만 집중적으로 설명.
Canvas = 브라우저 안에 그림판처럼 그림을 그릴 수 있는 영역. 좌표 기준: 좌상단이 (0, 0), X축은 오른쪽, Y축은 아래쪽.
기본 구조
<body onload="init()">
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas, context;
function init() {
canvas = document.getElementById("myCanvas");
context = canvas.getContext("2d"); // Canvas 2D 컨텍스트 객체 생성
context.lineWidth = 2; // 선 굵기
context.strokeStyle = "blue"; // 선 색깔
canvas.addEventListener("mousemove", move, false);
canvas.addEventListener("mousedown", down, false);
canvas.addEventListener("mouseup", up, false);
canvas.addEventListener("mouseout", out, false);
}
</script>
핵심 메서드
메서드/속성 설명
| canvas.getContext("2d") | 2D 컨텍스트 객체 생성 (이 객체로 그림) |
| context.lineWidth | 선 굵기 |
| context.strokeStyle | 선 색깔 |
| context.beginPath() | 새로운 경로(path) 시작 |
| context.moveTo(x, y) | 펜을 공중에서 (x, y)로 이동 (선 안 그림) |
| context.lineTo(x, y) | 현재 위치에서 (x, y)까지 경로 추가 |
| context.stroke() | 메모리상에 그려진 것을 화면에 출력 ← 핵심! |
stroke()가 없으면 화면에 아무것도 안 나타남. beginPath()~lineTo()는 메모리에 그리는 과정이고, stroke()가 실제 화면에 출력하는 명령.
beginPath → moveTo → lineTo → stroke 순서
드래깅으로 자유선 그리는 원리
수많은 점을 직선으로 연결 → 아주 작은 구간의 직선을 무한 반복하면 곡선처럼 보임
var startX=0, startY=0;
var dragging=false;
function draw(curX, curY) {
context.beginPath();
context.moveTo(startX, startY); // 이전 위치로 펜 이동
context.lineTo(curX, curY); // 현재 위치까지 선 경로 추가
context.stroke(); // 화면에 출력
}
function down(e) {
startX = e.offsetX; startY = e.offsetY;
dragging = true; // 마우스 누름 → 드래깅 시작
}
function up(e) { dragging = false; } // 마우스 뗌 → 드래깅 종료
function move(e) {
if(!dragging) return; // 클릭 안 된 상태면 무시
var curX = e.offsetX, curY = e.offsetY;
draw(curX, curY);
startX = curX; startY = curY; // current가 다음 루프의 start가 됨
}
function out(e) { dragging = false; }
드래깅 원리 요약:
- mousedown → dragging = true, startX/Y 저장
- mousemove → dragging이 true면 startX/Y → currentX/Y 까지 직선 그음, 그리고 current가 새 start
- mouseup / mouseout → dragging = false
주요 개념
- canvas.getContext("2d"): Canvas 2D 렌더링 컨텍스트 객체를 반환. 이 객체를 통해 선, 도형, 텍스트, 이미지를 모두 그림
- context.stroke(): 메모리(path)에 정의된 선을 실제 화면 픽셀로 출력. beginPath()~lineTo()만으로는 화면에 아무것도 안 그려짐
- context.beginPath(): 이전 경로를 초기화하고 새로운 경로 시작. 매번 호출하지 않으면 이전 경로도 함께 stroke됨
- dragging 변수: 마우스가 눌린 상태인지 추적. false(초기) → true(mousedown) → false(mouseup)
- e.offsetX / e.offsetY: 이벤트가 발생한 요소(canvas) 기준 마우스 좌표
- colorDepth: screen 객체 속성. 모니터가 표현할 수 있는 색깔의 수 (= 색 깊이)
- history.go(n): BOM history 객체. n이 양수면 앞으로, 음수면 뒤로 n페이지 이동
다시 보기
Q. stroke()를 왜 따로 호출해야 하나? lineTo()하면 바로 그려지지 않나?
- Canvas는 경로(path)를 메모리에 먼저 정의하고, stroke() 명령을 받아야 화면에 출력한다. moveTo(), lineTo()는 "어디서 어디까지 그을지" 계획을 메모리에 쌓는 것이고, stroke()가 실제로 픽셀을 찍는 명령이다.
Q. beginPath()를 매 draw() 호출마다 쓰는 이유는?
- 호출하지 않으면 이전 경로가 남아있어서, stroke() 할 때마다 이전에 그린 모든 선을 다시 그린다. 누적되면 성능이 급격히 느려지고 선이 번짐. 매 선분마다 경로를 초기화해야 깔끔하게 그려진다.
Q. 드래깅 중에 startX = curX로 업데이트하는 이유는?
- 마우스는 한 번에 수십 픽셀씩 이동할 수 있다. 매 move 이벤트마다 이전 좌표(startX/Y)에서 현재 좌표(curX/Y)까지 짧은 직선을 그은 뒤, current를 다음 선분의 시작점(start)으로 삼아야 연속된 선처럼 보인다. 업데이트 안 하면 계속 mousedown 지점에서 현재 지점까지 직선 하나만 그어진다.
Q. history.go(0)은 무엇을 하나?
- 현재 페이지를 새로고침한다. go(1) = forward, go(-1) = back과 동일하게 작동.
Q. colorDepth와 pixelDepth의 차이는?
- colorDepth: 화면에 표현 가능한 색의 수 (비트). pixelDepth: 한 픽셀에 사용하는 비트 수. 대부분의 브라우저에서 두 값이 같다. 시험에서는 colorDepth = "표현할 수 있는 색깔의 수" 기억.
'웹프로그래밍' 카테고리의 다른 글
| [웹프로그래밍] BOM과 타이머 — window.open·setTimeout·setInterval·location (0) | 2026.06.01 |
|---|---|
| [웹프로그래밍] 마우스 이벤트 활용 — 좌표계·슬라이드쇼·focus·라디오버튼 (0) | 2026.06.01 |
| [웹프로그래밍] DOM 조작과 이벤트 — 리스너 등록·이벤트 객체·익명 함수 (1) | 2026.06.01 |
| [웹프로그래밍] 코어 객체·배열·DOM 기초 — Array·Date·String·getElementById (0) | 2026.06.01 |
| [웹프로그래밍] JavaScript 연산자와 조건문 — 형변환과 if-else (0) | 2026.06.01 |