JQuery - 웹개발 종합반 기초 1,2,3 주차

• jquery와 관련해서 도움 받은 정보링크 :
  https://blog.naver.com/minces/222666979795

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

• Javascript 로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

  1) 코드가 복잡하고

  2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장함.

* jQuery와 Javascript - 코드 비교해보기

• jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드

• 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것(그렇기 때문에, 쓰기 전에 "import"를 해야함)

# 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>

$('#btn-posting-box').text('포스팅 박스 닫기');

# 버튼을 넣어보기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

# 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
# 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
# backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/...767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 ...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

# 포스팅 박스 열기 버튼에 function을 달기
<script>
function openclose() {
	# 여기에 jQuery를 이용해 코드를 짤 예정    
}
</script>

#  onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>

#  포스팅박스 제어하기, 버튼 텍스트를 바꿔주기
function openclose() {
    #  id 값 post-box의 display 값이 block 이면
    if ($('#post-box').css('display') == 'block') {
        #  post-box를 가리고
        $('#post-box').hide();
			# 가렸으니까 이제 열기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 열기');
    } else {
        	# 아니면 post-box를 펴라
        $('#post-box').show();
			# 폈으니까 이제 닫기로 바꿔두기
        $('#btn-posting-box').text('포스팅 박스 닫기');
    }
}

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

function listing() {
	console.log('화면 로딩 후 잘 실행되었습니다');
} #  HTML의 tag 정보가 로딩된 후 동작, 중복 사용이 가능하고, 선언한 순서대로 실행.


$(document).ready(function () {
    $('#cards-box').empty();
    listing();
}); #  불러올 때, 원래 있던 카드박스들은 삭제하고 불러옴.

window.onload 
# HTML의 모든 자원이 로딩된 후 동작, 중복 사용이 불가능, 마지막 선언만 실행.