Chapter 6. JavaScript 기초 & 인터랙션 : 내 웹에 생명 불어넣기 | Notion

간단한 JavaScript 활용으로 포트폴리오에 생동감 있는 효과를 입혀봅니다. 초보자를 위한 실습 위주로 구성되었습니다.

6-1. JavaScript 기본 개념

JavaScript는 웹사이트를 동적으로 만들어주는 언어입니다.

HTML이 구조를 만들고, CSS가 디자인을 담당한다면 JavaScript는 사용자와의 상호작용을 처리합니다.

예를 들어,

버튼을 눌렀을 때 팝업이 뜨고
슬라이드가 자동으로 움직이고
로그인 폼이 유효한지 검사하는 것 이런 것들이 모두 JavaScript의 역할입니다.

6-1-1. JavaScript를 웹에 추가하는 3가지 방법

HTML 태그 안에서 직접 작성 : 인라인 방식

HTML 요소에 직접 onclick, onmouseover 같은 이벤트 속성으로 JavaScript를 씁니다.

<aside>

<button onclick='alert("Hello!")'>event call</button>

</aside>
- 장점 : 간단한 테스트에 좋습니다.
- 단점 : 코드가 지저분해지고 유지 보수가 어렵습니다.
HTML 안에 <script> 태그로 작성 : 내부 스크립트

HTML 파일 내 <script> 태그를 이용하여 JavaScript 코드를 직접 작성합니다.

<aside>

<button id="btn">event call</button>

<script> document.getElementById("btn").addEventListener("click", function(){ alert("Hello!"); }; </script>

</aside>
- 장점 : 학습용, 작은 프로젝트에 유용합니다.
- 주의 : <script>는 보통 <body> 끝에 두는 것이 좋습니다. DOM 요소 로딩 후 실행되도록 합니다.
외부 파일로 분리해서 추가 : JavaScript 파일 사용

가장 권장되는 방식입니다.

JavaScript를 별도의 파일로 저장하고 HTML에서 불러옵니다.

<aside>

<script src="script.js"></script>

</aside>