목록전체 글 (53)
heenam
HTML 요소 생성하기 먼저 게임에 필요한 HTML 요소를 생성해야 한다. 필요한 요소는 그림을 그리기 위한 요소, 사용자로부터 숫자를 입력받을 수 있는 요소, 버튼 등이 필요하다. 이것을 먼저 생성하고 테스트하자. 속도 각도 점수 = 0 발사 배경 만들기 배경은 두 개의 이미지만을 가지고 만들자. 하나는 잔디밭 이고 한는 그물망 이다. 적절한 이미지를 생성하여 자바스크 립트에서 이것을 그려준다. ... 먼저 init() 함수를 작성한다. 여기서는 여러 초기화를 담당한다. 변수에 값을 대입하고 캔버스 객체로부터 컨텍스트 객 체를 얻어놓는다. 또 배경을 그려준다. init() 함수가 작정되면 어디선가 호출되어야 한다. 어디서 호출하는 것이 좋은가? 태그의 onload 이벤트에 연결해놓자. 문서가 완전히 로..
캔버스 요소 캔버스 생성 캔버스는 요소로 생성된다. 캔버스는 HTML 페이지 상에서 사각 형태의 영역이다. 요소는 디폴트 값으로 경계를 가지지 않는다. 요소는 단순히 그래픽을 위한 컨테이너이다. 실제 그림은 자바스크립트를 통하여 코드로 그려야 한다. 항상 id 속성을 지정해야 한다. 왜냐하면 id속성이 있어야 자바스크립트에서 참조할 수 있다. 또 가로와 세로 크기도 꼭 설정하도록 하자. 경계를 추가하려면 style 속성을 사용한다. 캔버스 좌표계 캔버스는 픽셀이 들어 있는 2차원 그리드이다. 캔버스 좌측 상단의 좌표가(0.0)이다. 우측 하단의 좌표는 캔버스의 크기에 따라서 결정된다. 콘텍스트 객체 자바스크립트에서 물감과 붓을 모아놓은 객체가 있다. 바로 컨텍스트객체 이다. 컨텍스트 객체는 캔버스에서 다..
Call by value 가장 일반적인 함수 호출의 형태로 호출방식은 값의 복사로 이루어 진다. 함수 안에서 인자의 값이 변경되어도, 외부의 변수의 값은 변경되지 않는다. 함수가 종료되면 해당 공간은 사라진다. Call by reference 함수 호출시 변수의 주소를 전달해 인자로 전달된 주소가 가리키는 변수의 조작을 함수 내에서 가능하게 한다. 함수를 위한 변도의 임시공간에 생성된다. 마찬가지로 함수가 종료되면 해당 공간은 사라진다. 함수 안에서 인자의 값이 변경되면, 외부의 변수의 값도 변경된다. Call by value의 경우 말 그대로 데이터(값)을 복사해서 함수로 전달하기 때문에 원본의 데이터(값)가 변경 될 가능성이 없지만, 인자를 넘겨줄 때 마다 메모리의 공간을 할당하기 때문에 메모리 공간..
문서 객체 모델 먼저 브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델인 DOM부터 살펴보자. 웹 페이지가 적재되면, 브라우저는 페이지의 문서 객체 모델(DOM)을 생성한다. DOM은 HTML 문서의 계층적인 구조 를 트리로 표현한다. 트리라고 하는 이유는 나무와 비슷하기 때문이다. 트리에 있는 하나의 잎은 노드라 한다. 트리에서는 부모 노드, 자식 노드, 형제 노드의 개념이 있다. 자바스트립트를 사용하여 DOM 트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 변 경할 수 있다. 즉 동적으로 웹 페이지의 내용과 스타일을 변경할 수 있는 것이다. 또 각각의 요소에서 발행하는 이벤트 에 반응하는 코드를 작성할 수 있다. DOM과 BOM 자바스크립트에서는 HTML문서와..
객체 자바스크립트의 가장 기초적인 자료형은 객체이다. 자바스크립트에서 거의 모든 것은 객체이다. 문자열, 수치형, 부울 형을 불변경 객체라고 한다. 즉 내용을 변경 할 수 없지만 어짼든 객체라는 의미이다. 객체는 객체 지향 기술의 핵심 개념이다. 객체는 데이터와 동작을 가지고 있다. 객체의 데이터는 객체가 가지고 있는 특정값이다. 객체의 동작은 객체가 수행할 수 있는 행동이다. 자바 스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다. 객체 안의 변수를 속성이라고 하고 객체 안의 함수를 메서드라고 부른다. 속성과 메서드는 객체 내부에 존재하며 서로 긴밀하게 연결되어 있다. 객체 안의 메서드는 객체 내부의 변수를 언제든지 직접 접근하여 사용할 수 있다. 객체 안의 변수는 외부 세계로부터..
자바 스크립트의 소개 자바스크립트는 웹의 표준 프로그래밍 언어이다. 모든 웹 브라우저는 자바스크립트를 지원한다. 자바스크립트는 HTML5의 공식적인 스크립트 언어가 되었다. 자바스크립트는 웹 페이지에 생명력을 불어넣어서 역동적인 웹 페이지를 만든다. 자바스크립트의 특징 인터프리트 언어 - 인터프리트 언어란 컴파일 과정을 거치지 않고 바로 실행시킬 수 있는 언어이다. 동적 타이핑 - 변수의 자료형을 선언하지 않고도 변수를 사용할 수 있는 특징이 있다. 구조적 프로그래밍 지원 - c언어의 구조적 프로그래밍을 지원한다. 객체 기반 - 자바스크립트는 전적으로 객체 지향 언어이다. 자바스크립트의 객체는 연관배열이다. 함수형 프로그래밍 지원 - 자바스크립트에서 함수는 일급객체이다. 즉 함수는 그 자체로 객체이다. ..
부트 스트랩이란? 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트 웨어 도구 모음이다. 부트 스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론튼엔드 프레임워크로, 입력창, 버튼, 네비게이션, 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS기반의 디자인 템플릿으로 제공하여 추가적인 자바스크립트 확장들도 포함한 다. 타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. 모듈화 되어 있 으며 LESS의 다양한 요소를 구현하고 있다. 웹 브라우저의 종 류 및 크기에 따라 디자인 요소가 자동으로 정렬되는 그리드 레이아웃을..
웹 사이트 작성 요구사항 분석 + 웹 사이트의 목표 + 예산 + 일정 설계 + 웹 사이트의 기능 나열 + 웹 사이트에서 필요한 웹 페이지 나열 + 웹 사이트의 메뉴 나열 + 내비게이션 구조 결정- 사이트 안에서 페이지가 어떻게 연결되는지를 결정한다. HTML 문서 작성 설계된 내용에 맞추어서 웹 페이지를 작성하고 테스트 한다. HTML요소를 이용해 설계해서 나열된 기능과 메뉴를 구현하면 된다. 여기서는 웹 페이지의 콘텐츠만을 제작하는 것이고 스타일에 대해서는 신경 쓰지 않는다. CSS 스타일 작성 CSS 파일을 작성하여 웹 페이지에 스타일을 추가한다. 구체적으로 웹 페이지의 전체적인 레이아웃을 잡고 HTML 요소의 크기, 위치, 색상, 폰트, 이미지 등을 지정한다.