💻 JavaScript/기초 문법

2일차 : 오늘 배운 것(자바스크립트 기초 문법)

seheej 2024. 7. 11. 17:48

자바스크립트란?

자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다.

 

변수

let a = '대한'
let b = '민국'

console.log(a+b);	// 대한민국
console.log(a+b+b);	// 대한민국민국
console.log(a+b+b+b);	// 대한민국민국

변수란 값을 담아서 한 번에 관리해주는 친구

변수 b의 값을 바꿔야하는 경우, 일일이 바꿔줄 필요 없이 변수 내용만 바꿀수 있어 유지보수가 편함

 

let name = 'John'
let age = '30'

변수 이름은 알아보기 쉽게 하는 것이 좋음

 

리스트

let fruit = ['사과', '배', '수박'];
console.log(fruit);
console.log(fruit[0]); // 사과
console.log(fruit[1]); // 배
console.log(fruit[2]); // 수박

리스트는 0부터 시작

 

let person = {'name':'Bob', 'age':30, 'height':180}

console.log(person['name']);	// Bob
console.log(person['age']);	// 30
console.log(person['height']);	//180

let name = person['name'];
let age = person['age'];
let height = person['height'];

console.log(name, age, height);	//Bob 30 180

 

 

조건문

let age = 15;
if (age < 20) {
    console.log('청소년입니다.')
} else {
    console.log('성인입니다.')
}

 

반복문

let ages = [15, 30, 28, 7, 40, 13];

ages.forEach(a => {
    if (a < 20) {
        console.log('청소년입니다.')
    } else {
        console.log('성인입니다.')
    }
});

 

Output:

청소년입니다.
성인입니다.

성인입니다.

청소년입니다.

성인입니다.

청소년입니다.

 

function hey() {
	alert('Hello')
}

<button onclick="hey()" type="button" class="btn">버튼</button>

버튼 클릭 시 Hello라는 문구가 써있는 팝업창이 뜨게 됨

 

자바스크립트 프레임워크/라이브러리 알아보기

  • React
    • React의 특징은 무엇인가요?
    • 장점을 기술해주세요.
    • 단점을 기술해주세요.
  • Vue
    • Vue의 특징은 무엇인가요?
    • 장점을 기술해주세요.
    • 단점을 기술해주세요.
  • Next.js
    • Next.js 란 무엇인가요?
    • 왜 React와 함께 사용하나요?
    • Next.js 를 사용했을때 어떤 장점이 있나요?