본문 바로가기
매일코딩/자바스크립트 개념

[자바스크립트 기초] 스크립트 왕기초 개념 1

by 인생여희 2017. 2. 16.
반응형

기초중의 기초 !! 컴퓨터는 데이터를 이용하여 세상을 표현하기 위한 모델을 만든다

호텔, 자동차 같은 객체는 개발자가 데이터만 잘 만들고 전달해 주면 컴퓨터는 우리가 원하는 명령을 실행해서 작업을 수행할 수 있다.

 

객체와 속성

컴퓨터에서 실제 세계에 존재하는 물리적인 물체는 다양한 종류(type)의 객체(object)로 표현된다. 개발자라면 그 객체들을 인스턴스라고 표현할 것이다.객체는 다음과 같은 정보를 가진다.

 

속성, 이벤트, 매서드

 

이 세 가지가 결합하여 객체를 표현하는 모델을 구성한다.

 

<속성>

 

속성(특징): 자동차를 예를 들면 자동차의 속도, 색상, 크기 등이 속성이다.

속성은 이름과 값, namevalue로 구성된다.

 

) 자동차의 속성

이름 :

제조사: 현대

속도: 60km

색상: 검정

 

 

<이벤트>

실제 세계에서 사람은 객체와 상호작용을 한다.

이런 상호작용을 통해 객체가 가지고 있는 속성 값이 바뀌게 된다.

실제 세계에서 자동차는 페달을 밟아야 움직인다. 마찬가지로 프로그램에서도 사용자가 컴퓨터와 어떤 방식으로 상호작용하느냐에 따라 다른 일을 하도록 만들어져 있다.

예를 들어, 웹페이지에서 연락처 링크를 클릭하면 연락처 양식이 펼쳐지고, 검색 상자에 검색어를 입력하면 자동으로 검색 기능이 실행되기도 한다.

 

이벤트가 하는 일은?

이벤트가 발생하면 이벤트는 그에 대응하기 위한 일련의 코드를 실행한다. 그리고 이벤트가 발생했을 때 스크립트의 어느 부분이 실행되어야 하는지를 서술한다.

 

)

자동차를 예를 들면 자동차 객체는 accelerate 이벤트가 발생하면 자동차의 speed 속성 값이 증가하고 break 이벤트가 발생하면 speed의 속성 값이 감소한다.

 

<메서드>

메서드는 사람이 객체를 사용하여 하고자 하는 일을 표현한다.

메서드는 객체의 속성 값을 알아내거나 변경할 수 있다.

 

메서드가 하는 일?

객체의 속성 값을 변경한다.

 

메서드를 표현하는 코드는 하나의 작업을 표현하기 위한 여러 명령으로 구성된다.

 

 

) 자동차의 speed 속성 값은 운전자가 속도를 올릴때마다 변경되어야 한다. 따라서 speed 속성 값을 변경하기 위한 changeSpeed() 라는 이름의 메서드를 만들 수 있다.

 


<정리>

컴퓨터는 실제 세계의 물체를 표현하기위해 데이터를 이용하여 모델을 만든다.

객체의 이벤트, 메서드, 속성은 서로 연관되어 있다.

, 이벤트는 메서드를 실행하고, 메서드는 객체의 속성을 알아내거나 변경한다.


객체 종류: 자동차

이벤트

발생시점

호출되는 메서드

속성

 

brak

속도를 높이고 싶을 때

changeSpeed()

make

BMW

accelerate

속도를 줄이고 싶을때

changeSpeed()

currentSpeed

45km/h

메서드

하는 일

color

red

changeSpeed()

currentSpeed 속성 값을

증가시키거나 감소시킨다.

 

 

 

 


 

2.웹브라우저는 객체를 이용하여 만들어진 프로그램이다.

웹브라우저도 위에서 설명한 것과 유사한 방법으로 사용자에게 보여줄 페이지와 그페이지가 보여질 브라우저 창을 위한 모델을 만들어 낸다.

 

<window객체>

브라우저는 window라는 객체를 이용하여 브라우저창 혹은 탭을 표현한다. window 객체의 location 속성은 현재 페이지의 url을 저장하고 있다.

 

<document 객체>

현재 웹페이지는 각각의 브라우저 창에 로드되며, document객체를 통해 모델로서 표현된다.

document 객체의 title 속성은 문서의 제목을 URL 속성은 주소를, lastModified 속성은 현제페이지가 마지막으로 수정된 날짜 정보를 제공한다.

 

document객체를 이용하면 사용자가 페이지를 통해 보게 되는 콘텐츠에 접근하고 이를 변경할 수 있을 뿐 아니라 사용자의 동작에 반응도 할 수 있다.

document객체는 다음과 같은 방법으로 자신을 표현한다.

 

속성: 현재 웹페이지의 특징을 기술한다.

메서드: 현재 브라우저에 로드된 문서와 관련된 작업을 한다. 예를 들면 지정된 요소를 가져와 새로운 콘텐츠를 추가하는 작업 등.

이벤트: 사용자가 요소를 클릭하거나 탭하는 등의 동작에 대한 이벤트에 반응할 수 있다.

 

)

속성: url, lastModified , title

 

이벤트: load 페이지와 기타 요소들의 로딩이 완료되었을 때 , click- 마우스를 클릭했을 때 , keypress 사용자가 키보드의 키를 눌렀을 때

 

메서드: write() - 새로운 콘텐츠를 추가한다, getElementById() - id 특성을 지정하여 요소를 찾는다.

 

 

브라우저가 웹페이지를 보는 방법

브라우저가 html 페이지를 다운로드 한다.

브라우저는 트리형으로 페이지의 모델을 만들고 메모리에 저장한다.

렌더링 엔진을 이용하여 페이지를 화면에 표시한다.

 

 

 

반응형

댓글