[1주차_웹개발] 개발일지 (javascript)

1. 서버와 클라이언트의 역할에 대해 이해한다.
2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
   3. Javascript 기초 문법을 익힌다.

✍️ 변수 & 기본연산

• 변수 대입 : 오른쪽에 있는 것을 왼쪽에 넣는 것
• let 으로 변수 선언

let num = 20

✍️ 리스트 & 딕셔너리

• 리스트 : 순서를 지켜서 가지고 있는 형태

let a_list = [1,2,3,4,5]

a_list[2] 				//3을 출력
a_list.push('10000') 	//a_list = [1,2,3,4,5,10000]
a_list.length			//6을 출력

• 딕셔너리 : 'key' : 'value'값의 묶음

let a_dict = {'name' : 'Bob', 'age': '20'}

a_dict['name'] 			//'Bob'을 출력
a_dict['height'] = 180	//a_dict에 'height' : '180' 넣기

• 리스트와 딕셔너리의 조합

순서를 표시할 수 있고, 정보를 묶을 수 있습니다.

앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름,  휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.

let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘듭니다.)

👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};

👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
let customer = [
    {'name': '김스파', 'phone': '010-1234-1234'},
    {'name': '박르탄', 'phone': '010-4321-4321'}
]

👉2번째 손님 전화번호
customer[1]['phone']

✍️ 이외의 기본 함수

특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'sparta@gmail.com'

let result = myemail.split('@') // ['sparta','gmail.com']

result[0] // sparta
result[1] // gmail.com

let result2 = result[1].split('.') // ['gmail','com']

result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com

myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

모든 알파벳을 대문자로 바꾸고 싶은 경우

let myname = 'spartacodingclub'

myname.toUpperCase() // SPARTACODINGCLUB

✍️ 함수

• 기본 생김새

function 함수이름(필요한 변수들) {
	내릴 명령들을 순차적으로 작성
}

함수이름(필요한 변수들)

✍️ 조건문

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}

is_adult(25)

• 조건에서는 ==으로 쓰기!
  =는 변수 대입 시 사용하는 것
• if, else if, else if, else
• and 조건 : &&
  or 조건 : ||

✍️ 반복문

for (let i = 0; i < 100; i++) {
	console.log(i);
}

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]

for (let i = 0 ; i < scores.length ; i++) {
	console.log(scores[i]);
}

// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,

for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.