JavaScript(데이터입출력)

자바스크립트에서의 데이터 입출력

1. 데이터를 출력하는 기본 구문

• window.alert("알림창에 출력할 문구");
• window.consol.log("콘솔창에 출력할 문구");
• document.write("화면에 출력할 문구");
• 선택할요소.innerHTML/innerText = "해당 요소에 출력할 문구";

// 3)document.write('화면에출력할문구')
<script>
	function documentWrite(){
    
    	var table = "<table border = '1'>";
        table += "<tr>";
        table += "<td>1</td>";
        table += "<td>2</td>";
        table+="</tr>";
        table+="</table>";
        
        document.write(table); /*태그 그대로를 해석하여 읽어온다*/
    }

</script>

 

// 4) 선택한요소.innerHTML/innerText="해당요소에 출력할 문구"


<div class="area" id="area1">
        자바스크립트에서 어떤 요소(element) 안의 값(content)을 가지고 온다거나 <br>
        변경하고자 할 때 <b>innerHTML, innerText</b> 라는 속성에 접근 가능
</div>

<script>
	function tagValue(){
    	var divE1 = document.getElementById("area1"); // id가 area1인 div의 객체정보를 담음
        console.log(divE1);
        console.dir(divE1); // dir은 문서구조
        
        //선택한 요소 내의 정보를 알고싶다면 속성에 .을 통해 직접 접근해서 가져온다
        console.log(divE1.id) // id : 해당요소의 id값을 찍어줘
        console.log(divE1.className); // className : 해당 요소의 className값을 찍어줘
        
        console.log(divE1.innerHTML); // innerHTML : 해당요소의 content영역 안에 있는 html 태그와 text를 가져온다.
        console.log(divE1.innerText); //innerText : 해당요소의 content영역 안에 있는 text만 가져온다.
        
        
        divE1.innerText="<b>innerText값 변경할거야</b>";
        
        divE1.onclick=function(){
                alert("반갑습니다.") // j)가져오기 누르고 div누르면 반갑습니다 (divE1클릭했을때 나와라)
            }

    }
</script>

---

2. 데이터를 입력받는 기본 구문(변수에 기록 가능)

• 변수 = window.confirm("질문내용");
• 변수 = window.prompt("질문내용");
• 변수 = 선택요소.속성(id/className/innerHTML/innerText,,,,);
• 변수 = 선택한input요소.value;

1) window.confirm("질문내용")

 

: confirm 호출시 "질문내용"과 "확인/취소" 버튼이 존재하는 알림창 발생 확인 버튼 클릭시 true, 취소 버튼 클릭시 false를 반환한다.

<button onclick="testConfirm()">지루하신가요</button>
<br>
<div class="area" id="area2"></div>


<script>
	function testConfirm(){
    	var boolean = window.confirm("지루하신가요");
        var divE1 = document.getElementById("area2");
        
        if(boolean){
        	divE1.innerHTML="<h3>지루하긴하네요...</h3>";
        }else{
        	divE1.innerHTML="<h3>전혀 지루하지 않습니다.</h3>";
        } 
    }
</script>

 

2) window.prompt("질문내용")

 

: prompt호출시 "질문내용"과 입력할 수 있는 "텍스트 상자"와 "확인/취소" 버튼이 보여지는 알림창 발생

확인 버튼 클릭시 텍스트 상자에 입력되어 있는 값이 반환, 취소버튼 클릭시 null을 반환한다.

 

<button onclick="testPrompt()">질문봇</button>
<div class="area" id="area3"></div>

<script>
	function testPrompt(){
    	var lunch = window.prompt("오늘 점심 뭐 드셨어요?");
        var dinner = window.prompt("오늘 저녁 뭐 드실꺼에요?");
        
        var divE1 = document.getElementById("area3");
        
        divE1.innerHTML="점심은 + lunch + " 를 드시고, 저녁은 " + dinner + " 을 드셨군요?"
    }
</script>