1. jQurey 사이트에 들어가서 script src 가져오기
https://releases.jquery.com/
(버전 아무거나 가져와도 되지만, 본인은 jQuery 3.x 사용)
//body 안에 //script src 붙여넣기
<body>
//마크업
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</body>2. $(), $(function()) 차이 그리고 defer
$()로 시작할 경우, 무조건 마크업 하단에 있어야 실행됨.
(컴퓨터는 위에서 아래로 읽기 때문에)
$(function())로 시작할 경우,
어느 위치에 놓여있든 문서를 다읽고 실행됨.
(대신 위에 썼던 script src 위에 위치하면 안됨.)
function 대신 defer
스크립트에 펑션을 적는 대신,
html script 파일명 옆에 defer를 적어주면
펑션과 동일한 의미로 문서를 다읽고 그 후에 실행됨.
<script src="./todo.js" defer></script>3. 콘솔 console.log()
실무에서 무언가 테스트할일이 생겼을 때,
스크립트에서 바로 실행해버리면 큰 오류와 문제가 발생하게 됨.
(실제 사용자가 사용하고 있는 도중에, 테스트알림이 뜨면서 오류가 생길 수 있음)
그럴 때, 콘솔로 실행하면서 확인할 수 있음.
if (x < y) {
console.log('yes');
} else {
console.log('no');
}4. 변수
반복되는 내용을 간단히 묶을 때,
긴 내용을 하나로 줄일 때,
'변수'라는 것을 사용함.
name = $('.name').text()*위 코드에서 변수는 name이 됨.
5. html()
html과 text는 문자를 추가할 수 있는 기능을 가지고 있는데,
차이점은!!
html은 태그가 들어갈 수 있음.
$('.name').html('<h1>222</h1>')*콘솔로 확인했을 때, html > .name에 h1태그 생성됨.
6. css()
css 단일 속성을 이루고 싶을 때, 소괄호 하나만 주면 됨.
$('.name').css('color','#00f')2가지 이상을 쓰고 싶을 때는 소괄호 안에 중괄호 추가하면 됨.
$('.name').css({color:'00f',width:300})**여기서 포인트!!
위드에 300 뒤 아무런 수치가 없을 때는,
px픽셀이 디폴트이고,
퍼센트를 쓰고 싶을 때는 문자화 시키면 된다.
({width:'100%'})
7. animate() / call back
animate
말그대로 모션을 준다고 생각하면 됨.
$('.name').animate({width:300,height:300},1000)*가로300px X 세로300px 모양으로 1초동안 변해라!
(1000은 1초, 3000은 3초 ...)
call back
부르고 그 후에 실행한다.
$('.name').animate({width:300,height:300},1000,function(){alert('끝'})*가로300px X 세로300px 모양으로 1초동안 변하고, 그 후에 '끝'이라는 알림창이 떠라!
8. hide() & show() / fadeOut() & fadeIn()
.hide( ) 👉 display : none 처리되어 사라짐.
.show( ) 👉 display : none 빠지고, 있던게 다시 나타남.
.fadeOut(속도기입) 👉 기입한 속도만큼 사라짐.
.fadeIn(속도기입) 👉 기입한 속도만큼 나타남.
9. addClass() & removeClass() & hasclass()
.addClass( ) 👉 클래스명을 추가함.
.removeClass( ) 👉 클래스명을 삭제함.
.hasClass() 👉 클래스명이 현재 있는지 확인함.(boolean(true/false)로 답함.)
10. if(){} else{}
if(조건:참) { 실행
}
else{ //그렇지 않다면 실행}
*스크립트에 ifelse라고 타이핑.
11. 문자와 숫자와 변수 그 외...
문자는 "" 들어감.
숫자는 "" 안들어감.
변수는 "" 안들어감.
X = '1'; 👉 X는 문자화된 1이다.
X == 1 👉 == 값만 비교.
Y === 1 👉 === 데이터 타입까지 비교.
|| 👉 또는 (하나만 참이어야됨)
&& 👉 그리고 (모든게 참이어야됨)
12. const / let / var
var
var는 2015이전 버전스크립트라서 사용하지 않음.
(var = 한번 할당했는데, 그 이후 또 할당할경우 그값으로 바로 바뀜. >> 오류를 범할 수 있음 NO안전)
var revel:100;
var revel:150; --> 150으로 바뀜.const
const는 재할당이 불가함, 상수(변하지 않는 값을 쓸때 사용)
const revel:100;
const revel:150; --> 150적용안되고 오류생김.let
let은 한번 할당하면 그 뒤에는 재할당이 가능함.
let revel:100;
revel:150; --> 한번 할당했으니 그 뒤는 let을 빼주어야함.
.
.13. 배열
배열은 숫자가 0부터 시작한다.
반1 = ['영수','철수','광수']
반1[1] --> '철수'값이 나옴.14. 오브젝트
오브젝트는 복잡한 변수를 만들 때 사용한다.
범죄자 = {
"형량":50,
"문신":true,
"성별":'남자'
}범죄자.형량
범죄자.문신
범죄자.성별
if (범죄자.형량 >= 30 && 범죄자.문신 && 범죄자.성별 == '여자') {
console.log('잡아넣어');
} else {
console.log('안녕히계세요');
}범죄자의 형량이 30년이상이며, 문신이 있고, 성별이 여자다.
=그 값은 '안녕히계세요'. 왜냐하면 &&이기때문에 전체값이 만족해야한다.
15. 백틱
문자와 변수의 보간을 백틱이라고 한다.
마크업을 스크립트로 가져올 때, 양 끝쪽에 ₩키를 치면 됨.
$('.btn').click(function(){
if(text){
html =
`
<li>
<span class="work">${text}</span>
<button class="end">끝</button>
<button class="del">삭제</button>
</li>
`
}
})16. val()
val()는 text나, input값을 가져올 때 사용한다.
$('.btn').click(function(){
text = $('.text').val();
if(text){
html =
`
<li>
<span class="work">${text}</span>
<button class="end">끝</button>
<button class="del">삭제</button>
</li>
`
}
})17. append()
append는 맨 하단에 추가할 때 사용한다.
$('.btn').click(function(){
text = $('.text').val();
if(text){
html =
`
<li>
<span class="work">${text}</span>
<button class="end">끝</button>
<button class="del">삭제</button>
</li>
`
$('.list1').append(html);
}
})*.list1 맨 아래에 html변수된 내용을 집어넣겠다는 의미.
15. 스크립트 주석
스크립트 주석은
/* 을 타이핑하면 연달아서 가 생김.
(실무에서 부가설명이 필요할 때 사용함)
/**
* @name =
*
*
*/