Javascript의 대화 상자 중 사용자에게 경고창을 띄어주는 기능을 alert이라고 한다.
javascript에서 가장 많이 사용되는 기능이 아닐까 싶을 정도로 자주 이용하는 기능이다.
browser별로 모양이 다르게 보이기 때문에 css를 이용해서 모양을 바꿔주거나 bootstrap을 이용해서 좀 더 멋진 경고창을 보여줄 수도 있다.
alert창은 주로 사용자에게 경고 메시지를 띄울 때 사용되는데 예를 들어서 입력 필드(input type="text")에서 사용자가 값을 입력해야하지만 입력하지 않고 전송 버튼을 눌렀다던가 email을 작성해야하는 부분에 email형식이 아닌 다른 형식을 작성했을 떄 사용자에게 경고창을 띄어서 메시지를 보여줄 수 있는 창이다.
다음은 alert의 간단한 예제 코드이다.
<html>
<head>
<script>
<!--
function Warn() {
alert ("경고창 메시지입니다.!");
}
//-->
</script>
</head>
<body>
<input type="button" value="클릭해보세요" onClick = "Warn();" />
</body>
</html>
위의 예제를 활용해서 다음을 연습해보세요.
- input창에서 이름을 입력받고 경고창에서 보여주세요.
ex) 미니언즈를 입력하고 창을 떠날 시
[미니언즈님 안녕하세요]
<html>
<head>
<script>
<!--
function myFunction() {
var x = document.getElementById("fname");
alert(x.value + "님 안녕하세요!");
}
//-->
</script>
</head>
<body>
<input type="text" id="fname" onblur="myFunction()"/>
</body>
</html>
'나는개발자다!! > javascript&제이쿼리' 카테고리의 다른 글
| javascript 확인 대화 상자 보이기(confirm) (0) | 2019.01.17 |
|---|---|
| javascript를 이용한 페이지 프린트 썰 (0) | 2019.01.16 |
| Object의 모든 속성(Attribute)값 출력하기 썰 (0) | 2019.01.10 |
| 자바스크립트썰 blur (0) | 2018.10.24 |
| 자바스크립트 변수를 활용한 카운팅 썰 (0) | 2018.10.16 |