[2024.07.16 TIL] JS 기초 문법

javascript 기초문법

변수 선언

• var 값 초기화 / let 블록 값 초기화 / const 블록 전용 상수

배열과 딕셔너리

• 배열
  인덱스값 0부터
  ex) let array = [1, 2, 3]; << 항목끼리 같은 자료형(타입)
  console.log(array[0]); ===== 1
• 딕셔너리(맵)
  {키, 값}
  ex) let person = {'name' : 'bob', 'age' : 30, 'height' : 180};
  console.log(person[age]);' ===== 30

조건문과 반복문

• 조건문(if문)
  ex) if (a < 10) {
  console.log('a는 10보다 작습니다.')
  } else {
  console.log('a는 10보다 작습니다.')
  }

• 반복문(for문) 배열, 리스트 등과도 사용

  ex)let ages = {15, 30, 28, 7, 40, 13};
  for(i=0;, i < 6, i++) {
  console.log(ages[i]);
  }

함수

• 선언 및 정의
  매개변수(파라미터)가 필요하기도 함
  작업 수행, 값 계산 등 명령 수행 / 호출 필요
  ex)function a() {
  alert('안녕하세요');
  }
  

///////////////////////////////////////////////////////////////////////////
Jquery
js라이브러리
ex)

function checkResult() {
    let c = [
        { 'name': '영수', 'age': 30 },
        { 'name': '철수', 'age': 35 }
    ]
    $('#q1').text(c[1]['name']);
}

ex)

function checkResult() {

    let people = [
        { 'name': '서영', 'age': 24 },
        { 'name': '현아', 'age': 30 },
        { 'name': '영환', 'age': 12 },
        { 'name': '서연', 'age': 15 },
        { 'name': '지용', 'age': 18 },
        { 'name': '예지', 'age': 36 }
    ]

    $('#q2').empty();

    people.forEach(a => {
        let name = a['name'];
        let age = a['age'];
        let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
        $('#q2').append(temp_html);
    });
}

보강할 것 - jquery 선택자
css 선택자 연습 사이트 https://flukeout.github.io/#
js 콜백함수
비동기 라이브러리
promise 개념

클라이언트 - 서버 개념

• 서버 -> 클라이언트 / json으로 제공(api등) 딕셔너리
  클라이언트 -> 서버 / get 리퀘스트

fetch
브라우저 내장 비동기 통신 라이브러리
api 정보 쉽게 처리
ex)

    function hey() {
        let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
        fetch(url).then(res => res.json()).then(data => {
            console.log(data['RealtimeCityAir']['row'][0]);
        })
    }

ex)

    function hey() {
        let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
        fetch(url).then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row'];
            rows.forEach(a => {
                let gu_name = a['MSRSTE_NM'];
                let gu_mise = a['IDEX_MVL'];
                console.log(gu_name, gu_mise);
            });
        })
    }

html, css 화면 만들기 숙제
부트스트랩 - 점보트론 / 구글 폰트 활용