Chapter 06. 입력 값을 취하는 방법 (DOM 기초 1)

1. input의 값 가져오기

input은 사용자가 값을 입력할 수 있는 태그인데, 대부분의 웹사이트는 input으로 값을 입력받고 값에 따라 화면을 구현한다.

html을 통한 화면 구현은 모양만 구현하는 것이기 때문에 일련의 동작에는 Javascript를 통한 지정이 필요하다.

(input 에 대한 설명은 HTML 문서의 chapter 8을 참고하라)

 

2. function 이름(값) {동작} 

function은 지정된 값에 따라 동작을 수행하는 규칙문으로 메소드, 함수라고도 한다.

값으로 지정한 일정 값에 따라 구현하는 값이 다르며, 일정한 규칙을 가진다. 

중요한 점은 function의 연산순서가 body의 콘텐츠보다 우선 순위에 있다는 것이다.

때문에 function으로 구현하는 콘텐츠는 컴퓨터에게 있어 가장 우선하여 처리하는 내용이며, function으로 지정한 값과 구현 정보를 재차 ‘할당’하지 않으면 페이지에 함수 값만 출력된다. 

 

3. 함수 동작을 클릭을 통해 실행: onclick=”이름()”

function의 동작은 다양한 방법으로 실행을 지정할 수 있다.

대표적으로 click을 통해 구현하는 방법은 모양이 있는 일반 태그에 onclick=”함수로 지정한 이름()”이다.

해당 속성을 태그에 포함시키면 마우스 클릭을 통해 함수로 지정한 동작이 수행된다.

 

<input type=”button” onclick=”get()”>

 

버튼 타입의 input을 클릭하면 get 이름을 가진 함수를 수행한다. 

 

4. input의 값을 가져오는 방법: document.getElementById("지정한 id”).value;

input 태그는 모양을 표시하는 태그이며 별도의 동작을 넣지않으면 사용자에게 정보를 수취할 수 없다.

때문에 script를 통해 정보를 변수로 저장할 필요가 있는데, 이럴 때 사용하는 것이 document를 통한 경로지정이다. 

 

document.getElementById("dog”).value;

 

위의 경로를 해석하자면 [문서(document/현재 html 문서) 안( . )에서 가져온다.

(get) 구성 요소(Element), dog라는 아이디를 가진(ById("dog”)) 것 안( . )에 가치 값 (value)를] 이다. 

 

쉽게 말해 위의 해석과 같이 각 특정 영역이나 태그, 입력값을 함수로 별도 지정이 가능하다는 것이다. 

 

document.body.innerHTML

 

동일한 원리로 ‘문서안의 html 태그 안에 위치한 body 전체 값을 가져온다’로 해석이 가능하다.

 

5. 변수에는 ‘값’만이 아니라 특정 영역이나 연산, 태그까지 포함이 가능하다. 

var = dog;
dog += 1+10;
dog +=  document.body.innerHTML;
document.write(dog);

위와 같이 스크립트를 구성하면 문서안에 작성되는 값은 11과 기존 body에 포함되어있던 모든 값이다.

변수에는 수 혹은 연산을 위한 정보만이 아니라 tag을 통한 단락이나 데이터까지 할당하고 이를 표현할 수 있다. 

 

var i = 0;
var tag="";
for (i=1; i<=100; i++){
	if(i%10==1){
		tag+="<br>";
    }

	if(i%2==1){
		tag+=`<span class=red>${i}</span>`;
    }

	if(i%2==0){
		tag+=`<span class=blue>${i}</span>`;
    }
} 
tag+="<br>"
document.write(tag);

위의 스크립트를 확인하면 tag에 특정 동작이 지속적으로 더해지고 있는 것을 확인할 수 있다.

이와 같이 tag 혹은 동작(연산을 포함)을 반복하여 변수에 할당할 수 있다.