웹개발 종합강의 02

Noa·2022년 11월 8일
JavaScript
0

웹종

목록 보기
3/5

  • 나머지 %
    % 2 == 0 : 짝수 , 아니면 홀수

  • javascript만으로 충분하냐?
    예를 들어 버튼의 색깔을 바꾸고 싶다면? , div 박스를 하나 감추고 싶다면? -> 이런 것들 쉽게 해주는 것이, jQuery

  • jQuery란?
    Html의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 것. 라이브러리
    jQuery는 javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Js 코드이므로, 쓰기전에 "임포트"를 해야한다.

    document.getElimentByid("element").style.display = "none"

jQuery로 보다 직관적으로 쓸 수 있음

$('#elment').hide()

    jQuery 추가 

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

  • input 박스의 값 가져오기
    url 에 있는 값을 가져오기, 입력하기
    무언가를 가져오려면 지칭 해야한다. -> 지칭해서 찍어서 부르기
    예) css : class, jQuery : id

    $('#url').val(입력을 하고싶다')
id 가 url인 애한테 value를 넣고싶다.

$('#url').val()
id 가 url인 애한테 value를 가져온다.

  • div 박스를 감췄다가 보이기

    1. 박스에 id값을 준다 
2. $('#post-box').hide()
3. $('#post-box').show()

  • 태그 내 html 입력하기

    <div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? 
(예를 들어, 포스팅되면 → 카드 추가)

- 카드가 붙는 div 에 id를 추가해주는 것이 핵심!

1. 박스에 id값을 준다
2. let temp_html = `<button> 나는 버튼이다 </button>`
3. jQuery를 이용해서 html화 시켜주기 
4. $('#card-box').append(temp_html)

let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
                            <div class="card h-100">
                                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
                                     class="card-img-top" alt="...">
                                <div class="card-body">
                                    <h5 class="card-title">${title}</h5>
                                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
                                    <p>⭐⭐⭐</p>
                                    <p class="mycomment">나의 한줄 평을 씁니다</p>
                                </div>
                            </div>
                        </div>`;
$('#cards-box').append(temp_html);

  • jQuery 응용하기
    포스팅 박스 열기 , 닫기 기능을 만들어보기

    function open_box(){
    alert('열린다!')
}
function close_box(){
    alert('닫힌다!')
}

<button onclick="open_box()">영화 기록하기</button>

<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}


<div class="mypost" id="post-box">
    <div class="form-floating mb-3">
        <input id="url" type="email" class="form-control" placeholder="name@example.com">
        <label>영화URL</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01">별점</label>
        <select class="form-select" id="inputGroupSelect01">
            <option selected>-- 선택하기 --</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea id="comment" class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

button으로 포스트 박스 제어하기
1. function을 만든다
2. button에 onclik을 이용하여 붙여준다

  • 포스트 박스 시작부터 감추기

    css로 display: none 해주기

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


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

  •  function q3() {
            const input3 = $('#input-q3').val()
            let temp_html = `<li>${input3}</li>`
            $('#names-q3').append(temp_html)
            // 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)을 이용하면 굿!)
        }

        function q3_remove() {
            $('#names-q3').empty()
            // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        }
    1. 함수를 만든다
    2. 필요한 값을 .val( )로 가져와서 변수에 넣는다
    3. 가져오 값을 넣은 변수를 이용해서 로직을 짠다.
    4. 태그 안에 동적으로 html을 넣고 싶다
    5. 빽틱 `` 과 ${ }를 이용하여 변수( temp_html )를 선언한다.
    6. 만들어둔 temp_html을 넣고 싶은 태그의 id 값을 이용하여 붙인다
      $( '#id' ).append( temp_html )
    7. 태그의 내부를 모두 비우고 싶다
      함수를 만든다. -> $( '#id' ).empty( )

서버-클라이언트 통신 이해하기

서버에서 데이터를 받아 온다는 것
jsonview -> json 형식 깔끔하게 보여주는

API는 은행 창구와 같다

같은 예금 창구에서도 개인 고객이냐, 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도. " 타 입 " 이라는 것이 존재한다.

GET -> 통상적으로 데이터 조회(read)를 요청할 때

예) 영화 목록 조회
우리가 url에 엔터 치는것이 다 get 방식이다.

movie.naver.com/movie/bi/mi/basic.naver?code=161967#

movie/bi/mi/basic.naver? 라는 창구에 code번호 161967을 들고갔다.
서버하고 클라이언트의 약속, code라는 값으로 숫자를 가져오면 영화를 보내줄게

get방식으로 데이터를 전달하는 방법
?: 여기서부터 전달할 데이터가 작성된다는 의미
&: 전달할 데이터가 더 있다는 뜻 , 값을 여러개 가져갈때 &로 이어준다.

POST -> 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)요청

예) 회원가입, 회원탈퇴, 비밀번호 수정 등

브라우저에서 엔터를 치는 것과 마찬가지로 자바스크립트에서 어떻게 서버로 요청하는지

Ajax 란?

AJAX란, JavaScript의 라이브러리중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.

브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법

JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.
즉, 쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

GET방식으로 url을 요청해서 response를 찍어주겠다.
  1. ajax를 이용해서 GET방식으로 데이터를 요청해서 받아온다.
  2. response로 받아온 결과(리스트,딕셔너리 형태)에서 얻고싶은 데이터를 변수에 넣는다.
  3. 반복문을 돌려서 원하는 데이터를 뽑아낸다.
  4. $('#id').empty() -> 내용비우기 
    <script>
        function q1() {
            $('#names-q1').empty() //초기화? ajax콜 하기전에 지워준다 
            $.ajax({
              type: "GET",
              url: "http://spartacodingclub.shop/sparta_api/seoulair",
              data: {},
              success: function(response){
                  let rows = response['RealtimeCityAir']['row']
                  for (i = 0; i < rows.length; i++){
                      let gu_name = rows[i]['MSRSTE_NM']
                      let gu_mise = rows[i]['IDEX_MVL']
                      let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                      $('#names-q1').append(temp_html)
                  }

              }
            })
        }
    </script>
  • Api를 이용해서 이미지 바꾸기, 텍스트 바꾸기 -> 위에 했던 태그 내 html 입력하기 와는 다름 .append(temp_html) 와는 다름

    이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL)
    텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트")

  • Ajax 기본 골격
 $.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

  • 로딩후 호출하기
    예) 로딩 완료 후 환율 , 로딩 완료 후 기온
$(document).ready(function(){
	alert('다 로딩됐다!')
});

$(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response['temp']
                    $('#temp').text(temp)
                }
            })
        });
profile
Noa
몰입
이전 포스트

웹개발 종합강의 01- 숙제

다음 포스트

웹개발 종합반 05

0개의 댓글