jquery-23: 함수사용2
익명함수를 이용한 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수-6(익명함수를 이용을 하여 프로그램)</title>
<style>
#container {
border: 1px solid blue;
line-height: 10px;
}
</style>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
var count = 0; //전역변수 선언과 동시에 초기화
var $container = null; //전역변수 선언과 동시에 초기화
$(document).ready(function(){
$container = $("#container");
//append()문자열을 붙여서 출력하는 함수(메서드)
$container.append("<p>" + count + "안녕하세요.반갑습니다.");
count++;
//버튼이 클릭이 되면 익명함수를 실행하여 지속적으로 글자를
//붙여서 출력하게 된다.
$("#btnPrint").click(function(){
$container.append("<p>" + count + "안녕하세요.반갑습니다.");
count++;
});
});
</script>
</head>
<body>
<button id="btnPrint">출력하기</button>
<div id="container">
</div>
</body>
</html>
일반함수를 이용한 프로그램
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>함수-7(일반함수를 이용을 하여 프로그램)</title>
<style>
#container {
border: 1px solid blue;
line-height: 10px;
}
</style>
<script src="libs/jquery-3.5.1.min.js"></script>
<script>
var count = 0; //전역변수 선언과 동시에 초기화
var $container = null; //전역변수 선언과 동시에 초기화
$(document).ready(function(){
$container = $("#container");
hi(); //일반 함수 호출
$("#btnPrint").click(function(){
hi();
});
});
//일반 함수 구현
function hi(){
$container.append("<p>" + count + "안녕하세요.반갑습니다.");
count++;
}
</script>
</head>
<body>
<button id="btnPrint">출력하기</button>
<div id="container">
</div>
</body>
</html>
댓글남기기