[Javascript 공부일지2] 1주차 - 2 (웹개발 - jQuery (제이쿼리))

자바스크립트를 배우면서 웹개발을 하기위해 jQuery (제이쿼리)가 중요하다는 것을 알게되었습니다.
jQuery는 자바스크립트를 더 유용하게  만들어주는 라이브러리입니다.
이번에는 웹 개발을 하기위한 jQuery에 대해 공부해보겠습니다.

---

<제이쿼리 시작하기>

jQuery(제이쿼리)란?
- HTML의 요소들을 조작하는, 편리한 자바스크립트를 미리 작성해둔 라이브러리

- 자바스크립트로도 모든 기능 (버튼글씨 바꾸기 등)을 구현할 수 있지만,
코드가 복잡해질 수 있고 호환성 문제도 고려하여 제이쿼리라는 라이브러리가 등장하게 되었습니다.

- 전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이기때문에 제이쿼리를 사용하기 위해선 import를 해야합니다.

---

<예시>

1. 박스 하나 감추는 것

1) 자바스크립트에서 사용

document.getElementById("element").style.display = "none";

2) 제이쿼리로 사용

$('#element').hide();

---

<제이쿼리 다뤄보기>

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

w3school의 제이쿼리 부분을 참고하여 Google CDN 부분을 복사해서 index.html 의 head 안에 입력하면 됩니다.

만약 부트스트랩으로 프로젝트를 이미 시작한 경우에는 미리 선언이되어있는 것을 확인하실 수 있습니다.

이제 만든 프로젝트의 index.html에서 (우클릭 -> 검사 -> Console)로 가보면
그 html의 코드를 확인할 수 있는데, 아티클 URL부분 밑의 URL입력 부분에 id값을 줄 것입니다.

id="article-url"

1. 아티클 URL 부분밑에 "세종대왕" 입력하고

2. Console 창에

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

 이라고 입력하면 "세종대왕"이 가져와지는 것을 확인할 수 있습니다.

3.

$('#article-url').val('장영실');

이라고 입력하면 html 페이지의 '세종대왕'이 '장영실' 값으로 변경되는 것을 확인할 수 있는데, 

해석해보면
$('#article-url') 까지는 article-url이라는 아이디에 접근하여

val('장영실');
값을 장영실로 바꾸어라 라는 의미입니다.

>>
input박스의 value를 가져오는 것을 배워보았습니다.

---

<포스팅 박스 연습하기>

그리고 Console 창에

1)

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

를 입력하면 포스트박스가 사라지는것을 확인할 수있습니다 (숨기기 기능)

2)

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

하면 다시 포스트박스가 나타납니다.

3)

$('#post-box').css('width')

하면 500px이 출력되며 사이즈를 가져옵니다.

4)

$('#post-box').css('width', '700px')

입력하면 700px로 사이즈가 변경되며 제이쿼리를 사용하여 동적으로 커지게할 수 있습니다.

5)

$('#post-box').css('display')

hide된 상태이면 none, show된 상태이면 block 으로 출력됩니다.

---

<태그 내 텍스트 입력하기>

1. 포스팅 박스 열기 버튼에 id를 지정하고

2. Console창에

$('#btn-posting-box').text('콘솔테스트');

입력하면 버튼이 '콘솔테스트' 라는 문구로 바뀌게됩니다.

---

</card-columns 변경하기>

1. card-columns를 찾아서
id값을 지정 >> cards-box

2. 콘솔창에 가서
let temp_html = `

`
라고 입력하면 HTML처럼 생긴 문자열이 생성되고

키보드의 좌측 상단에 위치한 백틱(`) 사용을 해서 묶어줍니다.

위의 코드를 HTML로 변형주기위해 

3.

$('#cards-box').append(temp.html)

라고 콘솔창에 입력하면버튼이 추가되는 것을 확인할 수 있습니다.

4. <응용>
이 let temp_html = ` ` ; 안에다가

let temp_html =
`
<div class="card">
                <img class="card-img-top" src="https://i1.sndcdn.com/artworks-th9yy2JINBcdF8Il-AcZqQA-t500x500.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com/" class="card-title">$(title)</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <h6 class="card-comment">여기에 코멘트가 들어갑니다. </h6>
                </div>
            </div>
`

                    

이런식으로 입력해주고, 

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

 를 입력하면 카드를 간단하게 계속 추가할 수 있습니다.

---

<콘솔 창 내에서의 텍스트 변경>

 let title = "변수넣기 테스트"

이 변수를 let temp_html = ` ` 안에다가 넣고싶으면, $(title)을 활용하면 됩니다.

<a href="http://naver.com/" class="card-title">$(title)</a>

$(title)을 써준 모습입니다.

---

<제이쿼리 적용하기 - 열기/닫기 능동형 버튼 만들기>

저번에 만든 hey()함수를 바꿔 openclose()함수로 만들어주면 됩니다.

Console창에서 구현해주었던 

$('#post-box').css('display');

을 함수 안에 구현해주면 됩니다.

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

	console.log(status);
}

콘솔로 먼저 기능을 잘 하고 있는지 확인해보면,  실습예제의 '포스팅박스 열기 버튼' 을 눌렀을때

console창에 block이라고 출력되는 것을 확인할 수 있습니다.

(포스팅박스가 보이고있는 상태(열려있으면 block출력))

 

여기에 조건문을 넣어서 능동형 박스를 만들 수 있는 것입니다.

if(status == 'block') {
	$('#post-box').hide();
	$('#btn-posting-box').text('포스팅박스 열기');

}
else {
	$(#post-box').show();
	$('#btn-posting-box').text('포스팅박스 닫기);
}

버튼에 있는 텍스트도 능동적으로 바꿔주기위해

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

를 추가해줍니다.

---

<openclose() 함수 완성코드>

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

일반적으로  포스팅박스를 닫혀있는 상태로 html을 시작하는게 구현이 효과적이므로

css의 .posting-box 안에 display:none; 으로 기본값설정까지 해주면 됩니다.

---

<제이쿼리 연습 >

<이메일을 입력하면 어느 주소의 도메인인지 알려주는 프로그램>

- 조건 :
1) 이메일 형식 (@) 이 포함되어있어야한다. 포함되지 않으면 오류문구 출력
2) 값을 입력해야함 (공백은 불가능)
3) $( ).append(temp_html)을 활용해볼 것

<script>
        function q1() {

            let input1 = $('#input-q1').val();
            if (input1 == ''){
                alert("값을 입력해주셔야합니다.");
            }
            else {
                alert(input1);
            }
        }

        function q2() {

            let input2 = $('#input-q2').val();
            if (input2.includes('@')){
                let domain = input2.split('@')[1].split('.')[0]
                alert(domain + ' 도메인을 입력하셨습니다.');
            }
            else{
                alert('이메일 형식이 맞지 않습니다. 다시 작성해주세요');
            }
        }

        function q3() {
            let input3 = $('#input-q3').val();
            let temp_html = `<li>${input3}</li>`;

            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
            $('#names-q3').empty();
        }

</script>

---

다음 공부일지에서는 서버통신에 필요한 개념인 '에이잭스(Ajax)'에 대해서 😃포스팅해보겠습니다.

'스파르타 코딩 클럽' 온라인 교육 플랫폼에서 배운 내용을 토대로 작성하였습니다.