21.09.08. 1-12~15강 (Javascript)

[Javascript]

 

- 브라우저가 유일하게! 알아들을 수 있는 프로그래밍 언어 (명령)

  why? 이미 모든 브라우저가 역사적으로 javascript를 알아듣게 설계되어 있다. 표준이 됨.

 

<script></script> 태그 사용

 

 

검사 -> console => 개발자 도구에서 불러다 쓸 수 있음

바로바로 수정하기 쉬움.

 

 

 

 

 

[변수]

 

값을 담는 것.

 

let a=2 (a라는 박스에 2를 넣었다)

a+3을 치면 5가 나옴

 

문자열도 담을 수 있음. 작은 따옴표, 큰 따옴표 사용.

let first_name = 'haeun'

let last_name = 'Goo'

 

first_name + last_name
"haeunGoo"

 

first_name + a
"haeun2"

 

변수 이름은 누구나 알아보기 쉽게, 그럴싸하게 지어 놓는다.

 

Ctrl + L = 화면 리프레시 됨

이 때는 이전 변수도 불러와짐

그러나 웹 페이지 새로고침 하면 완전 리셋

방향키 위로 버튼 누르면 이전에 쳤던 게 나옴

 

 

 

 

 

 

[자료형]

 

*리스트형 (순서가 중요한 담기)

ex)시장에 가면~

 

let a_list = ['수박','참외','배'] (a 리스트의 순서. 0부터 시작)

 

a_list[0]
"수박"
a_list[1]
"참외"
a_list[2]
"배"
a_list[3]
undefined

 

a_list.push('감') =>중간에 추가하는 것

4

a_list
(4) ["수박", "참외", "배", "감"]

 

 

 

 

*Dictionary형

생일이 언제야? 7월 16일!

 key                value

 

순서가 중요X (리스트와 다름)

 

a_dict
{name: "Haeun", age: 27, height: 152, fruits: Array(4)}

 >age: 27

 >fruits: (4) ["수박", "참외", "배", "감"]0: "수박"1: "참외"2: "배"3: "감"length: 4

 >height: 152

 >name: "Haeun"

a_dict['fruits'][2]
"배"

 

 

 

 

let a = 100

a % 7 (a를 7로 나눈 나머지)
2

 

a < 150
true
a > 200
false
a == 100 (A와 B가 같다)
true

a != 100 (A와 B가 다르다)
false

 

 

 

 

let myemail = 'meow716@naver.com'
undefined

myemail.split('@')
(2) ["meow716", "naver.com"]

myemail.split('@')[1]
"naver.com"

myemail.split('@')[1].split('.')
(2) ["naver", "com"]

myemail.split('@')[1].split('.')[0]
"naver"

 

 

 

 

[함수]

 

- 정해진 동작을 하는 것

 

function sum(num1, num2){
    return num1+num2
}

=>sum은 그냥 이름. aaa도 상관X

    num1, num2라는 변수를 받아서 그 둘을 더한 값을 return(끝내고 변신시키기)해라.

    return 설정을 안하면 해당 함수 작업만 하고 끝나는 것. (결과값, 변화를 내지 않음)

 

let result = sum(2,3)

result
5

 

 

 

function mysum(){
    alert('안녕!')
    alert('또 안녕!')
}

mysum()

 

=>아무 변수도 받지 않아요! () 처럼 빈괄호 사용.

 

 

 

 

 

 

[조건문]

 

let age = 24

if (age > 20) {
    console.log('성인입니다')
} else {
    console.log('청소년입니다')
}  
VM3071:2 성인입니다

let sex = '남성'

if (age > 20 && sex == '남성') {
    console.log('성인 남성입니다')
} else {
    console.log('청소년입니다')
}  
VM3175:2 성인 남성입니다

if (age > 20 && sex || '남성') {
    console.log('성인이거나 남성입니다')
} else {
    console.log('청소년입니다')
}  
VM3193:2 성인이거나 남성입니다

if (age > 20) {
    console.log('성인입니다')
} else if (age > 7) {
    console.log('청소년입니다')
} else {
    consol.log('아동입니다')
}
VM3316:2 성인입니다

 

if

else if

else

 

 

 

 

 

[반복문]

 

for (let i = 0; i < 5; i++) {            =>i는 0부터 i가 5보다 작을 때 i가 하나씩 높여진다.
    console.log(i)
}
VM3445:2 0
VM3445:2 1
VM3445:2 2
VM3445:2 3
VM3445:2 4

 

 

*반복문 예제1

 

let people = ['철수','영희','민수','형준','기남','동희']

people.length
6

for (let i = 0; i < people.length; i++) {
    console.log(people[i])
}
VM3578:2 철수
VM3578:2 영희
VM3578:2 민수
VM3578:2 형준
VM3578:2 기남
VM3578:2 동희

 

 

 

*반복문 예제2

 

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

scores[0]
{name: "철수", score: 90}

scores[1]
{name: "영희", score: 85}

scores[1]['score']
85

 

 

 

 

