27.<JavaScript> 변수(Variable) : 모달 Modal

1. 모달의 <JavaScript> 부분

 

 

2024.03.05 - [웹(Web) 이야기] - 24. 예제 - 모달 Modal

24. <JavaScript> 예제 - 모달 Modal

 

 

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>

 

위 코드의 핵심은 모달 부분의 CSS display 속성을 클릭때마다 "block"과 "none"으로 바꿔서 요소를 나타내고 사라지게 하는 것입니다.
JavaScript의 기본 문법과 구문을 통하여 알아보겠습니다.

 

---

2. JavaScript Inline

 

JavaScript inline 은 JavaScript 코드를 HTML 문서 내에서 직접 작성하는 것을 의미합니다. 일반적으로 <script> 태그 내부에 JavaScript 코드를 작성하여 사용하게 됩니다.

JavaScript가 어떻게 작동하는 지 직관적으로 볼 수 있습니다.
모달의 HTML 문서내에 직접 작성하면 아래와 같습니다.

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

<p> 3. JavaScript를 이용하여 클릭하면 모달창을 띄우게 한다. </p>
<p> 원리는 클릭하면 모달창의 display : none 을 block 으로 바꾸게 만들면 된다. <br>
    x 를 누르면 다시 none으로 바꾸면 됩니다.
</p>
</body>
</html>

 

HTML img 태그 안 onclick 속성에 JavaScript 구문을 직접 넣었습니다.
사진을 클릭하면 모달의 display를 none에서 block으로 바꾸는 구문입니다.
"document.getElementById('myModal').style.display = 'block';"

 

2024.03.04 - [웹(Web) 이야기] - 23. 제어할 태그

23. <JavaScript> 제어할 태그

 

앞서 제어할 태그를 선택하는 방법으로 getElementById('myModal') 을 선택하고, display 속성은 CSS이므로 style.display에 대한 값으로 "block"을 넣어줍니다.
이로써 그림을 클릭하면 모달창이 나타나게 됩니다.

 

"document.getElementById('myModal').style.display = 'none';" 은 x 를 클릭하면 모달의 display를 다시 none으로 바꿔 모달창을 닫습니다.

"document.getElementById('img01').src = document.getElementById('myImg').src" 은 그림을 모달안의 그림으로 바꿔주는 코드입니다.

JavaScript inline은 HTML 파일 내에서 JavaScript 코드를 직접 작성하여 사용하는 방법 으로 간단한 스크립트를 사용할 때 편리합니다. 하지만, 여러 요소에 적용하기 위해서는 외부 파일로 분리하여 관리하는 것이 좋습니다. 또한 JavaScript inline은 HTML과 강하게 결합되어 유지보수가 어려울 수 있으므로, 코드가 복잡해지면 외부 파일로 분리하여 관리하는 것이 좋습니다.

 

---

3. 변수(Variable)

위 JavaScript inline 형태로도 모달을 작동하게 할 수 있습니다. 하지만, 보다 효율적으로 사용하기 위해서는 외부파일로 분리하여 관리하는 것이 좋습니다.
코드를 간결하고 효율적으로 사용하기 위해서는 JavaScript의 문법에 대해 알아두면 좋습니다.
이번회차에는 변수에 대해 알아보고자 합니다.

(1) 변수(Variable)란

변수는 데이터를 저장하기 위한 장소입니다. 그래서 그릇이라고 하기도 하고 컨테이너라 말하기도 합니다. 이 변수라는 개념은 거의 대부분의 컴퓨터 프로그래밍 언어에서 같은 의미로 사용하기 때문에 한 번 잘 알아두면 다른 언어를 배울 때에도 유용하게 사용할 수 있습니다.

변수를 사용하는 이유는 값을 변경하고 변경된 값을 적용하는데 좀 더 효율적이고 쉽게 작업하는데 용이하기 때문입니다. "코드의 재활용성과 가독성을 높여주고 중복을 제거하여 유지보수가 용이하기 때문입니다" 라고 말하기도 합니다.

(2) 변수선언방법

변수를 사용하기 전에 반드시 선언해야 합니다. 변수 선언은 var, let, const 키워드를 사용하여 수행됩니다.

- var: 전역 변수 또는 지역 변수를 선언합니다.
( ES5 이전에 사용되었으며, 현재는 let과 const를 사용하는 것이 권장됩니다.)
- let: 블록 범위의 변수를 선언합니다. 변수의 값을 나중에 변경할 수 있습니다.
- const: 블록 범위의 상수를 선언합니다. 변수의 값을 한 번만 할당할 수 있습니다.

 

let x; // 변수 x를 선언
let y = 10; // 초기값을 가지고 선언
const PI = 3.14; // 상수 선언

 

(3) 대입연산자

자바스크립트에서 대입 연산자(assignment operator)는 변수에 값을 할당하는 데 사용됩니다. 대입 연산자는 변수 이름과 값을 할당하려는 값 사이에 등호(=)를 사용하여 표현됩니다.

가장 일반적인 대입 연산자는 단순 대입 연산자(=)입니다. 이 연산자는 오른쪽의 피연산자 값을 왼쪽의 피연산자(변수)에 할당합니다.

위 모달 예제에서 아래는 대입연산자를 통해 오른쪽 내용을 왼쪽의 변수에 할당한 것입니다.

 

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

 

변수를 사용하면 아래의 두 코드는 같은 내용입니다.

 

modal.style.display = "block";
"document.getElementById('myModal').style.display = 'block';"

 

(4) 변수 이름 규칙

변수 이름은 특정 규칙을 따라야 합니다. 변수 이름은 문자, 숫자, 밑줄(_) 및 달러 기호($)로 시작할 수 있습니다. 대소문자를 구분하며, 예약어를 사용할 수 없습니다.

 

let myVar; // 유효한 변수 이름
let 123var; // 유효하지 않은 변수 이름 (숫자로 시작)