배열함수 개념 및 실습

▶ 기본 개념

<!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">
    <title>Document</title>
</head>
<body>
    <script>
        // 배열함수

        let list = [];

        // 1. 배열의 맨 마지막 인덱스에 데이터 넣기 : push()
        list.push(3);
        list.push('최지연');
        console.log('push : '+list)

        // 2. 배열의 맨 마지막 인덱스에 데이터 삭제 : pop()
        list.pop()
        console.log('pop : '+list)

        // 3. 배열의 맨 앞 인덱스에 데이터 넣기 : unshift()
        list.unshift('김운비')
        console.log('unshift : '+list)

        // 4. 배열의 맨 앞 인덱스에 데이터 삭제 : shift()
        list.shift()
        console.log('shift : '+list)

        // 5. 원하는 위치에 데이터 추가, 삭제 : splice
        // (1) 추가 (원하는 인덱스, 0, 추가할 데이터)
        list.splice(1,0,'hi','bye')
        console.log('splice로 추가 : '+ list)

        // (2) 삭제 (원하는 인덱스, 삭제할 개수)
        list.splice(1,1)

▶ 실습1

<!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">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 1부터 8까지 담긴 배열 생성 
        let list = [1,2,3,4,5,6,7,8];

        // 2. 홀수를 넣어줄 수 있는 배열 listHole
        let listHole = [];
        
        // 3. 홀수 구별
        for(let i=0; i<list.length;i++){
            if(list[i]%2 == 1){
                listHole.push(list[i]);
            }
        }
        // 4. 출력 
        //  결과 : list 안에 들어있는 홀수는 1,3,5,7이고
        //          총 4개입니다.
        console.log('list에 들어있는 홀수는 '+listHole+'이며 '+'총 '+listHole.length+'개 입니다.')
    </script>

</body>
</html>

▶ 실습2

<!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">
    <title>Document</title>
</head>
<body>
    <script>
        // 과목 수, 과목이름, 과목점수, 총점, 평균
        let subNum = 0;
        let subName = [];
        let subScore = [];
        let totalScore = 0;
        let avgScore = 0;

        // 1. 과목 수 입력
        subNum = parseInt(prompt('과목 수'));
        
        // 2. 과목 수 만큼 과목 이름을 입력
        for(let i=0; i<subNum ; i++){
            subName.push(prompt('과목 이름'));
        }

        // 3. 각 과목들의 점수를 입력할 수 있는 입력창
       for(let i=0; i<subName.length; i++){
           let score = Number(prompt(subName[i]+'점수 입력'));
           subScore.push(score);
           totalScore += score;
       }
        // console.log(totalScore)

        // 4. 각 과목들의 점수, 총점, 평균점수 도출
        avgScore = parseInt(totalScore/subNum);
        // console.log(avgScore)

        // 5. 각 점수, 총합, 평균을 HTML 문서 내에 테이블로 출력
        // ** document.write() => 태그까지 적용 가능 
        // table / tr(몇줄?) / td(몇칸? 안의 내용)
        document.write('<table border = "1px solid black">')

            // 1 tr
            document.write('<tr>')

                // 과목수 만큼 td 제작
                for(let i=0; i<subNum; i++){
                    // document.write('<td>')
                    // document.write(subName[i])    
                    // document.write('</td>')

                    // 템플릿 리터럴 `${}`
                    document.write(`<td>${subName[i]}</td>`)
                }

                document.write('<td>총점</td>')
                document.write('<td>평균</td>')
             document.write('</tr>')

            // 2 tr 
             document.write('<tr>')
                for(let i=0; i<subNum; i++){
                    document.write(`<td>${subScore[i]}</td>`)
                }
                document.write('<td>'+totalScore+'</td>')
                document.write('<td>'+avgScore+'</td>')
             document.write('</tr>')

        document.write('</table>') 

    </script>

</body>
</html>

'자바 스크립트' 카테고리의 다른 글

함수 실습 (0)	2022.05.13
함수 (0)	2022.05.13
배열 기본 개념 및 예제 (0)	2022.05.12
반복문 실습 (0)	2022.05.12
평균 등급 실습 (0)	2022.05.12

'자바 스크립트' 카테고리의 다른 글

티스토리툴바