생각 작업실 The atelier of thinking

28.<JavaScript> 함수(function) 란? 본문

웹(Web) 이야기

28.<JavaScript> 함수(function) 란?

knowledge-seeker 2024. 3. 17. 21:01

앞서 JavaScript의 변수에 대해서 알아봤습니다. 이번 회차에는 JavaScript 함수에 대해 알아보겠습니다.

 

1. 함수(Function)란 ?

 

함수란 특정 작업을 수행하도록 설계된 코드블록을 말합니다.
이러한 함수는 필요한 작업에서 호출할 때 실행됩니다.


함수는 우리가 수학에서 만나봤을 겁니다.


"함수는 입력값에 따라 출력값을 만들어 내는 블랙박스와 같다."

 

이 말은 JavaScript 함수에도 똑같이 적용됩니다. 그뿐아니라, 거의 모든 프로그래밍 언어에 함수라는 도구를 사용합니다.

자바스크립트에서 함수는 코드를 재사용하고 구조화하기 위한 핵심적인 구성 요소입니다. 함수는 일련의 작업을 수행하는 코드 블록이며, 이를 호출하여 코드를 실행할 수 있습니다. 함수는 매개변수(parameter)를 받아들일 수 있고, 결과값을 반환할 수도 있습니다.

 

2. 함수 선언 - Function Declaration

 

function 함수이름(매개변수1,매개변수2,...) {
          함수가 호출되었을 때 실행하고자 하는 실행문 ;
}

 

함수를 정의한다고 알리는 의미로 시작을 "function" 으로 시작합니다.
그 뒤에 함수이름을 정하고 괄호( )를 열고 안에 매개변수를 넣어준 후, 중괄호 [ } 안에 함수가 호출되었을 때의 실행문을 넣어줍니다.

 

3. 함수 호출

 

function myFunction(a, b) {
  return a * b;
}
myFunction(3,4);
12

 

위 예시에서 함수이름은 "myFunction"이고 a,b는 매개변수(parameter)입니다.
출력값은 "a X b" 입니다.
위 함수를 호출할 때는 "myFunction(3,4);" 로 함수이름을 사용합니다.
이 때 출력값은 12이고, 3,4는 인수(argument)라고 부릅니다.

매개변수(parameter)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수를 의미하고, 인수(argument)란 함수가 호출될 때 함수로 값을 전달해 주는 값을 말합니다.

"return"은 함수의 출력값을 반환합니다.

 

4. 모달예제에 함수 적용

 

(1) 이전 예제

<h2>Image Modal</h2>

<p> Modal</p>
<p> 1. HTML에 이미지와 모달창을 만든다.</p>

<img id="myImg" src="images/image2.jpg" alt="Snow" style="width:100%;max-width:300px" 
 onclick = "document.getElementById('myModal').style.display = 'block';
            document.getElementById('img01').src = document.getElementById('myImg').src
 " >

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" onclick="document.getElementById('myModal').style.display = 'none';">
   &times;</span>
  <img class="modal-content" id="img01">
  
</div>

 

<img> 태그와 <span> 태그 안의 JavaScript 구문을 따로 떼어냅니다.

 

(2) 함수 적용

 

<h2>Image Modal</h2>

<p> Modal</p>
<p> 1. HTML에 이미지와 모달창을 만든다.</p>

<img id="myImg" src="images/typewriter.jpg" style="width:100%;max-width:300px" 
 onclick = "modalopen()"; >

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close" onclick="modalclose()";>&times;</span>
  <img class="modal-content" id="img01">  
</div>

<p> 2. CSS를 이용하여 모달창을 디자인한다.</p>
<p> 우선 display : none 으로 숨겨 놓는다.</p>
<p> 클릭 했을 때 modal-content에 이미지가 들어오게끔 만들어야 한다. </p>

<p> 3. JavaScript를 이용하여 클릭하면 모달창을 띄우게 한다. </p>
<p> 원리는 클릭하면 모달창의 display : none 을 block 으로 바꾸게 만들면 된다. <br>
    x 를 누르면 다시 none으로 바꾸면 됩니다.
</p>
<script>
  var modal = document.getElementById("myModal");
  var img = document.getElementById("myImg");
  var modalImg = document.getElementById("img01");

  function modalopen() {
    modal.style.display='block';
    modalImg.src = img.src;
  }

  function modalclose() {
    modal.style.display = 'none';    
  }
</script>

 

<script> </script> 태그 안에 <HTML>안에서 적용했던 JavaScript 구문을 넣습니다.

▶ 변수사용

var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");

 

변수에 위 내용을 담습니다.

 

▶ 함수 선언

 

모달을 오픈하는 함수를 "modalopen" 이라고 정했습니다.

 

function modalopen() {
    modal.style.display='block';
    modalImg.src = img.src;
  }

 

실행문으로 modal을 나타내고, modal 안 이미지 src를 클릭한 img.src로 바꿔주는 코드입니다.

모달을 닫는 함수를 "modalclose"라 정했습니다.

 

function modalclose() {
    modal.style.display = 'none';    
  }

 

▶ 함수 호출

<img> 태그 onclick 속성값으로 함수 "modalopen( )" 을 넣어줍니다.

 

<img id="myImg" src="images/typewriter.jpg" 
     style="width:100%;max-width:300px" 
     onclick = "modalopen()"; >

 

<span> 태그 onclick 속성값으로 함수 "modaclose( )" 을 넣어줍니다.

 

<span class="close" onclick="modalclose()";>&times;</span>

 

 

앞선 예제와 똑같이 작동합니다.

함수는 코드를 재사용하고 구조화하기 위한 시작단계입니다.
이렇게 만들어진 함수는 호출로 다른 태그에도 적용하여 사용할 수 있습니다.

 

'웹(Web) 이야기' 카테고리의 다른 글

30.<JavaScript> 기본 자료형 (Data Type)  (0) 2024.03.21
29. <JavaScript> 배열 Array  (0) 2024.03.19
27.<JavaScript> 변수(Variable) : 모달 Modal  (0) 2024.03.14
26. <CSS> display 속성 : 모달(Modal)  (0) 2024.03.13
25. <HTML> 특수문자 - 엔티티코드  (0) 2024.03.09
'웹(Web) 이야기' Related Articles more