jQuery의 간단한 설명

1주차 영상에서 간단하게 JavaScript를 넣으면서 "$"는 나중에 다시 설명하겠다고 한적이 있습니다.

 

혹시 어디서 그런 얘기를 했던거지? 하시면 

 

https://iceflower.tistory.com/7

기록하기 버튼과 기록하는 창을 연결하기 앞서....

 

이전 게시물 한번 보고 오시는걸 추천드립니다.

 

이제 함수부분을 설명하면서 $("#post-box").show() $("#post-box").hide() 는 그냥 id를 받아와서 보여주고, 숨겨준다 라고말 설명을 했었는데요. 이제 좀 더 나아가서 "$"을 쓰는 이유를 한번 보겠습니다.

 

만약 저 방식을 안쓰고 순수히 JavaScript로만 작성하게된다면

 

document.getElementById("element").style.display = "none"; 이런식으로 작성해야합니다. 이게 한두개면 괜찮지만 많은 양을 이렇게 써야한다면 그때는 힘들어지겠죠.

 

그래서 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.

 

jQuery는 JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

 

여기서 말하는 임포트는 이미 평소에 부트스트랩을 사용하면서 저희가 자주 사용했습니다.

 

부트스트랩때 이용한 코드

바로 제가 표시해둔 저 라인이 jQuery를 사용하기 위한 임포트 코드였던거죠.

 

그렇게되면 document.getElementById("element").style.display = "none";  ->  $("#post-box").hide() 이렇게 간단하게 바뀔수 있습니다.

 

참고로 jQuery도 양이 엄청나게 많습니다. 저희가 Html을 할때도 필요한거를 찾아서 쓰듯이, jQuery도 그때 그때 찾아서 사용하면 됩니다. ( 추가적인 내용이 알고 싶으시면 jQuery 관련 유튜브나 블로그를 참조하시면 되겠습니다. )

 

그럼 jQuery + JavaScript 를 이용한 간단한 문제들을 한번 보겠습니다.

 

( 문제를 풀때 버튼을 만들고, 입력을 쓰는 간단한 html 부분은 생략하고 함수쪽만 보겠습니다. )

 

첫번째 문제

첫번째 문제입니다. 내용이 없으면 "입력하세요!"를 띄우고 입력이 있으면 그걸 그대로 띄우면 됩니다. 

 

조건문을 잘 사용하면 될 듯합니다. 결과 코드를 보여드리면 다음과 같습니다.

 

첫번째 문제 코드 결과

어? 난 저렇게 안했는데? 결과는 같네! 라고 하실수 있습니다.

 

코드는 여러방법으로 짤수 있기때문에 그럴 수 있습니다.

 

다음 문제를 확인해 보겠습니다.

 

두번째 문제

두번째 문제를 보시면 판별을 하라고 합니다. 판별은 원하는 내용이 포함되어 있는지 아닌지 이므로 .includes 를 사용해주시면 됩니다. "추가적인 내용을 알고 싶다!" 하시면 구글링 해보시면 좋을듯 합니다.

 

이제 @이게 있으면 이메일, 없으면 이메일 아닌것을 판별해야하고 만약 이메일이 맞다면 도메인만 띄우라고 하니 받아오는 문자를 쪼갤 필요가 있으므로 .split()도 쓰시면 되겠습니다.

 

아마 jQuery, JavaScript 언어를 알고 계신다면 잘 푸셨을 것이고, 처음 이신 분들은 막히셨을 듯합니다. 결과 코드를 보면서 설명을 드리겠습니다.

 

두번째 문제 코드 결과

 

먼저 if문을 만드시는데 까지는 어려움이 없으셨을거 같은데요. ( input.includes('@') == true 해도 맞습니다. )

 

.split을 하게되면서 어떤 방식으로 끌고 와야하는지 잘 모르셨을 분들이 계실꺼 같습니다.

 

split 내용을 좀 더 살펴보면

 

split 설명 1

다음 사진을 봤을때, email이라는 값을 받고 그 값을 '@' 기준으로 나누게 되면 리스트의 형태로 받게 됩니다.

 

리스트에서는 앞부터 순서대로 홍길동이 0번째, naver.com이 1번째가 됩니다. ( 컴퓨터는 0번부터 시작합니다. )

 

따라서 naver.com을 가져오고 싶으시면 다음과 같습니다.

 

split 설명 2

여기서 도메인만 필요한거기 때문에 점을 기준으로 또 나누었을때를 확인해 보겠습니다.

 

split 설명 3

점 기준으로 또 리스트가 만들어 진 것을 확인 하실수 있습니다. 이번에는 0번째 자리에 도메인이 있으므로 가져오게 되면

 

split 설명 4

딱 도메인만 가져올 수 있게 됩니다. 그럼 위에 올려놓은 코드와 똑같은 형태를 띄게 됩니다.

 

마지막 문제입니다.

 

세번째 문제

세번째 문제를 보시면 붙이고, 지우는 코드를 만들라고 하는데요. 먼저 버튼이 두개이니 함수도 2개가 필요해보입니다.

 

그리고 1번 문제에서 사용한거 처럼 아무것도 안들어왔을 경우를 대비하여 '이름을 입력하세요' 부분도 넣어보겠습니다.

 

결과 코드를 가져오게 되면 다음과 같습니다.

 

세번째 문제 결과 코드

일단 문자가 안들어왔을 때를 대비해서 만들고 문자가 들어오게 되면 똑같이 받아서 값을 넣게 되는데 왜 <li></li>가 들어 갔나요? 라고 하실수 있습니다. 그건 세번째 문제를 보셨을때 점으로 하여 나열이 되었기 때문에 list모양의 <li></li>넣어 주게 된 것입니다. 그래서 함수 부분을 조금 더 설명 드리면

세번째 코드 추가 설명

아까 받아온 문자를 리스트에다 넣은게 temp_html 이고, 이 temp_html을 웹페이지 첨부(append)하겠다 라는 뜻입니다.

 

마지막으로 다 지우기 버튼을 누르면 다 지워져야 하므로 버튼의 id를 받아 .empty()를 넣어주시게 되면 버튼을 눌렀을때 다 지워지게 됩니다.

 

지금까지 jQuery + JavaScript를 이용해서 문제를 풀어봤습니다. 어떠셨나요? 생소하실 수도 있고, 너무 쉽다 하시는 분도 계실껍니다. 어떻게 보면 간단하면서도 간단하지 않은 문제 였을수도 있겠네요.