js - 데이터 입출력

 

공부한 파일

02_데이터입출력.html

0.01MB

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

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

1)[window].alert('알람창에 출력할 문구');

2)[window].console.log('콘솔창에 출력할 문구');

3)document.write('화면상에 출력할 문구');

 

<h3>3) document.write('화면상 출력할 문구');</h3>

    <button onclick="documentWrite();">화면에 출력</button>

    <script>

        function documentWrite() {

            //document.write('안녕하세요')

            document.write("<b>안녕하세요</b><br><h2>반갑</h2>")

            //출력할 문구에 html 태그가 있을 경우 해석해서 시각적인 요소로 보여준다.

            var a = "<table border='1'>"

            a += "<tr>"

            a += "<td>1</td>"

            a += "<td>2</td>"

            a += "</tr>"

            a += "</table>"

            document.write(a)

        }

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

 

++

 window - 자바스크립트에서 제공하는 내장 객체 브라우저 창이 열릴 때마다 하나씩 만들어진다.

                 브라우저 창 안네 존재하는 모든 요소들의 최상위 객체 (생략 가능)

 

 

document - 웹 문서(html)마다 하나씩 만들어지는 객체 (html 문서에 대한 정보들을 가지고 있다)

 

 

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

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

 

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

 

 <button onclick="testConfitm();">클릭</button>

    <div id="area2"></div>

    <script>

        function testConfitm() {

            var result = confirm("졸리면 확인, 아니면 취소를 누르세요")

            // console.log(result);

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

            if (result) {

                divEl.innerHTML = "<h3>정신을 차려라</h3>"

            } else {

                divEl.innerHTML = "<h3>굿</h3>"

            }

        }

    </script>

콘솔창

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

 

prompt 호출시 "질문내용"과 입력할 수 있는 "텍스트상자"와 "확인/취소" 버튼이 보여지는 알림창 발생
확인 버튼 클릭시 텍스트 상자에 입력되어 있는 값이 문자열로 반환 (아무리 숫자가 써있더라도 문자열 반환),

취소버튼 클릭시 null을 반환 (글자 입력을 했어도 취소를 누르면 무조건 null)

 

<button onclick="testprompt99();">눌러</button>

    <div id = "area3"></div>

    <script>

        function testprompt99(){

            var name = prompt("이름을 입력하세요");

            var error1 =  document.getElementById("area3");

            error1.innerHTML = "<b>"+name+"야 너 잘 눌렀다";

        }

    </script>

 

3) 변수 = 선택한요소.속성(id, className, innnerHTML, innerTEXT..) 4) 변수 = 선택한input요소.value;

 

입력

 

 

아이디 : <input type="text" id="userId"> <br>

비밀번호 : <input type="text" id="userPwd"> <br>

 

<button onclick="testInput();"> 클릭</button>

 

 

<input type="text" id="area5">

    <script>

        function testInput() {

            var input1 = document.getElementById("userId");

            var input2 = document.getElementById("userPwd");

            var id = input1.value;

            var pwd = input2.value;

            document.getElementById("area5").value = id + " , " + pwd;

 

            input1.value = "";

            input2.value = "";

위 코드에서 아래 input 의 값을 초기화 하지 않으면 새로이 입력 받을 수가 없다

input1.value = "";

input2.value = "";