happy cat image

everdevel

coding

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EVERDEVEL

























everdevel이 만든 무료 클라우드 개발환경을 소개합니다.

방문해 주셔서 감사합니다.

출력문

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

JavaScript Source

document.write("내용");

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

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

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

document.write("Hello World");

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 시작</title>
<script>
document.write("Hello World");
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

참고로 자바스크립트의 출력문을 실무에서 사용해본적은 한번도 없습니다. 자바스크립트 출력문으로 어떤 정보를 화면에 출력하는 경우는 거의 없다고 보면 됩니다. 그냥 있으니까 설명해봅니다.

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

숫자 출력하기

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

document.write(30);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>
<meta charset="utf-8" />
<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>
<meta charset="utf-8" />
<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>
<meta charset="utf-8" />
<title>자바스크립트 시작</title>
<script>
	document.write("Mickey"+"Mouse");
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

숫자를 문자화 해서 + 를 사용하면 어떨까요 숫자 6과 6을 +하면 12이지만 문자 6과 문자 6을 +하면 66이 됩니다. 한번 볼까요?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>자바스크립트 시작</title>
<script>
    document.write('숫자 6과 6+' + '<br />');
	document.write("6+6은 ? " + (6+6));
    // 컴퓨터에게 연결자  + 와 더하기 + 를  헷갈리지 말라고 ()로 감싸주세요.
        document.write('<br />' + '문자 6과 6을 +' + '<br />');
	document.write("6+6은 ? " + ('6'+'6'));
</script>
</head>
<body>
</body>
</html>

결과는 바로 아래에서 확인하겠습니다.

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

다음 콘텐츠
alert창

봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.

컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.


    
    







    


        
        

            새창열기
        


        

            
        


            



    


    

                    
            
            



    
강좌로 돌아가기



    



















    

        
댓글 0개

        

            
        

        
정렬기준