JavaScript 03. 데이터 입출력

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

1) window.alert("알람창에 출력할 문구"); -> window. 생략 가능 

2) window.console.log("콘솔창에 출력할 문구"); -> window. 생략 가능 

3) document.write("화면상 출력할 문구"); -> 이전에 있던 화면상의 코드 사라지고 괄호안의 문구가 보여짐 
 

 <button onclick="documentWrite()">화면에 출력</button>
    <script>
        function documentWrite(){
            //document.write("안녕하세요");
            //document.write("<b>안녕하세요</b>")
            //출력할 문구에 html태그가 있을경우 해석해서 시각적인 요소로 보여짐 

            let a = "<table border='1'>"
                a += "<tr>";
                a += "<td>1</td>";
                a += "<td>2</td>";
                a += "</tr>";
                a += "</table>";
            console.log(a) ;
            document.write(a);   
               
        }
    </script>

 

4) 선택한요소.innerHTML | innerText = "요소에 출력할 문구";

    자바스크립트에서 특정요소(element)안의 값(content)을 가져온다거나, 변경하고자할때 사용

 <style>
        .area{
            border:1px solid black;
            width:300px; 
            height: 100px;
        }
    </style>
 <div class="area" id="area1"> </div>
 <button onclick="tagValue();">확인</button>
 <script>
        function tagValue(){
            //아이디가 area1인 div요소 가져와서 안에 값을 확인/ 변경
            const divEl = document.getElementById("area1"); //div요소 객체 
            console.log(divEl); 
            console.dir(divEl); // console.dir : 요소객체의 디렉토리 구조(속성들에 대한 정보)를 볼때
        
            //선택된 요소의 속성에 .으로 접근가능 
            console.log(divEl.className); // className : 해당 요소의 클래스 속성 
            console.log(divEl.id); // id: 해당 소소의 아이디 속성
             
            //innerHTML, innerText : 요소의 content 영역의 속성
            console.log(divEl.innerHTML);//HTML 태그도 같이 보관
            console.log(divEl.innerText); //오로지 텍스트만 보관 (html태그)

            // 해당 요소의 속성에 접근해서 값을 대입하면 속성값도 변경 가능 
            //divEl.className = "test";
            
            //divEl.innerHTML = "<b>innerHTML로 속성값 변경함 </b>";
            divEl.innerText = "<b>innerText로 속성값 변경함 </b>";

            //속성에 속성으로 타고 들어갈 수도 있음 
            divEl.style.backgroundColor = "pink";
            divEl.style.width = "200px";
            divEl.style.height = "200px";
        
        }
    </script>

 

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

1) 변수 = window. confirm("질문내용")

   confirm 호출시 " 질문내용"과 "확인"/"취소" 버튼이 존재하는 브라우저의 알람창 발생 
   확인 버튼 클릭시 true , 취소버튼 클릭시 false반환 

 

<button onclick="testConfirm();">클릭</button>
    <div id="area2"></div>

    <script>
        function testConfirm(){
            let result = confirm("졸리신가요?");
            //console.log(result); --> result 에는 논리값이 담김
            
            const divEl = document.getElementById("area2");
            
            if(result){ //졸려요
                divEl.innerHTML = "<h3>정신차리세요..;;</h3>"
            }else{//안졸려
                divEl.innerHTML = "<h3>아주 잘 하고있습니다.!!</h3>"
            }
        }
    </script>

 

2) 변수 = window.prompt("질문내용")

  prompt호출시 "질문내용"과 입력할 수 있는 "텍스트상자"와 "확인"/"취소"버튼이 보여지는 브라우저의 알람창발생
 확인 버튼 클릭시 텍스트 상자에 입력되어 있는값을 문자열로 반환 
 취소버튼 클릭시 null을 반환 

prompt에 이름과 나이를 입력받아 div에 출력

<button onclick="testPrompt1();">클릭</button>
    <div id="area3"></div>
    <Script>
        function testPrompt1(){
            let name = prompt("당신의 이름은 무엇입니까?");
            let age = prompt("당신의 나이는 몇살입니까?");

            const divEl = document.getElementById("area3");
            divEl.innerHTML = "<b>" + age + "살 "+ name + "님 환영합니다.^^ </b>";
        }
    </Script>

 

> 사용자가 입력한 숫자만큼 목록 출력하기 

<button onclick="testPrompt2();">숫자입력</button>
    <div id="area4"></div>
    <script>
        function testPrompt2(){
            let num = prompt("숫자만을 입력하시오.");
            console.log(num,typeof(num));

            let str = "<ul>";
            for(let i=1;i<=num;i++){
                str += "<li>목록" + i + "</li>";
            }
            str +="</ul>";
           

            //const divEl = document.getElementById("area4");
            //divEl.innerHTML = str;

            document.getElementById("area4").innerHTML = str;
 
        }
    </script>

 

4) 선택한 input요소.value 

아이디와 비밀번호 입력받아 아래 div 에 출력하기 

아이디 : <input type="text" id="userId" > <br>
    비밀번호 : <input type="password" id="userPwd"> <br>
    <button onclick="testInput();">클릭</button>
    <br>
    <div id="area5"></div>

    <script>
        function testInput(){
            const input1 = document.getElementById("userId"); // 아이디 input요소 객체가 담김 (value값X)
            const input2 = document.getElementById("userPwd"); // 비번 input요소 객체
           // console.dir(input1);
           
            let id = input1.value;
            let pwd = input2.value;

            document.getElementById("area5").innerHTML = id + ", "+ pwd;
            input1.value = "";
            input2.value = "";
            
        }
    </script>

아이디 :
비밀번호 :