코딩 도전기_06_210705

학습 내용

- Java Script 기초문법 복습

<a onclick = "hey()">

: 클릭하면 hey라는 함수를 실행시켜라

(1) 홀수번 클릭하면 '홀수입니다!', 짝수번 클릭하면 '짝수입니다!'를 출력하는 함수 만들기

let count = 1;
function hey() {
  if (count % 2 == 0) {
  alert('짝수입니다!')
  } else {
  alert('홀수입니다!')
  }
  count += 1;
  // == count = count + 1;
}

• count라는 변수를 1로 설정
• count를 2로 나눈 나머지(%)가 0이면 (짝수입니다!),
  그렇지 않으면 (홀수입니다!) 출력.
• count는 count에 1을 더한 값 (count = count +1)

• let count = 1을 함수 바깥으로 뺀 이유
  : 함수 안에서 변수를 선언하면 함수가 끝나는 순간 값도 사라짐. 즉, 카운트 누적이 안됨***
• count = count + 1; == count += 1; (줄여서 이렇게 씀)

- jQuery

• jQuery란?
  보다 편리하고 간단하게 쓸 수 있는 미리 작성된 자바스크립트, 자바스크립트계의 부트스트랩
• 반드시 임포트 해야함

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

• 부트스트랩 템플릿에 이미 임포트가 되어 있음. 부트스트랩으로 시작하면 따로 임포트 안해도 됨

• $('#article-url').val();
  : id가 article-url인 곳을 가리키고 값 가져오기

• $('#article-url').hide();
  : id가 article-url인 곳을 가리키고 안 보이게 함

• $('#article-url').show();
  : id가 article-url인 곳을 가리키고 보이게 함

• $('#article-url').css('display')
  : id가 article-url인 곳을 display값을 가져옴.
  보이면 block, 안 보이면 none이 표시됨. display말고 width, height 등도 가져올 수 있음

• $('#btn-posting-box').text('포스팅박스 닫기')
  : 태그 안에 있는 텍스트 값을 바꿀 수 있음.
  input박스의 경우 .val(); 사용

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

: 태그 내에 동적으로 html 삽입. (위의 예시는 버튼 삽입)

• html 삽입 시에는 백틱을 써야 함(shift키 떼고 물결)

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);

: 태그 내에 동적으로 html 삽입. (위의 예시는 div 삽입)

- jQuery 적용

(1) 버튼을 이용해 박스 열고 닫기

funciton openclose() {
	let status = $(#post-box).css('display');

• status라는 변수를 post-box가 보이는 상태라고 정의

funciton openclose() {
	let status = $(#post-box).css('display');
    if (status == 'block') {
    	$(#post-box).hide();
    } else {
    	$(#post-box).show();
}

• status가 'block', 즉 보이는 상태면 post-box를 안 보이게 한다.
  그렇지 않으면 post-box를 보이게 한다.

funciton 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('포스팅박스 닫기');
}

• status가 'block', 즉 보이는 상태면 post-box를 안 보이게 하고 btn-posting-box의 텍스트를 '포스팅박스 열기'로 바꾼다.
  그렇지 않으면 post-box를 보이게 하고 btn-posting-box의 텍스트를 '포스팅박스 닫기'로 바꾼다.
• 처음 페이지를 열었을 때 post-box를 닫혀진 상태로 설정하려면 스타일에서 display를 none으로 설정