웹개발 일지 – 2주차:

by

▷ 자바스크립트란?

  • 프로그래밍 언어 중 하나로 브라우저가 이해하는 언어입니다.
  • (상식을 기다려!
    )
    Q. 브라우저가 Javascript만 인식하는 이유는 무엇입니까? HTML에서 Python이나 Java와 같은 언어를 사용할 수 없습니까?
    A. 불가능한 이야기는 아닙니다.
    그러나 이러한 “이미 만들어진 역사적 이유 및 표준”으로 인해 모든 브라우저는 기본적으로 Javascript를 이해하도록 설계되었으며 모든 웹 서버는 HTML+CSS+Javascript를 제공하도록 되어 있습니다.

▷ Javascript의 기본 구문 배우기

  • console.log()는 화면의 미리보기를 캡처합니다.
    • Console.log는 개발자가 우리가 코딩한 내용이 제대로 출력되는지 미리 확인하는 도구입니다.
      .?


console.log(‘안녕하세요’)

  • 변수 및 기본 연산
  • 목록 및 사전
    • 목록: 이것은 물건을 순서대로 유지하는 한 형태입니다.
      !
      컴퓨터 0부터 세다!
      목록에서 첫 번째 값은 (0)으로 로드됩니다!
      • 허용하다 목록 = () // 목록을 선언합니다.
        변수 이름은 무엇이든 될 수 있습니다!

        // 또는,

        허용하다 ㅏ = (‘사과’, ‘수박’, ‘딸기’, ‘감’) //로 선언할 수 있습니다.

        콘솔.로그(a(1)) // 수박
        console.log(a(0)) // 죄송합니다

        // 목록 길이 가져오기
        console.log(a.길이) //4

    • 사전: 키-값 값 세트
      • 허용하다 a_dict = {} // 사전 선언. 변수 이름은 무엇이든 될 수 있습니다!

        // 또는,

        허용하다 ㅏ = {‘성’:‘영수’,‘나이’:27} //로 선언할 수 있습니다.

        콘솔.로그(a)
        콘솔.로그(a(‘성’)) // 영수
        콘솔.로그(b_dict(‘나이’)) // 27

    • 목록과 사전의 조합
      • 괄호와 키 값 형태로 많은 데이터를 쓰고 있어요!
        기본 문법입니다!
      • 허용하다 ㅏ = (
        {‘성’:‘영수’,‘나이’:27},
        {‘성’:‘후퇴’,‘나이’:15},
        {‘성’:‘영희’,‘나이’:20}
        )
        console.log(a(0)(‘성’)) //영수
        console.log(a(1)(‘나이’)) //15
    • 왜 필요할까요
      • 주문 및 그룹 정보를 볼 수 있습니다.

        위에서 언급한 정말 잘나가고 전국에서 손님들이 찾아오십니다.
        대기자 명단을 작성하기 위해 도착한 순서대로 이름과 휴대폰 번호를 적으라는 요청을 받았습니다.
        변수만 사용하면 다음과 같습니다.

        let customer_1_name=”스파킴”;
        남겨 customer_1_phone=”010-1234-1234″;
        let customer_2_name=”바클레탄”;
        남겨 customer_2_phone=”010-4321-4321″;
        …(보기 어렵습니다.
        )

        사전을 사용하여 다음과 같이 고객별로 정보를 그룹화할 수 있습니다.

        let customer_1 = {‘이름’: ‘김스파’, ‘전화’: ‘010-1234-1234’};
        let customer_2 = {‘이름’: ‘바클레탄’, ‘전화’: ‘010-4321-4321’};

        목록을 사용하여 순서를 나타내면 상황이 정말 좋아집니다.

        고객 떠나기 = (
        {‘이름’: ‘김스파’, ‘전화’: ‘010-1234-1234’},
        {‘이름’: ‘바클레탄’, ‘전화’: ‘010-4321-4321’}
        )

        깔끔해 보이고 사용하기 쉬우며 새로운 고객이 오더라도 .push 기능을 사용하여 응답할 수 있습니다.

    • 추가 리소스 – 필수 기능
      • 네 가지 산술 연산 외에도 기본적으로 제공되는 몇 가지 기능이 있습니다.

        왠지 이게 존재하는 것 같죠? (예: 특정 캐릭터를 변경하고 싶다 등) 구글에 먼저 검색해보세요!
      • 예를 들어, ‘나머지 부서’얻고 싶다면
        a = 20으로 하자
        b = 7로 하자

        a % b = 6

      • 또한 특정 문자 뒤에 문자열을 분할하려는 경우
        허용하다 내 이메일 = ‘sparta@googlemail.com’

        허용하다 결과 = myemail.split(‘@’) // (‘스파르타’,’googlemail.com’)

        결과(0) //스파르타
        결과(1) // gmail.com

        허용하다 결과2 = 결과(1).분할(‘.’) // (‘gmail’,’com’)

        결과2(0) // gmail -> 우리가 알고 싶었던 것!

        결과2(1) // com

        myemail.split(‘@’)(1).분할(‘.’)(0) // gmail -> 그냥 쓰시면 됩니다!

