단비의 코딩 공부 blog

[Vanilla JS]study 5일차 - 함수 본문

javascript&jquery

[Vanilla JS]study 5일차 - 함수

황굽달 2022. 12. 7. 09:26

1. 선언적 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //함수 : 코드의 집합
        /* 
            //선언파트
            function 함수명(매개변수){
                //코드집합
            }

            //호출파트
            함수명(값);
        */

        //선언 - 생각만 하고 있는 상태
        function test(){
            alert('함수');
        }

        //호출 - 실행
        test();
    </script>
</head>
<body>
    
</body>
</html>

2. 선언과 호출

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //커피사러가는 함수선언
        //선언 - 생각만 하고 있는 상태
        function coffee(){
            alert('엘베를탄다');
            alert('스타벅스에 간다');
            alert('아메리카노를 시킨다');
            alert('맛있게 마신다');
        }

        //초기실행 - 즉시 실행
        //coffee();
    </script>
</head>
<body>
    <button onclick="coffee()">쉬는시간</button>
</body>
</html>

3. 매개변수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //커피사러가는 함수선언
        //선언 - 생각만 하고 있는 상태
        //쉼표로 매개변수를 기록
        function coffee(store,menu){
            alert('엘베를탄다');
            alert(store + '에 간다');
            alert(menu + '를(을) 시킨다');
            alert('맛있게 마신다');
        }

        //초기실행 - 즉시 실행
        //coffee('바나프레소','아이스카페라떼');
    </script>
</head>
<body>
    <h3>스타벅스</h3>
    <input type="button" value="아메리카노" onclick="coffee('스타벅스',this.value)">
    <input type="button" value="카페라떼" onclick="coffee('스타벅스',this.value)">
    <input type="button" value="캬라멜마끼야또" onclick="coffee('스타벅스',this.value)">
    <input type="button" value="헤이즐넛라떼" onclick="coffee('스타벅스',this.value)">
</body>
</html>

4. return 키워드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //return : 반환하라는 키워드
        
        //1. 제곱을 구하는 함수 선언
        //return 키워드 뒤에 매개변수 사용 - 매개변수를 사용해서 새로운 값으로 반환
        function square(x){
            return x * x;
        }

        var num = prompt('제곱을 구한 정수를 입력하세요.', '정수입력')
        alert('제곱 값 : ' + square(num));

        //2. return 키워드만 쓰기 - 함수를 벗어남(아래 명령 실행X)
        function test(){
            alert('테스트A');
            return; //함수를 호출하는 곳으로 반환되어라
            alert('테스트B');
        }

        test();
    </script>
</head>
<body>

</body>
</html>

5. 익명함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //변수에 함수 담기
        var test = function(){
            alert('테스트');
        }
        
        test();
    </script>
</head>
<body>

</body>
</html>

6. 전역변수와 지역변수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //전역변수 - JS 전체적으로 사용하는 변수
        var totalNum = 100;

        function test(){

            //지역변수 - 함수 내부에서 선언한 변수
            var fxNum = 200;

            console.log('함수파트 : ' + totalNum);
            console.log('함수파트 : ' + fxNum); //에러없음
        }

        console.log('초기실행 파트 : ' + totalNum);
        console.log('함수 파트 : ' + fxNum);  //에러발생
        test();        
    </script>
</head>
<body>

</body>
</html>

7. 내장함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //내장함수
        //alert() : 경고창을 띄우는 함수]

        /*
        function alert(str){
            div태그로 박스 만들기 - css 앱솔루트띄우기
            p태그로 str반환
            확인버튼 만들기
            확인버틀을 클릭하면 aiv태그 안보이게 처리하기
        }
        */

        //내장함수 : JS가 미리 선언해놔서 호출만 해서 사용
        alert('안녕하세요');
    </script>
</head>
<body>

</body>
</html>

8. 기본내장함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        alert('안녕하세요'); //경고창을 띄우는 함수
        confirm('결제하시겠습니까?'); //확인, 취소버튼 담은 창을 띄우는 함수
        prompt('숫자입력','정수입력'); //사용자에게 값을 입력받는 창을 띄우는 함수         
    </script>
</head>
<body>

</body>
</html>

9. isNaN 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //NaN(Not a Number) : 수식의 결과가 숫자가 아님

        alert(100 * '안녕');
        
        //isNaN(수식의 결과) : 매개변수가 NaN이면 true를 반환, 아니면 false를 반환

        alert(isNaN(100 * '안녕'));
        alert(isNaN(100 * 100));
    </script>
</head>
<body>

</body>
</html>

