JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>타이틀 밑에 넣어준다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타플릭스</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>에 넣어준다
function hey(){
$('#title').text('Harry Potter');
}<button onclick="hey()" type="button" class="btn btn-danger">기록하기</button>
바뀌었다
추가연습
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div><script>
function checkResult(){
$('#q1').text('Harry Potter');
}
</script>
결과 확인하기 버튼을 눌렀을 때 Harry Potter가 나오게 된다.
변수 출력
function checkResult() {
let a = '사과'
$('#q1').text(a)
}
반복문으로 리스트 출력
<script>
function checkResult() {
$('#q1').empty();
let fruits = ['사과', '배', '감', '귤', '수박'];
fruits.forEach(a => {
let temp = `<p>${a}</p>`;
$('#q2').append(temp);
});
}
</script>
버튼 한번 누르면 다 나옴
키보드상에서 ~와 같이 있는 `(백틱)은 HTML element를 통째로 묶어서 다룰때 쓴다.
문자와 변수를 함께 쓸 수 있게 한다
let profile = `${}의 나이는 ${}살 입니다`반복문으로 딕셔너리 출력
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((a) => {
let name = a['name']
let age = a['age']
let temp = `<p>${name}(이)는 ${age}살</p>`
$('#q2').append(temp)
})
}
'Developing > TIL(Develop)' 카테고리의 다른 글
| 스파르타코딩클럽 사전캠프 4주차 Firebase 연결 (0) | 2023.09.25 |
|---|---|
| 스파르타코딩클럽 사전캠프 3주차 JQuery + fetch (0) | 2023.09.19 |
| 스파르타코딩클럽 사전캠프 2주차 Javascript (0) | 2023.09.14 |
| 스파르타코딩클럽 사전캠프 1주차 HTML+CSS (0) | 2023.09.07 |
| Html 속성 Html Attributes (0) | 2023.09.06 |
