웹개발 종합반 2주차 #2

jquey란 움직이게 하기위해서 사용하는 것
명찰이 필요한데 id로 지칭하여 사용함

$('#명찰').text(a[2]) 
$('#명찰').css('color','red')
$('#명찰').css('font-siez','40px')

1) 반복문
리스트가 있을때 요소들을 꺼내와서 조작

  let fruits = ['사과','배','귤','감']
       fruits.forEach((a) => {
           console.log(a)
       })

// <<반복문>>>foreach 쓰면 리스트를 다시 변수로 묶어서 하나씩 꺼내줌, 몇개? 리스트 개수 만큼

2) 조건문

let age = 24
        
        if(age>20) {
            console.log('성인입니다.')
        } else {
            console.log('청소년 입니다.')
        }

3) 조건문 반복문 같이 쓰기

let ages = [12,25,31,58,48,61,22]
        ages.forEach((c) => {
            if(c>20) {
                console.log('성인입니다.')
            } else {
                console.log('청소년입니다.')
            }
        })

4) append
데이터를 불러와서 html로 만들어 주는 것

let fruits = ['사과', '배', '감', '귤', '수박']

        $('#q1').empty()
        fruits.forEach((a) => {
            let temp_html = `<p>${a}</p>`
            $('#q1').append(temp_html)
        })

// 플루츠를 리스트화 하고 플르츠를 반복문에서 a로 변수화 했음.
// 근데 리스트화 된 변수 A를 html화 만들고
// 그 html화된 변수 a를 q1에 넣어줌
// 그럼 버튼을 누르면 q1에 html 화된 변수화 된 A의 리스트 플르추가 나옴
// 근데 눌렀을 때 이전건 지워지기 위해서
// 엠티를 붙여줄꺼

   let people = [
           { 'name': '서영', 'age': 24 },
           { 'name': '현아', 'age': 30 },
           { 'name': '영환', 'age': 12 },
           { 'name': '서연', 'age': 15 },
           { 'name': '지용', 'age': 18 },
           { 'name': '예지', 'age': 36 }
       ]

       $('#q2').empty()
       people.forEach((b) => {
           let name = b['name']
           let age = b['age']
           let temp_html = `<p>${name}은 ${age}살입니다.</p>`
           $('#q2').append(temp_html)
       })

// 피플이라는 리스트, 딕셔너리 변수를
// B로 만들고
// temp_html로 만들어줄꺼임
// 그걸 제이쿼리 Q2에 주루룩 반복 되게 만들려면
// 일단 foreach 반복문으로 b를 만들고
// temp_html 만든다음
// q2제이쿼리에 appen로 붙여줌
// 근데 딕셔너리 라서
// name이라는 추가 변수 만들어서 b의 네임 변수로 만들고
// 에이지도 동일하게
// 해서 temp에 맞게 넣어줌 존나헷갈려~