scores
(6) [{…}, {…}, {…}, {…}, {…}, {…}]

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i])
}
VM3798:2 {name: "철수", score: 90}
VM3798:2 {name: "영희", score: 85}
VM3798:2 {name: "민수", score: 70}
VM3798:2 {name: "형준", score: 50}
VM3798:2 {name: "기남", score: 68}
VM3798:2 {name: "동희", score: 30}

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]['name'])
}
VM3811:2 철수
VM3811:2 영희
VM3811:2 민수
VM3811:2 형준
VM3811:2 기남
VM3811:2 동희

for (let i = 0; i < scores.length; i++) {
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name,score)
}
VM4024:4 철수 90
VM4024:4 영희 85
VM4024:4 민수 70
VM4024:4 형준 50
VM4024:4 기남 68
VM4024:4 동희 30

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)
    }
}
VM4069:5 형준 50
VM4069:5 기남 68
VM4069:5 동희 30

 

 

 

 

[연습하기]

 

mise_list
(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, …}ARPLT_MAIN: "O3"CO: 0.4IDEX_MVL: 31IDEX_NM: "좋음"MSRDT: "201912052100"MSRRGN_NM: "도심권"MSRSTE_NM: "중구"NO2: 0.015O3: 0.018PM10: 22PM25: 14SO2: 0.002[[Prototype]]: Object1: {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, …}2: {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, …}3: {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, …}4: {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, …}5: {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, …}6: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, …}7: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, …}8: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, …}9: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, …}10: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, …}11: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, …}12: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, …}13: {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, …}14: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, …}15: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, …}16: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, …}17: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, …}18: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, …}19: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, …}20: {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, …}21: {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, …}22: {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, …}23: {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, …}24: {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, …}length: 25[[Prototype]]: Array(0)

for (let i = 0; i < mise_list.length; i++) {
    console.log(mise_list[i])
}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "중구", PM10: 22, PM25: 14, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "종로구", PM10: 24, PM25: 18, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "도심권", MSRSTE_NM: "용산구", PM10: 0, PM25: 15, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "은평구", PM10: 36, PM25: 14, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "서대문구", PM10: 28, PM25: 9, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서북권", MSRSTE_NM: "마포구", PM10: 26, PM25: 8, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "광진구", PM10: 17, PM25: 9, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성동구", PM10: 21, PM25: 12, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "중랑구", PM10: 27, PM25: 10, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "동대문구", PM10: 26, PM25: 9, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "성북구", PM10: 27, PM25: 8, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "도봉구", PM10: 25, PM25: 12, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "강북구", PM10: 30, PM25: 15, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동북권", MSRSTE_NM: "노원구", PM10: 21, PM25: 14, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "강서구", PM10: 36, PM25: 16, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "구로구", PM10: 23, PM25: 10, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "영등포구", PM10: 29, PM25: 15, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "동작구", PM10: 29, PM25: 15, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "관악구", PM10: 27, PM25: 12, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "금천구", PM10: 25, PM25: 15, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "서남권", MSRSTE_NM: "양천구", PM10: 0, PM25: 14, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강남구", PM10: 31, PM25: 16, …}ARPLT_MAIN: "PM10"CO: 0.4IDEX_MVL: 39IDEX_NM: "좋음"MSRDT: "201912052100"MSRRGN_NM: "동남권"MSRSTE_NM: "강남구"NO2: 0.018O3: 0.018PM10: 31PM25: 16SO2: 0.003[[Prototype]]: Object
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "서초구", PM10: 34, PM25: 13, …}
VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "송파구", PM10: 25, PM25: 6, …}

 

VM4362:2 {MSRDT: "201912052100", MSRRGN_NM: "동남권", MSRSTE_NM: "강동구", PM10: 24, PM25: 14, …}

ARPLT_MAIN: "PM25"

CO: 0.4

IDEX_MVL: 39

IDEX_NM: "좋음"

MSRDT: "201912052100"

MSRRGN_NM: "동남권"

MSRSTE_NM: "강동구"

NO2: 0.02

O3: 0.016

PM10: 24

PM25: 14

SO2: 0.002

[[Prototype]]: Object

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)
}
VM4553:4 중구 31
VM4553:4 종로구 39
VM4553:4 용산구 -99
VM4553:4 은평구 42
VM4553:4 서대문구 37
VM4553:4 마포구 36
VM4553:4 광진구 31
VM4553:4 성동구 33
VM4553:4 중랑구 34
VM4553:4 동대문구 34
VM4553:4 성북구 37
VM4553:4 도봉구 41
VM4553:4 강북구 39
VM4553:4 노원구 36
VM4553:4 강서구 42
VM4553:4 구로구 37
VM4553:4 영등포구 41
VM4553:4 동작구 41
VM4553:4 관악구 37
VM4553:4 금천구 43
VM4553:4 양천구 -99
VM4553:4 강남구 39
VM4553:4 서초구 41
VM4553:4 송파구 42
VM4553: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)
    }
}
VM4675:5 은평구 42
VM4675:5 도봉구 41
VM4675:5 강서구 42
VM4675:5 영등포구 41
VM4675:5 동작구 41
VM4675:5 금천구 43
VM4675:5 서초구 41
VM4675:5 송파구 42