[JS] 데이터 입출력

window 객체

• 자바스크립트 내장 객체로 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체
• 브라우저 창안에 존재하는 모든 요소들의 최상위 객체 (자바의 object와 비슷함, 모든곳에 적용되기 때문에 생략 가능)
• window.onload : 현재 html문서가 다 로딩이 완료되고 나서 실행할 함수를 지정하는 이벤트 속성 (window.onload=function() {})

document 객체

• 웹 문서마다 하나씩 만들어지는 객체 (html 문서에 대한 정보들을 가지고 있음)
• documents는 현재 활성화된 창에 로드된 웹 페이지의 내용을 대표하는 객체

---

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

1. 일반 사용자에게 출력 (alert)

window.alert("알림창에 출력할 문구");

 

2. 콘솔창에 출력 (console.log)

window.console.log("콘솔창에 출력할 문구");

3. 새 창으로 출력 (document.write)

• 화면에 출력할 문자열에 html 태그가 있을 경우 진짜 html 태그로 해석되서 보여짐

function documentWrite(){
    let table = "<table border='1'>";
        table += "<tr>";
        table += "<td>2</td>";
        table += "</tr>";
        table += "</table>";
    document.write(table);
}

4.  선택한 요소의 값 가져오기 / 변경(innerHTML / innerText)

• 자바스크립트에서 어떤 요소(HTML element) 안의 값(content)을 가지고 온다거나 변경하고자 할 때 innerHTML, innerText라는 속성에 접근하면 됨
• innerHTML : 문구에 HTML태그가 있을경우 태그로 인식해서 가져오거나 변경
• innerText : 문구에 HTML태그가 있어도 문자열로 인식해서 가져오거나 변경 (줄바꿈은 적용돼서 잘 안 쓰임)
• 대부분의 자바스크립트 속성은 대입 연산자가 없으면 값 가져오기 (getter), 대입 연산자가 있으면 값 변경(setter)

<button onclick="tagValue()">확인</button>

<script>
        function tagValue(){

            const divEl = document.getElementById("area1"); // div 요소객체를 변수에 담음

            // 값 가져오기
            console.log(divEl.innerHTML);
            console.log(divEl.innerText);

            // 값 변경하기
            divEl.innerHTML = "<b>innerHTML로 속성값을 변경해버림</b>";
            divEl.innerText = "<b>innerText로 속성값을 변경해버림</b>";
            
        }
</script>

4-1. 자바스크립트 요소

• console.dir : 해당 값의 디렉토리 구조를 보고자 할때 사용 (html 요소의 접근가능한 속성(property)들에 대한 정보)
• 선택된 요소내에 정보들을 알아내고자 한다면 속성들에 직접 접근하여 확인(.을 통해서 접근)

console.log(divEl.id); // id은 해당 요소의 id값
console.log(divEl.className); // className : 해당 요소의 클래스값

• data : html의 속성, 자바스크립트의 property를 통해 가져올 수 있음
• html에 속성 부여 시 data-속성이름="값"
• 자바스크립트 property에 접근할 때는 dataSet.속성이름 작성

<button onclick="testInput()" id="test-btn" data-mkm="alsrudals">클릭해</button>

    <script>        
        function testInput(){
            console.log(btn.dataset.mkm);
        }
    </script>

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

1. 사용자에게 확인/취소 받기 (window.confirm)

• 사용자에게 확인 받을때 사용
• confirm 호출 시 '질문 내용'과 '확인/취소'버튼이 존재하는 알림창 발생
• 확인 버튼 클릭 시 true / 취소버튼 클릭 시 false 반환

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

    <script>
        function testConfirm(){
            const result = window.confirm("졸리면 확인, 안졸리면 취소를 취소를 누르세요");

            const divEl = document.getElementById("area2");

            if(result){
                divEl.innerHTML = "<h2>졸려요..</h2>";
            }else{
                divEl.innerHTML = "<h2>하나도 안졸립니다 ^^</h2>"
            }
        }
    </script>

2. 사용자에게 답변 받기 (window.prompt)

• 변수 = window.prompt("질문내용",[디폴트값]);
• prompt 호출 시 '질문 내용'과 입력할 수 있는 '텍스트상자'와 '확인/취소' 버튼이 보여지는 알림창 발생
• 확인 버튼 클릭 시 xpr스트상자에 입력되어있는 값 반환 (값은 무조건 문자형으로 반환e됨)
• 취소버튼 클릭 시 null 반환
• 편하게 변수를 문자열에 추가하는법 : "큰따옴표 대신  `(1 옆에 물결키)로 묶어주고 문자열 안에 변수를 표시할때는 ${변수} 쓰면 자바스크립트 변수로 인식됨

<button onclick="testPrompt();">클릭</button>
<div class="area" id="area3"></div>

<script>
    function testPrompt(){
        const name = window.prompt("당신의 이름은 무엇입니까?");
        const age  = window.prompt("당신의 나이는 몇살입니까?");

        const divEl = document.getElementById("area3");
        divEl.innerHTML = `<b>당신은 바로 ${age}살인  ${name}님이군요..!</b>`;

	}
</script>

3. input 요소의 현재 값 가져오기 (.value)

• 변수 = 선택한 input요소.value;★
• 대입연산자를 통해 값을 변경할 수도 있음
• 모든 input 태그의 반환값은 문자열임

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

    <script>        
        function testInput(){
            const input1 = document.getElementById("userId"); // input요소
            const input2 = document.getElementById("userPwd");
            const btn = document.getElementById("test-btn");

            console.log(input1.value); //입력한 ID값
            console.log(input2.value); //입력한 비밀번호

            input1.value = ""; //ID값 비워주기
        }
    </script>