단비의 코딩 공부 blog

[Vanilla JS]study 4일차 - 배열과 for in문 본문

javascript&jquery

[Vanilla JS]study 4일차 - 배열과 for in문

황굽달 2022. 11. 29. 08:43

0. 데이터의 종류(복습)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>복습</title>
    <script>
        //JS 데이터
        //변수 : 데이터를 한개 저장하는 공간
        
        var str = '안녕하세요'; //문자열은 따옴표 내부에 작성
        var mum = 100; //숫자는 그냥 작성
        var bool01 = true; //키워드라서 따옴표에 안넣고 그냥 작성 //불 : 결과값을 true / false로 반환
        var bool02 = 10 > 5;
        var fx = prompt(); //함수 : 코드의 집합
        var obj = document; //객체 : JS가 명령가능한 모든 대상
        var test; //undefined : 값을 할당받지 못한 상태
        

    </script>
</head>
<body>
    
</body>
</html>

0-1. for문(복습)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>복습</title>
    <script>
        /* 
            for(초기식;조건식;증감식){

            }
        */

        //1일부터 31일 까지 select태그로 처리
        var output = '<select>'; //태그들을 담을 변수
        
        //옵션태그반복
        for(var i=1;i<31;i++){
            output += '<option>' + i + '일</option>';  
        }

        output += '</select>';

        //문서출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

0-2. if문법(복습)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>복습</title>
    <script>
       /* 
            if(조건식){
                //참표현식
            }else{
                //거짓표현식
            }

            if(조건식1){
                //조건식1표현식
            }else if(조건식2){
                //조건식2표현식
            }else{
                //조건이 모두 틀린 경우 표현식
            }
       */
        
        //사용자에게 숫자를 입력 받아, [양수], [음수] , [0]을 경고창에 반환받으세요.

        var num = prompt('숫자를 입력해주세요', '입력')

        if(num > 0){
            alert('양수입니다.');
        }else if(num < 0){
            alert('음수입니다.');
        }else if(num == 0){
            alert(0);
        }
    </script>
</head>
<body>
    
</body>
</html>

1. 배열의 선언

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열과 for in문</title>
    <script>
        //배열 : 값을 여러개 담는 공간
        //var 배열명 = [값1,값2,값3,...];

        //배열선언
        var gg = ['윤아','유리','써니','수영','태연','서현','효연','티파니','제시카'];

        //배열값 - 전체 호출 : 배열명
        alert(gg);

        //배열값 - 일부호출 : 배열명[인덱스번호]
        alert(gg[4]);

        //태티서
        alert(gg[4] + gg[7] + gg[5]);
    </script>
</head>
<body>
    
</body>
</html>

2. 배열의 length 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열과 for in문</title>
    <script>
        //배열선언
        var gg = ['윤아','유리','써니','수영','태연','서현','효연','티파니','제시카'];
        
        //length : 배열의 값 개수를 반환하는 속성
        
        for(var i=0;i<gg.length;i++){
            alert(gg[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

3. for in 문

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열과 for in문</title>
    <script>
        /* 
            - for in문 : 배열이나 객체를 반복할 때 사용하는 구문

            //배열이 가지고 있는 인덱스번호만큼만 반복
            for(var i in 배열명){
                //반복할 표현식
            }
        */
        
        //배열선언
        var gg = ['윤아','유리','써니','수영','태연','서현','효연','티파니','제시카'];
        
        for(var i in gg){
            alert(gg[i]);
        }
    </script>
</head>
<body>
    
</body>
</html>

4. 휴대폰 앞자리 출력(예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열과 for in문</title>
    <script>
        //배열선언
        var firstNum = ['010','011','016','017','018','019'];

        var output = '<select>';

        for(var i in firstNum){
            output += '<option>' + firstNum[i] + '</option>';
        }
        output += '</select>';
        
        //문서 출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

5. 응용문제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>배열과 for in문</title>
    <script>
        //요일을 선택상자에 출력하시오.
        var week = ['일','월','화','수','목','금','토'];

        var output = '<select>';

        for(var i in week){
            output += '<option>' + week[i] + '요일</option>';
        }
        output += '</select>';

        //문서 출력
        document.write(output);
    </script>
</head>
<body>
    
</body>
</html>

 

저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 5일차 - 함수  (0) 2022.12.07
[javascript]TweenMax.js로 마우스 커서 애니메이션 만들기  (0) 2022.11.29
[Vanilla JS]study 3일차 - 반복문  (0) 2022.11.24
[Vanilla JS]study 2일차 - 조건문  (0) 2022.11.23
[Vanilla JS]study 1일차 - 기본문법과 변수  (0) 2022.11.22
'javascript&jquery' Related Articles more