JavaScript 함수

카테고리 없음

JavaScript 함수

Canyi 2022. 10. 18. 10:11

함수의 종류 : 표준함수, 사용자 정의 함수

method: 특정 클래스 안에 정의된 함수 : 멤버 함수 == method(얘는 객체다! class안에 포함되는 함수)

function:

method: 특정 클래스 안에 정의된 함수 : 멤버 함수 == method(얘는 객체다! class안에 포함되는 함수)

any: 어떤 값이나 들어갈수 있다.

사용자 지정 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>
    <script>
        // window.alert('hello' + 'world');

        //사용자 정의함수
        function account() {
            alert('반갑습니다. canyi입니다.');
        }

        account();

    </script>
</body>
</html>

함수 전달인자로 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>
    <script>
        // window.alert('hello' + 'world');

        //사용자 정의함수
        function account(userId) {
            alert('반갑습니다.' +userId );
        }

        account('canyi');

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>
    <script>
        // window.alert('hello' + 'world');

        //사용자 정의함수
        function account(userId) {
            var userId = 'canyi';
            alert('반갑습니다.' + userId );
        }

        account();

    </script>
</body>
</html>

두번째 alert이 나타나지 않는 이유

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>
    <script>
        // window.alert('hello' + 'world');

        //사용자 정의함수
        function account(userId) {
            var userId = 'canyi';
            alert('반갑습니다.' + userId );
        }

        account();
        alert("또 만났네요" + userId);

    </script>
</body>
</html>

userId가 local 변수이다.

global local 우선순위 비교

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>

   
    <script>
        var userId = 'canyi';

        //사용자 정의함수
        function account(userId) {
            var userId = '박귀엽';
            alert('반갑습니다.' + userId );
        }

        account();
        alert("또 만났네요" + userId);

    </script>
</body>
</html>

함수안에 있는 userId는 사용되고 사라진다. 하지만 함수밖에 있는 userId는 계속 살아있음.

유효성검사

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>

   
    <script>
        var userName = prompt('이름을 입력하세요');

        //사용자 정의함수
        function account(userId) {
            var saveName = 'canyi';
            if (userId == saveName) {
                
            }
            alert('반갑습니다.' + userId );
        }

        account(userName);


    </script>
</body>
</html>

아이디 비번 함수 유효성 검사

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
</head>
<body>

   
    <script>
        var userName = prompt('이름을 입력하세요');
        var userPassWord = prompt('비번을 입력하세요');

        //사용자 정의함수
        function account(userId, userPw) {
            var saveName = 'canyi';
            var savePw = 'pcy';
            if (userId == saveName) {
                
                if (userPw == savePw) {
                    alert('반갑습니다.' + userId );
                }
            }
        }

        account(userName,userPassWord);
        //account();


    </script>
</body>
</html>