2. JavaScript 데이터 입출력

JavaScript는 웹 페이지에서 사용자와의 상호작용을 가능하게 해줍니다. 이번 글에서는 JavaScript에서 데이터를 입력받고 출력하는 다양한 방법을 소개합니다.

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

JavaScript에서 데이터를 출력하는 방법에는 여러 가지가 있습니다. 대표적인 출력 방법은 alert, console.log, document.write, 그리고 특정 HTML 요소의 innerHTML이나 innerText 속성을 사용하는 것입니다.

1) alert()

// alert 창에 메시지 출력
alert("안녕하세요");

• alert() 함수는 브라우저에서 간단한 경고창을 띄워줍니다.

2) console.log()

// 콘솔에 메시지 출력
console.log("콘솔에 입력");

• console.log()는 개발자 도구의 콘솔에 메시지를 출력합니다. 디버깅 시 유용하게 사용됩니다.

3) document.write()

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

• document.write()는 페이지에 직접 HTML을 작성하여 출력합니다. HTML 태그도 포함될 수 있습니다.

4) innerHTML 및 innerText

function tagValue(){
    let divE1 = document.getElementById("area1");
    divE1.innerHTML = "<h3>속성이 변경됨</h3>";
    divE1.style.background = "yellow";
}

• innerHTML은 선택한 요소의 HTML 콘텐츠를 가져오거나 설정합니다.
• innerText는 선택한 요소의 텍스트만을 가져오거나 설정합니다.

2. 데이터를 입력받는 구문

JavaScript에서는 사용자가 입력한 데이터를 받아올 수 있는 방법도 다양합니다. 그 중 가장 흔하게 사용되는 방법들은 confirm(), prompt(), 그리고 특정 요소의 value 속성입니다.

1) confirm()

function testConfirm(){
    let result = confirm("졸리면 확인, 아니면 취소");
    let divE2 = document.getElementById("area2");
    if(result){
        divE2.innerHTML = "<h3>정신차리세요.</h3>";
    }else{
        divE2.innerHTML = "<h3>굳</h3>";
    }
}

• confirm() 함수는 사용자가 확인 또는 취소 버튼을 누를 수 있는 알림창을 띄웁니다. 사용자가 확인을 누르면 true, 취소를 누르면 false를 반환합니다.

2) prompt()

function testPrompt(){
    let name = prompt("당신의 이름은 무엇입니까?");
    let age = prompt("당신의 나이는 몇 살입니까?");
    let divE3 = document.getElementById("area3");
    divE3.innerHTML = "당신은 " + age + "살 <b>" + name + "</b>이시군요.";
}

• prompt() 함수는 사용자가 텍스트를 입력할 수 있는 창을 띄웁니다. 입력된 텍스트는 문자열로 반환되며, 취소를 누르면 null을 반환합니다.

3) 특정 요소의 value 속성

function testInput(){
    let input1 = document.getElementById("userId");
    let input2 = document.getElementById("userPwd");

    console.log("아이디 " + input1.value);
    console.log("비밀번호 " + input2.value);

    let area4 = document.getElementById("area4");
    area4.value = input1.value + " " + input2.value;

    input1.value = "";
    input2.value = "";
}

• 입력 요소(input)의 value 속성은 사용자가 입력한 값을 가져오거나 설정할 수 있게 해줍니다.