본문 바로가기
개발일지/Web Development

Javascript 연습하기

by jungwonyu 2022. 1. 24.
728x90

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

    {
    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 미만인 구 이름과 값을 함께 출력하고자 한다.

1) for 반복문을 사용 / mise_list의 길이까지 반복

2) if 조건문을 사용 / 미세먼지(IDEX_MVL)가 40 미만 설정, 구 이름과 값 변수 설정

3) console.log를 통해 구 이름과 값 찍어내기

 

📌 함수로 만들어두면 유용하게 쓸 수 있다.

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(index + "보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }
}

// 이러면 아래와 같은 것이 가능!
show_gus(40) // 40보다 작은 구만 출력!
show_gus(35) // 35보다 작은 구만 출력!

 

(2) 자전거(parkingBikeTotCnt)가 5개 이하인 정류장의 이름을 출력하기

{
    rackTotCnt: "37",
    stationName: "212. 여의도역 1번출구 옆",
    parkingBikeTotCnt: "9",
    shared: "0",
    stationLatitude: "37.52136230",
    stationLongitude: "126.92346191",
    stationId: "ST-58",
  }

데이터는 위와 같이 되어있음!

for (let i = 0; i < bikes.length; i++) {
	if (bikes[i]['parkingBikeTotCnt'] <= 5) {
		let station = bikes[i]['stationName'];
		console.log(station);
	}
}

1) for 반복문을 사용 / bikes_list의 길이까지 반복

2) if 조건문을 사용 / 자전거(parkingBikeTotCnt)가 5개 이하 설정, 정류장 이름 변수 설정

3) console.log를 통해 정류장 이름 찍어내기

 

 📌 함수로 만들어두면 유용하게 쓸 수 있다.

function show_names(num){
	for (let i = 0; i < bikes.length; i++) {
		if (bikes[i]['parkingBikeTotCnt'] <= num) {
				let station = bikes[i]['stationName'];
				console.log(num + "대 이하 정류장 : " + station);
		}
	}
}

// 이러면 아래와 같은 것이 가능!
show_names(10) // 10개 이하 주차된 정류소만 출력!
show_names(5) // 5개 이하 주차된 정류소만 출력!

💁‍♀️짝/홀수에 따라 다른 얼럿 띄우는 onclick 함수 함께 만들어보기

// 짝/홀수 판단하는 방법
let even = 4;
console.log(even % 2); // 2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); // 2로 나눈 나머지가 1
    <script>
        let count = 1; // 밖에 변수를 쓰면 함수와 상관 없이 쓸 수 있고 함수 안에 선언 하면 함수 끝나면 끝남
        function hey() {
            if (count % 2 == 0) {
                alert('짝수입니다!')
            } else {
                alert('홀수입니다!')
            }
            count += 1;
        }
    </script>