1. HTML문서 내 <script>의 위치
<script>태그를 <head>태그에 작성하게 되면 성능이 다소 떨어지고 헤드가 지나치게 복잡해지므로 <body>태그 마지막에 놓는 것이 좋다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>My first application</h1>
<p>Welcome to <i>Learning JavaScript, 3rd Edition</i>. </p>
<script src="main.js"></script>
</body>
</html>
2. 자바스크립트 콘솔
파이어폭스 콘솔 단축키 window : ctrl-shift-k / mac : ctrl-option-k
콘솔을 통해 프로그램의 출력결과를 볼 수 있고, 간단한 테스트를 하거나 프로그램을 임시로 수정하는 일이 가능하다.
console.log('main.js loaded');
3. jQuery 불러오기
URL을 통해 클라이언트 스크립트 라이브러리인 제이쿼리를 페이지에 불러온다.
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
4. $(document).ready(function() {}); 사용하기
브라우저 기반 자바스크립트를 만들 때에는 반드시 브라우저가 HTML을 전부 불러왔는지를 확인하는 것이 좋다.
use strict는 자바스크립트 인터프리터에서 코드를 더 엄격하게 처리하라는 의미이다.
$(document).ready(function() {
'use strict';
console.log('main.js loaded');
});
5. 그래픽 라이브러리 사용하기
그래픽 라이브러리를 통해 HTML5 캔버스를 사용할 수 있다.
- HTML
<canvas id="mainCanvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.min.js"></script>
- CSS
#mainCanvas {
width: 200px;
height: 200px;
border: solid 1px black;
}
- JavaScript
$(document).ready(function() {
'use strict';
paper.install(window); // Paper.js를 전역 스코프에 설치
paper.setup(document.getElementById('mainCanvas')); // Paper.js를 캔버스에 연결
// 실제 그림을 그리는 부분
var c = Shape.Circle(100, 100, 50); // x좌표, y좌표, 반지름
c.fillColor = 'purple'; // 원의 색상 지정
paper.view.draw(); // 실제 화면에 그림을 그리라는 명령
});
6. 사용자 입력 처리하기
Paper.js는 Tool 객체를 통해 사용자 입력을 처리한다.
JavaScript 코드에 실제 그림을 그리는 부분을 아래와 같이 변경하면 사용자의 입력에 따른 이벤트 처리도 가능하다.
var tool = new Tool();
tool.onMouseDown = function(event) {
var c = Shape.Circle(event.point.x, event.point.y, 20);
//var c = Shape.Circle(event.point, 20);
c.fillColor = 'purple';
};JavaScript 객체에는 이벤트 핸들러를 연결할 수 있다.
onMouseDown 이벤트 핸들러를 연결한 경우 사용자가 마우스를 클릭할 때마다 핸들러에 연결된 함수가 호출된다.
※ 이벤트 핸들러의 역할
- 이벤트 발생 시 function 다음에 있는 중괄호 사이의 코드가 실행된다.
- 이벤트가 발생한 위치를 event.point property에 저장한다.
참고자료
Learning JavaScript
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript Debugging (0) | 2018.12.03 |
|---|---|
| [JavaScript] Ajax (0) | 2018.12.03 |
| [JavaScript] Event (0) | 2018.12.02 |
| [JavaScript] DOM(querySelector) (0) | 2018.12.02 |
| [JavaScript] window객체(setTimeout) (0) | 2018.12.02 |
