Aonymous function
함수 포인터
<!doctype html>
<html>
<head>
<script>
// c 언어의 함수 포인터 개념이 javascript 에 있다.
function add( i, j ) { return 100; }
function abcd() {
var fp = add;
var r = fp( 10, 20 );
alert( r );
var t = 100;
// anonymous function
var fp2 = function ( i, j ) {
// t++; : 로컬 변수를 가져다 쓸 수는 있어도, 값을 변경시키는것은 안된다.
return t;
};
var r2 = fp2( 10, 20 );
alert( r2 );
}
</script>
</head>
<body onload="abcd();">
<img id="ab" src="images/0.png"/>
</body>
</html>c의 함수포인터
int(*fp)(int, int); fp = add;JavaScript의 함수포인터
function add( i, j ) { return 100; } var fp = add; var r = fp( 10, 20 );
javascript는 변수에 타입이 없다. 따라서 포인터 역할도 할 수 있는데 그 중 함수 포인터 역할도 한다.
java의 Anonymous class
Object obj = new Object() { ... };JavaScript의 Aonymous function
var fp2 = function ( i, j ) { return t; };
Aonymous function : 이름이 없는 점이 java의 anonymous class 와 유사, 이름이 없으니까 포인터로 호출한다. 재사용은 신경쓰지 않고 만든 함수
<!doctype html>
<html>
<head>
<script>
function abcd() {
var ab = document.getElementById("ab");
// onclick은 변수 ( 함수를 가리키기 때문, ab가 가리키는 객체의 멤버변수 )
ab.onclick = function() {
alert();
};
}
</script>
</head>
<body onload="abcd();">
<img id="ab" src="images/0.png"/>
</body>
</html>abcd() 는 페이지가 로딩되는 시점에 호출되고, 이 시점에서 onclick에 함수 대입이 일어난다.
function 이 호출되는 시점 : ab 포인터가 가리키는 대상에서 click 이라는 상황이 벌어지면 해당 객체의 onclick 함수포인터가 가리키는 함수가 호출된다.
인라인 함수
<!doctype html>
<html>
<head>
<script>
function apple( fp ) {
alert( 300 );
fp( 400 );
}
function abcd() {
var fp = function( i ) {
alert( i );
}
fp( 100 );
// 1
( function( j ) {
alert( j );
})( 200 );
// 2
apple( function( t ) {
alert( t );
});
}
</script>
</head>
<body onload="abcd();">
<img id="ab" src="images/0.png"/>
</body>
</html>( function( j ) {
alert( j );
})( 200 );fp 라는 함수 포인터를 아래와 같은 코드로 선언했을 때 위의 코드는
(fp)(200) 와 같은 것이 되며 매개변수는 200으로 alert(200) 이 실행된다.
var fp = function( i ) {
alert( i );
}function apple( fp ) {
alert( 300 );
fp( 400 );
}
// -----------------
apple( function( t ) {
alert( t );
});apple 이라는 함수의 매개변수 fp 에 아래와 같은 코드가 대입되었으므로
fp(400) 은 alert(400) 과 같다.
배열
<!doctype html>
<html>
<head>
<script>
function abcd() {
var ab = document.getElementsByClassName("ab");
// alert( ab.length ); // 배열이다
for( var i = 0; i < ab.length; i++ ) {
/*
anonymous 함수에서 로컬 변수를 가져다 쓰는데, 그 값이 변하는 경우는 곤란하다.
그 대표적인 경우가 아래의 사례
가리키는 시점의 값과 호출하는 시점의 값이 달라지게 되고, 하나의 변수를 5군데에서
물고 있다.
*/
ab[i].onclick = function() {
alert( i );
}
}
}
</script>
</head>
<body onload="abcd();">
<img class="ab" src="images/0.png"/>[0]
<img class="ab" src="images/0.png"/>[1]
<img class="ab" src="images/0.png"/>[2]
<img class="ab" src="images/0.png"/>[3]
<img class="ab" src="images/0.png"/>[4]
</body>
</html>
i번째 배열에 function 이 대입되는 시점과 호출되는 시점은 다르다. 따라서 호출되는 시점에는 i = 5 인 상태가 되므로 어떤 위치에 있는 이미지를 클릭하더라도 5가 호출되게 된다.
<script>
function abcd() {
var ab = document.getElementsByClassName("ab");
// alert( ab.length ); // 배열이다
for( var i = 0; i < ab.length; i++ ) {
( function( j ) {
ab[j].onclick = function() {
alert( j );
}
})( i );
}
}
</script>반복문에서 i는 계속 변한다. 하지만 j 라는 변수는 5번 생성되고 각각 0 1 2 3 4 라는 값을 가진다. 따라서 function 이 i가 아니라 j를 물고 있으면 j는 변하지 않는 값이므로 onclick 시 해당 인덱스 번호가 alert 된다.
JSON
<!doctype html>
<html>
<head>
<script>
function abcd() {
var l = "alert('apple')";
window.eval( l );
var t = "{\"apple\" : 100, \"banana\" : 200}";
var t2 = eval("("+t+")");
alert( t2.apple );
alert( t2.banana );
}
</script>
</head>
<body onload="abcd();">
</body>
</html>window.eval( l ); -> 주어진 문자열을 컴파일하고 실행시켜 준다.
var t2 = eval("("+t+")"); : t2가 가리키는 것은 모종의 인스턴스, 거기엔 apple banana 라는 멤버변수가 있다.
eval("("+t+")") : 이것이 만들어 리턴시키는건 객체이다.
"{\"apple\" : 100, \"banana\" : 200}" : 만들어낼 객체의 설계도
Javascript 에서 간단하게 객체를 정의할 수 있는 표기법이 따로 존재하며, 그것은 java Script Object Notaion 의 약자로 JSON 이라 부르고, 웹 표준 기술 중 하나이다. 인터넷 상에서 정보를 주고 받을 때 JSON 형태로 많이 주고 받게 된다.
<!doctype html>
<html>
<head>
<script>
function abcd() {
var t = {
"apple": 100,
"banana": 200,
"orange": true,
"kiwi": "this is end",
"tomato": {
"age":100,
"name":"happy"
},
"potato": [10,20,30,40]
};
alert( t.apple );
alert( t.banana );
alert( t.orange );
alert( t.kiwi );
alert( t.tomato.age );
alert( t.tomato.name );
for( var i = 0; i < t.potato.length; i++ ) {
alert( t.potato[i] );
}
}
</script>
</head>
<body onload="abcd();">
</body>
</html>위 코드가 JSON 의 전형적인 형태
KEY값은 반드시문자열( 반드시 따옴표 )value값은정수/ 실수,true/false,문자열,객체,배열등이 온다.
