JavaScript 함수 정의하기

함수 정의하기

-함수를 실행하려면 함수를 정의하고 정의된 함수를 실행해야 한다.
-함수는 불러줘야 실행한다.

기본형식
function 함수이름()
{
문장
}

(사용예) 함수정의하고 사용하기

<head>
    <script language="javascript">
    <!--
        function love()
        {
            for(i=1;i<=400;i++)
            document.write("사랑해!")
        }
    //-->
    </script>
</head>

<body>
    <script language="javascript">
    <!--
        love()
    //-->
    </script> 
</body>

(사용예) 함수의 매개변수 정의와 사용

<head>
    <script language="JavaScript">
    <!--
        function add(a,b)
        {
            var c  
            c=a+b
            document.write(c)
        }
    //-->
    </script>
</head>

<body>
    <script language="JavaScript">
    <!--
        m=3
        n=4
        document.write(m + "+" + n + "=")
        add(m,n)
    //-->
    </script>
</body>

함수에서 변수 사용할 때 주의할점

var 변수 : 지역 변수로 정의함
변수 : 전역 변수로 정의함

(사용예) 지역변수와 전역변수 설정

<head>
    <script language="javascript">
    <!--
        function sdsd(a,b)
        {
            var c=a+b         // 지역변수 선언 c=30, var 지우고 다시 실행
            document.write(c)
            document.write("<br />")
        }
        
        function sd()
        {
            d=c+2
            document.write(d)
        }
    //-->
    </script>
</head>
<body>
    <script language="javascript">
    <!--
        sdsd(10,20)
        document.write(c+1)
        document.write("<br>")
        
        sd()
    //-->
    </script>
</body>

내장함수

parseInt() 문자형 데이터를 정수형 데이터로 바꿈(소숫점 없는)
parseFloat() 문자형 데이터를 실수형 데이터로 바꿈
String() 문자형 데이터로 바꿈
Number() 숫자형 데이터로 바꿈
Boolean() 논리형 데이터로 바꿈
IsNaN() 데이터에 숫자가 아닌 문자를 포함하면 true을 반환
eval() 문자형 데이터를 큰따옴표가 없는 스크립트 코드로 처리 산술계산해줌

(사용예) 메세지 창을 열어주는 alert 내장함수 사용법

<script language="javascript">
    <!--
        alert("저의 집에 오신 것을 환영합니다.")
    //-->
</script>

(사용예) alert를 응용 퀴즈문제 만들기

<head>
    <title>퀴즈문제</title>
    <script languge="javascript">
    <!--
        function quiz()
        {
            alert("I know what you did last summer.  ")
        }
    //-->
    </script>
</head>
  <body style="background-color: black; color: white; margin-top: 50px;">
    <p><img src="quiz.jpg" style="display: block; margin: 0 auto;"></p>
    <form name="form1">
        <p style="text-align: center;">위 영화 제목은
        <input type="submit" value="  ??  " onclick="quiz()"> 입니다.</p>
    </form>
</body>

선택대화상자를 만들어 주는 confirm()함수

(사용예) 미성년자 출입금지

<script language="javascript">
<!--
    haha=confirm("18세 이상이면 [확인] 단추를 클릭하세요")
    if(haha==true) location.href="a.htm"
    else location.href="b.htm"
//-->
</script>

(사용예) 창크기 조절해서 열기 (익스10 O / 파폭 X 다르게 반응)

<head>
    <title>창크기조절</title>
    <script language="javascript">
    <!--
        haha=confirm("해상도가 모바일 (320*568)이면 [확인]단추를 \n태블릿 (1024*768)이라면[취소]단추를 클릭하세요")
        if(haha==true) small()
        else large()

        function small()
        {
            window.resizeTo(320, 568)
        }
        
        function large()
        {
            window.resizeTo(1024, 768)
        }
    //-->
    </script>
    <style>
        #wrap{position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; 
              margin-top: -100px; margin-left: -100px; background: url(polornote.gif) no-repeat;}
    </style>
</head>

<body>
    <div id="wrap"></div>
</body>

입력 대화 상자를 만들어 주는 prompt()함수

(사용예) 비밀번호 홈페이지 만들기

<head>
    <title>비밀번호</title>
    <script language="javascript">
    <!--
        code = prompt("비밀번호를 입력하세요.","")
        if (code=="1234") location.href="welcome.htm"
        else  document.write("비밀번호가 틀렸네요.")
    //-->
    </script>
</head>
<body>
</body>

문제) 비밀번호 홈페이지를 외부파일로 만들어 실행시켜 보세요.

함수에서 return문의 역할

return문이란 함수에서 결괏값을 되돌려 줄 때 사용. 함수에서 return문이 실행되면 반복문에서 break문과 비슷하게 실행문이 강제로 종료 즉, 함수정의문에 실행문으로 return문이 사용되었으면, 함수를 호출했을 때 결과값을 반환하고 진행중이던 실행문을 정지시키고 함수를 강제로 종료