10. isNaN 함수 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //확률계산기를 만드시오.
        //경고창 [환전금액 : xxxx원]
        //단, 숫자가 아닌 값을 입력하면 [정수로 다시 입력하세요]라는 경고창을 띄우시오.
       
        var dollar = 1438;
        var num = prompt('환전할 달러를 입력하세요','정수입력')
       
        //alert(dollar  * num);

        if(isNaN(dollar  * num)){ //수식이 NaN이면
            alert('정수로 입력해주세요');
        }else{
            alert('환전금액 : ' + (dollar  * num) + '원');
        }
    </script>
</head>
<body>

</body>
</html>

11. parse관련 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //parseInt(문자열) : 문자열 중 숫자만 정수로 반환
        //paeseFloat(문자열) : 문자열 중 숫자만 실수로 반환

        //alert(parseInt('1000px'));
        var dollar = 1438;
        var num = prompt('환전할 달러를 입력하세요.', '정수입력');

        alert('환전금액 : ' + (dollar * parseInt(num)) + '원');
    </script>
</head>
<body>

</body>
</html>

12. eval 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //eval() : 문자열을 코드로 변경하는 함수

        eval('alert("테스트")');
        //문자열('')로 alert를 담았음에도 코드로 구현됨
    </script>
</head>
<body>

</body>
</html>

13. 타이머 함수1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //setTimeout(콜백함수, 시간); - 시간 뒤에 콜백함수 명령을 한번 실행하는 함수
        //시간(숫자) : 밀리초 단위 - 1초가 1000
        //콜백함수(function(){}) : 함수의 매개변수로 사용되는 함수

        setTimeout(function(){
            document.write('5초가 지났습니다.');
        }, 5000);
    </script>
</head>
<body>

</body>
</html>

14. 타이머함수2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //setInterval(콜백함수, 시간); - 시간 마다 콜백함수 명령을 계속 실행하는 함수
        //시간(숫자) : 밀리초 단위 - 1초가 1000
        //콜백함수(function(){}) : 함수의 매개변수로 사용되는 함수

        var num = 1; //초 숫자를 담는 변수

        setInterval(function(){
            document.write(num + '초가 지났습니다.<br>');

            num++; //1초씩 증가
        }, 1000);
    </script>
</head>
<body>

</body>
</html>

15. 타이머함수3

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //clearTimeout(변수명) : setTimeout함수를 중지
        //clearInterval(변수명) : setInterval함수를 중지

        var num = 1; //초 숫자를 담는 변수

        var autoPlay = setInterval(function(){
            document.write(num + '초가 지났습니다.<br>');

            num++; //1초씩 증가

        }, 1000);

        //10초 뒤에 멈추는 명령이 한번 발생
        setTimeout(function(){
            clearInterval(autoPlay);
        }, 10001);
    </script>
</head>
<body>

</body>
</html>

16. 타이머함수3 (응용문제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //2초마다 [n초가 지났습니다.]라고 문서에 출력하시오.
        //단, 20초까지만 반환하시오.

        var num = 2; //초 숫자를 담는 변수

        var autoPlay = setInterval(function(){
            document.write(num + '초가 지났습니다.<br>');

            num += 2; //2초씩 증가

        }, 2000);

        //10초 뒤에 멈추는 명령이 한번 발생
        setTimeout(function(){
            clearInterval(autoPlay);
        }, 20001);
    </script>
</head>
<body>

</body>
</html>

17. 콜백함수를 함수로 대체

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //함수에 문서출력 담기
        
        var x = 1;
        function output(){
            document.write(x + '초가 지났습니다.<br>');

            x++;
        }
        
        //콜백함수 자리에 함수명을 작성해서 명령 대체 가능
        //이때 주의사항은 ()를 작성하지 않음
        setInterval(output, 1000);
    </script>
</head>
<body>
    <!-- <button onclick="output()">클릭</button> -->
</body>
</html>

18. 즉시실행 함수

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 함수</title>
    <script>
        //즉시실행함수 : 함수를 선언하고 바로 실행
       
        /*
            (function 함수명(){
                //코드의 집합
            })();
        */

        (function test(){
            alert('테스트');
        })();

        //즉시실행함수는 왜 사용하는가?
        //1. 필요없는 전역 변수 생성을 줄일 수 있음
        //2. private한 변수를 만들 수 있다. => 외부에서 접근할 수 없는 스코프(범위)를 가짐
    </script>
</head>
<body>
   
</body>
</html>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 6일차 - 객체와 기본내장객체  (0) 2022.12.09
[javascript]날짜 지정 event (로또 회차)  (0) 2022.12.07
[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기  (0) 2022.11.29
[Vanilla JS]study 4일차 - 배열과 for in문  (0) 2022.11.29
[Vanilla JS]study 3일차 - 반복문  (0) 2022.11.24
'javascript&jquery' Related Articles more