devil cat everdevel character
disney Teyon kin

출력문

이번 시간에는 자바스크립트의 출력문에 대해서 공부해 봅니다. ^-^*

JavaScript Source

document.write("내용");

위의 document.write가 출력 명령문이며 괄호() 안에 내용을 넣습니다.

예를 들어 Hello World라는 문구를 자바스크립트를 통하여 출력을 하려면 아래와 같은 소스를 작성하여 스크립트 태그 안에 넣습니다.

아래와 같이 작성하며 문자를 출력 할때 따옴표 ""를 감싸 줍니다. "Hello World"

document.write("Hello World");

그럼 위의 소스를 실제 HTML 문서에 넣어보면

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 자바스크립트 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
document.write("Hello World");
</script>						
</head>
<body>
</body>
</html>

문자열 출력의 경우 따옴표로 사이에 입력을 했습니다. 그럼 숫자를 표시 해 봅시다.

숫자 출력하기

숫자의 경우는 따옴표를 하지 않고 그냥 괄호 안에 작성합니다. 예를 들어 30을 출력하려면 다음과 같습니다.

document.write(30);
<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 자바스크립트 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
document.write(30);
</script>						
</head>
<body>
</body>
</html>

그렇다면 이번엔 4칙 연산에 대해서 알아 봅시다.

4칙 연산

예를 들어 30 + 40 의 결과를 구해 본다면 30+40을 괄호 안에 작성 하면 됩니다.

더하기 +

document.write(30+40);

빼기 -

document.write(30-20);

곱하기 *

document.write(30*40);

나누기 /

document.write(30/2);

나머지 %

document.write(10%3);

그럼 아래의 소스를 보면서 직접 느껴봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 자바스크립트 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
document.write(30+40);
document.write("<br  />");
document.write(30-20);
document.write("<br  />");
document.write(30*40);
document.write("<br  />");
document.write(30/2);
document.write("<br  />");
document.write(10%3);
</script>						
</head>
<body>
</body>
</html>

위 소스에 보면

document.write("<br  />");

위와 같이 태그를 안에도 넣을수 있는데요 태그를 넣을때도 큰 따옴표 사이에 넣습니다.

이렇게 문자, 숫자, 태그를 넣어 보았습니다.

그리고 문자의 경우 큰 따옴표 사이에 문자열을 넣는데요. 그렇다면 큰 따옴표를 넣을려면 어떻게 해야 할까요? 바로 역슬러쉬" 를 넣어 줍니다.

테스트 해봅시다.

따옴표 표현하기 \"

document.write("\"");

소스로 확인해 봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 자바스크립트 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
	document.write("\"");
</script>	
</head>
<body>
</body>
</html>

그럼 마지막으로 문자열의 연결에 대해 알아 보겠습니다.

문자열의 연결 +

문자열의 연결이란 뜻은 Mickey 라는 단어와 Mouse 라는 단어를 연결 한다는 의미 인데요. 그렇게 함으로써 Mickey Mouse로 표현을 해 줄 수 있습니다.

문자열의 연결을 위하여 + 를 사용 하는데요 숫자의 경우는 3+3 하면 연산을 하여서 6으로 결과가 나옵니다만

문자열의 연결의 경우 "Mickey"+"Mouse" 라고 작성하면 결과는 Mickey Mouse가 나옵니다. 그럼 소스를 통해서 이해를 해봅시다.

  document.write("Mickey"+"Mouse");

소스로 확인해 봅시다.

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 자바스크립트 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<script>
	document.write("Mickey"+"Mouse");
</script>	
</head>
<body>
</body>
</html>

이렇게 출력문에 대해서 끝내고 다음에는 alert()창 띄우기에 대해서 해보겠습니다.

다음강좌는 2강.alert창 입니다. 클릭하면 다음 강좌로 이동합니다.