Chapter 09. 동작에 따라 데이터를 변화시키는 방법

1. 개요

JavaScript를 이용하면 지정된 데이터의 모양을 바꾸거나 변화시킬 수 있다.

클릭이나 마우스가 다가갔을때, 벗어났을 때 등 다양하게 적용이 가능하다.

해당 기능의 기본적인 구동은 ‘함수’를 이용하는 것이며 함수란 입력되는 데이터에 따라 기능이 변화하는 형태의 수식을 말하는데, 기본적인 형태는 function(){}이다. ()는 변화하는 값을, {} 안에는 실행할 실행문이 기재된다. 

 

2. function을 이용하여 동작을 설정

function은 특정 조건에 동작을 정의하는 기능을 한다.

function의 동작과 기능은 window(브라우저)에서 나타나는 동작에 따라 다르게 나타날 수 있다.

기본적으로 동작에 대한 정의와 정보를 이미 자바스크립트에서 정의하고 있기 때문에 개발자가 별도로 브라우저의 움직임을 감지해서 동작을 정의하지 않아도 된다.

자세한 사용법은 Chapter 10을 참고하자. 

 

3. 외부의 동작으로 변화: .addEventListener(스트링 타입 데이터, 함수 타입 데이터); 

.addEventListener(스트링 타입 데이터, 함수 타입 데이터); 는 스트링 타입 데이터에서 지정한 명령에 따라 함수 타입 데이터가 실행되는 명령이다.

함수 타입 데이터는 기본적으로 function(){} 으로 구성되며 ()는 해당 함수에서 변화되는 값, {}는 수행되는 실행문을 말한다. 

 

ptag[4].addEventListener("click", function(){
	ptag[4].innerHTML="클릭해서 당신의 컴퓨터는 초기화됩니다."
});

 

위의 예문을 보면 ptag라는 배열 변수에서 4번째 항목에 이벤트를 추가하는데, 해당 이벤트는 클릭하면 발동한다.

발동하면 실행되는 정보는 해당 배열 변수에 포함된 contents 데이터를 “클릭해서 당신의 컴퓨터는 초기화됩니다.“로 바꾸는 것이다. 

이러한 방법은 동작에 따라 클릭수에 따라 if 문을 적용하여 바꾸는 것도 가능하다.

 

var flag=0;
ptag[4].addEventListener("click", function(){
  if(flag==0){
    ptag[4].innerHTML="클릭해서 내용을 변경했다";
    flag=1;
  }else{
    ptag[4].innerHTML="다시 클릭해서 내용을 변경한 것을 다시 변경했다."
    flag=0;
});

 

변수 flag를 지정하여 클릭시 flag의 값이 1로 변하고, 다시 클릭하면 0으로 변한다.

flag의 값이 클릭시마다 변하여 출력되는 내용이 변경된다.

이러한 방법에 따라 변수와 조건을 설정하는 것이 가능하다.

 

4. JavaScript: DOM 구조를 이용하여 태그의 style을 설정하기 

CSS는 style에서 지정하는 모양에 따라 태그의 표현 방식을 조정하는 기법이다.

이러한 조정 과정에서 DOM 구조를 이용하면 특정 태그나 id, class의 모양을 변경할 수 있다. 

 

객체.style.backgroundRepeat="no-repeat";

 

위와 같이 style의 모양을 변경할 수 있는데, Css에서 background-repeat항목을 바꾸는 것이다.

해당 규칙은 - 뒤에 위치한 첫 소문자를 대문자로 변경하고, 해당 속성이 가지고 있는 값을 지정하는 것이다. 

 

객체*{background-repeat: no-repeat;}

객체.style.backgroundRepeat="no-repeat";

 

위의 속성 지정자는 오른쪽에서는 style 태그 안 혹은 css 안에서의 모양이고, 왼쪽은 html의 javascript에서의 모양이다.

이유는 - 모양은 JavaScript에서 연산자로 사용되기 때문이다.