공부하자/웹개발일지
[웹개발일지] #3. jQuery 적용
snbrin
2022. 3. 4. 15:48
풀스택 웹개발 공부 기록하기 #3.
😉jQuery를 이용해 javascript를 html로 쉽제 제어하기😉
💾 JQuery
html의 요소를 조작하고 편리한 javascript를 미리 작성해둔 라이브러리
마찬가지로 필요할 때 필요한 기능을 그때그때 구글링하기.
스크립트로 모든 기능을 구현할 수 있긴 하지만,
코드가 복잡하고 브라우저 간 호환성 문제를 고려하여 jQuery를 사용하기도 함.
자바스크립트보다 좀 더 직관적
미리 만둘어진 것을 가져와서 사용하는 것이므로 사용 전에 import 해야함
👉jQuery 임포트하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
👉css에서 class로 선택자 지정하여 사용했던 것처럼
jQuery에서도 id 값을 통해 특정 버튼/인풋박스/div/등을 가리켜 사용함
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>
👉크롬 개발자도구 콘솔창에서 값 검색 가능
개발 과정에서 코드별 결과를 확인할 때 유용함!
$('#post-url').val();
👉태그 내 html 입력하기
태그 내에 동적으로 html을 넣고 싶을 때는?
예를 들어, 포스팅되면 카드 추가하기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
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 붙이기
// onclick 속성(attribute)을 추가합니다.
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
👉 포스팅 박스에 id값 주기
<div class="form-post" id="post-box">
<div>
<div class="form-group">
<label for="exampleFormControlInput1">아티클 URL</label>
<input class="form-control" placeholder="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" rows="2"></textarea>
</div>
<button type="button" class="btn btn-primary">기사저장</button>
</div>
</div>
👉 포스팅 박스 제어하기
'포스팅 박스 열기' 버튼을 누르면 숨겨졌던 창이 나타나고 버튼은 '포스팅박스 닫기'로 바뀜
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('포스팅 박스 닫기');
}
}
👉 style= display : none
처음 웹에 접속했을 때 포스팅박스를 안보이게 하기
JQuery 연습
👉 입력값 띄우기(없으면 alert 경고)
👉 이메일 입력(@이 있는지 판단)
👉 입력값 붙이기
👉 입력값 전체 삭제
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
</style>
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let txt = $('#input-q1').val();
if($('#input-q1').val()==false){
alert('입력하세요!');
}else{
alert(txt);
}
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let txt = $('#input-q2').val();
if(txt.includes('@')){
let domain = txt.split('@')[1].split('.')[0]
alert(domain)
}else{
alert('이메일이 아닙니다.')
}
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`
$('names-q3').append(temp_html)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#input-q3').empty();
}
</script>
</head>
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>
</html>