Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

충분히 쌓여가는

4. function의 parameter 문법 본문

JavaScript/Level1

4. function의 parameter 문법

빌드이너프 2024. 11. 6. 23:07

function에 사용 가능한 parameter 문법

function alert(parameter) {
    document.getElementById('alert').style.display = 'parameter';
}
  1. () 소괄호 내에 문자 입력
  2. {} 중괄호 내에도 () 소괄호에 입력한 같은 문자 입력

 

parater 사용 예시

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="alert-box" id="alert">알림창
        <button onclick="alertColse()">알림창 닫기</button>
    </div>
    <button onclick="alertOpen()">알림창 열기</button>

    <script>
        function alertColse() {
            document.getElementById('alert').style.display = 'none';
        }

        function alertOpen() {
            document.getElementById('alert').style.display = 'block';
        }
    </script>
</body>
</html>
  • alert라는 곳에서 function을 2번 사용
  • 만약 parameter 문법을 사용한다면 function을 1번만 사용해도 됨

 

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="alert-box" id="alert">알림창
        <button onclick="alert('none')">알림창 닫기</button>
    </div>
    <button onclick="alert('block')">알림창 열기</button>

    <script>
        function alert(parameter) {
            document.getElementById('alert').style.display = parameter;
        }
    </script>
</body>
</html>
  • function 하나로 여러 기능 실행 가능

 

parameter 문법 특징

  1. 파라미터는 자유롭게 작명 가능
  2. function plus(a) { 2 + a }
  3. 파라미터는 2개 이상 사용가능
    • ,(콤마)로 구분 
      function plus(a, b) {
a + b
}
plus(2, 2);

 

문제

  • 기존 코드를 버튼1을 누르면 아이디를 입력하세요
    버튼2를 누르면 비밀번호를 입력하세요로 나오게 바꾸기

 

기존 코드

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="alert-box" id="alert">
        <p>알림창임</p>
        <button onclick="alert('none');">닫기</button>
    </div>
    <button onclick="alert('block');">버튼1</button>
    <button onclick="alert('block');">버튼2</button>

    <script>
        function alert(parameter) {
            document.getElementById('alert').style.display = parameter;
        }
    </script>

</body>
</html>

 

변경된코드

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

    <div class="alert-box" id="alert">
        <p id="title">알림창임</p>
        <button onclick="alert('none');">닫기</button>
    </div>
    <button onclick="alertId('아이디를 입력하세요', 'block');">버튼1</button>
    <button onclick="alertId('비밀번호를 입력하세요', 'block');">버튼2</button>

    <script>
        function alert(parameter) {
            document.getElementById('alert').style.display = parameter;
        }

        function alertId(parameter1, parameter2) {
            document.getElementById('title').innerHTML = parameter1;
            document.getElementById('alert').style.display = parameter2;
        }
    </script>

</body>
</html>

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

6. 서브메뉴 만들어보기와 classList 다루기  (1) 2024.11.12
5. 이벤트리스너  (1) 2024.11.07
3. function 사용법  (2) 2024.11.06
2. UI 만드는 법칙, 동적 UI 만들기(Alert 박스)  (0) 2024.11.04
1. 자바스크립트 근본  (4) 2024.11.04
'JavaScript/Level1' Related Articles more