데이터 출력
- window.alert(내용) : 내용을 알림창(경고창)으로 출력
- console.log(내용)
- document.write(내용) : 화면(문서)에 내용 출력
- DOM(문서 객체 모델) 사용 : 예: body
console.log("hello");
console.log("<h2>태그 출력</h2>"); // 태그도 문자열의 일부로 인식
document.write("<h2>제목</h2>"); // 태그 반영되어 출력
document.body.innerHTML += "DOM 객체 innerHTML 속성 사용해서 출력";데이터 입력
- confirm() 함수로 입력 받기
- prompt() 함수로 입력 받기
- getElementsByTagName() : 태그 이름 사용
- <input> 태그의 value 속성 사용
- DOM (문서 객체 모델) 사용
confirm()
- 자바스크립트 내장 함수
- [확인]/[취소] 버튼이 있는 대화상자를 출력하고
- [확인] 버튼을 누르면 true 값 반환
- [취소] 버튼을 누르면 false 값 반환
- 사용자의 액션을 한번 더 확인해 줄 때 유용 (결제하시겠습니까? 삭제하시겠습니까? 등)
prompt()
- 자바스크립트 내장 함수
- 사용자로부터 입력 받은 값을 반환
- 두 개의 인수를 받을 수 있음
- 첫 번째 값 = 메시지
- 두 번째 값 = 입력받을 디폴트 값 (뭔가를 안내하거나 힌트 줄 때 유용)
- 두 번째 인수는 선택 사항
prompt("출력 메시지");
prompt("출력 메시지", "기본값");
예제 - 1
const name = prompt("이름을 입력하세요.");
alter("환영합니다, " + name + "님");
// 백틱 사용
alter(`환영합니다, ${name}님`);
예제 - 2
const date = prompt("예약일을 입력하세요.", "2021-12-");
예제 - 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
var answer = prompt("가장 좋아하는 과일은?", "과일이름");
alert("가장 좋아하는 과일 : " + answer + "입니다.");
document.write("가장 좋아하는 과일 : " + answer + "입니다.");
</script>
</head>
<body>
</body>
</html>
예제 - 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript </title>
<script type="text/javascript">
if (confirm("카드로 결제합니까?")) {
var cardNum = prompt("카드번호를 입력하세요.", "xxxx-xxxx-xxxx-xxxx");
document.write("카드번호 : " + cardNum);
}
else { document.write("카드로 결제하지 않습니다."); }
</script>
</head>
<body>
</body>
</html>alert
- 함수가 실행되면 메세지를 띄우고 사용자가 확인 버튼을 누르기 전까지는 계속 떠 있음
- 사용자와 상호작용한다기보다는 일방적으로 알리는 용도로 사용
- confirm은 확인과 취소버튼이 있지만 alter은 확인버튼만 있음
const isAdult = confirm("당신은 성인입니까?");
console.log(isAdult);
위 처럼 기본적으로 제공되는 창들의 단점
- 창이 떠있는 동안 스크립트가 일시 정지됨
- 창을 닫기 전까지는 이후 동작에 제한을 받음
- 스타일링이 불가능하여 위치와 모양을 정할 수 없음
- 브라우저마다 모양이 다름
이러한 단점에도 불구하고 기본 메서드는 빠르고 간단하게 적용 가능한 장점 때문에 굉장히 많이 사용됨
'Frontend > Javascript' 카테고리의 다른 글
| 비교연산자와 논리연산자 (0) | 2021.12.07 |
|---|---|
| 형변환 (0) | 2021.12.07 |
| 정적 / 동적 타이핑 언어 (0) | 2021.12.07 |
| 변수와 데이터 타입 / 지역변수와 전역변수 / var let const 차이 / 호이스팅 (Hoisting) (0) | 2021.12.07 |
| JavaScript 기본 개념 및 구조 (0) | 2021.12.07 |