티스토리 뷰

[JQUERY]자바스크립트

jQuery 003. 출력기능 document.write()

가산동 2018. 7. 21. 11:20

지난 강좌보기

>> [[JQUERY]자바스크립트] - jQuery 002. 알림창 alert()


document.write()에 대해 알아보자.

html에 출력을 해주는 기능이다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //document.write()
            
            document.write('단순문자내용','<br/>');
            document.write('단순','문자','내용','<br/>');
            
            var str = '문자변수';
            var num = 123;
            
            document.write('변수 ','str',' 의 값은 ',str,'<br/>');
            document.write('변수 ','num',' 의 값은 ',num,'<br/>');
            
            document.write('연산하기 num + num = ',num+num,'<br/>');
            
            var list = ['a','b','c'];
            
            document.write('리스트 list 의 값 = ',list,'<br/>');
            
            var map = {a:'1',b:'2',c:'3'};
            
            document.write('맵 map의 값 = ',map,'<br/>');
            document.write('map 의 b 의 값 = ',map.b,'<br/>');
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


하나씩 살펴보면

document.write('단순문자내용','<br/>');


document.write('내용') 으로 지난 시간에 봤었던 alert()과 사용방법이 비슷하다.

뒤에 나온 <br/> 은 줄바꿈 코드로 html 태그이다.

'내용' 으로는 여러개의 값이 들어 갈 수 있는데, 


document.write('단순','문자','내용','<br/>');


이런식으로도 사용할 수 있다 결과는 위랑 같다.


var str = '문자변수';

var num = 123;


str 에 문자를 대입하고, num 에 숫자를 대입한뒤 출력해보자.


document.write('변수 ','str',' 의 값은 ',str,'<br/>');

document.write('변수 ','num',' 의 값은 ',num,'<br/>');

document.write('연산하기 num + num = ',num+num,'<br/>');


alert() 처럼 변수 이름만으로 내용을 출력 할 수 있다.

연산도 가능하다. 지난 시간에 alert()에서 연산기능을 설명 안했는데 alert()에서도 가능하다.


var list = ['a','b','c'];

document.write('리스트 list 의 값 = ',list,'<br/>');


list도 마찬가지로 출력이 가능하다. 


var map = {a:'1',b:'2',c:'3'};

document.write('맵 map의 값 = ',map,'<br/>');

document.write('map 의 b 의 값 = ',map.b,'<br/>');


지난 강좌에서 짧게 map에 대해 설명을 했었는데 정확하게 이해 할 필요는 없다. 쓰다 보면 알게된다.

map 이라는 변수에 key(a) 는 value(1) ,key(b) 는 value(2) ,key(c) 는 value(3) 을 대입했다.


map을 바로 출력하게되면 alert()에서와 마찬가지로 [object Object] 를 확인할 수있다.

map.b 를 출력하게되면 key(b) 가 가진 value 값인 2를 출력해주게 된다.


위에서 사용한 소스 편집기의 설치 및 사용법.

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설치하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 설정하기

>> [[JQUERY]자바스크립트] - 어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기

 

저작자표시 비영리 변경금지

'[JQUERY]자바스크립트' 카테고리의 다른 글

jQuery 005. 배열 list  (0) 2018.07.24
jQuery 004. 콘솔에서 데이터 확인 console.log()  (0) 2018.07.21
jQuery 002. 알림창 alert()  (0) 2018.07.21
jQuery 001. 변수사용 var  (0) 2018.07.21
어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기  (1) 2018.07.20
댓글