JavaScript 기초

JavaScript는 웹 페이지에 동적인 기능과 상호작용을 추가하는 스크립트 언어입니다. 웹의 동작을 담당합니다.

목차

개요

JavaScript는 HTML, CSS와 함께 웹을 구성하는 핵심 기술입니다. HTML이 웹의 구조를, CSS가 디자인을 담당한다면, JavaScript는 사용자의 행동에 반응하고 데이터를 처리하는 등의 동적인 기능을 구현합니다. Node.js와 같은 환경에서는 서버 사이드 개발에도 사용됩니다.

참고

JavaScript는 브라우저뿐만 아니라 서버, 데스크톱, 모바일 애플리케이션 등 다양한 환경에서 사용되는 범용 프로그래밍 언어입니다.

기본 문법

JavaScript의 기본적인 문법 요소는 다음과 같습니다:

JavaScript 
// 변수 선언
const name = 'John';
let age = 30;

// 함수 선언
function sayHello() {
    return Hello, my name is ${</span>name<span class="string">}!;
}

// 함수 실행
sayHello();

// 조건문
if (age > 20) {
    console.log(sayHello());
}

주요 개념

웹 개발에서 자주 사용되는 JavaScript의 핵심 개념들입니다:

개념 설명
DOM 조작 문서 객체 모델(DOM)을 사용하여 HTML 요소에 접근하고 수정합니다.
이벤트 핸들링 사용자 행동(클릭, 키 입력 등)에 반응하여 특정 함수를 실행합니다.
비동기 처리 네트워크 요청과 같이 시간이 오래 걸리는 작업을 기다리지 않고 처리합니다. (Promise, async/await 등)
객체 지향 클래스, 객체, 상속 등을 사용하여 코드를 구조화합니다.

사용 예제

버튼을 클릭하면 페이지의 텍스트가 변경되는 간단한 예제입니다.

HTML/JavaScript 
<h1 id="title">JavaScript 예제</h1>
<button onclick="changeTitle()">제목 변경</button>

<script>
function changeTitle() {
  const titleElement = document.getElementById('title');
  titleElement.textContent = 'JavaScript로 변경된 제목';
}
</script>

주의사항 및 팁

  • 코드는 <script> 태그 내부에 작성하거나 외부 .js 파일로 분리하여 <script src="..."></script>로 불러오는 것이 좋습니다.
  • 웹 브라우저의 개발자 도구(F12)를 활용하여 콘솔(Console)에서 JavaScript 코드를 테스트하고 오류를 확인할 수 있습니다.
  • 최신 JavaScript(ES6 이상) 문법은 가독성과 기능이 향상되었으므로, 최신 문법을 학습하는 것이 좋습니다.
주의

JavaScript 파일은 HTML 문서의 <head> 또는 <body> 끝 부분에 위치시킬 수 있으며, 일반적으로는 페이지 로딩 속도를 위해 <body> 태그 닫히기 직전에 놓는 것을 권장합니다.