본문 바로가기
jQuery

jQuery Hello World alert example

by 진격의 파파 2013. 4. 29.
반응형

이 섹션에서는 jQuery를 사용하여 "Hello World" 경고 상자를 표시하는 프로그램을 작성 안내합니다. 이 응용 프로그램은 "Hello World"라는 메시지를 표시하기 위해 javascript alert() 메서드를 사용합니다.

이 예제에서는 jQuery를 사용하여 JavaScript를 작성하는 방법을 배우게됩니다.버튼을 사용자가 클릭 "Click Me"하면 경고 메시지가 사용자에게 표시됩니다

다음 메소드는 버튼 첨부된 Click 이벤트에 사용됩니다 :

$("#cl").click(function(){....})

jQuery의 위의 코드는 단추 클릭 이벤트를 처리하고 중괄호 {}에 정의된 JavaScript를 실행합니다.중괄호에서는 JavaScript alert () 메소드를 정의했습니다.

<html>
<head>
<title>jQuery Hello World Alert box</title>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$("#cl").click(function(){
alert("HELLO WORLD!");
});
});
</script>
<body>
<font color="red">CLICK BELOW BUTTON TO SEE ALERT BOX</font>
<br>
<br>
<button id="cl">Click Me</button>
</body>
</html>

설명 :

jQuery 사용을 위해, 여러분은 jquery를 <script> 태그 안에 넣어줍니다.

$(document).ready(function(){
// Your code here
});

HTML 페이지는 클릭 이벤트가 이 요소에서 실행됩니다 "CL"라는 버튼을 포함하고, 그것은 메시지 "Hello World"를 보여주는 경고 상자를 표시합니다.

$("#cl").click(function(){
alert("HELLO WORLD!");
});

OUTPUT
버튼을 클릭하면 :

 

반응형

'jQuery' 카테고리의 다른 글

jQuery with other libraries  (0) 2013.04.29
How jQuery Works?  (0) 2013.04.29
jQuery Hello World example  (0) 2013.04.29
Downloading and Installing jQuery  (0) 2013.04.29
what is jQuery?  (0) 2013.04.29