티스토리 뷰
<script>
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a) => {
}1. JQuery - append(1)
-기본 코드
<!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>
-checkResult()함수 안에 다음 코드를 넣는다. (리스트 넣기)
let fruits = ['사과','배','감','귤','수박']('fruits'라는 이름의 배열을 선언하고 초기화한다. 이 배열에는 다섯 개의 과일 이름이 문자열로 저장되어 있다. )
-반복문으로 뽑아낸다. (forEach 사용. fruits 배열의 각 요소에 대해 반복 작업을 수행한다. )
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a) => {
})
}-temp_html 이라는 변수를 사용한다. 해당 변수를 사용할 땐 백틱(`)을 사용한다.
*(백틱 : 숫자 키 1 왼쪽에 있는 기호. 맥은 ₩(한글)을 영어로 바꾸고 누르면 `가 된다.)
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = ``
})
}-원하는 html태그를 백틱 안에 넣어준다.
let temp_html = `<p>사과</p>`> 이 코드는 새로운 HTML 요소를 생성한다. ( 매번 "사과"라는 텍스트를 포함하는 p 코드를 생성한다. )
-JQuery를 사용해서 temp_html을 html 태그처럼 붙인다. ('#q1'이라는 ID를 가진 요소를 선택한다.)
$('#q1').append(temp_html)> append 메서드를 사용하여 temp_html 변수를 #q1 요소의 내부에 추가한다. HTML 요소를 동적으로 추가하는 방법.
-결과
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach ((a)=>{
let temp_html = `<p>사과</p>`
$('#q1').append(temp_html)
})
}
- 사과가 밑에 붙는다.
-사과가 아니라 forEach문으로 돌린 반복문의 데이터가 들어가기 위해 temp_html 변수를 'a' 변수를 사용하여 업데이트한다.
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}-실행해보면,
-배열들의 요소가 잘 반복된다. 처음에 나오는 사과,귤,감을 빼주기 위해
$('#q1').empty()를 삽입해준다.
-잘 나온다.
* 왜 a 변수를 사용하는지, a 변수는 아직 정의되지 않은 게 아닌지 의문이 들어 찾아보았다.
- forEach(콜백 함수)는 배열의 각 요소에 대해 한 번씩 지정된 함수를 호출한다.
let fruits = ['사과', '배', '감', '귤', '수박'];
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$('#q1').append(temp_html);
});일 때,
> 'a' 변수 : forEach 함수의 매개변수(함수 정의 시 함수가 받을 수 있는 값을 나타내는 변수)로, 배열의 각 요소가 순차적으로 할당된다.
> forEach 함수는 정의되지 않은 상태로, 실행될 때마다 'a'변수가 배열의 현재 요소로 정의된다.
> 따라서 a 변수는 그때그때 정의되는 변수이기 때문에 미리 정의될 필요가 없다.
'스파르타 > 강의 내용 정리' 카테고리의 다른 글
| 변수와 상수 (1) | 2024.07.23 |
|---|---|
| 개발 용어 정리 (0) | 2024.07.11 |
| JQuery 사용하기 - 사용법 (0) | 2024.07.04 |
| 자바스크립트 활용 문법(DOM) (0) | 2024.07.04 |
| 자바스크립트 기초 (0) | 2024.07.03 |