javascript, jQuery & Node.js

javascript / 사용자 입력받기, 내용 출력하기, 선택하기 / document.wriet(), alert(), confirm(), prompt()

yy_dd2 2021. 3. 4. 17:36
반응형

자바스크립트 복습겸 작성할때는 학원에서 배운 내용을 조금 더 응용하거나

필요한 내용들을 추가하는 방법으로 복습중이다

 

document.write("body에 여기에 쓰이는 글 출력")

confirm : 문자열을 팝업으로 표시 예/아니오 선택 var a = confim("내용") 후에 조건문같은걸로 alert 표시

prompt : 사용자의 입력을 받는 팝업

 

 

1. document.write()는 body에 지정된 내용을 나타낼 수 있다

body에 나타내니 <h2> 같은 태그 사용 가능 style도 사용 가능한데

"" 큰따옴표 안에 사용한 "" 큰따옴표는 '' 작은따옴표로 대처한다.

document.write("<h2 style='color:red;'>Hello,javascript~~~~</h2>");

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        h2 { text-align: center; }
    </style>
    <script type="text/javascript">
        // 1. document.write : body에 지정된 내용을 출력
        document.write("Hello, javascript");
    </script>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        h2 { text-align: center; }
    </style>
    <script type="text/javascript">
        // 1. document.write : body에 지정된 내용을 출력
        // document.write("Hello, javascript");
        document.write("<h2 style='color:red;'>Hello,javascript~~~~</h2>")
    </script>
</head>
<body>
    
</body>
</html>

 

2. alert() 문자열 경고창을 경고창으로 표시

 

3. confirm() 문자열을 팝업(경고창)으로 표시하고 예/아니오 대답 선택

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        h2 { text-align: center; }
    </style>
    <script type="text/javascript">
        // 3. confirm : 문자열을 팝업으로 표시하고 예/아니오(확인/취소) 대답 선택
        var result = confirm("지금 당신은 공부중입니까?");
        if (result){
            alert('네를 선택했습니다. 당신은 공부중입니다.');
        } else {
            alert('아니요를 선택했습니다. 당신은 공부를 안하고 있습니다.');
        }
    </script>
</head>
<body>
    
</body>
</html>

 

 

4. prompt : 사용자의 입력을 받는 팝업(경고창)표시

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        h2 { text-align: center; }
    </style>
    <script type="text/javascript">
    	// 4. prompt : 사용자의 입력을 받는 팝업 표시
        var phonenum = prompt("폰번호를 입력하세요");
        var name = prompt("이름을 입력하세요");
        var job = prompt("직업을 입력하세요");
        document.write("<h2>안녕하세요 " + name +"님 당신이 입력한 정보에 따르면<br>당신의 직업은 " + job + " 이고<br>폰번호는 " + phonenum + " 입니다.</h2>" )
    </script>
</head>
<body>
    
</body>
</html>

 

반응형