jQuery: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것, 즉 라이브러리라고 할 수 있다.
미리 작성된 Javascript 코드 이기 때문에 쓰기전에 import를 해야 한다.
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
jQuery Get Started Adding jQuery to Your Web Pages There are several ways to start using jQuery on your web site. You can: Download the jQuery library from jQuery.com Include jQuery from a CDN, like Google Downloading jQuery There are two versions of jQuer
www.w3schools.com
위 사이트로 들어가서
복사해준다.
그리고나서 html 코드로 돌아와 <head></head> 안에 아무곳에나 붙여 넣어주면 된다.
그런데 위를 보면 이미 해당 코드가 적용이 되어 있다는 것을 확인할 수 있다.
부트스트랩 템플릿을 사용하면서 이미 적용이 되었기 때문이다.
그러므로 부트스트랩 템플릿을 사용하면 두 번 임포트 할 필요는 없다. 반면에, 부트스트랩 템플릿을 이용하지 않는다면 임포트 해야한다.
이제 메모메모 페이지를 만든 곳에서 포스팅박스 부분에 URL 부분에 id를 줄 것이다.
그런데, 코드를 보면 id가 이미 넣어져 있다는 것을 확인할 수 있다.
그 id 부분을 임의로 바꾸어 준다.
1. 값을 받아오기
크롬 페이지를 이용해서 메모메모 페이지를 켠 후에, URL 부분에 아무 글자나 적어보자.
필자는 '러브러브' 라는 글자를 작성하였다.
그리고, F12 버튼을 눌러서 DevTools를 열어준다.
Console 창에서 $('#article-url').val(); 을 입력하면, URL 부분에 작성했던 '러브러브' 라는 값이 받아져 와서 결과로 출력되는 것을 확인할 수 있을 것이다.
그리고, $('#article-url').val('나는 멍멍이다.'); 를 입력하게 되면 작은 따옴표 안에 있는 나는 멍멍이다. 라는 글자가 메모메모 페이지의 URL 부분에 출력이 되는 것을 확인할 수 있다.
쉽게 말하자면, $('#어쩌고').val('저쩌고'); 에서 어쩌고는 위에서 우리가 설정한 id 값이고, 저쩌고는 id값에 해당하는 부분에 값을 출력하게 해주는 것이라고 보면 된다.
그러니, val() 안에 아무것도 입력하지 않으면 id값에 해당하는 부분에 입력된 값을 받아오게 되는 것이고, 반대로 val()안에 어떤 것을 집어넣어주게 되면 그 값을 id값에 해당하는 부분에 넘겨주게 되는 것이다.
2. 포스팅 박스가 나타났다가 사라지게 해보기
URL 부분에 id값을 준 것처럼, 포스팅 박스 부분에도 id 값을 준다.
<div class="posting-box" id="post-box">
메모메모 페이지로 돌아와서, 마찬가지로 DevTools에서 아래의 코드를 Console에 작성해준다.
$('#post-box').hide()
메모메모 페이지에서 포스팅 박스가 사라졌다.
$('#post-box').show()show()를 입력해주면 포스팅 박스가 다시 나타난다.
3. CSS 값 읽어오기
우리가 코드를 통해 설정해주었던 css 값들이 있을 것이다. 그 값들을 확인해보자.
별 거 없고, 위와 같이 $('#post-box').css(어쩌고) 의 형태로 작성해준 뒤에, 어쩌고 안에 읽어오고 싶은 값을 넣거나, 변경하고 싶은 값을 집어 넣어주면 된다.
포스팅 박스의 width를 확인해보니 500px이라는 결과가 나왔다.
이제 이 사이즈를 더 크게 만들고 싶다.
그래서 $('#post-box').css('width','700px') 로 변경하였다.
그러자, 메모메모 페이지에서 포스팅 박스의 너비가 커진 것을 확인할 수 있다.
4. 태그 내 텍스트 입력하기
마찬가지로 포스트하기 버튼에도 id값을 준다.
<a onclick="hey()" id="btn-post-box" class="btn btn-primary btn-lg" href="#" role="button">포스트하기</a>
메모메모 페이지에 돌아와서 DevTools에
$('#btn-post-box').text('멍멍')을 입력하니 버튼 안의 텍스트 내용이 멍멍으로 바뀌었다. value() 와는 다른 개념으로, text()는 텍스트 내용을 바꾸는 것이다.
5. 태그 내 html 입력하기
메모메모 페이지에서 만들어두었던 카드들을 동적으로 html을 이용해서 바꿀 수도 있다.
card-columns에도 id값을 준다.
<div class="card-columns" id="card-box">
메모메모 페이지에 돌아와서 DevTools에
let temp_html=`<button>나는 버튼이다</button>`
$('#cards-box').append(temp_html)를 입력
위와 같이 나는 버튼이다 라는 버튼이 생성된다. 필자는 실수로 두 번을 눌러서 버튼이 두 개 생겼다. 즉, append()를 실행할 때 마다 새롭게 버튼이 생기는 것이다.
위의 코드에서 `` 은 백틱이다.
백틱안에 있는 <button>나는 버튼이다</button> 은 html 형식으로 생긴 문자열 이다.
즉, 백틱을 이용하여 문자열을 정의 한 것이다.
이를 이용해 append() 안에 정의한 문자열을 넣어주니... 버튼이 생긴 것이다.
이제 카드를 더 붙여보자.
파이참으로 다시 돌아가서
카드 부분에 해당하는 html을 긁어온다.
그리고 메모메모페이지 devTools 에서
let temp_html=``을 작성해두고, 백틱안에 긁어온 html을 붙여 넣어준다.
메모메모 페이지에 새로운 카드가 생성된 것을 확인!
만약 Card title을 변경하고 싶을 때
let title='제목 뭐하지'와 같은 방식으로 title 변수를 만들어 주고
위에서 보는 것처럼 Card title이 적혀져 있던 부분에 ${변수명} 을 넣어준다.
그 후에 마찬가지로 append()를 이용해서 카드를 붙여 넣어주면
Card title->제목 뭐하지 로 제목이 바뀐 카드가 새로 생성된 것을 확인!
'웹' 카테고리의 다른 글
| 9. Ajax (0) | 2021.08.25 |
|---|---|
| 8. 포스팅박스 열고 닫는 기능 추가하기 (0) | 2021.08.24 |
| 6. 부트스트랩을 이용해서 상품페이지 틀 만들어보기 (0) | 2021.08.22 |
| 5. 부트스트랩 이용해서 포스팅박스 추가하기 (0) | 2021.08.21 |
| 4. 부트스트랩이용해서 메모(카드) 페이지 만들기 (0) | 2021.08.20 |
댓글