본문 바로가기

WEB_TECH/javascript

pop up boxes

1. Alert Box

경고창입니다. 

alert("sometext");


예제

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

function myFunction()

{

alert("Hello! I am an alert box!");

}

</script>

</head>

<body>


<input type="button" onclick="myFunction()" value="Show alert box" />


</body>

</html>


줄바꿈을 넣어보겠습니다.

alert("Hello\nHow are you?");

\n 을 넣으면 줄바꿈이 일어납니다.



2. Confirm Box

ok, cancel 버튼을 클릭하면 true, flase값 반환

confirm("sometext");


예제

<!DOCTYPE html>

<html>

<body>


<p>Click the button to display a confirm box.</p>


<button onclick="myFunction()">Try it</button>


<p id="demo"></p>


<script type="text/javascript">

function myFunction()

{

var x;

var r = confirm("Press a button!");

if (r == true)

{

  x="You pressed OK!";

}

else

{

  x="You pressed Cancel!";

}

document.getElementById("demo").innerHTML=x;

}

</script>


</body>

</html>



3. Prompt Box

ok버튼 클릭하면 인풋값이 들어간 후에 진행되고, 

cancel 버튼 글릭하면 null값을 리턴합니다.

prompt("sometext","defaultvalue");


예제

<!DOCTYPE html>

<html>

<body>


<p>Click the button to demonstrate the prompt box.</p>


<button onclick="myFunction()">Try it</button>


<p id="demo"></p>


<script type="text/javascript">

function myFunction()

{

var x;


var name=prompt("Please enter your name","Harry Potter");


if (name!=null)

{

x="Hello " + name + "! How are you today?";

document.getElementById("demo").innerHTML=x;

}

}

</script>


</body>

</html>



'WEB_TECH > javascript' 카테고리의 다른 글

String객체  (0) 2012.09.13
javascript 객체기반언어  (0) 2012.08.17
Try...Catch 구문  (0) 2012.08.17
이벤트  (0) 2012.08.17
자바스크립트 함수 Function  (0) 2012.08.17
반복문  (0) 2012.08.17
조건문  (0) 2012.08.17
연산자  (0) 2012.08.17
자바스크립트 어떻게 작성할까요?  (0) 2012.08.17
javascript를 작성하는 곳  (0) 2012.08.09