IT/_HTML_CSS_JS

UI/UX_014

KhanSelf 2017. 7. 20. 16:15

간단정리


1. 함수
 - 특별한 일을 수행하기 위한 코드들의 집합
 - 자주쓰는 작업을 함수로 선언해서 필요할때마다 호출해서 쓸수 있음

1) 익명함수
 - 변수를 선언하고 그 변수에 함수를 할당
 - 함수가 호출될 때 마다 해석
 - 항상 함수를 생성하고 변수에 할당 한 다음 호출


var variableName = function(parameters) {

 code to be excuted;
}
variableName();

variableName는 함수 자료형

        // 익명함수.
        var a = function () {
            var output = prompt("숫자를 입력해주세요.", "");
            alert(output);
        };

        // 함수를 호출합니다.
        a();


2) 선언적 함수
 - 페이지가 로드할 때 단 한번 해석된다.
 - 한번 해석된 후에는 함수는 호출될 때마다 실행된다
 - 함수를 먼저 호출한 경우에도 정상 실행


function fuctionName(parameters) {
 code to be excuted
}
functionName();


function A() {
   var output = prompt('숫자를 입력해주세요.');
            alert(output);
  }
        A();





2. 함수
 - 특별한 일을 수행하기 위한 코드들의 집합
 - 자주쓰는 작업을 함수로 선언해서 필요할때마다 호출해서 쓸수 있음

1)함수선언
function fuctionName(parameters) {
 code to be excuted
}


2)함수호출
functionName(인수);





3. 매개변수, 리턴값, 인자

1) 매개변수 : 함수 호출과 함수 연결의 매개가 되는 변수
 - 선언된 매개변수 보다 많은 경우 무시
 - 선언된 매개변수 보다 적을 경우 undefined, NaN

### 가변 인자 함수
 - 매개변수의 개수가 변할 수 있는 함수
 - 매개변수가 선언된 형태와 다르게 사용했을 때 매개변수를 모두 활용하는 함수를 의미
 - 가변인자 함수의 예 : Array( ) 함수
var array1 = Array();  ==> 빈 배열 생성
var array2 = Array(10); ==> 배열 요소 갯수가 10개인 배열생성
var array3 = Array(273, 103, 57, 32);
==> 인수를 배열 요소로 갖는 배열 생성

2) 리턴값 : 있는 경우 없는 경우
 - 함수 실행 중 함수를 호출한 곳으로 돌아가라는 의미


3) 인자,인수 :
 - 함수 호출 시 매개변수와 대칭 되는 값


// 함수를 선언합니다.
        function f(x, y) { // x, y 는 매개변수
   var z = x * y;
   return z; // z는 리턴값
  }

// 함수 호출
  f(3, 2); // 3, 2는 인수

 




4. 인코딩 디코딩 함수

1) escape( ) <==> unescape( )

 - 영문 알파벳과 숫자, 일부 특수 문자(@, *, -, _, +, ., / )를 제외하고 모두 인코딩
 - 1바이트 문자는 %XX의 형태로, 2바이트 문자는 %uXXXX 형태로 변환

2) encodeURI ( ) <==> decodeURI ( )
 - 인터넷 주소에 사용되는 일부 특수 문자( :, ;, /, =, ?, & )는 변환하지 않음

3)encodeURIComponent ( )<=>decodeURIComponent ( )
 - 알파벳과 숫자를 제외한 모든 문자를 인코딩
 - UTF-8 인코딩과 같음

 




5. 타이머 함수

1) setTimeout 

 - 일정시간이 지난 후에 함수가 실행
2) clearTimeout 은 

 - setTimeout을 취소

 함수선언
 var 변수 = setTimeout(함수명, 함수가 실행될 시간);
 clearTimeout(변수);

- setTimeout 의 두번째 인수인 함수가 실행될 시간은 밀리세컨드 단위입니다. 1000 밀리세컨드가 1초

10초 = 10*1000;
1분 = 60 * 1000;

3) setInterval 은 

 - 일정시간 마다 함수가 실행
4) clearInterval 은 

 - setInterval 로 설정한 작업을 취소

 

