JavaScript 썸네일 이미지

JavaScript 웹 사이트에 동적 기능 추가하기

by
JavaScript

javascript 웹 사이트에 동적 기능 추가하기 방법에 대해 알려드리겠습니다. 자바스크립트는 버튼, 양식, 팝업, 애니메이션 같은 움직이는 요소들을 가능하게 해주며 html과 css와 함께 웹 페이지를 구성하는 핵심 기술이라고 할 수 있습니다. js 기능을 사용하면서 단조롭던 페이지를 더욱 풍성하게 설계해 보시면 좋을 것 같습니다.

자바스크립트란?

JS는 웹페이지 상에서 움직이는 동적 콘텐츠를 만드는데 사용되는 언어입니다. html과 css로 사이트의 뼈대와 스타일을 지정해 준다면 javascript는 동작을 할 수 있게 해줍니다. 보통은 아래와 같은 기능을 구현합니다.

  • 대화형 : 사용자의 입력
  • 애니메이션 : 이동, 페이드인 효과, 슬라이드
  • 이벤트 처리 : 클릭 같은 사용자 행동에 대한 응답

웹 사이트에 JavaScript 설정하기

사이트 코드에 자바를 입력할 때 인라인, 내부, 외부에 어떤 방식으로 입력하게 되는지 참고하시기 바랍니다.

1. 인라인

‘onclick’이라는 속성을 이용해 html 태그에 자바스크립트를 직접 추가할 수 있습니다.

<button onclick="alert('Hello, World!')">Click Me</button>

2. 내부

html 코드 내에 <script>라는 태그 안에 자바 코드를 넣어줍니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Internal JavaScript Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <script>
    document.getElementById("myButton").onclick = function () {
      alert("Button Clicked!");
    };
  </script>
</body>
</html>

3. 외부

자바 스크립트 코드를 ‘.js’ 파일로 저장하고 html에 연결해 주는 방식입니다.

  • index.html
<!DOCTYPE html><html lang="en"><head>
  <title>External JavaScript Example</title>
  <script src="script.js" defer></script></head><body>
  <button id="myButton">Click Me</button></body></html>
  • script.js
document.getElementById("myButton").onclick = function () {
  alert("External JS Button Clicked!");
};

JavaScript 동적 기능 추가하기

1. 이벤트 처리

java script는 클릭, 마우스 오버, 호버, 키 입력 같은 이벤트 내용을 실행해 줍니다.

  • 버튼 클릭 알림 메시지
document.querySelector("button").addEventListener("click", () => {
  alert("Button clicked!");
});

2. DOM 조작

html과 css를 동적 기능으로 수정해서 웹 페이지 안에서 대화형으로 진행할 수 있습니다.

  • 텍스트 내용 변경
document.getElementById("demo").innerHTML = "Text changed with JavaScript!";
  • html
<p id="demo">Original text</p><button onclick="changeText()">Change Text</button>
  • js
function changeText() {
  document.getElementById("demo").innerHTML = "Text updated!";
}

3. 양식 확인

최종으로 양식을 제출하기 전에 사용자가 제대로된 데이터를 입력했는지 확인할 수 있습니다.

  • html
<form id="myForm">
  <input type="text" id="username" placeholder="Enter username" required>
  <button type="submit">Submit</button></form><p id="error-message"></p>
  • js
document.getElementById("myForm").addEventListener("submit", function (e) {
  const username = document.getElementById("username").value;
  if (username.length < 5) {
    document.getElementById("error-message").innerText = "Username must be at least 5 characters.";
    e.preventDefault(); // Prevent form submission
  }
});

4. 애니메이션 효과

애니메이션 효과를 만들어 좀 더 역동적이고 시선이 가는 사이트를 만들어 줄 수 있습니다.

  • 페이드 효과
    • html
<div id="box" style="width: 100px; height: 100px; background: red;"></div><button id="fadeButton">Fade Out</button>
  • 자바스크립트
document.getElementById("fadeButton").onclick = function () {
  const box = document.getElementById("box");
  let opacity = 1;
  const fade = setInterval(() => {
    if (opacity <= 0) {
      clearInterval(fade);
      box.style.display = "none";
    } else {
      opacity -= 0.1;
      box.style.opacity = opacity;
    }
  }, 100);
};

5. 대화형 메뉴

대화형 방식(list)의 메뉴는 자주 사용하기 때문에 알아두시는 것이 좋습니다.

  • html 
<ul id="menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li></ul><button id="toggleMenu">Toggle Menu</button>
  • javascript
document.getElementById("toggleMenu").onclick = function () {
  const menu = document.getElementById("menu");
  menu.style.display = menu.style.display === "none" ? "block" : "none";
};

JavaScript 기능 FAQ

자바스크립트 코드는 어떻게 디버깅 하나요?

브라우저 개발자 도구(단축키 F12 or 마우스 우클릭 ‘검사’)를 열어 콘솔 검사, 스크립트 디버그 후 오류를 확인 및 수정할 수 있습니다.

js 애니메이션으로 css 애니메이션을 대체할 수 있나요?

자바스크립트(js) 애니메이션이 더 복잡한 기능에 유리하고 css 애니메이션은 간단한 효과에 사용하는 것이 적합합니다.

자바 스크립트 프레임워크가 필요한가요?

일반 자바로도 대부분의 기능을 구현하기 때문에 굳이 없어도 됩니다. 아니면 react나 vue.js 같은 프레임워크로는 큰 프로젝트에 효과적으로 쓰일 수 있습니다.

총 정리

java script는 생동감 있고 가독성 좋은 웹 사이트를 꾸미기에 좋은 도구로 자바의 여러 기능들을 익혀서 페이지 사용성을 더 높여줄 수 있으니 본문에서 정리한 기초적인 내용을 연습해본 뒤 더 응용된 코드를 활용해 보시면 좋을 것 같습니다.

Leave a Comment