자바스크립트(JS) 완전 정복하기: 웹 프로그래밍의 핵심 기초 다지기

1. 자바스크립트(JavaScript)란 도대체 무엇인가?

웹사이트를 열어본 사람이라면 절대 모를 수 없는 언어가 바로 자바스크립트다. 하지만 이름 때문에 많은 사람이 헷갈리는데, 자바스크립트 ≠ 자바(Java) 라는 사실부터 확실히 짚고 넘어가야 한다. 둘은 완전히 다른 언어이다. 이름만 비슷할 뿐, 성격도 쓰임새도 다르다.

자바(Java): 주로 안드로이드 앱, 데스크톱 프로그램, 대규모 서버 시스템 만들 때 쓰는 언어. 복잡하고 무거운 작업을 처리하기 좋음.
자바스크립트(JavaScript): 웹 브라우저 안에서만 동작하도록 처음에 만들어진 언어였는데, 이제는 웹 브라우저 밖에서도 엄청나게 많이 쓰임 (서버, 모바일 앱, 심지어 로봇 제어에도 😲). 하지만 핵심 역할은 "웹 페이지에 생명력을 불어넣는 것"

쉽게 말해, 웹 페이지 구성 요소는 이렇게 나눠짐.

HTML (HyperText Markup Language): 뼈대, 구조. 집으로 치면 벽돌과 기둥. 뭐가 어디에 놓일지 위치랑 내용물을 정의함. 정적인 데이터만 만들 수 있음 (그냥 텍스트, 이미지, 버튼 이런 것들만 보여줌).
CSS (Cascading Style Sheets): 꾸미기, 디자인. 집을 예쁘게 칠하고, 창문 모양 바꾸고, 색깔 입히는 역할. 여전히 정적임 (움직이지 않음).
자바스크립트(JS): 바로 이 순간, 이 버튼을 클릭하면 뭐가 일어나게 하고 싶다, 마우스를 올리면 색이 바뀌어야 한다, 1초마다 자동으로 바뀌는 이미지 슬라이더를 만들고 싶다 같은 동적인 행동을 모두 담당하는 녀석이다. 마치 사람이 움직이고 반응하고 생각하는 것처럼 웹 페이지에 인터랙션(상호작용) 을 부여하는 유일한 언어.

주요 역할:
- 사용자 이벤트(클릭, 마우스 오버 등) 감지 및 처리
- HTML 요소 조작 (추가, 삭제, 수정)
- 데이터 유효성 검사
- 웹 페이지의 내용 동적으로 변경
- Ajax를 이용한 서버와의 통신 (데이터 주고받기)
실행 환경:
- 주로 웹 브라우저 내에서 실행됩니다.
- Node.js와 같은 런타임을 통해 서버 측에서도 사용 가능

2. JavaScript 기본 문법

2.1. 변수 (Variables)

데이터를 저장하는 공간입니다. var, let, const 키워드를 사용하여 변수를 선언합니다.

var: 함수 레벨 스코프 (구식 방식, 권장하지 않음)
let: 블록 레벨 스코프 (변수 재할당 가능)
const: 블록 레벨 스코프 (상수, 재할당 불가능)

let age = 30; // let: 변수 선언 및 값 할당
const PI = 3.14159; // const: 상수 선언

console.log(age); // 30
console.log(PI); // 3.14159

2.2. 자료형 (Data Types)

원시 자료형 (Primitive Types):
- string: 문자열 (예: "Hello")
- number: 숫자 (예: 10, 3.14)
- boolean: 불리언 (true 또는 false)
- undefined: 변수가 선언되었지만 값이 할당되지 않음
- null: 값이 "없음"을 의미
- symbol: 고유한 식별자를 나타냄 (ES6 추가)
- bigint: 아주 큰 정수를 나타냄 (ES2020 추가)
객체 자료형 (Object Type):
- object: 객체 (예: {name: "John", age: 25})
- array: 배열 (예: [1, 2, 3])
- function: 함수 (예: function() { ... })

2.3. 연산자 (Operators)

데이터를 조작하는 데 사용됩니다. 산술 연산자, 비교 연산자, 논리 연산자 등이 있습니다.

let a = 10;
let b = 5;

let sum = a + b; // 덧셈
let isEqual = (a == b); // 비교 (같음)
let isTrue = (a > 0 && b < 10); // 논리 연산 (AND)

console.log(sum); // 15
console.log(isEqual); // false
console.log(isTrue); // true

2.4. 제어문 (Control Flow)

코드의 실행 흐름을 제어합니다. if/else, for, while 등이 있습니다.

