Javascript 문법 연습하기(1)

웹개발 종합반 2주차 - Javascript 문법 연습하기(1)

 

 

 

실행 전

사과, 귤, 감 아래로 fruits의 요소들을 넣어본다.

    function checkResult() {

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

       

        $('#q1').empty()

        fruits.forEach((a) => {

            let temp_html = `<p>${a}</p>`

            $('#q1').append(temp_html)

        })

    }

    <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>

$('#q1').empty()는 원래 있던 데이터들을 없애고 새로운 요소들만 붙이는 것!

 

forEach((변수) => {

   let temp_html= `붙여넣고 싶은 형식`               >> 붙여놓고 싶은 형식의 태그 안에 ${변수} 넣어주기!

   $('#q1').append(thmp_html)                             >>#q1에 temp_html을 붙여넣는다.

})

 

 

 

 

마찬 가지로 위의 형태로 people의 요소를 넣어본다.

    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_html = `<p>${name}는 ${age}살입니다.</p>`

            $('#q2').append(temp_html)

        })

    }

let 변수명(알아보기 쉬운) = a['(people의 key)']

let temp_html 의 원하는 위치에 ${변수명}

    <div class="list-part">

        <h2>3. 붙이기</h2>

        <div id="q2">

            <p>영수는 24살입니다.</p>

            <p>세종은 30살입니다.</p>

            <p>수영은 20살입니다.</p>

        </div>

    </div>

결과

문법이 좀 멋지지만 이걸 해낸 내가 더 멋짐.