[기초문법] 웹프로그래밍 A-Z 내일배움캠프 AI트랙

 

html, css, javascript의 개념과 서버와 클라이언트의 관계를 이해하고

javascript의 기본문법(변수, 자료형, 함수, 조건문, 반복문)을 알아보자🔥

 

핵심요약

html = 뼈대

css = 꾸미기
javascript = 움직이기(사용자 상호작용)

 

서버와 클라이언트

서버 <- 클라이언트 (요청)

서버 -> 클라이언트 (html,css,javascript 전송)

 

javascript 기본문법

01. 변수

let a = 변수
const a = 고정값

 

02. 자료형

 

1) 리스트(array)

서로 비슷한 데이터들의 배열

index값 [0]부터 시작

데이터를 추가, 제거할 수 있음

let a_list = [‘수박’, ‘참외’, ‘복숭아’]
a_list[0] = ‘수박’
a_list.push(‘자두’)
a_list = [‘수박’, ‘참외’, ‘복숭아’, ’자두’]

 

2) 딕셔너리

key:value 값의 모임

let a_dict = {‘name: ‘bob’, ‘age’:30}
a_dict[‘name’] = ‘bob’
a_dict[‘height’] = 180
a_dict = {‘name: ‘bob’, ‘age’:30, ‘height’:180}
a_dict[‘fruits’] = a_list
a_list['fruits'] = [‘수박’, ‘참외’, ‘복숭아’, ’자두’]

 

3) 활용 (split을 활용하여 이메일 계정찾기🔥)

let myEmail = kimpearl3599@gmail.com
myEmail.split(‘@‘) = ‘kimpearl3599’, ‘gmail.com’
myEmail.split(‘@‘)[1] = ‘gmail.com’
myEmail.split(‘@‘)[1].split(‘.’) = ‘gmail’, ‘com’
myEmail.split(‘@‘)[1].split(‘.’)[0] = ‘gmail’

 

03. 함수

# 만들기
function sum(num1, num2) {
	return num1+num2
}

# 사용하기
sum(2,3) = 5

 

04. 조건문(if, else if, else)

&&(and), ||(or) 로 조건 추가 가능

let age=24

if(age>20)  {
	console.log(’성인입니다’)
} else {
	console.log(‘청소년입니다’)
}
# 출력값 '성인입니다'

let sex = ‘남성’
if(age>20 && sex == ‘남성’) {
	console.log('성인 남성입니다')
    }
# 출력값 '성인 남성입니다'

let age = 6
if(age>20)  {
	console.log(’성인입니다’)
} else if(age>7)  {
	console.log(‘청소년입니다’)
} else {
	console.log(‘아동입니다’)
}
# 출력값 '아동입니다'

 

05. 반복문(for)

복잡한 리스트나 딕셔너리에서 원하는 데이터를 추출할 때 유용함

# 0부터 99까지 console.log(i)를 반복하라는 명령
# 조건에 부합하지 않으면 더이상 반복하지 않고 종료
for (let i = 0; i < 100; i++) {
	console.log(i);
}

let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
]

# scores의 길이만큼 반복문을 돌려서 딕셔너리 출력
for (let i = 0 ; i < scores.length ; i++) {
	console.log(scores[i]);
}
# 출력값
# {'name':'철수', 'score':90},{'name':'영희', 'score':85}, {'name':'민수', 'score':70}

# 조건에 부합하는 딕셔너리의 'name'의 value 값만 추출
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 80) {
		console.log(scores[i]['name']);
	}
}
# 출력값 
# '민수'