데이터 입출력 방식

별초롱언니 2025. 4. 2. 11:31

01. 자바스크립트 데이터 입출력 방식

데이터 출력 방식	설명
innerHTML속성	문서객체에 HTML 문자열을 속성값으로 삽입하는 방식 선택한 요소의 자식에 삽입한다. (덮어쓰기)
document.write()	document(문서영역=body)에 HTML로 작성하는 방식
window.alert()	창의 경고창으로 띄우는 방식
console.log()	콘솔 브라우저에 표시하는 방식
confirm()	용자에게 확인 대화 상자를 표시 (확인/취소버튼 있음) 확인 : true 반환 , 취소 : false 반환

데이터 입력 방식	설명
prompt ()	사용자에게 입력을 요청하는 대화 상자를 표시하는 방식 prompt('질문텍스트','예시텍스트'); 입력된 데이터는 문자열로 인식함
요소의 value로 입력하기	document.querySelector("css선택자")로 요소 선택 후 value 속성에 값 입력 document.querySelector('#demo').value = "입력값";

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 출력 방법_innerHTML</title>
</head>

<script>
  window.onload = function() { // 준비구문, HTML보다 먼저 로딩되므로 필요
    document.querySelector('#demo').innerHTML = 'innerHTML테스트'
    }
</script>

<body>
  <h1 id="demo"></h1>
</body>
</html>

HTML 데이터 출력 방법_innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 출력 방법_document.write()</title>
  <script>
    document.write('<h1>document.write 테스트</h1>')
  </script>
</head>
<body>

</body>
</html>

HTML 데이터 출력 방법_document.write()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 출력 방법_aleft()</title>
  <script>
    window.alert('alert 테스트');
    alert('alert 테스트2');
  </script>
</head>
<body>
  
</body>
</html>

HTML 데이터 출력 방법_aleft()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 출력 방법_개발자모드 console</title>
  <script>
    console.log('console 테스트');
  </script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 출력 방법_confirm()</title>
  <script>
    if(confirm("제출하시겠습니까?")) {
      alert("정상적으로 제출되었습니다.");
    } else {
      alert("제출실패");
    }
  </script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 데이터 입력 방법_prompt()</title>

  <script>
    var age = prompt("나이를 입력하시오","숫자를 입력하시오");
    document.write(age);
  </script>
</head>
<body>
  
</body>
</html>

HTML 데이터 입력 방법_prompt()