자바스크립트 Alert (얼럿 - 경고창), Confirm (컨펌 - 선택창), Prompt (프롬프트 - 입력창) 기초 개념
오랜만에 자바스크립트 관련 글입니다. 본문에서는 Alert, Confirm, Prompt의 기본 개념만 다룰 것입니다. 저도 까먹기전에 기록해두면 분명 언젠간 요긴하게 활용할 날이 있을테니까요. 기장 중요한건 기초입니다. 기초가 탄탄해야~ 라는 말을 아마 들어보셨을지도 모르겠는데 이거 진짜 참입니다. 기본만큼 중요한게 없어요. 기본을 이해해야 응용을 할 수 있기 때문이죠.
Alert
먼저 경고창 띄우기입니다. HTML 페이지 중에서 이따금씩 경고창이 뜨는 모습을 경험해보셨을 겁니다. 엥? 잘 모르시겠다고요? 예를 들어서 홈페이지 가입 시 비밀번호에 특수문자를 강제로 넣어야 하는 플랫폼이 있다고 가정해 봅니다. 해당 페이지에서 비번 입력 시 특수문자를 넣지 않으면 아마 경고창이 뜰겁니다. 특수문자를 포함해 달라고 말이죠. 그런 경고창을 띄울 때 Alert를 사용합니다.
|
1
2
3
4
|
<
script
>
var A
=
"친절한효자손";
alert("안녕하세요. 저는 "
+ A
+ " 입니다.");
<
/
script
>
|
cs |
스크립트 코드를 이렇게 사용합니다. 변수를 받아서 해당 변수를 같이 출력시킬수도 있습니다.
테스트 해보면 이렇게 브라우저에서 경고창이 뜹니다.
Confirm
컨펌은 선택창입니다. 예를 들어서 파일 업로드에 대한 알림창이 그것입니다.
|
1
2
3
4
5
6
7
8
9
10
|
<
script
>
var file;
file
=
confirm("파일을 업로드 하시겠습니까?");
if(file) {
document.write("파일 업로드를 완료하였습니다.");
} else {
document.write("파일 업로드를 취소하였습니다.");
}
<
/
script
>
|
cs |
이렇게 confirm을 사용하여 선택 버튼을 만들 수 있으며 각 버튼의 실행에 따라서 if, else문을 사용해 구분지을 수 있습니다. 위의 코드를 바탕으로 HTML 페이지를 구성하면 아래처럼 진행됩니다.
이렇게 파일 업로드 질문창이 뜨게 됩니다. 여기에서 확인 버튼을 먼저 눌러봅니다.
그러면 if문에 의해 파일 업로드를 완료했다는 안내문구로 전환됩니다.
만약 취소 버튼을 누르면 else에 있는 내용이 출력되죠. 정상적으로 잘 작동함을 확인할 수 있었습니다.
Prompt
이번에는 직접 입력값을 받아봅시다. 프롬프트를 사용해서요.
|
1
2
3
4
5
|
<
script
>
var name;
name
=prompt("이름을 입력해 주세요.");
document.write("당신의 이름은 "
+ "'"
+ name
+ "'"
+ " 입니다.");
<
/
script
>
|
cs |
스크립트 코드는 이렇게 간단히 구성해 보았습니다. 이름 입력을 직접 받아 변수로 저장하고 그것을 HTML 텍스트로 띄워줍니다.
HTML 문서에 적용시킨 모습입니다. 정상적으로 프롬프트 입력창이 뜨는군요. 텍스트를 입력 후 확인 버튼을 누릅니다.
입력한 변수가 텍스트에 잘 반영되었군요. 좋습니다. 만약 아무것도 입력하지 않으면 Null 로 표시됩니다. 오늘 내용 끝!
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.