▷ Javascript 및 JQuery 연습 (1)

  • JQuery 란 무엇입니까?
    jQuery를 사용하는 이유는 무엇입니까? 인터넷 조작 시도!
    왜 조작? 이동하려면!
    하지만 javascript만 사용하는 것은 복잡해서 jQuery도 사용합니다!
    • HTML 요소를 조작하는 기성품 편리한 자바 스크립트. 도서관!

      그러나 모든 기능(예: 버튼 텍스트 변경)은 Javascript로 구현할 수 있습니다.

      1) 코드가 복잡하고 2) 브라우저 간 호환성 문제도 해결됩니다.
      제이Query라는 라이브러리가 등장했습니다.
    • jQuery와 Javascript – 코드 비교
      jQuery는 자바스크립트와 다른 특별한 소프트웨어가 아니라 미리 만들어진 자바스크립트 코드입니다.
      전문 개발자가 작성한 코드를 사용하고 있음을 기억하십시오!
      (그래서 작성하기 전에 “가져와야” 합니다!
      )
  • jQuery 사용

jQuery 시작하기

W3Schools는 웹의 모든 주요 언어로 무료 온라인 자습서, 참조 및 연습을 제공합니다.
HTML, CSS, JavaScript, Python, SQL, Java 등과 같은 인기 있는 주제를 다룹니다.

www.w3schools.com

  • 사이에 다음을 추가하십시오. 그리고 하나 그리고 당신은 끝났습니다!
  • jQuery를 사용하는 방법
    CSS와 마찬가지로 jQuery를 사용할 때도 “표시” → 조작이 가능합니다.

    예) → 특정 입력란의 값을 가져와!

    예) 특정 div → 투명화!

    CSS에서 클래스를 선택자로 사용해 보셨습니까?
    jQuery에서는 id 값으로 특정 버튼/입력 필드/div/.. 등을 가리킵니다.

    백 마디 말보다 더 많은 것을 보십시오!
    많이 사용하는 jQuery와 연동하여 배워봅시다!

  • 제이쿼리 연습하기
    • 스켈레톤을 prac.html에 삽입합시다!

DOCTYPE html>


자바스크립트 문법을 연습하세요!<br>



.버튼 부분 {
디스플레이: 플렉스;
높이: 50px;
}