함수선언
 var 변수 = setInterval(함수명, 함수가 실행될 시간);
 clearInterval(변수);

 


    </script>
</head>
<body>

 




6. 코드 실행 함수

1)eval() 
 - 문자열을 자바스크립트 코드로 실행

 




7. 숫자 확인 함수

1) isFinite(number) : number 가 무한한 값이면 false 리턴

2) isNan(number) : number 가 NaN 이면 true 리턴





8.숫자 변환 함수

*** Number( ) 함수는 숫자로 바꿀 수 없으면 Nan로 변환

1) parseInt( ) 함수 : 정수로 변환
2) parseFloat( ) 함수 : 실수로 변환









[출처] UIUX엔지니어링과정 20



17년 7월 20일 수업내용 (서울IT교육센터직업전문학교) |작성자 송미진











예문


Ex_01 익명함수

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 익명함수.

var a = function() {

var output = prompt("숫자를 입력해주세요.", "");

alert(output);

};


// 함수를 호출합니다.

a();

document.write(typeof (a));

</script>

</head>

<body>


</body>

</html>








Ex_02 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var a = function() {

alert('함수 A');

};

a();


//익명함수는 항상 먼저 선언 한 다음 호출

</script>

</head>

<body>


</body>

</html>




Ex_03

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var a = function() {

alert('함수 A');

};

var a = function() {

alert('함수 B');

};

a();

</script>

</head>

<body>


</body>

</html>





Ex_04 선언적 함수

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

function A() {

var output = prompt('숫자를 입력해주세요.', '');

alert(output);

}

A();

</script>

</head>

<body>


</body>

</html>






Ex_05

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

A();

function A() {

alert('함수 A');

}

</script>

</head>

<body>


</body>

</html>








Ex_06 선언적 함수VS익명함수 중복 출력시 선언적 함수 먼저 다음이 익명함수

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 함수를 생성합니다.

var A = function () { alert('함수 A'); }///2

function A() { 

alert('함수 B');

}//1


// 함수를 호출합니다.

A();// 함수A 출력 3

</script>

</head>

<body>


</body>

</html>








Ex_07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 함수를 선언합니다.

function f(x, y) { // x는 매개변수

var z = x * y;

return z; // z는 리턴값

}


var r = f(3, 2);

alert(r);

</script>

</head>

<body>


</body>

</html>









Ex_08 오류나는 소스코드입니다. 확인해보세요(NaN)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 함수를 선언합니다.

function f(x, y) { // x는 매개변수

var z = x * y;

return z; // z는 리턴값

}


var r = f(3);

alert(r);

</script>

</head>

<body>


</body>

</html>








Ex_09

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 함수를 생성합니다.

function returnFunction(s, i) {

z = i * i;

//return z;

alert(z);

}


// 함수를 호출합니다.

returnFunction("로그인 하였습니다.", 3);

</script>

</head>

<body>


</body>

</html>







Ex_10

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 배열을 생성합니다.

var array1 = Array(); ///빈 배열

var array2 = Array(10); //배열의 요소가 10개인 배열

var array3 = Array(273, 103, 57, 32);

var array = [ 100, 200, 300 ];


// 출력합니다.

document.write(array1);

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

document.write(array2);

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

document.write(array3);

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

document.write(array);

</script>

</head>

<body>


</body>

</html>







Ex_11 prompt로 값을 입력받아 원하는 구구단 출력

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>구구단출력함수</title>

<script>

function GuGu(dan) {


document.write("<h1>" + dan + "단 출력</h1><br />");


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

document.write(i + " * " + dan + " = " + i * dan + "<br />");

}


}


var x = Number(prompt("숫자 입력", ""));

GuGu(x);

</script>

</head>

<body>


</body>

</html>







Ex_12

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 인코딩할 URL을 만듭니다.

var URI = "http://hanb.co.kr?test=한글입니다.";


// 출력할 문자열을 만듭니다.

var output1 = escape(URI);


var output2 = encodeURI(URI);


var output3 = encodeURIComponent(URI);


// 인코딩 출력합니다.

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

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

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


var deoutput1 = unescape(output1);


