jQuery 연습하기 |
Javascript를 쓰는 이유 ? 💁 --> HTML을 조작하려고 !
왜 조작하는데 ? 💁 --> 움직이게 만들고 싶으니까 !
jQuery는 Javascript와 다른 소프트웨어가 아니라 미리 작성된 Javascript 코드
Javascript로도 모든 기능을 구현할 수는 있지만, 1) 복잡한 코드 2) 브라우저 간의 호환성 문제 고려여부 --> 때문에 jQuery 라는 라이브러리 등장 !!
HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것 == 라이브러리라고 생각하면 될 듯!
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것 ( 때문에 쓰기 전에 ⭐"import"⭐는 필수 ! )
얼마나 복잡할까?
- Javascript 코드
document.getElementById("element").style.display = "none";- jQuery 코드
$('#element').hide();jQuery로 작성한 코드가 좀 더 직관적으로 가독성이 좋은 것을 볼 수 있다. (이만큼이나..? 제이쿼리 안쓰고 자바스크립트로만 작성하려고 했던 과거의 나 조금 반성해..)
일단 아래 이미지처럼 처음 만들었던 SPARTA CODING 폴더에 하위폴더 jsprac 만들고, jQuery.html 파일을 만들어 줬다. + enter 키 치면 왼쪽 html 코드가 자동으로 나온다는 사실 ㅎㅎ
그리고 코드 스니펫으로 html 뼈대를 붙여넣으라 하셔서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> //여기 jQuery 임포트 해줌 !!
</head>
<style>
.button-part {
display: flex;
height: 50px;
}
</style>
<script></script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br />
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2"></div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3"></div>
</div>
</body>
</html>요 뼈대를 붙여넣어 줬다. 아직까진 어려운게 1도 없 .. 보니까 div마다 class, id명을 지정해 줬고 button을 클릭하면 checkResult라는 함수를 호출하는 게 보인다. 아직 스크립트 태그 안에 없는 걸 보니까 나중에 작성하려나 보다. button-part라고 style 안에 작성해 놓은게 보이고 ,, 이제 조금씩 눈에 들어오는 걸 ㅎㅋ
jQuery 에서는 선택자를 class가 아니라 id로 지정해 준다는 사실 !
위 코드에서 몇가지 추가를 해줬다.
function checkResult(){
let a = '사과';
$('#q1').text(a);
let b = {'name' : 'Chloe', 'age' : 28};
$('#q2').text(b['name']);
let c = [
{'name' : 'Chloe', 'age' : 28},
{'name' : 'Chloe', 'age' : 28}
];
$('#q3').text(c[1]['age']);
}; <h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1">test</div>
</div>
<div class="dict-part">
<h2>3. 딕셔너리</h2>
<div id="q2">test</div>
</div>
<div>
<h2>4. 리스트 딕셔너리</h2>
<div id="q3">test</div>
</div>script 태그 내에 checkResult 함수를 생성해서 a, b, c라는 변수를 만들었다. q1, q2, q3의 명칭을 가진 div 태그를 선택해서 그 안에 test라고 적힌 내용을 바꾸고 싶다. 제이쿼리 문법을 쓰는데, $('id') 를 쓰고, 글자를 바꿀거기 때문에 .text()로 설정해줬다. (말이 이상한데 이게 일단 최선 .. )
결론적으로는 checkResult 라는 함수가 실행되면 a가 q1 내용에, b가 q2에, c가 q3에 설정해 둔 변수의 값이 들어갈 것이다.
위 이미지처럼 결과 확인하기 버튼을 누르면 test라고 적혀있던 부분이 사과라고 바뀌는 것을 볼 수 있다.
jQuery 연습하기 || - 반복문, 조건문
리스트, 리스트-딕셔너리 형식의 자료는 하나하나 뽑아써야 할까?
만약 리스트 자료형의 데이터가 100개면 console.log()를 100번 쳐야 하는가 .. ? ;;;
반복문을 쓰면 쉽게 쓸 수 있다구 😎
forEach문
array.forEach((변수명) => { //변수명은 마음대로 작성하면 됨!
console.log(변수명);
}); //리스트의 요소 개수만큼 반복!위 코드처럼 쓰면 된다 ! console 창에 찍을 거면 !! array 대신에 저장해놓은 배열 넣으면 완성 ! (복붙해서 쓰기 ㅋㅎㅋㅎ) 예를 들어보면
let fruits = ['apple', 'pear', 'strawberry', 'grapefruit'];
fruits.forEach((fruitName) => {
console.log(fruitName);
}); 이렇게 코드를 작성하고 실행하면 아래 사진처럼 console창에 나타난다. 내가 console.log로 다 치지 않아도 되니 이렇게 편할수가 👏👏👏
조건에 맞춰 실행을 다르게 해주는 조건문 ! if문 사용
조건문
if (condition) {
// 조건에 맞다면~
} else {
// 아니라면~
}예를 들어서 19살보다 많으면 성인입니다. 작으면 미성년자입니다.를 출력하려면 ?
let age = 24;
if (age > 19) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}변수 설정 해주고, if-else문 불러와서 조건문 완성 !
반복문이랑 조건문을 같이 쓰고 싶으면 ? 🤔
let ages = [12,15,20,25,17,37,24,30,50]; //반복문에 사용할 배열 만들어 주고
ages.forEach((age) => {
if (age > 20) {
console.log(age + "세는 성인입니다.");
} else {
console.log(age + " 세는 미성년자입니다.");
}
});jQuery 연습하기 ||| - append
append
어떤 데이터를 받아와서 붙여넣는데 그 데이터의 수만큼 html을 보여줄 수 있다고 한다.
새로운 뼈대를 넣으라고 해서 오늘도 코드스니펫 ^0^~~ 세상 편리해
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> //jQuery import
</head>
<script>
function checkResult() {}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr />
<br />
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 붙이기</h2>
<div id="q1">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살 입니다.</p>
<p>세종은 30살 입니다.</p>
<p>수영은 20살 입니다.</p>
</div>
</div>
</body>
</html>배울 내용 : q1 div에 < p> 태그로 감싼 과일 명을 붙여넣고, q2 div에도 xx는 xx살입니다. 라는 내용을 계속 붙여넣기
버튼을 누르면 checkResult 함수가 실행되면서 안에 있는 forEach문이 돌면서 붙어야 됨. 일단 완성된 코드는 아래에 있다.
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
fruits.forEach((fruitName) => {
let temp_html = `<p>${fruitName}</p>`;
$("#q1").append(temp_html);
});
}fruits 라는 배열을 가진 변수 선언하고, fruits를 반복문을 돌린다. append에 넣어줄 변수를 설정하고 그 안에 백틱(``)을 사용하면 문자와 변수를 함께 써줄 수 있다.
위 코드를 실행하면 이미 작성되어 있던 사과, 귤, 감이 중복이 되기 때문에 없애주는게 좋을 것 같은데 이건 어떻게 할까? 그냥 싹 다 지워버리고 삽입하면 되지 않을까?
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
$('#q1').empty();
fruits.forEach((fruitName) => {
let temp_html = `<p>${fruitName}</p>`;
$("#q1").append(temp_html);
});
}헐 진짜였음 ; $('#q1').empty(); 코드 넣어서 기존 내용 지우고 삽입하면 되는 거였다 .. ! 허거덩
그럼 이제 q2 선택자를 가진 div 태그의 내용을 바꿔주려면 ?
function checkResult() {
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
];
$('#q2').empty();
people.forEach((peopleInfo) => {
let name = peopleInfo['name'];
let age = peopleInfo['age'];
let temp_html = `<p>${name}의 나이는 ${age}입니다.</p>`;
$('#q2').append(temp_html);
});
}변수를 2개 설정해준 다음에 아까랑 똑같이 append 하면 완료 - !
