-
초코의 풀스택 도전기 15: 자바스크립트, 웹의 숨은 마법사스토리텔링 2024. 10. 16. 10:17
1. 들어가면서
초코는 그동안 HTML과 CSS를 사용해 웹페이지를 만드는 법을 배웠다. 구조를 짜고, 멋지게 꾸밀 수 있었지만, 여전히 무언가가 빠진 것 같았다. 웹페이지는 보기에는 좋았지만, 사용자가 상호작용할 수 있는 기능이 없었기 때문이다.
"멘토님, 제가 만든 웹페이지가 멋지긴 한데, 버튼을 클릭해도 아무 반응이 없어요. 뭔가 상호작용하는 기능을 추가하고 싶은데, 어떻게 해야 할까요?"
멘토는 고개를 끄덕이며 말했다.
"좋은 질문이야, 초코야. 지금까지 배운 HTML과 CSS는 웹페이지의 기본적인 틀을 만들고 꾸미는 데 필요한 언어들이야. 하지만 이 두 가지만으로는 사용자가 웹페이지와 상호작용할 수 없어. 그걸 가능하게 만드는 게 바로 자바스크립트야. 자바스크립트는 웹페이지에 '생명'을 불어넣는 마법 같은 언어라고 할 수 있지. 오늘은 자바스크립트를 왜 배워야 하고, 어떻게 사용하는지 알아보자."2. 자바스크립트란?
초코는 자바스크립트라는 언어가 어떤 역할을 하는지 궁금해했다.
"자바스크립트는 무엇을 하는 언어인가요?"
멘토가 설명했다.
"자바스크립트는 웹페이지가 사용자와 상호작용할 수 있도록 해주는 프로그래밍 언어야. 예를 들어, 버튼을 클릭했을 때 화면에 메시지를 띄우거나, 입력된 데이터를 처리하는 등의 작업을 자바스크립트로 구현할 수 있어. 간단한 예시를 보여줄게."<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트 예제</title> </head> <body> <h2>자바스크립트 예제</h2> <button id="myButton">눌러보세요</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('버튼이 클릭되었습니다!'); }); </script> </body> </html>코드 설명:
- <button id="myButton">눌러보세요</button>
- 이 코드는 웹페이지에 버튼을 추가한다. 이 버튼에는 id="myButton" 속성이 붙어 있어서, 자바스크립트가 이 버튼을 선택하고 조작할 수 있게 된다.
- document.getElementById('myButton')
- 자바스크립트 코드에서 document.getElementById()는 HTML 요소를 찾는 메서드이다. 여기서는 id가 myButton인 버튼을 선택한다.
- addEventListener('click', function() {...})
- 이 코드는 선택된 버튼에 클릭 이벤트 리스너를 추가한다. 사용자가 버튼을 클릭했을 때 어떤 동작을 할지 정의하는 부분입니다. 여기서는 버튼을 클릭하면 함수가 실행된다.
- alert('버튼이 클릭되었습니다!')
- 사용자가 버튼을 클릭하면 경고창(alert)이 뜨면서 '버튼이 클릭되었습니다!'라는 메시지를 보여준다. 이 경고창은 자바스크립트의 alert() 메서드를 사용한 것이다.
초코는 버튼을 눌러보았고, 경고창이 뜨는 것을 보고 놀랐다.
"우와, 버튼을 클릭하니까 경고창이 뜨네요! 이런 걸 자바스크립트로 할 수 있는 거군요."멘토가 미소를 지으며 설명을 이어갔다.
"맞아. 이 코드는 아주 간단한 예시야. 자바스크립트를 통해 버튼 클릭 이벤트를 감지하고, 그에 맞는 동작을 실행할 수 있는 거지. HTML로 버튼을 만들고, 자바스크립트로 그 버튼이 클릭되었을 때 어떤 일을 할지 지정한 거야."3. 자바스크립트의 역할
초코는 자바스크립트가 정확히 어떤 역할을 하는지 궁금해졌다.
"그럼 자바스크립트는 정확히 어떤 일을 하는 건가요? HTML과 CSS만으로는 안 되는 건가요?"
멘토는 고개를 끄덕였다.
"HTML은 웹페이지의 구조를 만들고, CSS는 그 구조를 꾸며주지. 하지만 자바스크립트는 그 페이지를 '동적(dynamic)'으로 만들어줘. 예를 들어, 버튼을 클릭하거나, 사용자가 특정 정보를 입력했을 때, 그에 따른 반응을 보여주는 역할을 하지. 자바스크립트가 없다면 웹페이지는 정적인 상태로만 머물게 돼."멘토는 또 다른 예시를 보여주었다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>실시간 시간 업데이트</title> </head> <body> <h2>현재 시간: <span id="time"></span></h2> <script> function displayTime() { const now = new Date(); document.getElementById('time').textContent = now.toLocaleTimeString(); } setInterval(displayTime, 1000); // 1초마다 시간 업데이트 </script> </body> </html>코드 설명:
- <span id="time"></span>
- 이 부분은 시간 데이터를 화면에 표시할 영역이다. id="time" 속성을 부여해서 자바스크립트가 이 요소를 선택하고, 시간을 갱신할 수 있게 한다.
- function displayTime() {...}
- displayTime이라는 함수를 정의한 부분이다. 이 함수는 현재 시간을 가져와서 id가 time인 요소에 표시한다.
- new Date()
- 자바스크립트의 Date 객체는 현재 날짜와 시간을 가져오는 기능을 한다. new Date()를 호출하면 현재 날짜와 시간이 반환된다.
- toLocaleTimeString()
- 이 메서드는 Date 객체에서 시간 부분을 읽어와서 사용자가 살고 있는 지역에 맞는 형식으로 시간 문자열을 생성한다.
- document.getElementById('time').textContent = now.toLocaleTimeString();
- 이 코드는 HTML에서 id가 time인 요소를 찾아서, 그 안에 now.toLocaleTimeString()으로 가져온 현재 시간을 표시하는 코드이다. 여기서 textContent는 요소 안의 텍스트 내용을 변경할 때 사용된다.
- setInterval(displayTime, 1000)
- setInterval()은 일정 시간 간격마다 함수를 실행하도록 예약하는 메서드이다. 여기서는 1초(1000 밀리초)마다 displayTime 함수를 실행하여 시간이 갱신되도록 설정했다.
초코는 1초마다 시간이 업데이트되는 것을 보고 감탄했다.
"정말 실시간으로 변하네요! 이런 기능도 자바스크립트로 구현할 수 있군요."멘토는 설명을 덧붙였다.
"그래, 자바스크립트는 사용자의 행동이나 특정 조건에 따라 웹페이지의 내용을 실시간으로 변경할 수 있어. setInterval을 사용해 1초마다 시간을 갱신하고 있지. 이런 식으로 자바스크립트를 활용하면 더 다양한 상호작용을 만들 수 있어."4. 자바스크립트, HTML, CSS와의 연계
초코는 자바스크립트가 HTML과 CSS와 어떻게 연계되는지 궁금했다.
"자바스크립트는 HTML과 CSS랑 어떻게 같이 쓰이나요?"
멘토는 간단한 예시를 들어 설명했다.
"자바스크립트는 HTML로 만든 요소를 선택해서 그 속성을 변경할 수 있고, CSS 스타일도 동적으로 바꿀 수 있어. 예를 들어, 버튼을 클릭했을 때 그 버튼의 색깔을 바꾸거나, 새로운 내용을 추가할 수도 있지."<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>자바스크립트로 CSS 조작하기</title> <style> #colorButton { padding: 10px; background-color: lightblue; border: none; cursor: pointer; } </style> </head> <body> <h2>버튼 색상 변경 예제</h2> <button id="colorButton">색상 변경</button> <script> document.getElementById('colorButton').addEventListener('click', function() { this.style.backgroundColor = 'lightgreen'; }); </script> </body> </html>코드 설명:
- <button id="colorButton">색상 변경</button>
- 이 코드는 웹페이지에 버튼을 생성한다. id="colorButton" 속성을 통해 이 버튼을 자바스크립트로 선택하여 조작할 수 있게 된다.
- document.getElementById('colorButton')
- 이 코드로 id가 colorButton인 버튼을 선택한다.
- addEventListener('click', function() {...})
- 클릭 이벤트 리스너를 설정하여, 사용자가 버튼을 클릭했을 때 실행할 동작을 지정한다.
- this.style.backgroundColor = 'lightgreen';
- this는 이벤트가 발생한 요소, 즉 클릭된 버튼을 의미한다. 여기서는 버튼의 backgroundColor 속성을 lightgreen으로 변경하고 있다. 이를 통해 사용자가 버튼을 클릭할 때마다 버튼의 배경색이 lightblue에서 lightgreen으로 바뀐다.
초코는 버튼을 클릭해보았다. 버튼의 색깔이 바뀌는 것을 보고 놀랐다.
"우와! 클릭하자 버튼 색깔이 바뀌네요. 자바스크립트로 CSS도 조작할 수 있군요."멘토는 고개를 끄덕이며 설명했다.
"맞아. 자바스크립트를 통해 HTML 요소의 스타일을 동적으로 변경할 수 있어. HTML과 CSS는 기본적인 구조와 스타일을 제공하지만, 자바스크립트는 그 구조와 스타일을 상황에 맞게 실시간으로 바꿔줄 수 있지."5. 자바스크립트를 배워야 하는 이유
초코는 자바스크립트를 꼭 배워야 하는 이유가 궁금했다.
"그럼 자바스크립트를 왜 꼭 배워야 하나요? HTML과 CSS만으로는 부족한 건가요?"
멘토는 진지하게 설명을 이어갔다.
"자바스크립트는 웹 개발에서 필수적인 언어야. HTML과 CSS만으로는 웹페이지가 단순한 '정적 페이지'로 남을 수밖에 없어. 사용자가 웹페이지와 상호작용하고, 서버와 통신하고, 실시간 데이터를 처리하는 등 동적인 기능을 구현하려면 자바스크립트가 필수적이지. 또한, 자바스크립트는 프론트엔드뿐만 아니라 백엔드에서도 사용할 수 있어. Node.js라는 환경에서는 자바스크립트로 서버도 프로그래밍할 수 있거든."초코는 자바스크립트의 중요성을 실감했다.
"그러면 자바스크립트를 잘 배워두면 프론트엔드와 백엔드 모두 활용할 수 있겠네요!"멘토는 웃으며 말했다.
"맞아. 자바스크립트를 잘 익히면 풀스택 개발자가 되는 데 큰 도움이 될 거야. 이제 자바스크립트의 기초부터 차근차근 배워보자. 오늘은 기본적인 개념만 다뤘지만, 앞으로 더 많은 기능과 개념을 배우게 될 거야."'스토리텔링' 카테고리의 다른 글
초코의 풀스택 도전기 17: 조건문과 반복문으로 흐름을 제어하다 (0) 2024.10.20 초코의 풀스택 도전기 16: 자바스크립트에서 변수와 데이터 타입을 이해하다 (0) 2024.10.17 프로그래밍이란? 왜 배워야 할까? (5) 2024.10.10 초코의 풀스택 도전기 14: 반응형 이미지와 비디오 다루기 (2) 2024.10.09 초코의 풀스택 도전기 13: 웹 접근성을 고려한 CSS 적용 방법 (0) 2024.10.08 - <button id="myButton">눌러보세요</button>