[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기

[JS 1강] 웹사이트가 생각하게 만들기! 자바스크립트 시작과 변수 이해하기

"정적인 페이지에 생명력을 불어넣는 마법, 자바스크립트를 시작합니다."

안녕하세요! 드디어 웹 개발의 꽃이라 불리는 자바스크립트(JavaScript) 연재를 시작합니다. HTML이 뼈대이고 CSS가 옷이라면, 자바스크립트는 웹사이트의 '두뇌' 역할을 합니다.

1. 자바스크립트란 무엇인가요?

자바스크립트는 사용자와 상호작용하고, 데이터를 처리하며, 화면을 동적으로 바꾸는 프로그래밍 언어입니다.

✅ 클릭하면 색이 변하는 버튼

✅ 입력한 값에 따라 결과가 나오는 계산기

✅ 서버에서 데이터를 받아와 화면에 뿌려주는 기능

2. 데이터를 담는 바구니: 변수(Variable)

컴퓨터에게 정보를 기억시키려면 '이름이 붙은 바구니'가 필요합니다. 이것을 변수라고 부릅니다.

• 📌 const: 한 번 담으면 바꿀 수 없는 상자 (상수)
• 📌 let: 언제든 내용을 바꿀 수 있는 상자 (변수)
• * 예전에는 'var'를 썼지만, 요즘은 'let'과 'const'를 권장합니다.

3. 브라우저 콘솔과 실습

브라우저(크롬 등)에서 F12를 누르고 Console 탭을 열어보세요. 아래 코드를 입력하고 엔터를 치면 결과를 확인할 수 있습니다.

// 1. 변수 선언하기 const name = "코딩천재"; // 문자형 (String) let age = 20; // 숫자형 (Number) const isHappy = true; // 불리언 (Boolean: 참/거짓) // 2. 콘솔에 출력하기 console.log("이름:", name); console.log("나이:", age); // 3. 변수 값 바꿔보기 age = 21; // let으로 선언해서 변경 가능! console.log("내년 나이:", age); // 4. 간단한 연산 const a = 10; const b = 5; console.log("더하기:", a + b);

첫 걸음을 떼셨습니다!

프로그래밍의 시작은 데이터를 정의하는 것부터입니다. 변수의 개념을 꼭 기억하세요.

다음 2강에서는 상황에 따라 판단하는 '조건문과 반복문'을 배워볼게요!