함수 체크결과() {

하자 = “사과”

$(‘#q1’).텍스트(아)

}

자바스크립트 문법을 연습하세요!

1. 기능

두 번째 목록

시험

3. 사전

4. 리스트 사전


  • CSS 클래스와 마찬가지로 HTML을 자바스크립트로 옮기기 위해서는 네임태그와 ID 값이 필요합니다!
  • test라는 단어와 값을 apple로 변경하겠습니다!
    움직인다!
    • 변경해야 하는 HTML 태그를 $(‘#id value’)로 지정하십시오!
    • 주어진 경우 Type text(a)를 변경하는 명령을 작성하고 a를 문자 값으로 설정하십시오!
  • 이 시간 목록해보자!
    • 코드를 리스트 형태로 적어서 변수에 저장하자!
    • a의 내용을 문자열에서 목록으로 변환해 봅시다!
    • 문자열에서 목록의 두 번째 값으로 변경하고 붙여넣어 봅시다!

      $(‘#q1’).텍스트(a(1))
      ⇒ 기타 필요한 부분은 “구글링”으로 찾아보시면 좋아요!
  • 이 시간 사전해보자!
    • 사전 형태로 코드를 작성하고 변수에 저장해 봅시다!
    • 딕셔너리의 키 값을 불러와서 id 값이 q2인 곳에 두자!

      $(‘#q2’).text(b(‘이름’))
  • 이 시간 목록 사전해보자!
    • 목록 사전 형태로 코드를 작성하고 변수에 저장해 봅시다!
    • 목록에서 원하는 사전을 호출하고 사전에서 키 값을 호출하여 q3에 삽입하자!

      $(‘#q3’).text(c(1)(‘나이’))

▷ Javascript & JQuery 실습 (2)

  • 리본
    목록, 목록 사전 형식으로 데이터를 개별적으로 추출해야 합니까? 나는 당신이하지 않을 내기!
    • let fruits = (‘사과’, ‘배’, ‘감’, …, ‘귤’)
      console.log(‘애플’)
      console.log(‘선박’)
      console.log(‘느낌’)
      …
      console.log(‘귤’)

      // 저렇게 한 번에 100개씩 쓰기 힘들겠죠? 따라서 루프가 존재합니다!

    • 과일.마다((ㅏ) => {
      콘솔.로그(ㅏ)
      })
      // 각 과일 요소를 개별적으로 확인합니다.
      이를 a라고 부르겠습니다!

      // ab, c, zzz 또는 fruit인지는 중요하지 않습니다!
    • 과일 목록을 포함하는 목록을 반복해 봅시다!

      let fruits = (‘사과’, ‘배’, ‘감’, ‘귤’)
      과일.마다((ㅏ) => {
      콘솔.로그(ㅏ)
      })
    • 사과, 배, 감, 귤 총 4개를 개발자 도구에 캡쳐한 거 맞죠? 그럼 루프로 몇 번이나 찍힐까요? 목록에 있는 값의 개수만큼!
  • 조건문
    반복문 외에도 조건에 따라 실행을 달리하는 “조건문”도 프로그래밍에 빠뜨릴 수 없습니다!
    • 만약에 (상태) {
      // 조건이 충족되면
      } 다른 {
      // 하지 않는 한
      }

      ⇒ 만 20세 이상인 경우 나는 어른이다 작은 경우 나는 십대입니다 경비?
      허용하다 오래된 = 24

      만약에 (나이 > 20) {
      콘솔.로그(“나는 어른이다”)
      } 다른 {
      콘솔.로그(‘나는 십대야’)
      }

      ⇒ 루프 + 조건문 결합!

      마지막 연령 = (12,15,20,25,17,37,24)

      age.forEach((a)=> {
      만약에 (나이 > 20)
      콘솔.로그(“나는 어른이다”)
      } 다른 {
      콘솔.로그(‘나는 십대야’)
      }
      })

▷제이쿼리 연습하기

  • JQuery – 추가 (1)

    기능 결과 확인() {
    허용하다 과일 = (‘사과’, ‘배’, ‘감’, ‘귤’, ‘수박’)
    $(‘#q1’).비어 있는()
    fruits.forEach((a)=>{
    허용하다 temp_html = `

    ${a}

    `
    $(‘#q1’).append(temp_html)
    })
    }

    • .append()사용
      • 아? ” 에게 ${} 너무 어렵나요?
      • 걱정 마!
        왜 이렇게 생겼는지 이해하려고 하지 말고 규칙이 있다고 생각하고 적어두면 따라갈 수 있습니다!

        1) 원하는 HTML 태그를 역따옴표(“), 제발!

        2) 태그에 삽입할 값 ${} 데이터와 함께 변수를 삽입하십시오!

        3) 전체에 포함될 HTML 요소 $(‘#아이디’)로 선택해 주세요 추가(변수)앉게!
    • 백틱(문자 및 변수 포함)“)
      • 이전에 HTML에 목록을 추가할 때 사용한 백틱(“) 기억 나니? 전체 HTML 요소를 둘러싸는 기호였습니다!
      • 그만큼 백틱은 문자와 변수를 함께 쓸 수 있는 특수 기호보지마!
        이렇게도 쓸 수 있습니다!

        허용하다 프로필 = `${}는 ${}살입니다`
      • 이를 통해 변수와 문자를 동시에 쓸 수 있게 되었습니다.
        ${} 대신 변수를 사용해야 합니까?
      • nameDict(‘name’)으로 원하는 이름값을 얻을 수 있겠죠?
      • nameDict(‘age’)를 사용하여 원하는 연령 값을 얻을 수 있습니다!

        허용하다 프로필 = `${nameDict(‘성’)}의 나이이다 ${nameDict(‘나이’)}저는___살입니다`

▷ 서버-클라이언트 통신 이해)

  1. 서버→클라이언트: “JSON”을 이해합니다.
    • JSON은 키:값으로 구성됩니다.
      데이터 유형 사전과 매우 유사합니다.
  2. 클라이언트 → 서버: GET 요청 이해
    • API는 은행 직원과 같습니다!

      동일한 입금 창구라도 소매 고객인지 기업 고객인지에 따라 고객이 요청할 때 “유형”이 있고 가져오거나 처리해야 하는 것이 있습니다.

      * GET → 보통!
      데이터 검색(읽기)요청할 때
      예) 영화 목록 찾아보기
      * POST → 평소와 같이!
      데이터 생성, 업데이트, 삭제 요청에 따라
      예) 회원가입, 회원탈퇴, 비밀번호 변경
      그 중 오늘은 GET 방식에 대해 알아보겠습니다.
      (POST는 4주차에 배운다)
    • 받다
      • https://movie.naver.com/movie/bi/mi/basic.nhn ?코드=161967

        위의 주소는 두 부분으로 나뉩니다.
        빨리 “?”갈라지는 지점이다.

        “?” 기본적으로 첫 번째 부분 두 번째 부분은 (동영상 번호)입니다.

        * 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
        * 영화 정보: 코드=161967

      • GET 메서드를 사용하여 데이터를 전달하는 방법

        ? : 전송할 데이터를 여기에서 쓴다는 뜻입니다.

        & : 전달할 데이터가 더 있음을 의미합니다.

        예) google.com/search?q = 아이폰&소스 ID=크롬&즉=UTF-8

        위 주소는 google.com 검색창에 다음과 같은 정보를 제공합니다!

        q=아이폰(검색어)
        sourceid=chrome(브라우저 정보)
        dh=UTF-8(인코딩 정보)

      • 여기서 잠깐만요 그럼 코드명에 영화 넘버를 넣는 건 누가 정한 건가요!
        ?
        → 예, 프론트엔드 개발자와 백엔드 개발자가 지정됩니다.
        약속하다보지마.
        프런트엔드: “네임 코드 아래에 영화 번호를 알려주시겠습니까?”
        백엔드: “예, 그렇습니다.
        그러면 코드를 작성하고 영화 번호가 코드로 들어오는 것 같습니다.
        ”

