2주차

허현진·2021년 6월 26일
0

프론트&백

목록 보기
4/5

> JQuery

HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 것. 라이브러리
--> import해야만 쓸 수 있다.링크텍스트 <--jQuery CDN

이코드 추가하기. 부트스트랩 쓰면 이미 작성되어 있음. _* console창 내에서의 줄바꿈 : shift+enter_

css를 가리킬 때는 class=""를 사용.
jQuery를 가리킬 때는 id=""를 사용.

textbox의 값 가져오기

$('#---').val();

화면에 보이는지 안보이는지 확인

$('#post-box').css('display');
보이면 block이라 찍힘

화면에서 가리기, 보이기

$('#post-box').hide();
$('#post-box').show();

button 텍스트 변경

id에 이름 추가하고
검사 창에서 $('#btn-posting-box').text('랄라') //text변경

card-colume에 버튼 추가

let temp_html = <button>나는 버튼이다</buttom>
$('#card-box').append(temp_html) //button추가

card-colume에 카드 추가

let temp_html = `


<img class="card-img-top"
//src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
alt="Card image cap">

        <div class="card-body">
            <a href="http://naver.com/" class="card-title"> 여기 기사 제목이 들어가죠 </a>
            <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
            <p class="comment">여기에 코멘트가 들어갑니다</p>
        </div>
    </div>`
  

$('#card-box').append(temp_html)

포스팅박스 열기

function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}

> Ajax

자바스크립트로 페이지 전환 없이 서버로부터 값을 가져올 수 있는 방법

서버-->클라이언트 : JSON

JSON- 딕셔너리와 리스트의 조합과 생김새 동일

JSON 예쁘게 보기
https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

클라이언트 --> 서버 : GET,POST

Get - 통상적으로 데이터 조회를 요청할 때
ex)목록 조회
Post - 통상적으로 생성,변경,삭제 요청 할 때
ex) 회원가입, 회원탈퇴, 비밀번호 수정

자료 참고

  • Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

    Ajax 기본 골격

    $.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
    console.log(response)
    }
    })
    -->response로 값이 들어옴

    로딩하자마자 실행 하기

$(document).ready(function(){
alert('다 로딩됐다!')
});

https://www.notion.so/2-f9706fef663a4b5ca7c7013a57c1785d

profile
코딩일지..

0개의 댓글