자바스크립트(JavaScript) 소개

티스토리 뷰

Front-End-Web/javascript

자바스크립트(JavaScript) 소개

jsBae 2026. 7. 4. 14:40

1. 자바스크립트의 역할

웹페이지는 보통 HTML, CSS, JavaScript가 함께 사용되어 만들어진다.

HTML은 웹페이지의 구조(structure)를 만든다
CSS는 웹페이지의 디자인(style)을 꾸민다.
JavaScript는 웹페이지에 동작과 상호작용(interaction)을 추가한다.

즉, 자바스크립트는 사용자가 버튼을 클릭하거나, 글자를 입력하거나, 화면을 스크롤하거나, 데이터를 검색할 때 웹페이지가 반응하도록 만드는 언어이다.

예를 들어 HTML과 CSS만 사용하면 정적인 안내문이나 소개 페이지를 만들 수 있다. 그러나 버튼을 눌렀을 때 문구가 바뀌거나, 메뉴가 열리고 닫히거나, 검색 결과가 화면에 나타나도록 만들려면 JavaScript가 필요하다.

2. 자바스크립트로 할 수 있는 일

2.1 화면 내용을 바꿀 수 있다

자바스크립트는 웹페이지 안의 글자, 이미지, 버튼, 목록 등을 바꿀 수 있다. 이를 DOM 조작(DOM manipulation)이라고 한다.

예를 들어 버튼을 클릭하면 다음과 같은 동작을 만들 수 있다.

<p id="message">처음 문구입니다.</p>
<button onclick="changeText()">문구 변경</button>

<script>
  function changeText() {
    document.getElementById("message").textContent = "버튼을 클릭하였습니다.";
  }
</script>

위 코드는 버튼을 클릭하면 <p> 태그의 문구를 새로운 문장으로 변경한다.
여기서 JavaScript는 HTML 문서 안의 특정 요소를 찾아 내용을 바꾸는 역할을 한다.

2.2 사용자 입력에 반응할 수 있다.

자바스크립트는 사용자의 행동을 감지할 수 있다. 이를 이벤트(event)라고 한다.
대표적인 이벤트는 다음과 같다.

클릭하기, 마우스를 올리기, 키보드 입력하기, 입력창에 글자 쓰기, 화면 스크롤하기, 폼 제출하기 등이 있다. 예를 들어 사용자가 버튼을 클릭하면 알림창을 띄울 수 있다.

<button onclick="showMessage()">클릭</button>

<script>
  function showMessage() {
    alert("버튼을 클릭하였습니다.");
  }
</script>

이처럼 JavaScript는 사용자의 행동을 기다렸다가, 특정 행동이 발생하면 정해진 기능을 실행한다.

2.3 입력값을 검사할 수 있다

회원가입 화면이나 로그인 화면에서는 사용자가 입력한 값이 올바른지 확인해야 한다. JavaScript는 입력값을 검사하여 빈칸 여부, 글자 수, 이메일 형식 등을 확인할 수 있다.

예를 들어 이름을 입력하지 않았을 때 안내 문구를 보여줄 수 있다.

<input type="text" id="username" placeholder="이름을 입력하세요">
<button onclick="checkName()">확인</button>
<p id="result"></p>

<script>
  function checkName() {
    const name = document.getElementById("username").value;

    if (name === "") {
      document.getElementById("result").textContent = "이름을 입력해야 합니다.";
    } else {
      document.getElementById("result").textContent = name + "님, 환영합니다.";
    }
  }
</script>

이 예제에서 JavaScript는 입력창의 값을 가져와서 조건문으로 검사한 뒤, 결과 문구를 화면에 출력한다.

2.4 메뉴, 탭, 슬라이드 같은 UI를 만들 수 있다

웹사이트에서 자주 볼 수 있는 동작 대부분은 JavaScript로 만들 수 있다. 예를 들면 다음과 같다.

햄버거 메뉴 열기와 닫기, 이미지 슬라이드, 탭 메뉴 전환, 아코디언 메뉴, 팝업창, 모달창, 드롭다운 메뉴, 다크모드 전환 등이 있다.

이러한 기능은 사용자가 웹페이지를 더 편리하게 이용하도록 돕는다. 따라서 JavaScript는 단순한 프로그래밍 언어가 아니라, 사용자 경험(UX, user experience)을 향상시키는 중요한 도구이다.

2.5 서버에서 데이터를 가져올 수 있다

JavaScript는 외부 서버에서 데이터를 가져와 화면에 보여줄 수 있다. 이때 자주 사용하는 기능이 Fetch API이다.
예를 들어 영화 검색 사이트, 날씨 정보 사이트, 뉴스 목록, 도서 검색 사이트 등은 외부 데이터를 가져와 화면에 표시한다.

fetch("https://example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

이 코드는 서버에 데이터를 요청하고, 받은 데이터를 JavaScript에서 사용할 수 있도록 처리하는 예이다.

초급 수업에서는 다음과 같은 프로젝트에 활용하기 좋다. 영화 검색 사이트, 날씨 조회 사이트, 책 검색 사이트, 이미지 검색 사이트, 관광지 정보 검색 사이트 등을 만들 수 있다.

2.6 데이터를 저장할 수 있다

JavaScript는 간단한 데이터를 사용자의 브라우저에 저장할 수 있다. 대표적인 기능이 localStorage이다.

예를 들어 할 일 목록을 만들 때 사용자가 입력한 내용을 브라우저에 저장할 수 있다. 그러면 페이지를 새로고침하여도 입력한 내용이 남아 있을 수 있다.

localStorage.setItem("name", "홍길동");

const savedName = localStorage.getItem("name");
console.log(savedName);

이 기능은 간단한 메모장, 할 일 목록, 설정 저장, 다크모드 상태 저장 등에 활용할 수 있다.

2.7 간단한 게임을 만들 수 있다

JavaScript는 브라우저에서 실행되므로 간단한 게임도 만들 수 있다. 특히 Canvas API를 사용하면 화면에 도형이나 이미지를 그리고 움직일 수 있다.

예를 들어 다음과 같은 게임을 만들 수 있다.
공 튀기기 게임, 벽돌깨기 게임, 카드 뒤집기 게임, 타자 연습 게임, 간단한 퀴즈 게임 등을 만들 수 있다.

2.8 웹 애플리케이션을 만들 수 있다

JavaScript는 단순히 웹페이지에 효과를 넣는 수준을 넘어, 웹 애플리케이션(web application)을 만드는 데 사용된다.

예를 들어 다음과 같은 서비스를 만들 수 있다.

할 일 관리 앱, 일정 관리 앱, 계산기, 메모장, 영화 검색 앱, 쇼핑몰 장바구니, 채팅 화면, 관리자 대시보드 등을 구현할 수 있다.

React, Vue, Svelte 같은 프런트엔드 프레임워크(front-end framework)도 JavaScript를 기반으로 한다. 따라서 JavaScript는 현대 웹 개발의 중심 언어라고 할 수 있다.

자바스크립트(JavaScript)는 정적인 웹페이지를
사용자의 행동에 반응하는
동적인 웹페이지로 바꾸어 주는 프로그래밍 언어이다.

맛 보기

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>

참고-자바스크립트 학습 순서

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

multiking

티스토리 뷰