새벽코딩

[JavaScript기초] 3. 함수2 (with 매개변수) 본문

Programming/JavaScript

[JavaScript기초] 3. 함수2 (with 매개변수)

midnightcoder 2023. 2. 5. 18:43

앞선 포스팅에서 함수에 대해서 알아보았다.

https://midnightcoding.tistory.com/97

 

[JavaScript기초] 2. 자바스크립트 동적 UI 만들기 with 함수란?

UI 만드는 스텝 1. HTML/CSS로 미리 디자인 2. 필요할 때 보여질수 있도록, 자바스크립트로 구현 먼저, 스타일링을 위해서 따로 main.css 라는 파일을 만들어주고, css파일을 아래와 같이 UI 만드는 스텝

midnightcoding.tistory.com

함수(function)에 사용가능한 문법 중 매개변수(parameter)가 있다.

 

function 함수(매개변수자리) 이런 형태로 괄호안에 넣어주는것을 매개변수, 영어로 parameter라고 한다.

 

아래 비슷한 형태의 두 함수를 매개변수를 이용해서 수정해보자

    <script>
        function openAlert(){
            document.getElementById('alert').style.display = 'block';
        }
        function closeAlert(){
            document.getElementById('alert').style.display = 'none';
        }
    </script>

매개변수 이용한 함수

        function manageAlert(display){
            document.getElementById('alert').style.display = display;
        }

위와같이 저 하나의 함수 (manageAlert)로 display를 block 또는 none으로 바꿔 줄 수가 있게 되었다.

 

그래서 위에서 만든 재 사용가능한 (reuseable) 함수를 아래와 같이 사용 할 수 있다.

파일 index.html의 <body> tag 안에 작성

    <div class="alert-box" id="alert">alert1<button onclick="manageAlert('none')">X</button></div>
    <button onclick="manageAlert('block')">button</button>

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript기초] 6. classList 다루기 (서브메뉴 숨기기)  (0) 2023.02.06
[JavaScript기초] 5. 부트스트랩 사용하는법(bootstrap)  (0) 2023.02.06
[JavaScript기초] 4. 셀렉터와 이벤트리스너(with 콜백함수)  (2) 2023.02.06
[JavaScript기초] 2. 동적 UI 만들기 with 함수란?  (0) 2023.02.05
[JavaScript기초] 1. 자바스크립트 기본  (0) 2023.02.05
'Programming/JavaScript' Related Articles more