중첩함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중첩함수</title>
</head>
<body>
<script type="text/javascript">
/* 중첩 함수를 이용해 사칙연산 계산기를 만들어 주세요. */
function calculator(op, num1, num2) {
var result = "";
switch (op) {
case "+":
result = add(num1,num2);
break;
case "-":
result = sub(num1,num2);
break;
case "*":
result = mul(num1,num2);
break;
case "/":
result = div(num1,num2);
break;
default :
result = "산술연산자는 + = * / 중 하나입니다."
}
return result;
function add(num1, num2) {
return num1 + num2;
}
function sub(num1, num2) {
return num1 - num2;
}
function mul(num1, num2) {
return num1 * num2;
}
function div(num1, num2) {
return num1 / num2;
}
}
document.write("1 결과 = " + calculator("+", 20, 10), "<br/>");
document.write("2 결과 = " + calculator("-", 20, 10), "<br/>");
document.write("3 결과 = " + calculator("*", 20, 10), "<br/>");
document.write("4 결과 = " + calculator("/", 20, 10), "<br/>");
document.write("5 결과 = " + calculator("%", 20, 10), "<br/>");
</script>
</body>
</html>
중첩함수 내부확인
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중첩함수 내부확인</title>
</head>
<body>
<script type="text/javascript">
var a=10;
var b=20;
var c=30;
function outer_func() {
var b=200;
var c=300;
function inner_func() {
var c=3000;
document.write("1.a = " +a+ "<br/>");
document.write("2.b = " +b+ "<br/>");
document.write("3.c = " +c+ "<br/>");
}
inner_func();
}
outer_func();
/*
1.a = 10
2.b = 200
3.c = 3000
*/
</script>
</body>
</html>
스코프 체인
* 스코프 체인
- 지역 스코프(scope) : 함수단위로 관리됨.
이 직역 스코프를 관리하는 객체를 호출객체라함.
- 전역 스코프를 나타내는 객체 : 전역 객체(루트객체)라고 함.
- 전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드임.
- var 키워드없이 변수를 선언하면 => 전역 객체에 등록되어 전역 변수가 됨.
함수의 지역변수로 선언하기 위해서 반드시 var 키워드를 사용해 변수 선언해야함.
- 스코프 체인 : 전역객체와 함수 호출시 생성된 호출객체를 생성순서대로 연결됨.
함수가 호출되는 시점을 기준으로 스코프 체인이 연결되어 있는 모든 것들에 접근 가능해짐.
(이너 아웃터 영역 모두 호출 가능한 것)
<!DOCTYPE html>
<!--
* 스코프 체인
- 지역 스코프(scope) : 함수단위로 관리됨.
이 직역 스코프를 관리하는 객체를 호출객체라함.
- 전역 스코프를 나타내는 객체 : 전역 객체(루트객체)라고 함.
- 전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드임.
- var 키워드없이 변수를 선언하면 => 전역 객체에 등록되어 전역 변수가 됨.
함수의 지역변수로 선언하기 위해서 반드시 var 키워드를 사용해 변수 선언해야함.
- 스코프 체인 : 전역객체와 함수 호출시 생성된 호출객체를 생성순서대로 연결됨.
함수가 호출되는 시점을 기준으로 스코프 체인이 연결되어 있는 모든 것들에 접근 가능해짐.
(이너 아웃터 영역 모두 호출 가능한 것)
-->
<html>
<head>
<meta charset="UTF-8">
<title>스코프 체인</title>
</head>
<body>
<script type="text/javascript">
//스코프 체인이 연결되는 순서 기술
//1. 전역 레벨의 파싱 결과 전역객체에 프로퍼티(js의 변수) x와 outer가 정의됨.
var x = '전역객체에 등록되어 있는 x 프로퍼티 값';
function outer() {
var y = 'outer 함수에 호출 객체에 등록되어 있는 y 프로퍼티 값';
function Inner() {
var z = 'inner 함수의 호출 객체에 등록되어 있는 z 프로퍼티에 값';
document.writeln('x: ' +x+ '<br/>');
document.writeln('y: ' +y+ '<br/>');
document.writeln('z: ' +z+ '<br/>');
}
/* 3. 함수 레벨의 파싱(분석,분해)결과 inner함수에 대한 호출객체에
arguments 프로퍼티가 초기화되고, 프로퍼티 z가 정의되고,
outer함수의 호출객체와 inner함수의 호출객체간에 스코프 체인이 연결되고,
inner함수의 코드를 실행함.
이때 x는 전역객체에, y는 outer함수의 호출객체에, z는 inner함수의
호출객체에 접근해서 그 값을 취함.*/
Inner();
}
/* 2. 함수 레벨의 파싱 결과 outer 함수 에 대한 호출객체에
arguments 프로퍼티가 초기화되고, 프로퍼티 y와 inner가 정의되고,
전역객체와 outer함수의 호출 객체간에 스코프 체인이 연결된 후.
outer 함수의 코드를 실행함.
*/
outer();
</script>
</body>
</html>
* 콜백함수(Callback 함수)
: 직접 호출하는 함수가 아닌
어떤 특정 시점이나 조건을 만족했을 떄 호출될 수 있도록
라이브러리 함수의 인자로 전달되는 함수를 말함.
사칙연산 콜백함수 이용
<!DOCTYPE html>
<!--
* 콜백함수(Callback 함수)
: 직접 호출하는 함수가 아닌
어떤 특정 시점이나 조건을 만족했을 떄 호출될 수 있도록
라이브러리 함수의 인자로 전달되는 함수를 말함.
-->
<html>
<head>
<meta charset="UTF-8">
<title>콜백함수</title>
</head>
<body>
<script type="text/javascript">
/* 사칙연산 함수 */
function calculator(op, num1, num2, callback) {
var result = "";
switch (op) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
default :
result = "산술연산자는 + = * / 중 하나입니다."
}
callback(result);
}
function print1(result) {
document.write("두 수의 합은 " +result+ "입니다." + "<br/>");
}
function print2(result) {
document.write("정답은= " +result+ "입니다." + "<br/>");
}
calculator("+", 10, 20, print1);
calculator("+", 10, 20, print2);
</script>
</body>
</html>
콜백 쓰기전 리턴값 이용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 두 수를 더하는 함수를 만들어 주세요.
- 리턴값을 이용하는 경우
*/
function sum(num1, num2) {
return num1 + num2
}
var result = sum(10, 20);
document.write('두 수의 합은= ' +result+ ' 입니다.');
</script>
</body>
</html>
심플한 콜백예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 두 수를 더하는 함수를 만들어 주세요.
- 콜백함수를 이용하는 경우
*/
function sum(num1, num2, callback) {
var temp = num1 + num2;
callback(temp);
}
function result(value) {
document.write('두 수의 합은= ' +value+ ' 입니다.');
}
sum(10, 20, result);
</script>
</body>
</html>
동기 테스트 콜백
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 동기 테스트 */
alert("안녕하세요");
document.write("alert() 동작이 끝나면 이내용은 실행됩니다.");
</script>
</body>
</html>
비동기 테스트 콜백
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 비동기 테스트 */
var count=1;
setInterval(function() {
document.write("2. count = " +count+ "<br/>");
}, 3000);
document.write("1. ajax() 동작이 모두 끝나지 않았어도 바로 실행됩니다.")
</script>
</body>
</html>이미지 파일
중첩함수 활용 준비1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중첩함수</title>
<style type="text/css">
.tab-menu {
list-style: none;
height: 80px;
}
.tab-menu li {
width: 99px;
height: 40px;
background-position-y: 0;
overflow: hidden;
display: inline-block;
float: left;
text-indent: -1000px;
}
.tab-menu li:hover {
background-position-y: -40px;
}
.tab-menu li.select { /* li태그 아래의 select 클래스 추가 */
background-position-y: -80px;
height: 80px;
}
.tab-menu li.menuitem1 {
background-image: url("./images/newbtn.bar.1.png");
}
.tab-menu li.menuitem2 {
background-image: url("./images/newbtn.bar.2.png");
}
.tab-menu li.menuitem3 {
background-image: url("./images/newbtn.bar.3.png");
}
.tab-menu li.menuitem4 {
background-image: url("./images/newbtn.bar.4.png");
}
.tab-menu li.menuitem5 {
background-image: url("./images/newbtn.bar.5.png");
}
.tab-menu li.menuitem6 {
background-image: url("./images/newbtn.bar.6.png");
}
</style>
</head>
<body>
<p>첫번째 메뉴</p>
<ul class="tab-menu" id="tabMenu1">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
<p>두번째 메뉴</p>
<ul class="tab-menu" id="tabMenu2">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/* 탭메뉴 함수 내부를 여러개의 중첩 함수로 포장하기 */
$(document).ready(function(){
//텝메뉴 코드가 동작할수 있도록 tabMenu()함수 호출
tabMenu("#tabMenu1");
tabMenu("#tabMenu2");
});
function tabMenu(selector) {
var $tabMenu = null;
var $menuItems = null;
//선택 한 텝메뉴를 저장할 변수
var $selectMenuItem = null;
//요소 초기화
$tabMenu = $(selector);
$menuItems = $tabMenu.find("li");
//메뉴 항목을 클릭 이벤트 등록
$menuItems.click(function() {
//기존 선택 메뉴 항목이 있으면 비선택 상태로 만들기
if($selectMenuItem != null){
$selectMenuItem.removeClass("select"); //css 클래스중 .select 효과를 없애기.
}
//클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
$selectMenuItem = $(this);
//선택 상태로 만들기
$selectMenuItem.addClass("select");
});
}
</script>
</body>
</html>
중첩함수 활용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>중첩함수</title>
<style type="text/css">
.tab-menu {
list-style: none;
height: 80px;
}
.tab-menu li {
width: 99px;
height: 40px;
background-position-y: 0;
overflow: hidden;
display: inline-block;
float: left;
text-indent: -1000px;
}
.tab-menu li:hover {
background-position-y: -40px;
}
.tab-menu li.select { /* li태그 아래의 select 클래스 추가 */
background-position-y: -80px;
height: 80px;
}
.tab-menu li.menuitem1 {
background-image: url("./images/newbtn.bar.1.png");
}
.tab-menu li.menuitem2 {
background-image: url("./images/newbtn.bar.2.png");
}
.tab-menu li.menuitem3 {
background-image: url("./images/newbtn.bar.3.png");
}
.tab-menu li.menuitem4 {
background-image: url("./images/newbtn.bar.4.png");
}
.tab-menu li.menuitem5 {
background-image: url("./images/newbtn.bar.5.png");
}
.tab-menu li.menuitem6 {
background-image: url("./images/newbtn.bar.6.png");
}
</style>
</head>
<body>
<p>첫번째 메뉴</p>
<ul class="tab-menu" id="tabMenu1">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
<p>두번째 메뉴</p>
<ul class="tab-menu" id="tabMenu2">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
/* 탭메뉴 함수 내부를 여러개의 중첩 함수로 포장하기 */
$(document).ready(function(){
//텝메뉴 코드가 동작할수 있도록 tabMenu()함수 호출
tabMenu("#tabMenu1");
tabMenu("#tabMenu2");
});
function tabMenu(selector) {
var $tabMenu = null;
var $menuItems = null;
//선택 한 텝메뉴를 저장할 변수
var $selectMenuItem = null;
//요소 초기화
//메뉴 항목을 클릭 이벤트 등록
// 요소 초기화
function init() {
$tabMenu = $(selector);
$menuItems = $tabMenu.find("li");
}
// 이벤트 초기화
function inintEvent() {
$menuItems.click(function() {
//클릭한 메뉴 항목을 신규 선택 메뉴 항목으로 저장
setSelectItem($(this));
});
}
// 텝메뉴 선택
function setSelectItem($item) {
//기존 선택 메뉴 항목이 있으면 비선택 상태로 만들기
if($selectMenuItem != null){
$selectMenuItem.removeClass("select"); //css 클래스중 .select 효과를 없애기.
}
$selectMenuItem = $item
//선택 상태로 만들기
$selectMenuItem.addClass("select");
}
init(selector);
inintEvent();
}
</script>
</body>
</html>
클로저
*함수 클로저 (비공개 속성/함수를 만들수 있음)
*클로저 : 실행될 코드와 함수의 유효 범위, 다시 말해 함수의 호출 객체와 연결된
스코프 체인의 조합,
일반함수일 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 일반 함수인 경우 */
function addCount() {
var count = 0;
count++;
return count;
}
document.write("1. count = " +addCount(), "<br/>");
document.write("2. count = " +addCount(), "<br/>");
document.write("3. count = " +addCount(), "<br/>");
</script>
</body>
</html>
클로저를 사용할 경우
<!DOCTYPE html>
<!--
*함수 클로저 (비공개 속성/함수를 만들수 있음)
*클로저 : 실행될 코드와 함수의 유효 범위, 다시 말해 함수의 호출 객체와 연결된
스코프 체인의 조합,
-->
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* 클로저를 사용한 경우 */
function createCounter() {
var count=0;
function addCount() {
count++;
return count;
}
return addCount;
}
var counter = createCounter();
document.write("1. count = " + counter(), "<br/>");
document.write("2. count = " + counter(), "<br/>");
document.write("3. count = " + counter(), "<br/>");
</script>
</body>
</html>
