• 자바스크립트(JavaScript) 란 무엇인가? > 웹 무료강의

자바스크립트(JavaScript) 란 무엇인가? > 웹 무료강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

Javascript 자바스크립트(JavaScript) 란 무엇인가?

페이지 정보

profile_image
작성자 모던DS
조회 51회

본문

자바스크립트(JavaScript) 란 무엇인가?


웹 요소를 제어합니다

  • 웹 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음

  • 웹 사이트 UI 부분에 많이 활용

  • 예) 마우스 포인터를 올렸을 때 펼쳐지는 메뉴, 한 화면에서 탭을 눌러 내용만 바뀌도록 하는 콘텐츠

웹 애플리케이션을 만듭니다

  • 최근의 웹 사이트는 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작

  • 예) 온라인 지도의 길찾기 서비스, 데이터 시각화 서비스, 공개된 API를 활용한 다양한 서비스

다양한 라이브러리를 사용할 수 있습니다

  • 웹을 중심으로 하는 서비스가 늘어나면서 브라우저에서 처리해야 할 일이 늘어남 → 라이브러리와 프레임워크가 계속 등장

  • 예) 시각화를 위한 d3.js, 머신러닝을 위한 tensorflow.js, DOM 조작을 위한 jQuery 등

  • 예) 웹 애플리케이션 개발을 위한 React, Angular, Vue 등

서버를 구성하고 서버용 프로그램을 만들 수 있습니다

  • node.js : 프론트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크



 1. 자바스크립트의 핵심 역할

웹 개발의 3대 요소 중 동적 제어를 담당합니다.
 

  • HTML: 웹 페이지의 구조를 설계합니다.

  • CSS: 웹 페이지의 디자인과 레이아웃을 꾸밉니다.

  • JavaScript: 클릭 이벤트, 데이터 처리, 애니메이션 등 실시간 움직임을 부여합니다.


2. 주요 특징

  • 객체 기반 언어: 실생활의 사물을 모델링하여 프로그래밍하는 객체 지향적 특성을 가집니다.

  • 인터프리터 언어: 컴파일 과정 없이 브라우저에서 코드를 즉시 읽고 실행합니다.

  • 클라이언트 및 서버 사이드 개발: 웹 브라우저뿐만 아니라 Node.js를 통해 서버 개발에도 널리 쓰입니다.

  • 풍부한 생태계: 다양한 라이브러리(React, Vue 등)와 프레임워크가 존재하여 개발 효율이 높습니다.


3. 주요 이론 및 용어 (표)

용어

설명

변수 (Variable)

데이터를 저장하는 바구니와 같습니다. (예: let, const)

함수 (Function)

특정 기능을 수행하는 코드의 묶음입니다.

이벤트 (Event)

클릭, 마우스 휠, 키보드 입력 등 사용자의 행동을 감지합니다.

DOM (Document Object Model)

브라우저가 HTML 문서를 이해하기 쉽게 트리 구조로 만든 모델입니다.


4. 실제 소스 예제

버튼을 클릭했을 때 메시지가 바뀌는 간단한 예제입니다.

 HTML


<h1 id="title">안녕하세요!</h1>

<button onclick="changeText()">클릭하세요</button>

 
JavaScript

function changeText() {

  // 1. 문서 객체(h1)를 선택합니다.
  const titleElement = document.getElementById('title');

  
  // 2. 텍스트 내용을 변경합니다.
  titleElement.innerText = '자바스크립트로 내용이 바뀌었습니다!';

  
  // 3. 스타일도 함께 제어할 수 있습니다.
  titleElement.style.color = 'blue';
}