티스토리 뷰

[JQUERY]자바스크립트

jQuery 002. 알림창 alert()

가산동 2018. 7. 21. 10:46


이전시간 강좌.

>> [[JQUERY]자바스크립트] - jQuery 001. 변수사용 var


이번 시간에는 alert() 에 대해 알아보자. 

웹페이지를 돌아다니 보면 경고창이라던지 알림창들을 볼때가 있다.

이때 사용되는게 alert() 이다. 


-01. 단순 문자 입력하기



단순하게 문자값을 입력해보자.

방법은 alert('내용') 이다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //단순 문자 값
            alert('');
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


-02. 변수 값 (문자)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //변수 값
            var alertMsg = '변수에저장된문자'
            alert(alertMsg);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs

var alertMsg = '변수에저장된문자'


alertMsg 라는 변수에 값을 alert(변수이름); 이런형태로 사용한다.


-03. 변수 값 숫자



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //변수 값 (숫자)
            var alertMsg = 123456
            alert(alertMsg);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs

변수에 숫자를 대입할 수 있다.

-04. list (리스트) 입력


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //list  
            var list = ['리스트1','리스트2','리스트3']
            alert(list);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


var list = ['리스트1','리스트2','리스트3']


list 는 값을 하나씩 입력했던 것과 달리 한번에 여러 값을 저장 할 수있다. 이런게 있다는 정도만 알고 넘어가자

결과 값을 보면 알수 있듯이 순차적으로 리스트에 있는 값을 보여준다. 


-05. alert()로 표현 할 수 없는 object



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //map  
            var map = {'a':1}
            alert(map);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs

var map = {'a':1}
map 은 key 값과 value 값을 갖는다.
여기서 key는 'a' 가되고, value는 '1'이 된다 이것도 list와 마찬가지로 이런게 있다고만 알아두자.
결과를 보면 [object Object] 라는 값이 나오는걸 알수 있다.

alert()의 값을 map 에서 map.a 로 바꿔보자.
변수 map 이 가지고 있는 key 중에 'a' 라는 키값의 value를 나타낸다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //map  
            var map = {'a':1}
            alert(map.a);
            
        });
    </script>
</head>
    <body>
    </body>
</html>
cs


이글에서 사용된 문서편집기 설치 및 설정하기.

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

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

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




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

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

jQuery 004. 콘솔에서 데이터 확인 console.log()  (0) 2018.07.21
jQuery 003. 출력기능 document.write()  (0) 2018.07.21
jQuery 001. 변수사용 var  (0) 2018.07.21
어도비 브라켓(ADOBE Brackets) 제이쿼리(jquery) 연결하기  (1) 2018.07.20
어도비 브라켓(ADOBE Brackets) 설정하기  (0) 2018.07.19
댓글