let score = 85;

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

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

2.5. 함수 (Functions)

특정 작업을 수행하는 코드 블록입니다. 재사용 가능한 코드를 만들 수 있습니다.

function add(x, y) { // 함수 선언
  return x + y;
}

let result = add(5, 3); // 함수 호출
console.log(result); // 8

// 화살표 함수 (ES6)
const multiply = (x, y) => x * y;
let product = multiply(4, 6);
console.log(product); // 24

3. JavaScript로 HTML 요소 조작하기

3.1. HTML 요소 선택하기

document.getElementById("id"): ID 속성을 사용하여 요소 선택
document.getElementsByClassName("class"): 클래스 속성을 사용하여 요소 선택 (HTMLCollection 반환)
document.getElementsByTagName("tagname"): 태그 이름을 사용하여 요소 선택 (HTMLCollection 반환)
document.querySelector("css selector"): CSS 선택자를 사용하여 첫 번째 요소 선택
document.querySelectorAll("css selector"): CSS 선택자를 사용하여 모든 요소 선택 (NodeList 반환)

<p id="myParagraph">Hello, JavaScript!</p>
<button class="myButton">클릭</button>

<script>
  // ID로 요소 선택
  let paragraph = document.getElementById("myParagraph");

  // 클래스로 요소 선택
  let buttons = document.getElementsByClassName("myButton");

  // CSS 선택자로 요소 선택
  let firstButton = document.querySelector(".myButton");

  // 선택한 요소의 내용 변경
  paragraph.textContent = "JavaScript로 변경됨!";

  // 선택한 요소에 이벤트 리스너 추가 (클릭 이벤트)
  firstButton.addEventListener("click", function() {
    alert("버튼 클릭!");
  });

</script>

3.2. HTML 요소 내용 변경

textContent: 요소의 텍스트 내용 변경
innerHTML: 요소의 HTML 내용 변경 (HTML 태그 사용 가능)
value: 입력 필드(input)의 값 변경

paragraph.textContent = "새로운 텍스트";
paragraph.innerHTML = "<b>굵은 텍스트</b>";

3.3. HTML 요소 스타일 변경

style 속성을 사용하여 CSS 스타일을 직접 적용할 수 있습니다.

paragraph.style.color = "red"; // 텍스트 색상 변경
paragraph.style.fontSize = "20px"; // 폰트 크기 변경

3.4. HTML 요소 추가/삭제

createElement(): 새로운 HTML 요소 생성
appendChild(): 부모 요소에 자식 요소 추가
removeChild(): 자식 요소 삭제

let newParagraph = document.createElement("p");
newParagraph.textContent = "새로운 단락";
document.body.appendChild(newParagraph); // body에 새로운 단락 추가

// 예시: 버튼을 클릭하면 단락 삭제
firstButton.addEventListener("click", function() {
  document.body.removeChild(newParagraph);
});

4. 이벤트 처리 (Event Handling)

addEventListener(): 이벤트 리스너 추가
이벤트 종류: "click", "mouseover", "mouseout", "keydown", "keyup", "load" 등

<button id="myButton">클릭하세요</button>

<script>
  let button = document.getElementById("myButton");

  button.addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
  });

  button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "yellow";
  });

  button.addEventListener("mouseout", function() {
    button.style.backgroundColor = ""; // 기본 색상으로 변경
  });
</script>

5. JavaScript를 웹 페이지에 포함하는 방법

<script> 태그 사용:
- HTML 파일 내에 <script> 태그를 사용하여 JavaScript 코드를 직접 작성하거나 외부 JavaScript 파일을 연결합니다.
- <script> 태그는 <head> 또는 <body> 내에 위치할 수 있습니다. 일반적으로 <body>의 마지막에 위치시키는 것이 권장됩니다. (HTML 요소들이 먼저 로드된 후에 JavaScript가 실행되도록 하기 위해)
```
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 예제</title>
</head>
<body>
  <p id="myParagraph">Hello, World!</p>

  
  <script>
    document.getElementById("myParagraph").textContent = "JavaScript로 변경!";
  </script>
</body>
</html>
```

외부 JavaScript 파일 연결:

별도의 .js 파일을 만들어 JavaScript 코드를 작성하고, <script> 태그의 src 속성을 사용하여 해당 파일을 연결합니다.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 예제</title>
</head>
<body>
  <p id="myParagraph">Hello, World!</p>

  <!-- 외부 JavaScript 파일 연결 -->
  <script src="script.js"></script>
</body>
</html>

document.getElementById("myParagraph").textContent = "외부 파일에서 변경!";

꼬맹이