var deoutput2 = decodeURI(output2);


var deoutput3 = decodeURIComponent(output3);


// 디코딩 출력합니다.

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

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

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

</script>

</head>

<body>


</body>

</html>








Ex_13 setTimeout

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 3초 후에 함수를 실행합니다.

setTimeout(function() {

alert("3초가 지났습니다. 바이바이");

}, 3000);


/*function abc() {

alert("3초가 지났습니다. 바이바이");

}

setTimeout(abc, 3000);*/

</script>

</head>

<body>


</body>

</html>





Ex_14 clearTimeout

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 3초 후에 함수를 실행합니다.

var stop = setTimeout(function() {

alert("3초가 지났습니다. 바이바이");

}, 3000);


/*function abc() {

alert("3초가 지났습니다. 바이바이");

}

setTimeout(abc, 3000);*/

///alert(stop);

</script>

</head>

<body>

<button onclick="clearTimeout(stop);">멈추세요</button>

</body>

</html>








Ex_15 setInterval

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var myVar = setInterval(function() {

myTimer()

}, 1000);


function myTimer() {

var d = new Date();

document.getElementById("demo").innerHTML = d;

}

</script>

</head>

<body>

<p id="demo"></p>

</body>

</html>










Ex_16

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var cnt = 0;

function add() {


if (cnt == 5)

clearInterval(timer);


document.write(cnt);


cnt++;


}

var timer = setInterval(add, 1000);

</script>

</head>

<body>


</body>

</html>









Ex_17

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// 문자열을 생성합니다.

var willEval = "";

willEval += "var number = 10;";

willEval += "alert(number);";


//document.write(willEval);


// eval() 함수를 호출합니다.

eval(willEval);

</script>

</head>

<body>


</body>

</html>











Ex_18

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

function myFunction() {


var a = isFinite(123) + "<br />";

var b = isFinite(-1.23) + "<br />";

var c = isFinite(5 - 2) + "<br />";

var d = isFinite(0) + "<br />";

var e = isFinite("123") + "<br />";

var f = isFinite("Hello") + "<br />";

var g = isFinite("2005/12/12") + "<br />";

var h = isFinite(1 / 0) + "<br />";

var i = isFinite(0 / 1);


var res = a + b + c + d + e + f + g + h + i;

document.write(res);

}

myFunction();

</script>

</head>

<body>


</body>

</html>










Ex_19

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

// Returns false.

document.write(isNaN(100) + "<br />");


// Returns false.

document.write(isNaN("100") + "<br />");


// Returns true.

document.write(isNaN("ABC") + "<br />");


// Returns true.

document.write(isNaN("10C") + "<br />");


// Returns true.

document.write(isNaN("abc123") + "<br />");

</script>

</head>

<body>


</body>

</html>









Ex_20

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<script>

var won = '1000원';

var dollar = '1.5$';

alert(parseInt(won) + ' : ' + parseFloat(dollar));


//alert(Number(won) + ' : ' + Number(dollar));

</script>

</head>

<body>


</body>

</html>









Ex_21 입력값이 숫자아닐때 다시 함수를 불러서 이용 자동 테이블 생성기

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

table {

border: 1px solid #575757;

}


td {

border: 1px solid #575757;

text-align: center;

width: 100px;

}

</style>

<script>

function AutoTableC(rows, cols) {


if (isNaN(rows) || isNaN(cols)) {


alert("숫자만 입력하세요");

var r = Number(prompt("줄수를 입력하세요", ""));

var c = Number(prompt("칸수를 입력하세요", ""));


AutoTableC(r, c);


} else {


var num = 1;

var r = rows;

var c = cols;

document.write("<table>");

for (var i = 0; i < r; i++) {

document.write("<tr>");

for (var j = 0; j < c; j++) {

document.write("<td>" + num + "</td>");

num++;

}

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

}

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

}

}


var r = Number(prompt("행을 입력해봐요", ""));

var c = Number(prompt("열을 입력해봐요", ""));


AutoTableC(r, c);

</script>

</head>

<body>

<label>God Bless You!</label>

</body>

</html>










저작자표시 (새창열림)