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>결과
- 콘솔 창 확인
더 발전하는 내 모습을 위해
어머어머 너무 완벽하게 정리하셨네요