Be a groovy man by positive thinking

UI/UX_009 본문

IT/_HTML_CSS_JS

UI/UX_009

KhanSelf 2017. 7. 12. 16:34


간편정리



1. 함수 
1)함수생성
var 함수= function(){
}
2)함수호출
함수명();

3) 선언적함수
function 함수명(){
}
4) 매개변수와 리턴값
function 함수명(매개변수, 매개변수, 매개변수...){
함수코드
return 리턴값;
}
5) 내부함수
function 외부함수(){
function 내부함수1(){
}
function 내부함수2(){
}
함수코드
}
6) 무명함수(익명함수)
     function(){
}
7) 콜백함수
<script>
function callTenTimes(callback){      //함수를 선언
for(var i=0; i<10; i++){                 // 10회 반복
callback();                                     // 매개변수로 전달된 함수를 호출
}
}
var callback= function(){                //변수선언
alert('함수호출');
};

callTentimes(callback);                    //함수를 호출
<script>






예문


Ex_01

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<script>

function f1(){ document.write("aaa"); 

} 

function f2(){

document.write("bbb"); 

} 

f1(); 

f2();

</script>

</body>

</html>







Ex_02 aaa가 나오게 출력하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1() {

function f2() {

document.write("aaa");

}

}

</script>

</body>

</html>




Sol_02

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1() {

function f2() {

document.write("aaa");

}

f2();

}

f1();

</script>

</body>

</html>





Ex_03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

var a=function() {

document.write("무명함수");

}

a();

</script>

</body>

</html>






Ex_04

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

a(); //위에서 호출하면 안된다.

var a=function() {

document.write("무명함수");

}

</script>

</body>

</html>






Ex_05 here을 완성하여 무엇이든 나오게 하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1(f2) {

document.write(f2());

}

//here

</script>

</body>

</html>



Sol_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1(f2) {

document.write(f2());

}

f1(function() {

return "연습"

});

</script>

</body>

</html>







Ex_06 100 200이 출력될수 있게 하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

var a = 100;

var b = function() {

return 200;

};


function f1(c) {

document.write(c);

}


f1(a);

f1(b);

</script>

</body>

</html>



Sol_06

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

var a = 100;

var b = function() {

return 200;

};


function f1(c) {

if((typeof c)!=function){

document.write(c);

}else{

document.write(c());

}

}


f1(a);

f1(b);

</script>

</body>

</html>








Ex_07 실행해보시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

var a = 100;

var b = function() {

return 200;

};

var c = "abc";

var d = true;

var e = {

"aa" : "bb",

"cc" : "dd"

};

var f = new Date();

document.write(typeof a);

document.write("<br/>");

document.write(typeof b);

document.write("<br/>");

document.write(typeof c);

document.write("<br/>");

document.write(typeof d);

document.write("<br/>");

document.write(typeof e);

document.write("<br/>");

document.write(typeof f);

document.write("<br/>");

document.write(typeof g);

</script>

</body>

</html>







Ex_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1() {

return function() {

return 100;

};

}

//here

</script>

</body>

</html>



Sol_08

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f1() {

return function() {

return 100;

};

}

var a=f1();

document.write(a());

</script>

</body>

</html>






Ex_09

100

200   300

400   500   600 가 나오게 소스코드를 작성하시오


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f() {

document.write(arguments[0]);

}

f(100);

f(200, 300);

f(400, 500, 600);

</script>

</body>

</html>



Sol_09

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function f() {

for (var a = 0; a < arguments.length; a++) {

document.write(arguments[a]+"&nbsp;&nbsp;&nbsp;");

//&nbsp; 는 한칸 띄우는 것임

}

document.write("<br>");


}

f(100);

f(200, 300);

f(400, 500, 600);

</script>

</body>

</html>








Ex_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

//here

document.write(max(5, 7) + "<br>");

document.write(max(3, 1) + "<br>");

</script>

</body>

</html>






Sol_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function max(s, t) {

if (s > t) {

return s;

} else {

return t;


}

}

document.write(max(5, 7)+"<br>");

document.write(max(3, 1)+"<br>");

</script>

</body>

</html>









Ex_11 here을 완성하여 7단과 5단을 출력하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

//here

printGugudan(7);

document.write("<hr>");

printGugudan(5);

document.write("<hr>");

</script>

</body>

</html>




Sol_11

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<script>

function printGugudan(s){

document.write(": : "+s+" 단 : :"+"<br>");

for(var t=1; t<10; t++){

document.write(s +" * "+t+" = "+s*t+"<br>");

}

}

printGugudan(7);

document.write("<hr>");

printGugudan(5);

document.write("<hr>");

</script>

</body>

</html>









Ex_12 here을 완성하여 table을 완성하시오

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

td {

border: 2px solid navy;

}

</style>

</head>

<body>

<script>

//here

createTable(3, 5);

</script>

</body>

</html>



Sol_12_1

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

td {

border: 2px solid navy;

}

</style>

</head>

<body>

<script>

function createTable(row, column) {

var num = 1;

var htmlStr = "<table>";

for (var a = 0; a < row; a++) {

htmlStr += "<tr>";

for (var b = 0; b < column; b++) {

htmlStr += "<td>";

htmlStr += num++;

htmlStr += "</td>";

}

htmlStr += "</tr>";

}

htmlStr += "</table>";

document.write(htmlStr);

}

createTable(3, 5); // 3줄5칸

</script>

</body>

</html>



Sol_12_2

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

td {

border: 2px solid navy;

}

</style>

</head>

<body id="bodyTag">

<script>

function createTable(s, t) {

var tableTag = document.createElement("table");

bodyTag.appendChild(tableTag);

for (a = 0, n = 1; a < s; a++) {

var trTag = document.createElement("tr");

tableTag.appendChild(trTag);

for (b = 0; b < t; b++, n++) {

var tdTag = document.createElement("td");

tdTag.innerHTML = n;

trTag.appendChild(tdTag);

}

}


}

createTable(3, 5);

</script>

</body>

</html>

저작자표시 (새창열림)

'IT > _HTML_CSS_JS' 카테고리의 다른 글

UI/UX_011  (0) 2017.07.14
UI/UX_010  (0) 2017.07.13
UI/UX_008  (0) 2017.07.10
UI/UX_007  (0) 2017.07.07
UI/UX_006  (0) 2017.07.06
'IT/_HTML_CSS_JS' Related Articles more