프로그래밍에서의 함수는 정해진 동작을 하는 것
부르면 정해진 동작을 한다.
예시)
function sum(num1, num2){
return num1 + num2
}
undefined
let result = sum(2,3)
undefined
result
5
줄 순서에 따라 정해진 동작을 수행한다
function mysum(num1, num2){
alert('안녕!')
return num1 + num2
}
undefined
let result2 = mysum(2,3)
undefined
이때 1. alert를 출력 하고
2. num1 + num2 값을 result2에 넣는다
result2
5
if문 / 조건문
예시)
let age = 24
undefined
if (age > 20) {
console.log('성인입니다.')
} else{
console.log('청소년입니다.')
}
성인입니다.
let sex = '남성'
undefined
if (age >20 && sex == '남성') {
console.log('성인 남성입니다.')
} else {
console.log('청소년입니다.')
}
성인 남성입니다.
if (age > 20) {
console.log('성인입니다.')
} else if (age > 7) {
console.log('청소년입니다.')
} else {
console.log('아동입니다.')
}
성인입니다.
&& (and)
|| (or) vertical bar 2개
조건문은 직관적이라 이해하기 어렵지 않음. 하지만 반복문이 헷갈림
반복문 /
for (let i = 0; i < 10; i++) {
console.log(i)
}
VM3435:2 0
VM3435:2 1
VM3435:2 2
VM3435:2 3
VM3435:2 4
VM3435:2 5
VM3435:2 6
VM3435:2 7
VM3435:2 8
VM3435:2 9
undefined
리스트 자료형과 반복문은 찰떡궁합
let people = ['철수','영희','민수','형준','기남','동희']
undefined
people.length
6
for (let i = 0; i < people.length; i++) {
console.log(people[i]) 리스트를 한 바퀴 돌아라
}
VM3545:2 철수
VM3545:2 영희
VM3545:2 민수
VM3545:2 형준
VM3545:2 기남
VM3545:2 동희
undefined
더 자주 쓰는 패턴
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
undefined
scores[0]
{name: "철수", score: 90}
scores[1]
{name: "영희", score: 85}
scores[1]['score']
85
------
for (let i = 0; i < scores.length; i++) {
console.log(scores[i])
}
VM3772:2 {name: "철수", score: 90}
VM3772:2 {name: "영희", score: 85}
VM3772:2 {name: "민수", score: 70}
VM3772:2 {name: "형준", score: 50}
VM3772:2 {name: "기남", score: 68}
VM3772:2 {name: "동희", score: 30}
undefined
------
for (let i = 0; i < scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
console.log(name,score)
}
VM3943:4 철수 90
VM3943:4 영희 85
VM3943:4 민수 70
VM3943:4 형준 50
VM3943:4 기남 68
VM3943:4 동희 30
undefined
if 문과 함께
for (let i = 0; i < scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
if (score <70) {
console.log(name,score)
}
}
VM4034:5 형준 50
VM4034:5 기남 68
VM4034:5 동희 30
심화 예제
서울시 미세먼지 값 (참고용, 코드 예제는 아래 더보기)
리스트 안에 딕셔너리가 있는 형태
let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성동구",
PM10: 21,
PM25: 12,
O3: 0.018,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 33,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "중랑구",
PM10: 27,
PM25: 10,
O3: 0.015,
NO2: 0.019,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "동대문구",
PM10: 26,
PM25: 9,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성북구",
PM10: 27,
PM25: 8,
O3: 0.022,
NO2: 0.014,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "도봉구",
PM10: 25,
PM25: 12,
O3: 0.024,
NO2: 0.011,
CO: 0.3,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "강북구",
PM10: 30,
PM25: 15,
O3: 0.022,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "노원구",
PM10: 21,
PM25: 14,
O3: 0.017,
NO2: 0.016,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "강서구",
PM10: 36,
PM25: 16,
O3: 0.021,
NO2: 0.013,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "구로구",
PM10: 23,
PM25: 10,
O3: 0.022,
NO2: 0.016,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "영등포구",
PM10: 29,
PM25: 15,
O3: 0.01,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "동작구",
PM10: 29,
PM25: 15,
O3: 0.012,
NO2: 0.023,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "관악구",
PM10: 27,
PM25: 12,
O3: 0.012,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "금천구",
PM10: 25,
PM25: 15,
O3: 0.015,
NO2: 0.02,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "양천구",
PM10: 0,
PM25: 14,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강남구",
PM10: 31,
PM25: 16,
O3: 0.018,
NO2: 0.018,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "서초구",
PM10: 34,
PM25: 13,
O3: 0.024,
NO2: 0.019,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "송파구",
PM10: 25,
PM25: 6,
O3: 0.014,
NO2: 0.025,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강동구",
PM10: 24,
PM25: 14,
O3: 0.016,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
];
반복 예제
for (let i=0; i < mise_list.length; i++) {
let gu_name = mise_list[i]['MSRSTE_NM']
let gu_mise = mise_list[i]['IDEX_MVL']
console.log(gu_name,gu_mise)
}
VM4747:4 중구 31
VM4747:4 종로구 39
VM4747:4 용산구 -99
VM4747:4 은평구 42
VM4747:4 서대문구 37
VM4747:4 마포구 36
VM4747:4 광진구 31
VM4747:4 성동구 33
VM4747:4 중랑구 34
VM4747:4 동대문구 34
VM4747:4 성북구 37
VM4747:4 도봉구 41
VM4747:4 강북구 39
VM4747:4 노원구 36
VM4747:4 강서구 42
VM4747:4 구로구 37
VM4747:4 영등포구 41
VM4747:4 동작구 41
VM4747:4 관악구 37
VM4747:4 금천구 43
VM4747:4 양천구 -99
VM4747:4 강남구 39
VM4747:4 서초구 41
VM4747:4 송파구 42
VM4747:4 강동구 39
조건 + 반복
for (let i=0; i < mise_list.length; i++) {
let gu_name = mise_list[i]['MSRSTE_NM']
let gu_mise = mise_list[i]['IDEX_MVL']
if (gu_mise >40) {
console.log(gu_name,gu_mise)
}
}
VM4809:5 은평구 42
VM4809:5 도봉구 41
VM4809:5 강서구 42
VM4809:5 영등포구 41
VM4809:5 동작구 41
VM4809:5 금천구 43
VM4809:5 서초구 41
VM4809:5 송파구 42
undefined
숙제 힌트
1. homework 폴더 안에 index.html
2.부트스트랩 시작 템플릿으로 시작해야함.
3.div에 back-ground img 씌위던가
4. 가격부분만 span 태그를 줄수 있음
5. dropdown 부트 스트렙 사용
6. 글자는 display:block을 주면 margin등이 적용됌
'인강 > SpartaCoding 왕초보 시작반' 카테고리의 다른 글
| Java script 기초 of basic 문법 (변수, 자료형, 약간의 함수) (0) | 2021.06.05 |
|---|---|
| 6/5 css quiz (0) | 2021.06.05 |
| 6/3 부트스트랩 (0) | 2021.06.03 |
| 6/2 CSS 기초 (0) | 2021.06.03 |
댓글