항해 사전 준비기간 2주차 강의 정리

https://velog.io/@rlafbf222
<항해 99 사전 준비 기간>
웹 개발 종합반 개념 정리
2주차!!

• 1강.
  1) 짝수, 홀수 판별식

• 2강. JQuery 시작하기
  1) JQuery 란? HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리
  2) Java Script는 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야 해서 사용
  3) https://www.w3schools.com/jquery/jquery_get_started.asp
  4) 위 주소에서 추가해줘야 함

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• 3강.
  1) $('#url').val() 은 id=’url’인 곳의 값을 가져온다.
  2) $('#url').val(‘내용’) 은 id = ‘url’인 곳에 값 ‘내용’을 넣어준다.
  3) $('#post-box').hide(); $('#post-box').show(); 숨기고 보여주기
  4)

let temp_html = `<button>나는 추가될 버튼이다!</button>`;

와 같이 html화 될 변수를 만들어주되 우항은 작은 따옴표가 아닌 backtick를 넣어주는 것 주의!
5) Backtick을 사용하면 문자 중간에 js 변수를 삽입할 수 있다. Ex) ${변수}

• 4강.
  1) JQuert로 ID 기준으로 show & hide 기능 추가
  2) Mypost class에 display:none 추가해줌으로써 처음 화면에 안보이도록 설정
  display:none;
• 5강. JQuery Quiz
  1) 빈칸 체크 함수 만들기

function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
    let inputValue = $('#input-q1').val()

    if (inputValue == ''){
        alert('입력하세요')
    }else{
        alert(inputValue)
    }
}

2) 이메일 판별 함수 만들기

function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기

    let inputValue2 = $('#input-q2').val()

    if(inputValue2.includes('@') == true){
        alert(inputValue2.split('@')[1].split('.')[0])
    }else{
        alert('이메일이 아닙니다.')
    }

}

3) HTML 붙이기, 지우기 연습

function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)

    let inputValue3 = $('#input-q3').val()
    let temp_html = `<li>${inputValue3}</li>`

    $('#names-q3').append(temp_html)
}

function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
    $('#names-q3').empty()
}

• 6강. 서버-클라이언트 이해하기
  1) 서울시 오픈 API:
  http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
  2) 위와 같이 API는 서버 개발자가 클라이언트 개발자에게 인터페이스를 만들어주는 것
  3) 또한, ?(물음표) 뒤 값을 전달하여 원하는 데이터를 가져오게 할 수 있음
  4) 주요 타입으로는, GET/POST/PUT/DELETE 등이 있음.

• 7강. Ajax 시작하기
  1) Ajax란?

$.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    success: function (response) { // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
    }

2) GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
3) POST 요청은, data : {} 에 넣어서 데이터를 가져감.
data: { param: 'value', param2: 'value2' },
4) success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
5) success: function (response) {// 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}

• 8강. Ajax 함께 연습하기.
  1) Aajx + JQuery: ajax로 가져온 데이터를 jquery를 사용해 넣어주기.

function q1() {
    $('#names-q1').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        data: {},
        success: function (response) {
            let rows = response['RealtimeCityAir']['row']

            for (let i = 0; i < rows.length; i++){
                let gu_name = rows[i]['MSRSTE_NM']
                let gu_mise = rows[i]['IDEX_MVL']

                let temp_html = ``

                if (gu_mise > 90){
                    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                }else{
                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                }

                $('#names-q1').append(temp_html)
            }
        }
    })
}

2) 추가로 미세먼지 수치가 90보다 크면 red

• 9강. Ajax 함께 연습하기(1).
  1) 코드 설명: Ajax로 불러온 데이터 Jquery 사용하여 표출해주기
  2) 현재 따릉이 개수를 불러와 테이블 바디에 tr로 넣어줌
  3) 현재 따릉이 개수가 0일 경우 red

function q1() {
    $('#names-q1').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulbike",
        data: {},
        success: function (response) {
            let bike_list = response['getStationList']['row']

            for (let i = 0; i < bike_list.length; i++){
                let bike_loc = bike_list[i]['stationName']
                let bike_cnt = bike_list[i]['rackTotCnt']
                let bike_cur_cnt = bike_list[i]['parkingBikeTotCnt']

                let temp_html = ``

                if (bike_cur_cnt == 0){
                    temp_html = `<tr class="empty">\n' +
                    '            <td>${bike_loc}</td>\n' +
                    '            <td>${bike_cnt}</td>\n' +
                    '            <td>${bike_cur_cnt}</td>\n' +
                    '        </tr>`
                }else{
                    temp_html = `<tr>\n' +
                    '            <td>${bike_loc}</td>\n' +
                    '            <td>${bike_cnt}</td>\n' +
                    '            <td>${bike_cur_cnt}</td>\n' +
                    '        </tr>`
                }
                $('#names-q1').append(temp_html)
            }
        }
    })
}

• 10강. Ajax 함께 연습하기(2)
  1) 이미지, 텍스트 값 변경하기.

<script>
$('#img-rtan').attr("src", url);
$('#text-rtan').text(msg);
</script>
<body>
<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
</body>

• 11강. 숙제: 날씨 api 활용, 페이지 로딩시 api 자동 호출

$(document).ready(function () {
});

->2주차 과제 url: https://github.com/Kim-HJ1986/hanghae_pre_lecture/blob/master/homework(week1-2).html