▷ 가져오기 시작

  • 가져오기 통신 결과 값 사용
    1. 미세먼지 데이터가 있는 곳 찾기
      • RealtimeCityAir > 행에는 입자상 물질 데이터가 포함되어 있습니다.
        그걸 꺼내야 할까요?
      • 가져오기(“http://hr1998.m/http://spartacodingclub.shop/sparta_api/seolair“)
        .then(res => res.json())
        .then(데이터 => {
        console.log(data(‘RealtimeCityAir’)(‘row’)(0));
        })
    2. 루프로 이전 데이터 인쇄
      • 행의 값 행루프를 사용합시다!
      • 가져오기(“http://hr1998.m/http://spartacodingclub.shop/sparta_api/seolair“) // 기본 요청(GET)
        .then(res => res.json()) // 요청한 데이터를 JSON으로 변환
        .then(데이터 => { // JSON화된 데이터의 이름을 다시 data로 바꿉니다.
        let rows = data(‘RealtimeCityAir’)(‘행’)
        행.forEach((a) => {
        // 미세먼지 데이터 목록이 긴 만큼 한 번에 하나씩 반복, 개발자 도구에서 보기
        콘솔.로그(a)
        })
        })
    3. 지구 데이터에서 지구명과 미세먼지 오염도를 선택하여 출력
      • 구문-이름 키-값 “MSRSTE_NM“, 핵심가치 미세먼지 오염”IDEX_MVL“의 값을 얻자!
      • 가져오기(“http://hr1998.m/http://spartacodingclub.shop/sparta_api/seolair“) // 기본 요청(GET)
        .then(res => res.json()) // 요청한 데이터를 JSON으로 변환
        .then(데이터 => { // JSON화된 데이터의 이름을 다시 data로 바꿉니다.

        let rows = data(‘RealtimeCityAir’)(‘행’)
        행.forEach((a) => {
        // 미세먼지 데이터 목록이 긴 만큼 한 번에 하나씩 반복, 개발자 도구에서 보기
        // 개발자 도구에서 구의 이름과 입자상 물질의 값을 사진으로 찍습니다.

         console.log(a(‘MSRSTE_NM’), a(‘IDEX_MVL’))
        })
        })
      • (풀 코드) 입자상 물질 데이터 사진 촬영
        가져오기(“http://spartacodingclub.shop/sparta_api/seolair”).then(res => res.json()).then(data => {
        let rows = data(‘RealtimeCityAir’)(‘행’)
        행.forEach((a) => {
        console.log(a(‘MSRSTE_NM’), a(‘IDEX_MVL’))
        })
        })