안녕하세요. 상품화 제품을 개발해본적 있는 진쓰입니다.

자바스크립트 5장 함수의 개요 및 내장함수 블로그 포스팅 시작하겠습니다.


목 차

1. 함수 개념

2. 함수 구조

3. 함수의 호출, 리턴

4. 내장함수 - alert

5. 내장함수 -  prompt

6. 내장함수 - confirm




1.  함수의 개념

-함수란, 목적을 가진 루틴을 구성하는 부분. 호출을 통해서 실행되며, 반환값을 가진다.



2. 함수의 구조

   function  함수의 이름(매개변수, 매개변수…){


                    함수 수행문…


      }


크게 함수의 이름, 매개변수, 함수 수행문 으로 구성됩니다.

또한 예약어 function이 붙습니다.

매개변수는 필요에 따라 넣어도 안넣어도 됩니다.


 


3. 함수의 호출과 리턴


함수 호출

: 함수의 이름을 프로그램에 삽입합니다.


리턴(RETURN)

: 반환되는 값을 의미한다.


<html>

    <head>
        <title> 5장 예제 </title>
        <script language="javascript">
            function Max(x,y){      // 사용자로 부터 입력받은 x와 y를 비교해서 큰값을 반환하게 됩니다.
                 if (x>y)
                   return x;
                 else if( y>x)
                   return y;     
              }
        </script>
    </head>


    <body>
        <script language="javascript">
          var x,y,res;
               x = prompt("값을 입력하세요~");
               y = prompt("값을 하나 더 입력하세요~");
               x= parseInt(x);  //사용자로부터 값을 받을수있는 내장함수 입니다.
               y= parseInt(y);

               res = Max(x,y);   //Max라는 함수를 호출하였습니다. 사용자로부터 입력받은 x와 y를 Max 함수 파라메터로 넘기게 됩니다.
               document.write(res);

        </script>   
    </body>

</html>

 


3과 10을 입력하였을때 결과화면은 10이 출력됨을 확인하실 수 있습니다.


문제


- 두 개의 정수값과 연산자를 입력받아 계산하는 프로그램을 작성하시오.


<html>

<head>

<title> 5장 예제 </title>

<script language="javascript">

function calc(a,b,p){        

switch (p){

  case '+' :

return (a+b);

  case '-' :

return (a-b);

  case '*' :

return (a*b);

  case '/' : 

return (a/b);

}   

 }


</script>

</head>


<body>

<script language="javascript">

var a,b,p, res;

  a = prompt("값을 입력하세요.~");

  b = prompt("값을 하나더 입력하세요.~");

  p = prompt("연산자를 입력하세요.~");

  a=parseInt(a);     //웹을 통해서 입력받는 prompt 내장함수는 전부 문자로 받기 때문에 parseInt로 숫자로 바꿔줘야합니다.

  b=parseInt(b);

  res = calc(a,b,p);

  document.write(res);

</script>

</body>

</html>

 

처음입력에 3

두번째입력에 8

세번째 입력에 + 

를 넣으면 11이 출력됨을 확인하실 수 있습니다.




4. 내장함수 alert

-단순히 메시지를 나타내고자 할 때 사용된다.

-사용법
: alert(“문자열”)

<HTML>

<HEAD><TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

 

function OK()

{

  alert(" 예 배고파요. ");

}


function no()

{

  alert("아니오 배불러용.");

}


</SCRIPT>

</HEAD>

<BODY>

배고프십니까

<FORM>

<INPUT TYPE="button" VALUE="예" onClick="OK()">    //예를 누르면 OK() 함수가 호출된다.

<INPUT TYPE="button" VALUE="아니오" onClick="no()">//아니오를 누르면 no()함수가 호출된다.

</FORM>

</BODY>

</HTML>

 



5. 내장함수 prompt


내장함수 prompt

-사용자의 입력을 받아 자바스크립트로 인식시킬때 사용하는 내장함수이다.


-prompt(“문자열”)

 


<HTML>

<HEAD>


<SCRIPT LANGUAGE="JAVASCRIPT" >

<!--

    var su;

    su=prompt("값을 입력 하세요");    //유저로부터 문자열을 입력받습니다.

    document.write("입력된 값은  " + su + "입니다.")

//-->

</SCRIPT>


</head>

<BODY>


</BODY>

<HTML>

 

.



6. 내장함수 confirm

- 확인과 취소 버튼을 가지는 메시지 상자입니다.




- 확인을 선택하면 true 반환 합니다.

- 취소를 선택하면 false 반환 합니다.


<HTML>

<HEAD>

<SCRIPT LANGUAGE="JAVASCRIPT"> 


  var res;


  res = confirm("계속하겠습니까?");


  if (res == true) 

    document.write("진행을 선택했습니다.");

  else

    document.write("취소 되었습니다.");

</SCRIPT>

</HEAD>


<BODY>

</BODY>

</HTML>

 





감사합니다. 일요일 마무리 잘하세용. :)


'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09

+ Recent posts

티스토리툴바