jQuery?
- HTML ์์๋ค์ ์กฐ์ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ ์ฝ๊ฒ ์์ฑํด๋ ๊ฒ, ๋ผ์ด๋ธ๋ฌ๋ฆฌ
// Javascript
document.getElementById('hello').innerHTML = '์๋
';
// jQuery
$('#hello').html('์๋
');
์ฌ์ฉ๋ฒ
- jQuery CDN์ HTML head ํ๊ทธ ์ฌ์ด์ import ํด์ค์ผ ์ธ ์ ์๋ค.
<!DOCTYPE html>
<html>
<head>
<title>์ ์ด์ฟผ๋ฆฌ ์ํฌํธ ํ๊ธฐ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
</script>
<body>
</body>
</html>
๐โ๏ธ CDN์ด๋??
- Contents Delivery Networt โก๏ธ
- ์ง์ฐ์ ์ต์ํํ๋ฉด์ ์ฌ์ฉ์์๊ฒ ์ฝํ ์ธ ๋ฅผ ๋ฐฐํฌํ๋ ๋ฐ ๋์์ด ๋๋ ์๋ฒ ๋ฐ ํด๋น ๋ฐ์ดํฐ ์ผํฐ์ ์ง๋ฆฌ์ ์ผ๋ก ๋ถ์ฐ๋ ๋คํธ์ํฌ์ด๋ค.
- https://www.cdnetworks.com/ko/what-is-a-cdn/
๐ง ์ ์ด์ฟผ๋ฆฌ ์ฐ์ตํ๊ธฐ
1) ๋ฆฌ์คํธ ์๋ฃํ์ผ๋ก ์ฐ์ตํ๊ธฐ
- fruits ๋ฆฌ์คํธ ๋์ดํ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<title>์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ฐ์ตํ๊ธฐ!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let fruits = ["apple", "banana", "lemon"];
fruits.forEach((i) => {
let fruit_html = `<p>${i}</p>`;
$("#fruitsArr").append(fruit_html);
});
}
</script>
<body>
<h1>fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<div id="fruitsArr"></div>
</body>
</html>๐ ๊ฒฐ๊ณผ
- Check!! ๋ฒํผ ๋๋ฅด๋ฉด fruits ๋ฐฐ์ด ์์ ์์๋ค์ด ์ถ๋ ฅ๋๋๊ฑธ ํ์ธํ ์ ์๋ค.
2) ๋์ ๋๋ฆฌ ์๋ฃํ์ผ๋ก ์ฐ์ตํ๊ธฐ
- ์์์ด๊ฐ ์ข์ํ๋ ๊ณผ์ผ์?
<!DOCTYPE html>
<html>
<head>
<title>์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ฐ์ตํ๊ธฐ!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let favFruit = { name: "์์", fruit: "pineapple" };
$("#sooFavFruit").text(favFruit["fruit"]);
}
</script>
<body>
<h1>Favoite fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<p id="sooFavFruit"></p>
</body>
</html>๐ ๊ฒฐ๊ณผ
3) ๋ฆฌ์คํธ - ๋์ ๋๋ฆฌ ์๋ฃํ์ผ๋ก ์ฐ์ตํ๊ธฐ
- ์ฌ๋๋ค์ด ์ข์ํ๋ ๊ณผ์ผ์ ๊ฒฐ๊ณผ๋ฌผ๋ก ์ถ๋ ฅํ๊ธฐ
<!DOCTYPE html>
<html>
<head>
<title>์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ฐ์ตํ๊ธฐ!</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
function checkResult() {
let favFruitArr = [
{ name: "์์", fruit: "apple" },
{ name: "์ฒ ์", fruit: "banana" },
{ name: "์์", fruit: "pineapple" },
{ name: "์์ฒ ", fruit: "grape" },
];
favFruitArr.forEach((i) => {
// ๋ณ์๋ก ์ง์ ํด ์ฝ๊ฒ ์ฐ๊ธฐ
let name = i["name"];
let fruit = i["fruit"];
let temp_html = `<p>${name}: ${fruit}</p>`;
$("#fruitsArr").append(temp_html);
});
}
</script>
<body>
<h1>Favoite fruits list</h1>
<button onclick="checkResult()">Check!!</button>
<div id="fruitsArr"></div>
</body>
</html>๐ ๊ฒฐ๊ณผ
