지난 HTML, CSS 학습을 통해 웹 페이지의 구조와 스타일을 만들었다면,
이제는 “웹이 살아 움직이게 만드는 언어”인 JavaScript를 배울 시점이다.
정적인 문서였던 웹 페이지가 JavaScript를 만나면,
버튼 클릭, 입력 처리, 계산, 애니메이션 같은 ‘동작’을 갖게 된다.
오늘은 JavaScript의 기본 원리를 이해하고, 다양한 실습을 통해 기초를 다져보려 한다.
1. JavaScript란?
[출처: 위키피디아_JavaScript]
웹 페이지에 동적인 기능을 부여하는 프로그래밍 언어.
브라우저에서 동작하며 다음과 같은 기능을 수행할 수 있다.
- 버튼 클릭 반응
- 애니메이션
- 서버와 데이터 통신 (API 요청)
- 입력값 계산 및 검증
HTML이 집의 구조, CSS가 인테리어라면,
JavaScript는 집 안에서 사람이 실제로 생활하며 움직이는 ‘동작’이라고 볼 수 있다.
2. 기본 개념
2.1. 변수 (Variable)
컴퓨터와 개발자 사이의 약속.
예를 들어,
개발자가 컴퓨터에게 새로운 변수 apple을 규정하고(변수 선언. let apple),
문자열 '사과'라는 값을 설명(값 할당. ='사과')한 것이라 볼 수 있음.
- 할당 연산자(
=)는 '같다'라는 의미가 아님! 변수에 값을 지정해준 것일 뿐.
✔️ 변수 선언 방식
- let - 재할당 가능
- const - 재할당 불가(ex.
const PI = 3.14;)
2.2. 함수 (Function)
특정 작업을 수행하는 코드 묶음.
→ “어떤 입력을 받아 처리한 뒤 결과를 반환하는 기계”
✔️ 함수 선언 방식(예시)
function sum (a, b) {
return a + b;
}
또는
function double (string) {
console.log(string*2);
}function: 함수를 선언하는 키워드sum,double: 개발자와 컴퓨터가 약속한 함수의 이름(string): 함수에서 사용할 변수. 외부에서 값을 전달하면 string에 값이 할당되어 함수 내부에서 사용return: 함수 내부의 코드가 실행된 후 결과를 반환(return)하는 키워드console.log(): console에 값을 출력하는 코드
2.3. 자료형 (Data Types)
JavaScript는 다양한 자료형을 가지고 있다.
2.3.1. 원시 타입 (Primitive Types)
- String: 텍스트(문자열)를 나타냄. 따옴표
('', "", `)로 감싸서 표현 - Number: 정수, 실수 등 숫자를 나타낸다. 특정 범위 이상의 큰 정수는 BigInt를 사용
- BigInt: 매우 큰 정수를 표현하기 위한 자료형
- Boolean: 참(true) 또는 거짓(false)을 나타내는 논리 값
- Undefined: 변수가 선언되었지만 값이 할당되지 않은 상태
- Null: 값이 없음을 의도적으로 나타내는 '빈' 값
- Symbol: 고유하고 변경 불가능한 값을 만들어주는 자료형
2.3.2. 참조 타입 (Reference Type)
- Object (객체): 여러 데이터를 구조적으로 묶어서 다룰 수 있는 복합적인 자료형.
배열(Array)이나 함수(Function)도 객체의 일종이다.
2.4. 조건문 (if문 - else절 / else if문)
2.4.1. if문 - else절
if(조건식)문은 (조건식)의 조건을 평가해서 참(true)인 경우, 코드 블록이 실행 된다.
else절은 선택 사항이며, 조건이 거짓(false)인 경우, 코드 블록이 실행 된다.
if(조건식) {
//참일 때 수행할 구문
} else {
//거짓일 때 실행될 구문
}하지만, 말 그대로 선택 사항이기 때문에 else를 생략하고 아래와 같이 작성할 수도 있다.
if(조건식) {
//참일 때 수행할 구문
}
//거짓일 때 실행될 구문2.4.2. else if문
else if는 여러 개의 조건을 처리해야할 때 사용된다.
let year = prompt('올해는 무슨 년도 인가요?', '');
if (year < 2025) {
alert('숫자를 좀 더 올려보세요.');
} else if (year > 2025) {
alert('숫자를 좀 더 내려보세요.');
} else {
alert('정답입니다!');
}prompt() 함수로 사용자가 입력한 값을 받아 year에 할당해주면,
가장 첫 조건을 먼저 평가하고, 거짓일 시 else if로 준 다음 조건을 평가한다.
이 두번째 조건도 거짓이라면, else절 코드 블록이 실행된다.
2.4.3. 조건부 삼항연산자(?)
아래의 형태로 if문을 간략히 표현해줄 수 있다.
let allowedAge = (조건식) ? '참일 때 수행할 구문' : '거짓일 때 수행할 구문';3. 종합 실습
3.1. 변수를 사용하여 구구단 출력
[캡쳐 1-1. 변수로 구구단 출력한 모습]
3.2. 함수를 사용하여 구구단 출력
[캡쳐 1-2. 함수로 구구단 출력한 모습]
3.3. 조건문을 사용하여 점수에 따른 등급 출력
[캡쳐 1-1. 조건문을 사용하여 점수에 따른 등급을 출력한 모습]
추가로 여담이지만, 아래 TERMINAL에서 node (파일명.js)를 입력하여 값을 출력시키려면
먼저 node를 깔아주어야 하는데,
Homebrew로 node를 깔아주었는데도 값이 출력되지 않고
zsh: command not found: node라는 에러만 계속 떴다.
검색해보니 경로를 수정해주면 해결된다는 정보를 얻고 경로를 수정해주었는데도 문제가 해결되지 않았고,
결국 node를 완전히 삭제한 후 재설치하자 정상적으로 출력되는 결과를 얻을 수 있었다.
아래에 참고했던 사이트들을 정리해두니 혹시 동일한 문제를 겪는다면 참고해보시길...
[참고한 사이트 목록]
