목록Wep Programming/JavaScript (5)
heenam
HTML 요소 생성하기 먼저 게임에 필요한 HTML 요소를 생성해야 한다. 필요한 요소는 그림을 그리기 위한 요소, 사용자로부터 숫자를 입력받을 수 있는 요소, 버튼 등이 필요하다. 이것을 먼저 생성하고 테스트하자. 속도 각도 점수 = 0 발사 배경 만들기 배경은 두 개의 이미지만을 가지고 만들자. 하나는 잔디밭 이고 한는 그물망 이다. 적절한 이미지를 생성하여 자바스크 립트에서 이것을 그려준다. ... 먼저 init() 함수를 작성한다. 여기서는 여러 초기화를 담당한다. 변수에 값을 대입하고 캔버스 객체로부터 컨텍스트 객 체를 얻어놓는다. 또 배경을 그려준다. init() 함수가 작정되면 어디선가 호출되어야 한다. 어디서 호출하는 것이 좋은가? 태그의 onload 이벤트에 연결해놓자. 문서가 완전히 로..
캔버스 요소 캔버스 생성 캔버스는 요소로 생성된다. 캔버스는 HTML 페이지 상에서 사각 형태의 영역이다. 요소는 디폴트 값으로 경계를 가지지 않는다. 요소는 단순히 그래픽을 위한 컨테이너이다. 실제 그림은 자바스크립트를 통하여 코드로 그려야 한다. 항상 id 속성을 지정해야 한다. 왜냐하면 id속성이 있어야 자바스크립트에서 참조할 수 있다. 또 가로와 세로 크기도 꼭 설정하도록 하자. 경계를 추가하려면 style 속성을 사용한다. 캔버스 좌표계 캔버스는 픽셀이 들어 있는 2차원 그리드이다. 캔버스 좌측 상단의 좌표가(0.0)이다. 우측 하단의 좌표는 캔버스의 크기에 따라서 결정된다. 콘텍스트 객체 자바스크립트에서 물감과 붓을 모아놓은 객체가 있다. 바로 컨텍스트객체 이다. 컨텍스트 객체는 캔버스에서 다..
문서 객체 모델 먼저 브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델인 DOM부터 살펴보자. 웹 페이지가 적재되면, 브라우저는 페이지의 문서 객체 모델(DOM)을 생성한다. DOM은 HTML 문서의 계층적인 구조 를 트리로 표현한다. 트리라고 하는 이유는 나무와 비슷하기 때문이다. 트리에 있는 하나의 잎은 노드라 한다. 트리에서는 부모 노드, 자식 노드, 형제 노드의 개념이 있다. 자바스트립트를 사용하여 DOM 트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 변 경할 수 있다. 즉 동적으로 웹 페이지의 내용과 스타일을 변경할 수 있는 것이다. 또 각각의 요소에서 발행하는 이벤트 에 반응하는 코드를 작성할 수 있다. DOM과 BOM 자바스크립트에서는 HTML문서와..
객체 자바스크립트의 가장 기초적인 자료형은 객체이다. 자바스크립트에서 거의 모든 것은 객체이다. 문자열, 수치형, 부울 형을 불변경 객체라고 한다. 즉 내용을 변경 할 수 없지만 어짼든 객체라는 의미이다. 객체는 객체 지향 기술의 핵심 개념이다. 객체는 데이터와 동작을 가지고 있다. 객체의 데이터는 객체가 가지고 있는 특정값이다. 객체의 동작은 객체가 수행할 수 있는 행동이다. 자바 스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다. 객체 안의 변수를 속성이라고 하고 객체 안의 함수를 메서드라고 부른다. 속성과 메서드는 객체 내부에 존재하며 서로 긴밀하게 연결되어 있다. 객체 안의 메서드는 객체 내부의 변수를 언제든지 직접 접근하여 사용할 수 있다. 객체 안의 변수는 외부 세계로부터..
자바 스크립트의 소개 자바스크립트는 웹의 표준 프로그래밍 언어이다. 모든 웹 브라우저는 자바스크립트를 지원한다. 자바스크립트는 HTML5의 공식적인 스크립트 언어가 되었다. 자바스크립트는 웹 페이지에 생명력을 불어넣어서 역동적인 웹 페이지를 만든다. 자바스크립트의 특징 인터프리트 언어 - 인터프리트 언어란 컴파일 과정을 거치지 않고 바로 실행시킬 수 있는 언어이다. 동적 타이핑 - 변수의 자료형을 선언하지 않고도 변수를 사용할 수 있는 특징이 있다. 구조적 프로그래밍 지원 - c언어의 구조적 프로그래밍을 지원한다. 객체 기반 - 자바스크립트는 전적으로 객체 지향 언어이다. 자바스크립트의 객체는 연관배열이다. 함수형 프로그래밍 지원 - 자바스크립트에서 함수는 일급객체이다. 즉 함수는 그 자체로 객체이다. ..