학습 내용
- Java Script 기초문법 연습
(1) 서울시 미세먼지가 40 초과인 구 이름 & 값
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)
}
}- i는 0이고, i가 미세리스트의 항목 수보다 적을 때까지 i 출력을 반복한다. (기본 반복문)
- gu_name은 미세리스트의 i번째의 'MSRSTE_NM'이다.(리스트, Dictionary)
- gu_mise는 미세리스트의 i번째의 'IDEX_MVL'이다.
(리스트, Dictionary)
Ex) 아래 항목은 미세리스트의 0번째 항목이며 해당 항목의 gu_name은 중구, gu_mise는 31이다.
{
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",
},- 이런 조건에서, gu_mise가 40보다 큰 gu_name과 gu_mise를 출력하라.
(조건문)
(2) 자전거가 5개 이하인 정류장의 이름
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) {
let station = bikes[i]['stationName'];
console.log(station);
}
}- i는 0이고, i가 자전거 리스트의 항목 수보다 적을 때까지 i 출력을 반복한다. (기본 반복문)
- 자전거 리스트의 i번째의 'parkingBikeTotCnt'가 5보다 작거나 같고
(리스트, Dictionaray, 조건문) - staion은 bikes의 i번째의 'stationName'이라고 정의할 때, staion을 출력하라.
- 강의 3회 반복 청취 후 개인 연습
- 소괄호, 중괄호, 대괄호 아직 헷갈림, 연습 해야함
- 코드를 한 줄씩 뜯어서 보는 연습이 더 필요
목표[1] 진행 상황
- 결과
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NAVER_prac</title>
<style>
.first-row {
text-align: right;
font-size: 13px;
margin-right: 50px;
display: block;
}
.jr-naver {
text-decoration: none;
color: lightgray;
}
.happy-bean {
text-decoration: none;
color: lightgray;
}
/*하이퍼링크 <a> 편집하고 싶을 땐 이렇게*/
.main-logo {
/*하이퍼링크 밑줄 없애기*/
text-decoration: none;
width: 150px;
color: #03c75a;
font-size: 45px;
font-weight: bolder;
}
.logo {
width: 1000px;
height: 100px;
padding-top: 10px;
}
.search-btn {
color: white;
font-size: 15px
}
</style>
</head>
<body>
<div class="first-row">
<a href="http://help.naver.com/support/contents/contents.help?serviceNo=1074&categoryNo=16719" target="_blank"
style="text-decoration: none; color: black;">네이버를 시작페이지로</a>
<button>></button>
<a href="https://jr.naver.com/" target="_blank"
style="text-decoration: none; color: lightgray;">쥬니어네이버</a>
<a href="https://happybean.naver.com/" target="_blank"
style="text-decoration: none; color: lightgray;">해피빈</a>
</div>
<div class="logo">
<h1>
<a class="main-logo" href="http://naver.com/" target="_blank">NAVER</a>
<!-- 검색창<input> 꾸밀 때는 옆에 <style> 따로 달고 똑같이 css편집-->
<input type="text" style="width:400px;height:40px; padding-right:150px; border: 2px solid #03c75a;">
<button class="search-btn" style=": white; width:50px; height:45px; background-color: #03c75a;
border: 2px solid #03c75a;">검색
</button>
</h1>
</div>
<div>
<hr>
<span style="color:#03c75a">메일 카페 블로그 지식IN 쇼핑 쇼핑LIVE Pay TV</span>
사전 뉴스 증권 부동산 지도 VIBE 책 웹툰 더보기
<button>></button>
<hr>
</div>
</body>
</html>-
내용
: 기존 파일에 하이퍼링크 추가 -
세부 수정 사항
- 쥬니어네이버 텍스트에 쥬니어네이버 페이지로 가는 하이퍼링크 추가
- 해피빈 텍스트에 해피빈 페이지로 가는 하이퍼링크 추가
- 자가 점검
- 자바스크립트 기본 문법 공부하느라 네이버 연습파일을 많이 만지지 못함. 다음주부터 시간 더 할애할 것.
- 부트스트랩 이용해 조금 더 완성도 있게 수정해야함
목표[2] 진행 상황
- 구상 단계
안녕하세요!