2022-webprogramming/lecture-array.html at main · webprogramming-hansei/2022-webprogramming · GitHub

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8" />
    <title>웹프로그래밍</title>
    <meta name="description" content="웹프로그래밍 강의 실습코드입니다." />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta property="og:title" content="" />
    <meta property="og:type" content="" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />

    <link rel="manifest" href="site.webmanifest" />
    <link rel="apple-touch-icon" href="icon.png" />
    <!-- Place favicon.ico in the root directory -->

    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/main.css" />

    <meta name="theme-color" content="#fafafa" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- Add your site or application content here -->
    <h1>웹프로그래밍 강의</h1>

    <script src="js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="js/plugins.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"
    ></script>
    <script src="js/main.js"></script>

    <script>
        const nameArray = ['john', 'michael', 'tom'];
        const numberArray = [1, 3, 2, 7, 9, 5, 8, 3, 2, 11, 20];

        // JOIN: Array to String
        const joinStr = nameArray.join(' ');
        console.log(joinStr);

        // MAP: 주어진 함수를 통해 새로운 배열 생성
        const addIndexedArray = nameArray.map((name, idx) => {
            return `[${idx}] ${name}`;
        });
        console.log(addIndexedArray);

        // INCLUDES: 배열에 특정 키워드가 존재하는지 확인 할 때
        const searchKeyword = 'JOHN';
        const isJohn = nameArray.includes(searchKeyword.toLowerCase());
        console.log(isJohn);

        // FINDINDEX: 배열에 특정 조건을 성립할 때 해당 Index를 반환
        const tomIndex = nameArray.findIndex((name) => {
            return name === 'tom';
        });
        console.log(tomIndex);

        // FILTER: 조건을 만족하는 결과만 추려서 새로운 배열 생성
        const filteredArray = nameArray.filter((name) => {
            return name.includes('o');
        });
        console.log(filteredArray);

        // SORT: 정렬 **주의사항 정렬시 1다음에 11이 온다
        const sortArray = numberArray.sort((a, b) => {
            if (a > b) {
                return -1;
            } else if (a < b) {
                return 1;
            } else {
                return 0;
            }
        });
        console.log(sortArray);

        // SLICE:
        const sliceArray = sortArray.slice(0, 2);
        console.log(sliceArray, sortArray);

        // SPLICE:
        const spliceArray = sortArray.splice(0, 2);
        console.log(spliceArray, sortArray);
    </script>

    <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
    <script>
      window.ga = function () {
        ga.q.push(arguments);
      };
      ga.q = [];
      ga.l = +new Date();
      ga("create", "UA-XXXXX-Y", "auto");
      ga("set", "anonymizeIp", true);
      ga("set", "transport", "beacon");
      ga("send", "pageview");
    </script>
    <script src="https://www.google-analytics.com/analytics.js" async></script>
  </body>
</html>