<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>사용자 입력 및 대화상자 만들기</title>
</head>
<body>
<h3>자바스크립트로 사용자 입력 및 대화</h3>
<hr size="5" color="green">
<div id="result"></div>
<hr size="5" color="red">
<button onclick="promptEX()">프롬프트 다이얼로그</button>
<button onclick="confirmEX()">확인 다이얼로그</button>
<button onclick="alertEX()">경고 다이얼로그</button>
<hr size="5" color="blue">
<div id="result2">
</div>
<hr size="5" color="blue">
<script>
var result = document.querySelector("#result");
var result2 = document.querySelector("#result2");
//var result = document.getElementById("result1");
//var result2 = document.getElementById("result2");
// querySelector() 는 특정 name, id,
class를 제한하지 않고 css 선책지를 사용하여 요소를 찾습니다.
// 같은 id 또는 class일 경우 스크립트의 최상단 요소만 로직에 포함합니다.
function promptEX() {
var ret = prompt("이름을 입력하세요", "수선화");
if(ret == null) {
// 취소 버튼이나 다이얼로그를 닫은 경우
result2.innerHTML = "취소"
// innerHTML 은 요소(element)내에 포함된
// HTML 또는 XML 마크업을 가져오거나 설정합니다.
}
else {
// ret에는 사용자가 입력한 문자열
// 아무 값도 입력하지 않으면, ret=""
result.innerHTML = ret;
}
}
function confirmEX() {
var ret = confirm("전송할까요");
if (ret == true)
{
// 사용자가 "확인" 버튼을 누른 경우
result.innerHTML ="확인을 눌렀군요";
}
else {
// 취소 버튼이나 다이얼로그가 닫힌 경우
result2.innerHTML ="취소나 그냥 닫았군요";
}
}
function alertEX() {
alert("클릭 ~~ 하였습니다.");
}
</script>
<!-- <hr size="5" color="red">
<button>프롬프트 다이얼로그</button>
<button>확인 다이얼로그</button>
<button>경고 다이얼로그</button>
<hr size="5" color="blue">
<div id="result2">
</div>
<hr size="5" color="blue">
-->
</body>
</html>
document.getElementById()메서드는 주어진 문자열과 일치하는
id 속성을 가진 요소를 찾고
이를 나타내는 Element 객체를 반환합니다.
ID는 문서 내에서 유일해야 하기 때문에
특정 요소를 빠르게 찾을 때 유용합니다.
태그에 있는 id 속성을 사용하여 해당 태그에
작업하여 하고 싶은 작업을 할 때 쓰는 함수입니다.
해당 id가 없는 경우 null 에러가 발생합니다.
꾸준함의 가치를 믿는 개발자