<body>
<style>
.name{
width: 100px;
height: 100px;
background: #ccc;
padding: 10px;
border: 10px solid #000;
}
</style>
<div class="name">김연빈</div>
<!-- 제이쿼리 환경 -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script>
$(function(){ // 문서를 로드 후에 실행해라
$('.name').text('천재')
$('.name').text('')
$('.name').text() // 불러오기/실행. text()에 김연빈이라는 이름이 담김
// * 스크립트에서 데이터 확인하는 방법 2가지
alert();
console.log($('.name').text());
// * 태그 인식 유무의 차이
$('.name').html('<h1>천재</h1>') // .html()은 소괄호 안에 태그를 넣을 수 있음.
// .text()는 태그를 인식 못 함.
// * 잘 안 쓰는 메서드
$('.name').hide().show(); // display: none을 넣고, 빼고
$('.name').fadeOut(1000).fadeIn(); // 전자는 opacity가 바뀌면서 display: none이 되고,
// 소괄호 안에 숫자를 넣을 수 있음
// 후자는 그 반대.
// css가 발달해서 transition으로 줄 수 있고,
// 클래스 추가 제거로도 줄 수 있기 때문에 잘 안 쓴다.
// * css값을 불러오거나 바꾸거나 할 수 있음
$('.name').css("color",'#f00');
// console.log($('.name').css("color"));
$('.name').css({color: "#f00", background: "#00f"})
// 두 가지 이상 속성을 쓸 때.
// 속성에 - 넣으면 연산이 되기 때문에, 따옴표로 묶거나 카멜 방식으로 쓰면 인식이 됨!
// (속성은 상관없고, 값은 숫자나 변수가 아니면 따옴표를 써야함.)
// * animate 속성
$('.name').animate({속성:값},속도,콜백)
$('.name').animate({width:200},1000).animate({height:200},1000)
// 순차적 실행
$('.name').animate({width:200,height:200},1000, function(){
alert('end');
})
// 동시에 실행했다가 완료되고나서 end 알람.
// 콜백 - 뒤에서 부르는 것
// * 가장 많이 사용하는 메서드
$('.name').addClass('on'); // 클래스 추가
$('.name').removeClass('on'); // 클래스 제거
isOn = $('.name').hasClass('on'); // 클래스 존재 유무
// console.log(isOn); // 결과는 true 또는 false. 불린값
if(조건:참이면:true){
실행
}else{
그렇지 않다면 실행
}
// if (isOn) {
// console.log('yes');
// } else {
// console.log('no');
// }
문자 "안녕" "1"
숫자 1234,13
변수 x=1
// cosole.log(1+"1"+(1+1));
// 배열 array 다양한 값을 담을 수 있음
동물 = ['치타', '코끼리', '사자'];
console.log(동물.length);
console.log(동물[0]);
// 객체 object 복잡한 값을 담을 수 있음
블랙핑크={
성별:"여성",
멤버:['지수','로제','치킨','마요'],
문신유무:true,
}
console.log(블랙핑크.성별);
console.log(블랙핑크.멤버);
console.log(블랙핑크.멤버.length);
console.log(블랙핑크.문신유무);
= 대입
== 비교
=== 비교 데이터타입까지
x=1;
y="1";
// console.log(x==y);
// console.log(x===y);
&& 그리고
|| 또는
// console.log(x==y && x===y)
// console.log(x==y || x===y)
// 블랙핑크={
// 성별:"여성",
// 멤버:['지수','로제','치킨','마요'],
// 문신유무:true,
// }
// 블랙핑크의 설명이 여성이고,
// 블랙핑크의 멤버의 수가 10명 이하이고,
// 문신이 있다면
// if (블랙핑크.성별 === "여성" && 블랙핑크.멤버.length <= 10 && 블랙핑크.문신유무) {
// console.log('잡아넣어라')
// } else {
// console.log('풀어줘라');
// }
text = "길을 가다가 사람을 만나서 "안녕하세요 반가워요""
name = '김연빈';
text = `길을 가다가 사람을 만나서 "${name} 안녕하세요 반가워요"`;
// 벡틱(`)을 쓰면 내용이 문자 그대로 출력됨
// ${name}으로 문자와 변수 사이의 보관처리를 아주 쉽게 할 수 있음. (제이쿼리 nono. 자바스크립트)
// console.log(text);
w = $('.name').width(); // content까지.
w = $('.name').innerWidth(); // padding까지.
w = $('.name').outerWidth(); // border까지. 최종 width값
w = window.innerWidth; // 현재 window 창 크기
// console.log(w);
var 2015 이전 [es5] - 재할당 가능... 문제 있음
let 2015 이후 [es6] - 재할당 가능
const 2015 이후 [es6] 모든 변수는 const로 만들기. 상수, 재할당 불가
모든 변수명은 const로 선언하면 됨. 바뀌는 값이 있을 때 let으로 바꿔주면 됨.
// let maxLevel = 99;
// maxLevel = 150;
// const maxLevel = 99;
// const maxLevel = 150;
// console.log(maxLevel);
// console.log(1);
// console.log(2);
// console.log(3);
// console.log(4);
// console.log(5);
for (let i = 0; i < 5; i++) {
console.log(i);
}
// let i = 0
// i=0 < 5; => true
// console.log(0);
// i++ => 1;
// console.log(동물[0]);
// console.log(동물[1]);
// console.log(동물[2]);
// * for문으로도 돌릴 수 있지만, 가장 많이 쓰는 것. 각각 반복 돌려준다!
let i=1;
동물.forEach(element => {
console.log(element+i);
i++;
});
}) // 지우지 마라
</script>
</body>
web publisher