티스토리 뷰

[JQUERY]자바스크립트

jQuery 029. 입력창 prompt()

가산동 2018. 11. 1. 22:23

아래는 예제입니다.


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
<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    
    <script>
        $(function(){       // jquery 시작
            
            //클릭이벤트
            $("#btn_prompt").click(function(){
                //prompt 값 저장
                var result = prompt("입력하세요");
                
                if(result != ""){
                    //font태그 변경
                    $("#font_text").text(result);
                }else{
                    //font태그 변경
                    $("#font_text").text("입력 값이 없습니다.");
                }
            });
            
        });
    </script>
</head>
    <body>
        <button id="btn_prompt">입력하기</button>
        <font id="font_text"></font>
    </body>
</html>
cs


아래는 미리보기입니다. 실제로 클릭후 입력해보세요.




이번 예제는 prompt()를 활용해 입력하고 입력한값을 font태그에 입력하는 예제입니다.

지난 예제에서 봤었던 if()문을 활용해 입력 값이 없으면 '입력한 값이 없습니다.' 라는 텍스트를 

font태그에 입력하게 됩니다.


prompt()는 alert()함수에 입력창이 추가된 함수라고 생각하시면 됩니다.

alert()함수의 예제는 아래링크를 참조해주세요.

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


예제를 라인별로 살펴보겠습니다.

28
29
        <button id="btn_prompt">입력하기</button>
        <font id="font_text"></font>
cs

먼저 html부분 입니다. body태그 안에 위처럼 button 하나와, font 태그하나를 넣어줍니다.


10
11
            //클릭이벤트
            $("#btn_prompt").click(function(){
cs

라인 11. button에 클릭이벤트를 생성합니다.


12
13
                //prompt 값 저장
                var result = prompt("입력하세요");
cs

라인 13. 변수 result 에 prompt()함수로 받은 값을 저장해줍니다.


15
16
17
18
19
20
21
                if(result != ""){
                    //font태그 변경
                    $("#font_text").text(result);
                }else{
                    //font태그 변경
                    $("#font_text").text("입력 값이 없습니다.");
                }
cs

라인 15. if()를 활용해 변수 result 의 값이 빈값인지 체크합니다. 

라인 17. result 의 값이 "" (빈값) 아니라면 font 태그의 텍스트 값을 result 의 값으로 변경합니다.

라인 18. if()의 조건이 아니라면, 즉 ""(빈값)이 아니라면 진행되는 else 구문입니다.

라인 20. else 조건이라면, font 태그의 값을 '입력 값이 없습니다.' 로 변경합니다.


if() 함수에 대한 예제는 아래링크를 참조해 주세요.

>>[[JQUERY]자바스크립트] - jQuery 023. 조건문 if()

>>[[JQUERY]자바스크립트] - jQuery 024. 조건문 if() 의 활용

>>[[JQUERY]자바스크립트] - jQuery 025. 조건문 if() ,else if(), else()의 활용 #폰트 사이즈 변경하기


 

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

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

jQuery 031. 클래스 추가 및 제거 addClass(), removeClass()  (0) 2018.11.18
jQuery 030. if() 와 삼항연산자(조건부연산자)  (0) 2018.11.04
jQuery 028. == 연산과 === 연산의 차이  (0) 2018.10.29
jQuery 027. 텍스트 값 가져오기 text()  (0) 2018.10.19
jQuery 026. input 의 값 확인하기. val()  (0) 2018.10.17
댓글