목록Wep Programming (17)
heenam
SVG HTML5는 인라인 SVG를 지원한다. SVG는 XML-기반의 벡터 이미지 포맷이다. SVG는 웹에서 벡터-기반의 그래픽을 정의하는데 다용된다. SVG는 상호작용과 애니메이션도 지원한다. SVG 이미지와 관력된 동작은 XML 텍스트 파일에 저장된다. 이것은 SVG파일이 검색, 인덱싱, 압축이 가능하다는 것을 의미한다. SVG의 장점 그래픽은 픽셀이 모여서 그림을 이루는 방식이다. 간단하고 직관적이지만 확대/ 축소 시에 품질이 나빠지는 결정적인 약점이 있다. 벡터 그래픽은 직선이나 곡선, 원, 사각형과 같은 도형을 이용하여 그래픽을 정의하는 방법이다. 벡터 그래픽은 그리는 데 시간이 많이 걸리지만 확대, 축소해도 품질의 저하가 없다. JPEG나 GIF 같은 이미지 형식에 비하여 SVG의 장점을 정리..
JSON JSON은 텍스트-기반의 데이터 교환 형식이다. 이 형식은 사람도 읽을 수 있으며 컴퓨터도 쉽게 분석할 수 있다. JSON은 자바스크립 언어에서 유래하여 배열과 객체를 표현하는 양식에 토대를 두고 있다. JSON은 근본적으로 언어에 독립적이다. 따라서 어떤 언어에서도 읽고 쓰는 데 문제가 없다. JSON과 XML JSON과 XML은 경쟁자나 마찬가지이다. 둘 다 계층적으로 데이터를 구상할 수 있으며 프로그램으로 비교적 쉽게 구문 분석할 수 있다. 하지만 XML과 달리 JSON은 종료 태그를 써줄 필요가 있다. 아주 작은 차이지만 JSON이 XML보다 간결하다. 따라서 빠르게 읽고 쓰는게 가능하다. 자바스크립트에서는 eval()을 사용해 쉽게 파싱할 수 있다. 배열도 사용 할 수 있다. JSON의..
Ajax 개요 Ajax는 서버와 데이터를 교환하는 기술의 하나이다. Ajax는 클라이언트가 서버와 적은 양의 데이터를 교환하여 비동기 적으로 THML 페이지를 업데이트 할수 있다. 따라서 Ajax는 빠르고 동적인 대화형 웹 페이지를 만드는 데 유용하다. Ajax는 대표적으로 구글 맵에 사용된다. 이외에도 Ajax를 이용하면 혁신적인 메일 서비스, 게시판 서비스, 블로그 서비 스 등이 가능하다. Gmail, 유투브, 페이스북이 모두 Ajax를 사용하고 있다. Ajax는 새로운 프로그래밍 언어가 아니라 기존의 표준 기술을 현명하게 사용하는 새로운 기술이다. Ajax 외 기존 방법의 비교 기존의 웹 브라우저는 서버로 부터 페이지 단위로만 받을 수 있었지만 Ajax를 사용하면 XML 파일 조각 단위로 받을 수 ..
jQuery jQuery는 일종의 자바스크립트 라이브러리이다. jQuery를 사용하면 자바스크립트 프로그래밍의 양을 상당히 줄일 수 있다. 그리고 무엇보다도 jQuery는 배우기 쉽다. 게다가 무료이다. 설치 과정도 필요 없이 그냥 한 줄만 소스에 추가하면 된다. 똑같은 동작을 하는 자바스크립트 코드와 jQuery 코드를 서로 비교해 보자. 자바스크립트 jQUREY document.getElementsById("myPara").innerHTML = "안녕하세요?" $("#myPara").html("안녕하세요") jQuery는 CSS의 선택자 문법을 사용하여 특정한 요소를 선택한다. jQuery는 웹 페이지에서 자바스크립트를 사용하는 것을 쉽게 하기 위하여 만들어 졌다. jQuery를사용하면 자바스크립 트..
HTML 요소 생성하기 먼저 게임에 필요한 HTML 요소를 생성해야 한다. 필요한 요소는 그림을 그리기 위한 요소, 사용자로부터 숫자를 입력받을 수 있는 요소, 버튼 등이 필요하다. 이것을 먼저 생성하고 테스트하자. 속도 각도 점수 = 0 발사 배경 만들기 배경은 두 개의 이미지만을 가지고 만들자. 하나는 잔디밭 이고 한는 그물망 이다. 적절한 이미지를 생성하여 자바스크 립트에서 이것을 그려준다. ... 먼저 init() 함수를 작성한다. 여기서는 여러 초기화를 담당한다. 변수에 값을 대입하고 캔버스 객체로부터 컨텍스트 객 체를 얻어놓는다. 또 배경을 그려준다. init() 함수가 작정되면 어디선가 호출되어야 한다. 어디서 호출하는 것이 좋은가? 태그의 onload 이벤트에 연결해놓자. 문서가 완전히 로..
캔버스 요소 캔버스 생성 캔버스는 요소로 생성된다. 캔버스는 HTML 페이지 상에서 사각 형태의 영역이다. 요소는 디폴트 값으로 경계를 가지지 않는다. 요소는 단순히 그래픽을 위한 컨테이너이다. 실제 그림은 자바스크립트를 통하여 코드로 그려야 한다. 항상 id 속성을 지정해야 한다. 왜냐하면 id속성이 있어야 자바스크립트에서 참조할 수 있다. 또 가로와 세로 크기도 꼭 설정하도록 하자. 경계를 추가하려면 style 속성을 사용한다. 캔버스 좌표계 캔버스는 픽셀이 들어 있는 2차원 그리드이다. 캔버스 좌측 상단의 좌표가(0.0)이다. 우측 하단의 좌표는 캔버스의 크기에 따라서 결정된다. 콘텍스트 객체 자바스크립트에서 물감과 붓을 모아놓은 객체가 있다. 바로 컨텍스트객체 이다. 컨텍스트 객체는 캔버스에서 다..
문서 객체 모델 먼저 브라우저가 HTML 문서를 내부적으로 표현하는 표준 모델인 DOM부터 살펴보자. 웹 페이지가 적재되면, 브라우저는 페이지의 문서 객체 모델(DOM)을 생성한다. DOM은 HTML 문서의 계층적인 구조 를 트리로 표현한다. 트리라고 하는 이유는 나무와 비슷하기 때문이다. 트리에 있는 하나의 잎은 노드라 한다. 트리에서는 부모 노드, 자식 노드, 형제 노드의 개념이 있다. 자바스트립트를 사용하여 DOM 트리를 순회하면서 페이지 안 요소의 내용이나 속성, CSS 스타일을 우리 마음대로 변 경할 수 있다. 즉 동적으로 웹 페이지의 내용과 스타일을 변경할 수 있는 것이다. 또 각각의 요소에서 발행하는 이벤트 에 반응하는 코드를 작성할 수 있다. DOM과 BOM 자바스크립트에서는 HTML문서와..
객체 자바스크립트의 가장 기초적인 자료형은 객체이다. 자바스크립트에서 거의 모든 것은 객체이다. 문자열, 수치형, 부울 형을 불변경 객체라고 한다. 즉 내용을 변경 할 수 없지만 어짼든 객체라는 의미이다. 객체는 객체 지향 기술의 핵심 개념이다. 객체는 데이터와 동작을 가지고 있다. 객체의 데이터는 객체가 가지고 있는 특정값이다. 객체의 동작은 객체가 수행할 수 있는 행동이다. 자바 스크립트에서 객체의 데이터와 동작은 각각 변수와 함수로 표현할 수 있다. 객체 안의 변수를 속성이라고 하고 객체 안의 함수를 메서드라고 부른다. 속성과 메서드는 객체 내부에 존재하며 서로 긴밀하게 연결되어 있다. 객체 안의 메서드는 객체 내부의 변수를 언제든지 직접 접근하여 사용할 수 있다. 객체 안의 변수는 외부 세계로부터..