JQuery
순수 javascript만 사용하면 1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야 해서,JQuery를 사용한다.
function checkResult() {
let a = ['사과', '배', '감', '귤']
$('#q1').text('쥬라기월드');
$('#q1').text(a[2]); // 감
let b = { 'name': '영수', 'age': 30 }
$('#q2').text(b['name']); // 영수
let c = [
{ 'name': '영수', 'age': 30 },
{ 'name': '철수', 'age': 35 }
]
$('#q3').text(c[1]['name']); // 철수
}<html>
<head>
</head>
<script>
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty(); //<div id="q1"> 안의 내용을 지우기
let temp_html = `<p>감자</p>`;
$('#q1').append(temp_html); // 제일 끝에 '감자' 추가
let a = fruits[3]; // 리스트의 3번째 '귤'을 변수 a에 담는다.
let temp_html2 = `<p>${a}</p>`;
$('#q1').append(temp_html2); // 리스트 제일 끝에 변수 a추가
// 반복문을 사용하여 리스트안의 항목들을 추가한다.
fruits.forEach(e => {
let temp_html3 = `<p>${e}</p>`;
$('#q1').append(temp_html3);
});
}
</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>
</body>
</html>
<!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() {
$('#q2').empty(); // <div id="q2"> 안의 내용 제거
let people = [
{ 'name': '서영', 'age': 24 },
{ 'name': '현아', 'age': 30 },
{ 'name': '영환', 'age': 12 },
{ 'name': '서연', 'age': 15 },
{ 'name': '지용', 'age': 18 },
{ 'name': '예지', 'age': 36 }
]
// 반복문을 사용하여 리스트 안의 내용을 출력 1
people.forEach(e1 => {
let temp_html4 = `<p>${e1['name']}는 ${e1['age']}살입니다.</p>`;
$('#q2').append(temp_html4)
});
// 반복문을 사용하여 리스트 안의 내용을 출력 2
people.forEach(e2 => {
let name = e2['name']; // 변수 name에 이름들을 저장
let age = e2['age']; // 변수 age에 나이들을 저장
let temp_html5 = `<p>${name}는 ${age}살입니다.</p>`;
$('#q2').append(temp_html5)
});
}
</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>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
</html>'💻 JavaScript > 기초 문법' 카테고리의 다른 글
| Firebase 응용 2: 영화 데이터 넣기 / firestore Database에서 데이터 가져오기 (0) | 2024.07.16 |
|---|---|
| Firebase / 데이터베이스 (1) | 2024.07.16 |
| Git, GitHub 정리 (0) | 2024.07.15 |
| 3일차 : 오늘 배운 것(클라이언트와 서버 / Fetch) (0) | 2024.07.12 |
| 2일차 : 오늘 배운 것(자바스크립트 기초 문법) (0) | 2024.07.11 |