Javascript & JQuery 연습하기
2023. 2. 24. 10:49ㆍsparta_codingclub
728x90
1. JQuery란?
• HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리
- Javascript로도 모든 기능을 구현할 수는 있지만, 코드가 복잡하고, 브라우저 간 호환성 문제도 고려해야해서, JQuery라는 라이브러리가 등장하게 됨.
• JQuery와 Javascript 코드 비교해보기
- Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";- JQuery로 보다 직관적으로 쓸 수 있음
$('#element').hide();
2. JQuery 사용하기
• 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부름
- jQuery CDN 부분을 참고해서 임포트하기: (링크)
https://www.w3schools.com/jquery/jquery_get_started.asp-코드스니펫 jQuery CDN
https://www.w3schools.com/jquery/jquery_get_started.asp• <head>와</head> 사이에 넣으면 끝
3. JQuery 연습하기
• 뼈대 만들기
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 문법 연습하기!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</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>• script 태그에 checkResult()함수 만들기
<script>
function checkResult() {}
</script>• alert('안녕하세요')를 적어 똑같이 작동하는지 한 번 해보기
function checkResult() {
alert('안녕하세요')
}• <div> 태그 뒤에 글씨 바꾸기
<div id="q1">테스트</div>let a = '사과'function checkResult() {
let a = '사과'
$('#q1').text(a)
}• 리스트를 써서 해보기
let a = ['사과', '배', '감', '귤']$('#q1').text(a[1])• 딕셔너리를 써서 해보기
let b = {
"name" : "영수",
"age" : 30
}$('#q2').text(b['name'])• 리스트- 딕셔너리를 써서 해보기
let c = [
{'name':'영수', 'age':30},
{'name':'철수', 'age':35}
]$('#q3').text(c[1]['age'])
• 완성코드
4. 반복문
• forEach로 간단하게 만들기
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})• 결과
5. 조건문
• 조건문 만들기
let age = 24
if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
• 반복문 + 조건문 합치기
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})'sparta_codingclub' 카테고리의 다른 글
| Javascript (0) | 2023.02.24 |
|---|---|
| 포스팅박스 완성하기 (0) | 2023.02.24 |
| 부트스트랩 (0) | 2023.02.22 |
| 주석 (0) | 2023.02.22 |
| 구글 폰트 사용하기 (0) | 2023.02.22 |