브리의 성장기

[TIL] 221217 본문

종종 올리는 요즘 근황

[TIL] 221217

브리(BRIE) 2022. 12. 17. 17:01
728x90

😀 TIL #221215

 

- 스파르타 코딩클럽 웹개발 종합반 2주차

 

2주차 1회 ~ 8회

* HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것 = JQuery = 라이브러리

* console 창에서

  - $('#id명').val()     value 값 가져오기

  - $('#id명').hide()  숨기기 <-> 보여주기 $('#id명').show()

  - backtick을 사용하면 문자 중간에 Javascript 변수 삽입 가능

  - display : none 처음부터 안나오게 하기

  - temp_html 문자열을 html 로 변환하여 가져오기

 

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

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

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

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

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

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

예제 학습.. 어렵네요(..)

 

 

* chrome extension JSONView 설치

* 서버-클라이언트 관계 이해하기 ( 이 부분은 스파르타 코딩클럽 해설이 너무 잘 되어 있어 그대로 가져옵니다)

 - post : 통상적으로, 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

 - get : 통상적으로, 데이터 읽기/가져오기(Read)요청 할 때 

 

이해가 쏙 !

 

* ajax 활용하여 서울시 미세먼지 현황을 실시간으로 불러오기

 - 미세먼지 농도가 53 이상이면 빨간색으로 표시하기

 

완전 백지에 써보세요! 하면 어렵겠지만 골격이 있다면 바로 카피할 순 있을듯 !

 

 

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad{
          color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty()
            $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            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 >= 53)
                {temp_html = `<li class="bad">${gu_name}:${gu_mise}</li>`}
                else
                {temp_html = `<li>${gu_name}:${gu_mise}</li>`}
                $('#names-q1').append(temp_html)
              }
            }
          })
        }
    </script>

</head>

<body>
    <h1>jQuery+Ajax의 조합을 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <p>미세먼지가 53이상일 경우는 붉은색으로 표시합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
        </ul>
    </div>
</body>

</html>

 

728x90

'종종 올리는 요즘 근황' 카테고리의 다른 글

[TIL] 221219  (0) 2022.12.19
[TIL] 221218  (0) 2022.12.18
[TIL] 221215  (0) 2022.12.15
[TIL] 221214  (0) 2022.12.14
[TIL] 221213  (0) 2022.12.13
'종종 올리는 요즘 근황' Related Articles more
Comments