반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

비전공개미 개발노트

[JavaScript] 배열출력, $.each문, forEach문 본문

프론트엔드/JavaScript

[JavaScript] 배열출력, $.each문, forEach문

비전공개미 2022. 10. 6. 18:27
반응형
SMALL
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>testArray4.html</title>
        
</head>
<body>
    <div id="demo">
        
    </div>

    <script>
        var fruits = ["banana","orange","apple","mango"];
        var emp = {
            "name": "홍길동",
            "age": 19,
            "juso": "수리남"
        };

        let data = "";
        //data = emp.name + " " + emp.age + " " + emp.juso + "<br>";
        data = emp['name'] + " " + emp['age'] + " " + emp['juso'] + "<br>";
        

        $("#demo").html(data);
    </script>
</body>
</html>
testArray4.html

 

 

 

$.each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>testArray5.html</title>
        
</head>
<body>
    <div id="demo">
        
    </div>

    <script>
        var links = [
            {name: "naver", url:"https://naver.com"},
            {name: "kakao", url:"https://daum.net"},
            {name: "python", url:"https://python.org"}
        ];

        var data = "";
        $.each(links, function(index, item){
            //data += item.name + " " + item.url + "<br>";
            data += "<a href=" + item.url + ">" + item.name + "</a><br>";
        })
        

        $("#demo").html(data);
    </script>
</body>
</html>
testArray5.html

 

 

 

forEach

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>testArray5.html</title>
        
</head>
<body>
    <div id="demo">
        
    </div>

    <script>
        var site = [
            {name: "naver", url:"https://naver.com"},
            {name: "kakao", url:"https://daum.net"},
            {name: "python", url:"https://python.org"}
        ];

        var data = "";
        //forEach문은 $.each문과 item, index의 순서가 다르다
        site.forEach(function(item, index){
            //data += item.name + " " + item.url + "<br>";
            data += "<a href=" + item.url + ">" + item.name + "</a><br>";
        })
        

        $("#demo").html(data);
    </script>
</body>
</html>
testArray5.html
반응형
LIST
저작자표시

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JavaScript / jQuery] 클릭할때마다 무한회전  (0) 2022.10.06
[JavaScript/jQuery] rgb색상을 랜덤하게 받아서 박스만들기  (0) 2022.10.06
[JavaScript] 배열을 불러와 박스색상 변경하기  (0) 2022.10.06
[JavaScript] Date, String, Math, 사용자 객체  (0) 2022.10.05
[JavaScript] 배열선언, 배열출력, $.each  (1) 2022.10.05
'프론트엔드/JavaScript' Related Articles more
Comments