자바스크립트(JavaScript)란?

 

JavaScript(자바스크립트)는 웹페이지에 생명을 불어넣는 프로그래밍 언어입니다. HTML이 웹페이지의 구조를 만들고, CSS가 디자인을 담당한다면, JavaScript는 사용자의 행동에 따라 웹페이지가 반응하도록 만들어 줍니다. 버튼을 클릭하면 화면이 바뀌거나, 로그인 입력을 검사하거나, 팝업 창이 뜨는 등 웹페이지에서 일어나는 동적인 기능들은 대부분 JavaScript로 구현됩니다. 이 글에서는 JavaScript를 처음 배우는 학생을 위해 기초 개념, 기본 문법, 예제 등을 2500자 이상의 HTML 형식으로 자세히 설명합니다.

 

1. JavaScript란 무엇인가요?

JavaScript는 웹 브라우저에서 작동하는 스크립트 언어입니다. HTML과 CSS만으로는 고정된 웹페이지밖에 만들 수 없지만, JavaScript를 사용하면 사용자의 행동(클릭, 입력 등)에 따라 동적으로 변하는 웹사이트를 만들 수 있습니다.

JavaScript의 주요 기능:

• 버튼 클릭 시 알림창 띄우기
• 입력값 검사(예: 비밀번호 길이 확인)
• 슬라이드 배너, 팝업 구현
• 데이터 계산 및 처리
• API를 통해 서버와 통신

 

2. JavaScript는 어디에 작성하나요?

JavaScript는 HTML 파일 안의 <script> 태그에 작성할 수 있고, 외부 파일(.js)로도 작성할 수 있습니다.

1) HTML 문서 안에 작성:

<script>
  alert("안녕하세요, 자바스크립트!");
</script>

2) 외부 JavaScript 파일 연결:

<script src="main.js"></script>

이 방법은 JavaScript 코드를 따로 관리하기 좋아서 많이 사용됩니다.

 

3. JavaScript 기본 문법

1) 변수 선언

JavaScript에서는 데이터를 저장할 때 let, const, var 키워드를 사용합니다.

let name = "홍길동";
const age = 20;
var city = "서울";

• let: 일반적인 변수 선언
• const: 한 번 값이 정해지면 바꿀 수 없음
• var: 예전 방식 (요즘은 잘 안 씀)

2) 데이터 타입

• 문자열: "Hello", '안녕'
• 숫자: 10, 3.14
• 불리언: true, false
• 배열: [1, 2, 3]
• 객체: { name: "철수", age: 25 }

3) 출력하기

console.log("콘솔에 출력됩니다.");
alert("알림 창이 나타납니다.");
document.write("화면에 글자를 출력합니다.");

4) 조건문

let score = 80;

if (score >= 90) {
  console.log("A학점");
} else if (score >= 80) {
  console.log("B학점");
} else {
  console.log("C학점");
}

5) 반복문

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

위 코드는 1부터 5까지 출력합니다.

6) 함수(Function)

함수는 자주 쓰는 코드를 한 번에 모아서 재사용할 수 있도록 해주는 기능입니다.

function sayHello() {
  alert("안녕하세요!");
}

sayHello(); // 함수 실행

 

4. 이벤트(Event)란?

웹페이지에서 사용자의 행동에 반응하는 것을 이벤트라고 합니다. 예를 들어 버튼을 클릭하거나, 마우스를 올리거나, 키보드를 입력하는 등의 행동입니다.

버튼 클릭 이벤트 예제:

<button onclick="greet()">인사하기</button>

<script>
  function greet() {
    alert("안녕하세요!");
  }
</script>

사용자가 버튼을 클릭하면 greet() 함수가 실행되고, 알림 창이 나타납니다.

 

5. DOM(Document Object Model) 조작

JavaScript는 HTML 요소를 직접 제어할 수 있습니다. 이를 DOM(Document Object Model)이라고 하며, 웹페이지의 모든 요소(문단, 제목, 이미지 등)를 JavaScript로 접근할 수 있습니다.

예제: HTML 글자 바꾸기

<p id="myText">기존 글자입니다.</p>
<button onclick="changeText()">글자 바꾸기</button>

<script>
  function changeText() {
    document.getElementById("myText").innerHTML = "변경된 글자입니다!";
  }
</script>

버튼을 클릭하면 <p> 태그 안의 글자가 바뀝니다.

 

6. 자주 쓰이는 JavaScript 문법

문자 연결:

let name = "홍길동";
console.log("안녕하세요, " + name + "님!");

배열 사용:

let fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // "사과"

객체 사용:

let user = {
  name: "영희",
  age: 22
};

console.log(user.name); // "영희"

 

7. 초보자를 위한 학습 팁

• 작은 예제부터 시작하기: 버튼 클릭, 텍스트 변경 등 간단한 기능부터 연습하세요.
• 콘솔 확인하기: console.log()를 자주 사용해서 코드 흐름을 확인하세요.
• 개발자 도구 활용: 크롬 브라우저에서 F12를 눌러 콘솔창을 열고 실습해보세요.
• 반복 연습: 자주 타이핑하고 실습하면서 익숙해지는 것이 중요합니다.
• 무료 사이트 활용: 코드펜(CodePen), JSFiddle, MDN 등 다양한 실습 도구를 이용해 보세요.

 

결론

JavaScript는 웹 개발에서 가장 중요한 언어 중 하나로, 사용자와의 상호작용을 담당합니다. 처음에는 문법이 낯설고 어렵게 느껴질 수 있지만, 작은 예제부터 하나씩 따라 하면서 연습하다 보면 점점 재미있고 쉽게 익힐 수 있습니다. HTML과 CSS와 함께 사용하면, 나만의 웹사이트를 만들 수 있는 힘을 얻게 됩니다. 매일 조금씩 실습하고, 다양한 프로젝트를 시도해보며 JavaScript의 매력을 느껴보세요!