본문 바로가기
풀스택 개발일지

[웹개발 종합반 1주차] Javascript

by 노랑사랑팽이 2022. 10. 20.

🔖12. Javascript 맛보기

🔎Javascript

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

Java라는 아무 관련이 없음.

 

Script태그

<head>
  <script>
    function hey(){
      alert('안녕!');
    }
  </script>
</head>

 

Button을 클릭하면 hey() 실행

<body>
  <div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button onclick="hey()">영화 기록하기🔥</button>
  </div>
<body>


🔖13. Javascript 기초 문법 배우기(자료형)

  • 변수
  • List
  • Dictionary

 

🔎Console 의미

[마우스 우클릭]-[검사]

[console] 창이랑 HTML head script태그랑 동일!

개발자들이 개발을 할때 확인하기 편한 도구

 

🔎Console창 분리하고 싶을때

 

🔎 변수 선언 let

 

🔎 List

순서가 중요.

 

🔎 Dictionary

순서 중요하지 않음

Key - Value 매칭되는 값이 있음.

 

🔎 특정 문자열 나누고 싶을때

문자열.split(기준)


🔖14. Javascript 기초 문법 배우기

  • 함수
  • 조건문
  • 반복문

 

🔎 함수

정해진 동작을 하는 것.

<head>
  <script>
    function sum(a, b){
      alert(a + b)
    }
  </script>
</head>

 

🔎 조건문

if문

<head>
  <script>
    function is_adult(age){
      if(age > 20){
        alert('성인입니다')
      } else{
        alert('청소년입니다')
      }
    }
  </script>
</head>

 

🔎 반복문

for문

<head>
  <script>
    let a_list = ['사과', '배', '감', '딸기']
    for(let i = 0; i < a_list.length; i++){
      console.log(a_list[i])
    }
  </script>
</head>

 

🔎 반복문 + 조건문

<head>
  <script>
    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++){
      if(scores[i]['score'] > 70){
        console.log(scores[i]['name'])
      }
    }
  </script>
</head>


🔖15. Javascript 연습하기

🔎 미세먼지 값이 40 미만인 구 이름 출력하기

<head>
  <script>
    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",
      },...{}
    ];
    for(let i = 0; i < mise_list.length; i++){
      if(mise_list[i]["IDEX_MVL"] < 40){
        console.log(mise_list[i]["MSRSTE_NM"])
      }
    }
  </script>
</head>


☀️ 느낀점

내일배움캠프 주트랙 선호도 조사에서 node.js를 선택해서 그런가?

오늘 javascript 내용을 더욱 집중해서 보게된다. 저번에 참여했던 26회차 수강보다 더욱 쉽게 설명해주시는 것 같다. 그때는 미세먼지 데이터도 실시간으로 가져와서 했었는데 이번에는 그냥 복붙 코드를 제공해주셨다.

예전에 수강했을때는 console.log를 왜하는거지? 하면서 했었는데 이번에 다시 들으니 script태그와 동일한 거구나! 개발하기 편한 도구라고 설명해주시니 이해가 되고 유용하게 써먹으면 될 것 같다.

이번에 배운 내용에서 가장 중요한 점은 원하는 값 추출인 듯하다.

어제 백준 문제 풀어야지~ 계획 세우고 네이버 블로그 위젯이랑 스킨 그림 직접 그리느라 시간이 다 갔다..아무튼, 백준 알고리즘 문제 풀때도 가장 오류가 많이 발생하는게 값 추출 제대로 안되는 것과 출력 제대로 안되는 부분이다. 이 부분이 굉장히 중요한것같다. 값을 제대로 추출해야 그 값을 이용해 주고 받을 수 있기 때문이다.

댓글