[TIL] 내배캠 2일차

2일차에는 웹개발 강의 2주차에서 배운 내용을 정리했다.

자바스크립트란?

프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어이다. 자바스크립트가 역사적으로 많이 사용돼 왔기 때문에 웹에 표준이 되었다.

자바스크립트는 범용성이 넓기 때문에 서버도 개발할 수 있고, 안드로이드와 ios 앱, 게임 개발 엔진, IoT(사물인터넷)까지도 개발이 가능하다.

console.log

코드를 맞게 썼는지 확인해 보는 명령어이다. 화면이 아니라 log라는 탭에서 실행결과를 보여준다.

자바스크립트의 기초 문법

1. 변수란 값을 담는 상자를 의미한다.

let a = 2 // 변수 키워드(let)를 통해 2라는 값을 a의 저장
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!

// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

사칙 연산도 기본적으로 가능하다. 숫자는 더해주고 문자열은 문자를 이어준다.

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

2. 리스트란 순서를 지켜서 가지고 있는 형태이며 순서를 셀때는 0부터 센다.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

3. 딕셔너리는 키(key) 값(value)을 묶어놓은 형태이다.

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27
// 값을 가져올때는 대괄호[]로 키값을 가져온다.

딕셔너리와 리스트를 합친 형태로도 쓸 수 있다. 데이터가 여러개일 때 묶어서 가져올 수 있고 순서를 표시할 수 있다.

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

4. 리스트에 들은 값을 반복문(forEach)을 써서 한번에 가져올 수 있다.

fruits.forEach((a) => {
	console.log(a)
}) 
// fruits 의 요소를 하나씩 확인하는데 이름은 a라고 할 거에요!
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없어요!

5. 조건문(if)을 추가해 조건에 맞게 실행을 다르게 시킬 수 있다.

let ages = [12,15,20,25,17,37,24]

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

6. 정해진 일을 반복하는 함수를 만들 수 있다.

function hey(){
	alert('안녕!'); // 알림창 띄우는 명령어
}

7. 자바스크립트로 웹을 동작하는건 다음코드와 같다.

function hey(){
	document.getElementById('hello').style.color = 'red';
    // document라는 문서에 'hello'라는 아이디를 가진 요소를 찾아서 스타일을 바꾸는 작업이다.
}

제이쿼리란?

자바스크립트 코드를 좀 더 쉽게 바꾼 코드 라이브러리이다.
CDN를 통해 head태그 안에 코드를 추가해 사용할 수 있다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$('#hello').html('안녕');

'$' 기호를 통해 선택자를 가져와서 조작할 수 있다.

`` 백틱

백틱을 통해 문자열 리터럴과 숫자리터럴등을 혼합해서 사용할 수 있다. ${} 달러기호와 중괄호로 묶어서 변수를 함께 사용할 수도 있다.

let name = '영수';
let age = 18;
let person = `${name}의 나이는 ${age}세이다.`;

2주차를 공부하며...

강의를 들으면서 제이쿼리에 대해 개념에 대해 알게됐고 사용법을 익히게 돼서 좋았다. 딕셔너리(객체) 배열(리스트)에 대해 개념을 다시한번 복습해볼 수 있었다.