22.01.21 Javascript 복습, JQuery 다뤄보기
외울 생각 하지마!
자연스레 익숙해짐. 그리고 모를 땐 걍 구글링하거나 이전에 했던 코드 보면서 긁어오면 됨.
Javascript복습
count = count +1; -> 지금 있는 count에 하나를 높이세요. (지금 있는 카운트에 1을 더해서 다시 카운트에 넣어라)
줄여써서 count += 1;
count % 2 == 0 -> 2로 나눴을 때 나머지가 0이다 = 짝수이다
잘못된예)
<script>
function hey() {
let count = 1;
if (count % 2 ==0){
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
count += +1;
}
</script>let count=1; 에서 만들어진 카운트는 이 함수 안에서 끝나고, 축적이 안 된 채 새로운 카운트가 생겨버림.
그래서 계속 1로만 카운팅 되는 것. -> let count=1; 을 함수 바깥으로 빼주면, hey()를 부르기 전부터 이미1, 그 후로 count += 1;에 의해서 축적이 됨!!!!!!!!!
결론 : 변수를 함수 안에서 선언해서 써버리면, 함수가 끝나는 순간 자동으로 사라짐! ->함수 바깥으로 빼내면 함수와 상관없이 스크립트에서 써먹을 수 있음.
올바른예)
<script>
let count = 1;
function hey() {
if (count % 2 ==0){
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
count += +1;
}
</script>
JQuery
Javascript로 엄청 복잡하게 표시할 걸 간단하게 쓸 수 있음
미리 작성된 Javascript 코드이기 때문에 미리 import하지 않으면 쓸 수 없다.
남이 짜둔 CSS를 부트 스트랩에서 가져다 쓰듯이, 그냥 남이 짜둔 javascript를 가져오는 거임.
임포트하기 - <head></head> 사이 아무데나 넣으면 됨.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>보통 부트스르랩에서 가져올 땐 import 되어있는 경우가 많음, 그 외의 경우엔 꼭 넣어줘야 함.
1. input box에 값 불러오기, 값 넣기
Jquery를 하기 위해서는 id를 부여해야함. (CSS에서 명찰 붙이듯이!)
<div class="posting-box">
<div class="form-group">
<label>아티클 URL</label>
<input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" >
</div>개발자 도구에서
$('#article-url').val(); -> 지칭해서, 값 불러오기
'세종대왕'
$('#article-url').val('장영실'); -> 지칭해서, 값 집어넣기
S.fn.init [input#article-url.form-control]
2. div 보이기/숨기기
<div class="posting-box" id="post-box">$('#post-box').hide() -> 지칭해서, 없앤다!
S.fn.init [div#post-box.posting-box]
$('#post-box').show() -> 지칭애서, 나타낸다!
S.fn.init [div#post-box.posting-box]
3. css 값 가져오기 (여기선 display 값)
$('#post-box').css('width') -> 지칭해서, width 값 보여줘!
'500px'
$('#post-box').css('width','700px') -> 지칭해서, width 값 바꿔봐!
S.fn.init [div#post-box.posting-box]
$('#post-box').css('display') -> 지칭해서, display 값을 보여줘
'block' -> = 보이는 상태.
$('#post-box').hide() -> 현재 창에서 보이지 않게 한 다음에
S.fn.init [div#post-box.posting-box]
$('#post-box').css('display') -> 지칭해서, display 값을 보여줘
'none' -> = 있긴한데 보이지 않는 상태.
4. 태그 내 텍스트 입력하기
<a onclick="hey()" id ="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>$('#btn-posting-box').text('랄라') -> input box값 바꿀 땐 .val 쓰고, 일반적인 텍스트를 바꿀 땐 .text 를 씀
S.fn.init [a#btn-posting-box.btn.btn-primary.btn-lg]
5. 태그 내 html 입력하기
<div class="card-columns" id="cards-box">let temp_html = `<div class="card"> -> ``사이의 것을 html로 만들어서
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-
LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리
나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>`
undefined
$('#cards-box').append(temp_html) -> 붙여넣기!!
S.fn.init [div#cards-box.card-columns]
let title = '얄리얄리얄라셩' -> title이라는 변수에 내용을 담고
undefined
let temp_html = `<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-
LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg"
alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">${title} </a> -> 변수에 담긴걸 여기 넣어줘
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리
나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>`
undefined
$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.card-columns]