스파르타코딩클럽 웹개발 종합반

Javascript 맛보기

1) 자바스크립트란?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.
3) 자바스크립트 - HTML 연결. 버튼을 클릭하면 경고창이 뜨게하기
- 함수를 만들어두기
```
  function hey(){
  	alert('안녕!');
  }
```
  👉 ~ 안에 로 공간을 만들어 작성. 내에 자바스크립트를 작성
- 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불린다.
```
  <button onclick="hey()">영화 기록하기</button>
```

Javascript 기초 문법 배우기(1)

1) 본격적으로 문법을 배우기?

[크롬 개발자도구]를 열어서, console 탭에 작성!

👉 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능! 크롬 개발자도구 콘솔창은 어떤 의미? > 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구.
- 윈도우: F12
- 맥: alt(option) + command + i
- console.log(변수)
```
  --
  console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
  개발자가 결과값을 보기 편하도록!
            
  console.log(변수1,변수2) 로 여러 변수를 한번에 출력가능.
            
  console.log("Hello World!");
```

변수 & 기본연산

변수 대입( a = 2 )의 의미: “오른쪽에 있는 것을 왼쪽에 넣는 것!” (2를 a라는 변수에 넣는다)
let으로 변수를 선언.
```
  let num = 20
  num = 'Bob'
```

사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.

  let a = 1
  let b = 2
            
  a+b // 3
  a/b // 0.5
            
  let first = 'Bob'
  let last = 'Lee'
            
  first+last // 'BobLee'
            
  first+' '+last // 'Bob Lee'
            
  first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

변수명은 아무렇게나?

  let first_name = 'bob' // snake case라고 함.
            
  또는,
            
  let firstName = 'bob' // camel case라고 함.
            
  알아보기 쉽게! 다른 특수문자 또는 띄워쓰기는 불가능!

Javascript 기초 문법 배우기(2)

리스트 & 딕셔너리

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

  let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
        
  // 또는,
        
  let b_list = [1,2,'hey',3] // 로 선언 가능
        
  b_list[1] // 2 를 출력
  b_list[2] // 'hey'를 출력
        
  // 리스트에 요소 넣기
  b_list.push('헤이')
  b_list // [1, 2, "hey", 3, "헤이"] 를 출력
        
  // 리스트의 길이 구하기
  b_list.length // 5를 출력

딕셔너리: 키(key)-밸류(value) 값의 묶음

  let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
        
  // 또는,
        
  let b_dict = {'name':'Bob','age':21} // 로 선언 가능
  b_dict['name'] // 'Bob'을 출력
  b_dict['age'] // 21을 출력
        
  b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
  b_dict // {name: "Bob", age: 21, height: 180}을 출력

리스트와 딕셔너리의 조합

  names = [{'name':'bob','age':20},{'name':'carry','age':38}]
        
  // names[0]['name']의 값은? 'bob'
  // names[1]['name']의 값은? 'carry'
        
  new_name = {'name':'john','age':7}
  names.push(new_name)
        
  // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
  // names[2]['name']의 값은? 'john'

기본 함수들

사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재.

  **예를 들면, '나눗셈의나머지'를 구하고 싶은 경우**
        
  let a = 20
  let b = 7
        
  a % b = 6

  **또, 특정 문자로 문자열을 나누고 싶은 경우**
        
  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 -> 간단하게 쓸 수도 있다!

Javascript 기초 문법 배우기(3)

1) 더 본격적으로 문법을 배워볼까요!

함수

기본 생김새

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

예시

  // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
  function sum(num1, num2) {
  	console.log('숫자', num1, num2);
  	return num1 + num2;
  }
            
  sum(3, 5); // 8
  sum(4, -1); // 3

조건문

20 보다 작으면 작다고, 크면 크다고 알려주는 함수

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

if, else if, else if, else if else

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

Javascript 기초 문법 배우기(4)

반복문

예를 들어 0부터 99까지 출력해야 하는 상황이라면!

  console.log(0)
  console.log(1)
  console.log(2)
  console.log(3)
  console.log(4)
  console.log(5)
  ...
  console.log(99)
        
  // 이거슨 막노동!

반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있다.

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

  for (1. 시작조건; 2. 반복조건; 3. 더하기) {
  	4. 매번실행
  }
        
  1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
  -> 2체크하고 -> (괜찮으면) -> 4 -> 3
        
  와 같은 순서로 실행된다.
  i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옴.

반복문은 주로 리스트와 함께 쓰입니다.

[코드스니펫] 반복문 예제1

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

  let people = ['철수','영희','민수','형준','기남','동희']
        
  // 이렇게 하면 리스트의 모든 원소를 한번에 출력.
  // i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 된다.
  for (let i = 0 ; i < people.length ; i++) {
  	console.log(people[i])
  }

딕셔너리가 들어간 리스트와 찰떡!

반복문 예제2

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

  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점 미만인 사람들의 이름만 출력할 수도 있다.

Javascript 연습하기

1) 전형적인 패턴 함께 연습하기

(1) 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기

서울시 미세먼지 값

  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 mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }

40 이하든, 35 이하든 유용하게 쓸 수 있게, 함수로 만들어보기.

  function show_gus(index) {
    for (let i = 0; i < mise_list.length; i++) {
      let mise = mise_list[i];
      if (mise["IDEX_MVL"] < index) {
        let gu_name = mise["MSRSTE_NM"];
        let gu_mise = mise["IDEX_MVL"];
  	    console.log(gu_name, gu_mise);
      }
    }
  }
        
  // 이러면 아래와 같은 것이 가능!
  show_gus(40) // 40보다 작은 구만 출력!
  show_gus(35) // 35보다 작은 구만 출력!

스파르타코딩클럽 웹개발 종합반 - 1주차

1-4