Summary #1 HTML, CSS, Javascript

핵심요약

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

서버와 클라이언트

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

javascript 기본문법

1. 변수

let a = 변수
const a = 고정값

2. 자료형

1) list(array)

• 서로 비슷한 데이터들의 배열
• index값 [0]부터 시작
• 데이터를 추가, 제거할 수 있음

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

2) dict

• 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’

3. 함수

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

function sum(num1, num2) {
	return num1+num2
}
sum(2,3) = 5

4. 조건문

   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(‘아동입니다’)
}
= 아동입니다

5. 반복문

1) 서울시 미세먼지 값(40 이상인 곳 찾기)

2) 서울시 따릉이 현황(10대 이상인 곳 찾기)

1주차 숙제 '원페이지 쇼핑몰 만들기'
GitHub, Netlify 등록

원페이지 쇼핑몰 바로가기 링크