T_era

[JavaScript] 기본문법 연습하기 본문

Programing/Html

[JavaScript] 기본문법 연습하기

블스뜸 2025. 3. 18. 15:54 
<!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() {
        let fruits = ['사과', '배', '감', '귤', '수박']
        $('#q1').empty();

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

        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]
        $('#q2').empty();
        people.forEach(element => {
            let temp_html = `<p>${element['name']}은 ${element['age']}살입니다.</p>`
            $('#q2').append(temp_html);
        });

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

결과

저작자표시 (새창열림)

'Programing > Html' 카테고리의 다른 글

fetch 사용해보기  (0) 2025.03.18
[JavaScript] 앨범사이트에 JQuery 적용해보기  (0) 2025.03.18
[JavaScript] 기본문법  (0) 2025.03.18
이전에 배운 것을 사용해 사이트 만들어보기  (0) 2025.03.18
부트 스트랩  (0) 2025.03.18
'Programing/Html' Related Articles more