JavaScript 입출력과 변수

1) 출력

자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있음

자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같다.

window.alert() 메소드
: 가장 간단하게 데이터를 출력할 수 있는 방법, 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달

HTML DOM 요소를 이용한 innerHTML 프로퍼티
: 실제 자바스크립트 코드에서 출력을 위해 가장 많이 사용되는 방법은 HTML DOM 요소를 이용한 innerHTML 프로퍼티를 이용하는 방법
: 우선 document 객체의 getElementByID()나 getElementsByTagName() 등의 메소드를 사용하여 HTML 요소를 선택한 후 innerHTML 프로퍼티를 이용하면 선택된 HTML 요소의 내용(content)이나 속성(attribute)값 등을 손쉽게 변경할 수 있음

document.write() 메소드
: HTML 문서내에 출력 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력함, document.write() 메소드는 대부분 테스트나 디버깅을 위해 사용됨

console.log() 메소드
: console.log() 메소드는 웹 브라우저의 콘솔을 통해 데이터를 출력, 대부분의 주요 웹 브라우저에서는 F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있음, 개발중에 많이 사용

실습하기: 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html 문서 내에 스크립트 작성할 경우에는 꼭 script 태그내에서만 작성 가능  -->
    <script>
        //1. body 태그 내에(화면상) 출력하고 싶을 때 사용
        document.write("<h1>입력할 문장을 작성</h1>")
        //2. 콘솔창에 출력하고 싶을 때 사용
        //개발 중에 값 전송, 응답확인 / 객체 내용 확인 등을 위해 사용
        console.log("콘솔창에 출력되는 데이터!")
        //3. 알림 띄우고 싶을 때 
        alert("팝업창을 통해서 출력하는 데이터")

    </script>
</body>
</html>

결과

window.alert() 메소드
document.write() 메소드
console.log() 메소드

2) 입력

prompt
: 입력창을 통한 입력문, 사용자가 입력한 값을 반환함(리턴값 필요), * 리턴타입: String
: prompt("출력내용"(수정 불가능), "입력내용"(생략가능)

confirm
: 확인 및 취소를 통한 입력문, * 리턴타입: boolean
: confirm("출력문 작성")

실습하기: 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1. prompt("출력질문", "입력창에 출력하고 싶은 기본값(옵션)")
        // -> 입력한 값은 String(문자열)로 변환 
        var lunch = prompt("오늘 점심은?")

        //2. confirm("출력질문")
        //-> 선택한 값(확인/취소)은 boolean(논리형)으로 반환
        var choice = confirm("오늘 점심은 쭈삼?")

        console.log(lunch)
        console.log(choice)

    </script>
</body>
</html>

결과

prompt
comfirm
1에서 냉면입력, 2에서 확인 눌렀을 때 콘솔창 확인

3) 변수

사전적 의미로는 "변화를 줄 수 있는" 또는 "변할 수 있는 수" 프로그래밍에서는 데이터를 담는 공간

Java와 JavaScript
Javascript 변수 - var , let, const

실습하기: 이름을 입력할 수 있는 창을 띄우고 콘솔창에 이름+환영합니다 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var name = prompt("이름을 입력하세요")
        console.log("어서오세요!")
        console.log(name, "도망가지마세요")
    </script>
</body>
</html>

결과

콘솔 창 확인

Author And Source

이 문제에 관하여(JavaScript 입출력과 변수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sujin422/2.-JavaScript-입출력과-변수

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)