JS의 기초 중의 기초와, 이를 웹페이지에 어떻게 적용하는지에 대한 내용이었다.
저번 내용 정리 땐 불필요하게 대단히 길어졌다.
JS에 대해 아예 모르는 것이 아니기 때문에 새로 안 내용만 정리해 볼까 한다.
이번엔 짧게 가보자.
jQuery
jQuery는 웹페이지를 JS로 조작하는데 큰 도움을 주는 라이브러리이다.
강력하고 정말 많이 쓰였지만 조금씩 다른 신기술에 자리를 내주고 있기도 하다.
하지만 여전히 많은 곳에서 현재 사용되고 있기에 공부 해 두면 좋을 것이다.
1. 준비
먼저 jQuery를 사용하기 위해선 아래의 스크립트를 추가해야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
이를 추가해야 사용이 가능해 진다.
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() {
}
</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>
이 페이지를 활용해 보자.
1. text()
어떤 요소를 골라 지정한 텍스트로 변경해 주는 함수이다.
q1을 "테스트"로 바꾸려면 아래와 같이 작성하면 된다.
function checkResult() {
$('#q1').text('테스트')
}
그리고 버튼을 클릭하면,
의도한 대로 변경됨을 확인할 수 있다.
2. append()
말 그대로 추가를 해 주는 함수이다.
기존의 요소 뒤에 지정된 내용을 붙여준다.
function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
$('#q1').empty();
fruits.forEach(element => {
$('#q1').append(`<p>${element}</p>`);
});
}
이러면 fruits에 있는 요소들이 <p>${element}</p>형태로 바뀌어 페이지에 추가될 것이다.
모든 요소가 줄 바꿈 되면서 제대로 표시된다.
배열뿐만 아니라 리스트, 딕셔너리 등도 동일하게 활용할 수 있다.
여기서 중요한 점은 forEach의 동작이다.
forEach는 각 요소에 적용될 콜백 함수(Callback Function)를 전달한다.
=>를 사용하여 코드를 넣은 부분이 콜백 함수라고 볼 수 있다.
함수 선언은 ECMAScript 버전에 따라 다르다.
// ES5
numbers.forEach(function(number) {
console.log(number);
});
// ES6
// 우리가 쓰는 것
fruits.forEach(element => {
$('#q1').append(`<p>${element}</p>`);
});
ES6로 오면서 화살표를 통한 간편한 함수 선언이 가능하게 되었다.
비슷한 기능을 하는 함수로 ES6에 추가된 map()이 있다.
map은 forEach와 달리 결과 배열을 반환한다.
어떤 반복적인 작업을 수행하고, 작업이 완료된 배열이 필요하면 map()을 사용하는 것이 좋다.
그게 아니라 단순히 바뀐 결과값을 출력하는 등의 1회성 동작이 필요하면 forEach()를 사용하는 것이 좋다.
'Camp > T.I.L.' 카테고리의 다른 글
| [WIL #1] 첫 주를 돌아보며 (0) | 2024.06.21 |
|---|---|
| [TIL #5] Firebase 활용 (0) | 2024.06.21 |
| [TIL #4] API Fetch (0) | 2024.06.20 |
| [TIL #3] 게임 서버에 대한 질문 (0) | 2024.06.19 |
| [TIL #1] 웹개발 1주차: 나만의 추억앨범 (0) | 2024.06.17 |