일반함수 생성 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일반함수생성_이벤트 처리</title>
</head>
<body>
<button id="btnstart">출력</button>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function name() {
function hello() {
alert("안녕하세요. 환영합니다!");
}
$("#btnstart").click(hello);
})
</script>
</body>
</html>
익명함수 생성 이벤트 처리
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>익명함수생성_이벤트 처리</title>
</head>
<body>
<button id="btnstart">출력</button>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnstart").click(function(){
alert("안녕하세요. 환영합니다!");
});
})
</script>
</body>
</html>
일반함수생성_이벤트 처리 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>일반함수생성_이벤트 처리2</title>
<style type="text/css">
#info {
border: 1px solid #000;
min-height: 100px;
}
</style>
</head>
<body>
<button id="btnstart">출력</button>
<div id="info">
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
버튼을 클릭할 때마다 클릭한 횟수와 함깨 "안녕하세요. 환영합니다!" 메시지를
#info에 출력해 주세요.
단, 페이지가 실행되면 바로 ' 0 안녕하세요. 환영합니다.' 메시지가 출력되야 합니다.
실행결과 :
0 안녕하세요. 환영합니다! <== 버튼 클릭전 출력
1 안녕하세요. 환영합니다! <== 이 내용부터는 버튼 클릭 후 출력됨.
2 안녕하세요. 환영합니다!
......
*/
var count=0;
var $info = null;
$(document).ready(function() {
$info = $("#info");
$("#btnstart").click(function(){
hello();
});
});
function hello() {
$info.append("<p>"+count+" 안녕하세요. 환영합니다! </p>");
count++;
}
</script>
</body>
</html>
익명함수생성_이벤트 처리 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>익명함수생성_이벤트 처리2</title>
<style type="text/css">
#info {
border: 1px solid #000;
min-height: 100px;
}
</style>
</head>
<body>
<button id="btnstart">출력</button>
<div id="info">
</div>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/*
버튼을 클릭할 때마다 클릭한 횟수와 함깨 "안녕하세요. 환영합니다!" 메시지를
#info에 출력해 주세요.
단, 페이지가 실행되면 바로 ' 0 안녕하세요. 환영합니다.' 메시지가 출력되야 합니다.
실행결과 :
0 안녕하세요. 환영합니다! <== 버튼 클릭전 출력
1 안녕하세요. 환영합니다! <== 이 내용부터는 버튼 클릭 후 출력됨.
2 안녕하세요. 환영합니다!
......
*/
var count=0;
var $info = null;
$(document).ready(function() {
$info = $("#info");
$info.append("<p>"+count+" 안녕하세요. 환영합니다! </p>");
count++;
$("#btnstart").click(function(){
$info.append("<p>"+count+" 안녕하세요. 환영합니다! </p>");
count++;
});
});
</script>
</body>
</html>
리턴값으로 함수사용하기-이벤트리스너
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리턴값으로 함수사용하기-이벤트리스너</title>
</head>
<body>
<button id="btnStart">시작</button>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/* 버튼을 클릭할때마다 매개변수 값으로 넘긴 hello함수가 호출됨. */
$(document).ready(function() {
function hello() {
document.write('새해 복많이 받으세요!')
}
//함수를 매개변수로 쓸때는 함수이름만 적어준다.
$("#btnStart").click(hello);
})
</script>
</body>
</html>
리턴값으로 함수사용하기-타이머_익명함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리턴값으로 함수사용하기-타이머_익명함수</title>
</head>
<body>
<script type="text/javascript">
/*
1초마다 매개변수 값으로 넘긴 익명함수가 호출됨.
*/
setInterval(function() {
document.write('2021 해피 뉴이어!' + '<br/>')
}, 1000);
</script>
</body>
</html>
리턴값으로 함수사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>리턴값으로 함수사용하기</title>
</head>
<body>
<script type="text/javascript">
function createHello() {
function hello(user) {
document.write(user +'님의 방문을 환영합니다.');
}
return hello;
}
var result = createHello();
result("날강두");
</script>
</body>
</html>
중첩함수
<!DOCTYPE html>
<!--
*중첩함수 (inner function)
- 자바스크립트에서 함수는 다른 함수안에 중첩되어 정의될수 있음.
- 함수내에서만 호출할 수 있으며, 함수 외부에서는 직접호출할수 없음. =>정보은닉
-->
<html>
<head>
<meta charset="UTF-8">
<title>중첩함수</title>
</head>
<body>
<script type="text/javascript">
/* 1초에 한번씩 안녕하세요 출력해 주세요. */
function startHello() {
var count=0;
setInterval(function() {
count++;
document.write(count+"안녕하세요." + "<br/>");
}, 1000)
}
startHello();
</script>
</body>
</html>
버튼 클릭때마다 1씩증가
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btnStart">시작</button>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/* 버튼을 클릭하면 클릭할때하다 1씩증가시켜 주세요.(클로저) */
$(document).ready(function() {
$("#btnStart").click(function() {
start();
document.write("시작합니다.");
});
function start() {
var count = 0;
setInterval(function() {
count++;
document.write(count + "<br/>");
}, 1000)
}
});
</script>
</body>
</html>
