안녕하세요. Codinglee입니다.
왕초보도 이해할 수 있는 웹 프로그래밍 시간입니다.
지난 포스트에서 javascript의 기초에 대해 알아보았습니다.
이번 포스트에서는 프로그래밍 언어인 자바스크립트 기본 문법 에 대해 알아보겠습니다.
프로그래밍 언어는 컴퓨터와 대화하기 위한 언어입니다.
우리가 영어를 배우는 것과 동일합니다.
영문법을 배우는 것처럼 프로그래밍 언어의 문법을 배워봅시다.
이전 시리즈 보기
시리즈 1. 챗지피티 활용 프로그래밍 1 – 계산기 만들기 (준비)
시리즈 2. 챗지피티 활용 프로그래밍 2 – 계산기 만들기
시리즈 3. 챗지피티 활용 프로그래밍 3 – 계산기 만들기
시리즈 4. 챗지피티 활용 프로그래밍 4 – 계산기 만들기(완료)
시리즈 5. 왕초보 웹 프로그래밍 1 – HTML CSS JAVASCRIPT
시리즈 6. 왕초보 웹 프로그래밍 2 – 인터넷, 웹브라우저
시리즈 7. 왕초보 웹 프로그래밍 3 – DNS(Domain Name System)
시리즈 8. 왕초보 웹 프로그래밍 4 – 서버, 클라이언트
시리즈 9. 왕초보 웹 프로그래밍 5 – 개발자 도구 살펴보기
시리즈 10. 왕초보 웹 프로그래밍 6 – HTML 태그
시리즈 11. 왕초보 웹 프로그래밍 7 – HTML 사용법, CSS
시리즈 12. 왕초보 웹 프로그래밍 8 – CSS 사용법
시리즈 13. 왕초보 웹 프로그래밍 9 – CSS 기초 사용법 2
시리즈 14. 왕초보 웹 프로그래밍 10 – 간단한 웹 페이지 만들기
시리즈 15. 왕초보 웹 프로그래밍 11 – 자바스크립트(javascript)
오늘의 학습 순서입니다.
[자바스크립트 기본 문법 배우기]
1. 변수 선언
1.1 var
1.2 let
1.3 const
2. 데이터 타입
2.1 문자열 (String)
2.2 숫자 (Number)
2.3 불린 (Boolean)
2.4 배열 (Array)
2.5 객체 (Object)
3. 연산자
3.1 산술 연산자
3.2 비교 연산자
3.3 논리 연산자
4. 기초적인 자바스크립트 문법 사용하기
4.1 조건문 (if, else, switch)
4.2 반복문 (for, while)
4.3 함수 정의와 호출(function)
그럼 오늘 내용 시작합니다.
자바스크립트는 웹 페이지를 더 재미있고 생동감 있게 만들어 줍니다.
웹 페이지에 생명을 불어넣는 역할을 하는 것입니다.
오늘은 자바스크립트를 사용하기 위해 꼭 알아야 하는 기본 문법을 알려드리겠습니다.
프로그래밍 언어는 문법이 유사합니다.
자바스크립트 문법에 익숙해지시면 python 등 다른 언어도 쉽게 배울 수 있습니다.
1. 변수 선언
변수는 정보를 저장해 놓는 상자와 같습니다.
이 상자에 원하는 데이터를 넣어두고 필요할 때마다 꺼내 쓸 수 있습니다.
자바스크립트에서는 이 변수를 선언할 때 var, let, const 라는 세 가지 단어를 사용합니다.
1.1 var
var은 예전부터 사용되던 변수 만드는 지시어 입니다.
var로 변수를 선언하면 어디서든 자유롭게 접근 가능합니다.
그러나 많은 곳에 var을 사용하게 되면 코드가 복잡해질 수 있습니다.
var myName = "Alice";
console.log(myName); // 결과: Alice위 코드가 바로 프로그래밍 언어로 작성된 코드입니다.
자바스크립트 코드를 직접 써보고 싶다면 간단하게 사용해볼 수 있습니다.
“왕초보 웹 프로그래밍 5 – 개발자 도구 살펴보기”
위 포스트에서 설명했던 개발자 도구 – 콘솔에서 쉽게 확인할 수 있습니다.
개발자 도구의 콘솔창에 들어가서 위 코드를 한 줄씩 입력해보세요.
결과까지 잘 확인됩니다.
1.2 let
let 지시어는 요즘 많이 사용하는 방법입니다.
특정 범위 안에서만 쓸 수 있는 변수를 만들어줍니다.
한 곳에서만 쓰이기 때문에 코드가 깔끔해집니다.
let age = 10;
age = 11; // 값을 변경할 수 있어요
console.log(age); // 결과: 111.3 const
const는 한 번 값을 정하면 바꿀 수 없는 변수를 만들 때 사용합니다.
보통 이름이나 주소처럼 한 번 정해지면 잘 변하지 않는 정보를 저장할 때 쓰입니다.
const birthYear = 2012;
console.log(birthYear); // 결과: 20122. 데이터 타입
자바스크립트에는 여러 가지 데이터 타입이 있습니다.
데이터를 어떤 방식으로 저장할지에 따라 타입이 달라집니다.
2.1 문자열 (String)
문자열은 글자나 단어를 저장할 때 사용합니다.
글자를 넣을 때는 큰 따옴표 ” ” 나 작은 따옴표 ‘ ‘ 로 감싸주어야 합니다.
let greeting = "Hello, world!";
console.log(greeting); // 결과: Hello, world!2.2 숫자 (Number)
숫자는 정수나 소수처럼 계산할 수 있는 값들을 저장합니다.
숫자를 다룰 때는 따옴표 없이 그냥 숫자만 쓰면 됩니다.
let score = 95;
let average = 88.5;
console.log(score, average); // 결과: 95 88.52.3 불린 (Boolean)
불린은 참(true) 또는 거짓(false)만 저장할 수 있는 타입입니다.
조건을 체크하는 상황에서 사용됩니다.
let isStudent = true;
console.log(isStudent); // 결과: true2.4 배열 (Array)
배열은 여러 가지 데이터를 한 번에 모아서 저장할 때 사용합니다.
예를 들어, 좋아하는 음식 목록이나 친구들의 이름을 한 번에 저장할 때 사용합니다.
let favoriteColors = ["blue", "green", "red"];
console.log(favoriteColors[0]); // 결과: blue2.5 객체 (Object)
객체는 여러 속성을 가진 데이터를 하나로 묶을 수 있습니다.
예를 들어, 한 사람의 이름, 나이, 주소 등을 하나로 묶을 수 있습니다.
let person = {
name: "John",
age: 15,
city: "Seoul"
};
console.log(person.name); // 결과: John3. 연산자
연산자는 값을 계산하거나 비교할 때 사용합니다.
자바스크립트에서 많이 사용하는 연산자는 크게 산술 연산자, 비교 연산자, 논리 연산자가 있습니다.
3.1 산술 연산자
산술 연산자는 숫자를 계산할 때 사용하는 연산자 입니다.
기본적인 산술 연산자로는 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 가 있습니다.
let a = 10;
let b = 5;
console.log(a + b); // 결과: 15
console.log(a - b); // 결과: 53.2 비교 연산자
비교 연산자는 두 값을 비교할 때 사용합니다.
기본적인 비교 연산자로는 같다(==), 다르다(!=), 크다(>), 작다(<) 가 있습니다.
let x = 7;
console.log(x > 5); // 결과: true
console.log(x == 10); // 결과: false3.3 논리 연산자
논리 연산자는 여러 조건을 함께 사용할 때 사용합니다.
그리고 (&&), 또는 (||), 아니다(!) 등이 있습니다.
let isAdult = true;
let isStudent = false;
console.log(isAdult && isStudent); // 결과: false
console.log(isAdult || isStudent); // 결과: true4. 기본적인 자바스크립트 문법 사용하기
자바스크립트에서는 조건문과 반복문을 사용해 특정 상황에 맞춰 동작을 제어합니다.
또 여러 번 사용해야 할 코드를 모아서 함수를 만듭니다.
4.1 조건문 (if, else, switch)
조건문은 어떤 조건이 맞을 때만 특정 코드를 실행합니다.
가장 많이 사용하는 조건문은 if – else 입니다.
let age = 15;
if (age > 18) {
console.log("성인입니다.");
} else {
console.log("청소년입니다.");
}4.2 반복문 (for, while)
반복문은 같은 코드를 여러 번 실행해야 할 때 사용합니다.
for 반복문과 while 반복문이 자주 사용됩니다.
for (let i = 0; i < 5; i++) {
console.log("안녕하세요!");
}4.3 함수 정의와 호출
함수는 여러 동작을 한꺼번에 묶어서 이름을 붙인 것입니다.
필요할 때마다 호출해서 사용합니다.
function sayHello() {
console.log("안녕하세요!");
}
sayHello(); // 결과: 안녕하세요!오늘은 여기까지입니다.
자바스크립트 기본 문법 을 소개해 드렸습니다.
영어 문법도 그렇듯, 기초적인 문법에서 심화해 나가야 제대로 언어를 사용할 수 있습니다.
오늘 포스트에서는 어떤 종류가 있는지 설명을 드렸고,
다음 포스트에서부터 구체적으로 하나 하나씩 설명을 드리겠습니다.
감사합니다. 지금까지 Codinglee 였습니다.
2024.10.29.(화) 아침 판교에서 씀.
