알림 창 출력하기
알림 창은 가장 많이 사용하는 간단한 대화 상자이다.
웹 브라우저에 작은 알림창을 여러 메세지를 표시할 수 있으므로 예제에서도 간단한 실행 결과를 표시할 때 사용한다.
기본형은 다음과 같다.
alert(메세지)alert()를 입력 하고 괄호 안에 메세지를 넣어 주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 id="heading">자바스크립트</h1>
<script src="jsfile.js"></script>
</body>
</html>alert("alter 함수")
확인 창 출력하기
확인 창은 알림창과 달리 [확인]이나 [취소] 버튼 중 에서 하나를 클릭할 수 있다.
그러면 선택한 결과에 맞게 프로그램이 동작한다.
기본형은 다음과 같다.
confirm(메세지)사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후 그 값에 따라 프로그램에서 처리한다.
var reply = confirm("정말 배경 이미지를 바꾸시겠습니까?");
프롬프트 창에서 입력받기
프롬프트 창은 텍스트 필드가 있는 작은 창이다.
텍스트 필드 안에 간단한 메세지를 입력할 수 있으며, 그 내용을 가져와 프로그램에서 사용할 수 있다.
prompt(메세지) 또는 prompt(메세지, 기본값)기본값을 지정해 줄 수도 있고, 지정하지 않을 수도 있다.
var name=prompt("이름을 입력하세요." , "홍길동");
웹 브라우저 화면에 출력을 담당하는 document.write()
예제에서 이 명령문을 자주 만날 것이다.
자바스크립트의 실행 결과는 텍스트나 이미지로 출력하거나, 따로 지정한 영역에 내용을 표시하는 경우가 많다.
하지만 단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 document.write()를 많이 사용한다.
괄호 안에 입력된 문자열을 웹 브라우저 화면에 그대로 표시된다.
물론 따옴표 안에는 HTML태그도 함께 사용할 수 있다.
document.write("<h2>어서오세요</h2>")
콘솔 창에 출력하는 console.log()문
괄호 안의 내용을 콘솔 창에 표시한다.
콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다.
콘솔 창에서 소스코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.
변숫값으로 문자열도 전달 가능하지만, 이때 HTML 태그는 사용할 수 없다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Html-basic</title>
<style>
h1{
font-size: 5vw;
text-align: center;
}
</style>
</head>
<body>
<h1>안녕하세요?</h1>
<script src="jsfile.js"></script>
</body>
</html>var name = prompt("이름을 입력하세요.", "홍길동")
console.log(name + "님, 환영합니다.")
댓글