자바스크립트 예제 모음 초보자도 쉽게 따라하기

자바스크립트는 웹 개발에서 매우 중요한 언어입니다. 다양한 기능을 구현할 수 있어 많은 사람들이 배우고 활용하고 있습니다. 이번 글에서는 실생활에서 유용하게 사용할 수 있는 자바스크립트 예제를 모아서 소개하겠습니다. 각각의 예제는 간단하면서도 실제 활용도가 높아 초보자도 쉽게 따라할 수 있습니다.

자바스크립트 예제 모음

간단한 알림창 만들기

가장 기본적인 자바스크립트 예제는 바로 알림창입니다. 사용자가 웹페이지를 방문했을 때 간단한 메시지를 보여줄 수 있습니다.

alert('환영합니다!');

이 예제는 웹페이지를 열었을 때 "환영합니다!"라는 메시지를 띄우는 아주 간단한 코드입니다. 팝업처럼 보이기 때문에 사용자에게 무언가를 알릴 때 자주 사용됩니다.

버튼 클릭 시 텍스트 바꾸기

웹페이지에서 버튼을 누르면 텍스트가 바뀌도록 만들 수 있습니다. 아래는 그 예시입니다.

<p id="demo">변경 전 텍스트</p>
<button onclick="changeText()">눌러보세요</button>

<script>
function changeText() {
  document.getElementById('demo').innerHTML = '변경된 텍스트입니다!';
}
</script>

이 코드를 사용하면 버튼을 누를 때마다 텍스트가 바뀌어 인터랙션을 주기 좋습니다.

현재 시간 표시하기

현재 시간을 실시간으로 표시하는 자바스크립트도 유용하게 쓰입니다.

<p id="clock"></p>

<script>
function showTime() {
  let date = new Date();
  document.getElementById("clock").innerHTML = date.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>

이 예제는 1초마다 시간을 갱신해줍니다. 디지털 시계처럼 동작해 보는 재미도 있습니다.

숫자 맞추기 게임

간단한 게임도 만들 수 있습니다. 사용자가 숫자를 맞추는 게임입니다.

let number = Math.floor(Math.random() * 10) + 1;
let guess = prompt("1부터 10까지 숫자 중 하나를 맞춰보세요!");

if (parseInt(guess) === number) {
  alert("정답입니다!");
} else {
  alert("틀렸어요. 정답은 " + number + "입니다.");
}

무작위 숫자를 생성해 맞추는 방식으로, 자바스크립트의 기본 문법을 익히기에 딱 좋습니다.

배경색 바꾸기

웹페이지 배경색을 버튼 클릭으로 바꾸는 예제도 있습니다.

<button onclick="changeBgColor()">배경색 바꾸기</button>

<script>
function changeBgColor() {
  document.body.style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
}
</script>

이 코드는 버튼을 클릭할 때마다 랜덤한 색으로 배경을 바꿔 다양한 분위기를 연출할 수 있습니다.

자바스크립트 예제 비교 표

예제명	활용도	난이도	특징
알림창	높음	매우 쉬움	사용자 알림용
텍스트 바꾸기	중간	쉬움	버튼 클릭 반응형 요소
현재 시간 표시	높음	보통	실시간 갱신 기능
숫자 맞추기 게임	중간	보통	기본 게임 논리 구성
배경색 바꾸기	중간	쉬움	랜덤 색상 생성으로 시각적 재미 제공

입력값 받아 처리하기

사용자의 입력값을 받아서 처리하는 예제도 꼭 필요합니다.

<input type="text" id="username" placeholder="이름을 입력하세요">
<button onclick="greetUser()">인사하기</button>

<script>
function greetUser() {
  let name = document.getElementById('username').value;
  alert("안녕하세요, " + name + "님!");
}
</script>

이런 식으로 사용자의 입력을 받아 동적으로 응답할 수 있어 유용합니다.

간단한 계산기 만들기

덧셈을 할 수 있는 간단한 계산기를 만들어볼 수도 있습니다.

<input id="num1" type="number"> +
<input id="num2" type="number">
<button onclick="addNumbers()">계산하기</button>
<p id="result"></p>

<script>
function addNumbers() {
  let a = parseInt(document.getElementById('num1').value);
  let b = parseInt(document.getElementById('num2').value);
  document.getElementById('result').innerText = '결과: ' + (a + b);
}
</script>

간단한 수학 연산을 통해 자바스크립트의 실용성을 확인할 수 있습니다.

배열 반복 출력

배열에 있는 값을 하나씩 출력하는 방법도 자주 사용됩니다.

let fruits = ['사과', '바나나', '오렌지'];
fruits.forEach(function(fruit) {
  console.log(fruit);
});

이 예제는 배열에 있는 과일 이름을 하나씩 출력하는 기본적인 반복문 사용 예입니다.

마우스 오버로 이미지 바꾸기

마우스를 올렸을 때 이미지를 바꾸는 인터랙션도 만들 수 있습니다.

<img src="img1.jpg" id="image" 
onmouseover="this.src='img2.jpg'" 
onmouseout="this.src='img1.jpg'">

시각적 변화를 줄 수 있어 사용자 경험 향상에 도움됩니다.

---

결론

자바스크립트는 다양한 기능을 짧고 간단한 코드로 구현할 수 있어 매우 유용한 언어입니다. 알림창, 텍스트 변경, 시간 표시, 게임, 배경색 변경 등 여러 예제를 통해 자바스크립트의 기초를 익힐 수 있습니다. 특히 실생활에서 바로 써먹을 수 있는 예제는 학습 효과도 크고 재미도 느낄 수 있습니다. 처음 시작하는 사람도 하나씩 따라해 보면서 흥미롭게 배울 수 있습니다.

자바스크립트 예제 모음 FAQ

 

Q. 자바스크립트 예제는 무엇인가요?

A. 자바스크립트 예제는 웹 페이지에서 다양한 동작을 구현하기 위한 코드 샘플입니다.

Q. 자바스크립트 예제를 어디에 사용할 수 있나요?

A. 자바스크립트 예제는 웹사이트 개발, 사용자 인터랙션, 게임, 계산기 등 다양한 분야에서 사용됩니다.

Q. 자바스크립트 예제의 활용 방법은?

A. HTML 문서에 스크립트를 삽입하거나 외부 JS 파일을 연결하여 활용할 수 있습니다.