-
21.09.09. 2-2~6강 (jQuery)일기 2021. 9. 9. 15:47
[jQuery]
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
1) 코드가 복잡하고,
2) 브라우저 간 호환성 문제도 고려해야해서,
jQuery라는 라이브러리가 등장하게 되었다.
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라
미리 작성된 Javascript 코드. =>부트스트랩과 비슷한 개념!
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임
그렇게 때문에, 쓰기 전에 "임포트"를 해야함!
(미리 작성된 Javascript 코드를 가져오는 것)
<ex>
*javascript
document.getElementById("element").style.display = "none";
*jQuery
$('#element').hide();
[jQuery CDN]
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
Google CDN 복사
head 안에 넣기
부트스트랩 템플릿에 이미 포함되어 있으므로
부트스트랩 템플릿을 적용한 경우에는 따로 임포트 해줄 필요 없음
[jQuery 활용]
*input 박스의 값 가져오기
$('#article-url').val(); =>#...에 있는 값을 가져와!
"세종대왕"
$('#article-url').val('장영실'); =>#...에 있는 값을 '장영실' 로 바꿔서 표현해!
S.fn.init [input#article-url.form-control]*div 보이기 / 숨기기
<div class="posting-box" id="post-box"> =>div에 id가 없으면 추가해주기
$('#post-box').hide() =>숨기기
S.fn.init [div#post-box.posting-box]
$('#post-box').show() =>보이기
S.fn.init [div#post-box.posting-box]
$('#post-box').css('width')
"500px"
$('#post-box').css('width','700px') =>post-box의 width가 늘어남
S.fn.init [div#post-box.posting-box]*css의 값 가져와보기 (예시로 display 값 가져와보기)
$('#post-box').css('display')
"block"
$('#post-box').hide()
S.fn.init [div#post-box.posting-box]
$('#post-box').css('display')
"none"//있는데 안보이는 중 (hide된 상태)
*태그 내 텍스트 입력하기
$('#btn-posting-box').text('포스팅 박스 닫기');!
*태그 내 html 입력하기
<div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
let temp_html = `<button>나는 추가될 버튼이다!</button>`; =>주의! 작은따옴표(')가 아니라 backtick(`)으로 감싸기!
$('#cards-box').append(temp_html);
[적용하기]
<script>
function openclose() {
let status = $('#post-box').css('display'); =>post-box의 display css값은 block이었음console.log(status); =>status가 console창에 log로 남긴다
}
</script>=>포스팅박스 버튼을 누르면 console창에 'block'이라고 뜸 (중간중간 잘 되는지 alert나 console.log()로 확인하고 가기)
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') { =>만약 status가 block이면
$('#post-box').hide(); =>post-box를 hide해라
} else { =>그게 아니면
$('#post-box').show(); =>post-box를 show해라
}<style>
.posting-box {
width: 500px;
margin: 0px auto 30px auto;
border: 3px solid black;
border-radius: 10px;
padding: 30px;
display: none; =>처음부터 보이지 않는 상태에서 시작
}
</style>
<script>
function openclose() {
let status = $('#post-box').css('display');
if (status == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기'); =>post-box가 hide 되어있을 때 btn에 표시할 text는 '열기'
} else {
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기'); =>post-box가 show 되어있을 때 btn에 표시할 text는 '닫기'
}
}
</script>[퀴즈]
*split 활용하기 (console창)
let txt = 'something@naver.com'
txt.split('@')
(2) ["something", "naver.com"]
txt.split('@')[1]
"naver.com"
txt.split('@')[1].split('.')
(2) ["naver", "com"]
txt.split('@')[1].split('.')[0]
"naver"*정답
jQuery 연습하고 가기!
s3.ap-northeast-2.amazonaws.com
<!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() {
let txt = $('#input-q1').val();
if (txt == '') {
alert('입력하세요!');
} else {
alert(txt);
}
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
let txt = $('#input-q2').val();
if(txt.includes('@')) {
let domain = txt.split('@')[1].split('.')[0];
alert(domain);
} else {
alert('이메일이 아닙니다.');
}
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (.includes('...') 이용하기 - 구글링!)
// 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`;
$('#names-q3').append(temp_html);
// 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)을 이용하면 굿!)
}
function q3_remove() {
$('#names-q3').empty();
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').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>'일기' 카테고리의 다른 글
21.09.14. 3-1~3강 (복습) (0) 2021.09.14 21.09.11~14. 2-7~12강 (JSON, Ajax) (0) 2021.09.12 21.09.09. 2-1강 (Javascript 복습, count) (0) 2021.09.09 21.09.08. 1-12~15강 (Javascript) (0) 2021.09.08 21.09.07~08. 1-8~11강 (부트스트랩, w3schools, mdn) (0) 2021.09.07