Jquery와 반복문, 조건문 익히기

let a = ['사과', '배', '감', '귤']
$('#q1').text(a[1])
$('#q1').css('color','red')
$('#q1').css('font-size','40px')

body 태그에 'q1'이라는 ID를 가진 디비전이 있으며 내용은 test이다.
이때 아래와 같은 코드를 적고 checkResult 함수가 참이 된다면
a의 두번째 값인 배로 바뀌며, 텍스트의 색상이 빨간색이 되고 폰트 사이즈는 40px이 된다.

let b = {'name':'영수','age':'30'}
$('#q2').text(b['name'])

ID 'q2'를 가진 디비전의 내용은 test이다.
checkResult 함수가 참이 된다면 'q2'의 텍스트는 b의 'name'인 영수가 된다.

let c = [
{ 'name': '영수', 'age': '30' },
{ 'name': '철수', 'age': '35' }
]
$('#q3').text(c[1]['age'])

ID 'q3'를 가진 디비전의 내용은 test이다.
checkResutl 함수가 참이 된다면 'q3'의 텍스트는 c의 두번째 요소의 'age'가 된다.

let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
    if (a > 20) {
        console.log('성인입니다.')
    } else {
        console.log('미성년자입니다.')
    }
})

위 코드에서 ages는 요소의 묶음이다.
.forEach 명령어로 ages에서 요소들을 하나씩 꺼내와 (a)에 넣고 if 조건문으로 검사한다.
검사 결과를 console.log로 받기로 하였으므로 개발자 도구(F12)의 console에서 확인할 수 있다.

    let fruits = ['사과', '배', '감', '귤', '수박']
    $('#q1').empty()
    fruits.forEach((a) => {
        let temp_html = `<p>${a}</p>`
        $('#q1').append(temp_html)
    })
} 

append 기능은 데이터를 받아와 그 데이터의 수 만큼 HTML을 수정할 수 있다

ID 'q1'을 가진 디비전의 내용은 (사과 귤 감)이다.
이를 지우고 묶음 fruits에서 요소들을 가져와 q1의 내용들 바꿔주었다.

    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_html = `<p>${name}은/는 ${age}살입니다.</p>`
        $('#q2').append(temp_html)
    })

ID 'q2' 디비전의 내용은 (영수는 24살입니다. 세종은 30살입니다. 수영은 20살입니다.)이다.
이를 지우고 묶음 people에서 요소들을 가져와 q2의 내용을 바꾼다.