컴퓨터는 잘못이 없다..

[JavaScript]매개 변수가 있는 Function 본문

공부/JavaScript

[JavaScript]매개 변수가 있는 Function

도토리까꿍v 2020. 11. 4. 20:51
Contents 접기

[Function Type과 매개변수]

​

01) 예제 코드

매개변수 있는 함수를 만들어보자!

​

방법1) 바로 함수 만들기

function 함수명(매개변수){};

​

방법2) 익명의 함수를 만들어서 변수에 대입

var 변수명 = function(매개변수){}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Step04_funtion2.html</title>
</head>
<body>

    <h1>function 테스트중...</h1>
    <input type="text" id="inputName" placeholder="이름입력...">
    <button onclick="enter()">입장하기</button>

<script>
        //구라님 환영합니다. → (   )님 환영합니다. 괄호의 내용을 원하는대로 넣고싶다! 
        //매개변수를 이용해보자!
        function welcome1(){
            alert("구라님 환영합니다.");
        };

        //방법1_매개변수 있는 함수 
        //함수의 인자를 전달 받을 매개변수 arg 정의하기
        function welcome2(arg){
            //arg에는 함수를 호출하면서 전달한 값이 들어있다
            alert(arg + " 님 환영합니다.");
        };


        //방법2_매개변수 있는 함수 
        //아래와 같이 정의할 수도 있다.
        var welcome3=function(arg){
            alert(arg+ "님 환영합니다.");
        };
        
        //quiz! 이름입력 후 입장하기 누르면 
        //(      )님 환영합니다! 가 알림창으로 뜨게 하기
        //hint.welcome2() 함수를 이용해보자!
        function enter(){
            //1. id가 inputName인 요소에 입력한 문자열 읽어오기
            var name = document.querySelector("#inputName").value;

            //2. welcome() 함수 호출하면서 전달하기
            welcome2(name);
            
            //3. id가 inputName인 요소에 즉, textbox에 입력한 value 비워주기
            document.querySelector("#inputName").value = ""; 

            //4.id가 inputName인 요소에 포커스 주기(커서와 함께 텍스트 창이 두꺼워짐)
            document.querySelector("#inputName").focus();
        };
      

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

 

02) 코드 내 Quiz 결과 확인

 

03) 코드 줄여보기

위 3개를 자주 쓰니 변수 input1에 넣어서 표현해보자!

        function enter(){
            let input1 = document.querySelector("#inputName");
            let name=input1.value;
            welcome2(name);
            input1.value = "";
            input1.focus();
        }
저작자표시

'공부 > JavaScript' 카테고리의 다른 글

[JavaScript]ECMA5,ECMA6버전 javascript, object type의 참조값을 매개변수로 가지고 있는 함수 만들기  (0) 2020.11.04
[JavaScript]Function Type 여러가지 방법으로 사용해보기,익명 함수란?, 함수의 해석과 실행 시점 알기  (0) 2020.11.04
[JavaScript]object type 내 함수와 this 예약어  (0) 2020.11.04
'공부/JavaScript' Related Articles more
Comments