본문 바로가기
블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

[24일차 zoom수업] 20210415 배열 Array 달력 만들기

알로호모라 2021. 4. 15. 17:31
반응형
<!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 type = "text/javascript">
    

    let arr = [25,26,27,28,29,30,31,32,33,34,35,36];
    let arr2 =[];
    let arr3 = [];


    //filter(function()) forEach문처럼 익명함수 들어감
    // = 배열의 개수만큼 이 함수가 실행됨 
    
    arr2= arr.filter(v=>{
        return v<30;  //25부터 36까지 하나하나 대입되어서 true만 출력 
    });

    console.log(arr2);

    arr2 = arr.filter(v=>{
        return v < 30;
    });

    console.log(arr2); //(5) [25, 26, 27, 28, 29]
    
    arr3 = arr.filter((v)=>{
        return v >30;
    });

    console.log(arr3); //(6) [31, 32, 33, 34, 35, 36]

   // filter 무언가 걸러내는거 
   // forEach 반복문을 돌리는 방법도 있음. 


    let arr4 =[];
    
    arr.forEach(v=>{
        if(v<30){
            arr4.push(v);
        }
    });
    console.log(arr4); //(5) [25, 26, 27, 28, 29]

    console.log(`arr4 result : `, arr4) //arr4 result :  (5) [25, 26, 27, 28, 29]




    let array = [1,2,3,4,5,6,7,8,9,10];
    let array2 = [];
    let array3 = [];

    // forEach 사용 

    array.forEach((v)=>{
        if(v < 5){
            array2.push(v);
        }
    });
    console.log(array2); //(4) [1,2,3,4]


    // Filter 사용
    // filter 나온 이유 (반복문for로 다 처리가능하지만) 가독성이 좋음.

    array3 = array.filter((v)=>{
        return v < 5;
    });

    console.log(array3); //(4) [1,2,3,4]




    let arrayy = [3,5,2,3,1,4,6,65,4,2,34,235,300];
    let arrayy1 =[];
    let arrayy2 =[];

    arrayy.forEach((v)=>{
        if(v<20){
            arrayy1.push(v);
        }
    });
    console.log(arrayy1); //(9) [3, 5, 2, 3, 1, 4, 6, 4, 2]

    arrayy1.sort(function(a,b){
        return a-b;
    });
    console.log(arrayy1);  //(9) [1, 2, 2, 3, 3, 4, 4, 5, 6]

    arrayy2 = arrayy.filter((v)=>{
        return v>20;
    });
    console.log(arrayy2); //(4) [65, 34, 235, 300]

    arrayy2.sort(function(a,b){
        return b-a;
    });
    console.log(arrayy2); //(4) [300, 235, 65, 34]





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

 

 

find method

    
//FIND (Return값이 배열이 아님) 한가지의 원소만 찾아줌. 
//find= 원소만 찾아서 그 값만 반환~ 

// Filter -> return값 = 배열 
// Find -> return 값 = integer  

    let arr = [4,5,8,7,6,9,10,26,42];
    let arr2 = [];

    arr2 = arr.find((v)=>{
        return v==3;
    });
    console.log(arr2); // undefined 
    

    arr2 = arr.find((v)=>{
        return v==3;
    });
    console.log(arr2); // 4 -> arr2 =[];배열로 만들었지만 number로 나옴 


    


    

    //find는 아래와 비슷. a는 배열이었지만.. 
    let a = [1,2,3];
    a=3;
    console.log(a);

 

    let arr = [4,5,8,7,3,6,9,10,26,42];
    let arr2 = [];


    

    let count =0; 
    arr2 = arr.find((v)=>{
        count++;
        return v==3; 
    });
    console.log(count); //총 찾아본 횟수 5 (3이 있는 자리수);
    console.log(arr2); //3

 

 

 

Array Map 

// MAP  결과값 - 배열 
// arr.map( function(){}) 익명함수 들어감
// arr.map( ()=>{}) arrow 함수 들어갈수도잇

    let arr=['foo2', 'mandoo','ingoo','blockchain'];
    let result =[];
    let result2 =[];

    result = arr.map((v)=>{
        return `${v}3`;
    })

    console.log(result); /(4) //["foo23", "mandoo3", "ingoo3", "blockchain3"]

    result2 = arr.map((v)=>{
        return v;
    })
    console.log(result2); //(4) ["foo2", "mandoo", "ingoo", "blockchain"]

 

 

 

map & padStart & padEnd

 

    
// MAP  결과값 - 배열 
// arr.map( function(){}) 익명함수 들어감
// arr.map( ()=>{}) arrow 함수 들어갈수도잇
//              3      6       5          10  이 리턴되게 만들기 arr2
    let arr=['foo', 'mandoo','ingoo','blockchain'];
    let arr2= [];
    let arr3=[];
    let result =[];
    
    result = arr.map((v,i)=>{
        return `${v+(i+1)}`;
    });

    console.log(result); //(4) ["foo1", "mandoo2", "ingoo3", "blockchain4"]

    let hero = ['hero','hero','hero','hero','hero'];
    let result3 = [];

    result3 = hero.map((v,i)=>{
        return `${v+(i+1)}`;
    });

    // return `${v+(i+1)}`; =  return v+(i+1);
    console.log(result3); //(5) ["hero1", "hero2", "hero3", "hero4", "hero5"]

    // result3.forEach((v)=>{
    //     txt = '.${v}`;
    //     let ele=document.querySelector(v);
    //     v.addEventListner('click',clickfn);
    // });

    arr2 = arr.map((v)=>{
        return v.length;
    });
    console.log(arr2); //(4) [4, 6, 5, 10]
    
    arr.forEach((v)=>{
        arr3.push(v.length);
    });
    console.log(arr3); //(4) [4, 6, 5, 10]


    let txt =['1','2','3','4','5','6','7','8','9','10'];
    //01 02 03 04 05 06 07 08 09 10 으로 만들기 
    let txt_result =[];
    
    txt_result = txt.map((v)=>{
        return v.padStart(2,0);
    });
    console.log(txt_result);

    // =  return `${v.padStart(2,0)}`; 처럼
    // `${}` 안에 써도 똒같 

    //padStart (자리수, 빈칸에 뭘 넣을지)
    //pasStart : sting 안에 있는 함수 

    console.log('result : ', '1' == 1); //True 값을 비교 js만 가능.. 다른 언어는 ㄴ ㄴ 
    console.log('result : ', '1' === 1); //False - 변수 타입까지 같은지 비교  

    console.log('abc'.padEnd(10,'123')); //abc1231231

 

reduce

        let arr =[1,2,3,4,5,6,7,8,9,10];
        let arr3 = ['asdfasdf','asdf','dfdfdf'];
        let arr2 = [];

        arr2 = arr.reduce( (p,v)=>{
            //p - 첫번째 원소값 v - 두번째 원소값 
            //p - 결과값으로 변화하기 시작함. 
            //
            console.log(p,v);
            return p+v;
        });
    
        console.log(arr2); //55 / 1부터 10까지의 합 
        
//         1 2
// 0415.html:22 3 3
// 0415.html:22 6 4
// 0415.html:22 10 5
// 0415.html:22 15 6
// 0415.html:22 21 7
// 0415.html:22 28 8
// 0415.html:22 36 9
// 0415.html:22 45 10
// 0415.html:26 55

 

        //REDUCE - 어려움 ~ ~ ~ ~ 

        //reduce 익명함수 인자값  1. 이전값 2. 밸류값 3. 인덱스값 
        
        //         익명함수  , prev
        // reduce(function(),[]) - reduce 기본구조 


        let arr =[1,2,3,4,5,6,7,8,9,10];


        arr.reduce(()=>{}); //익명함수 1개만 들어간 상태 
        arr.reduce(()=>{},'1'); //요건 인자값 2개 들어간 상태 
        // ()=>{} 익명함수 , '1' - 임의값


        //reduce의 기본 구조 
        arr.reduce((p,v,i)=>{
            console.log(p,v,i);
        }, 1); 
        // 1부분을 다른 숫자, 배열, 객체{}, 'hello world' 등 넣어봐 
        // undefined 
        // 최초에만 p를 썼기 때문에 p값이 안나옴 
        // 여기에 return p; 를 넣으면 나옴. 
        // return p+v; 도 넣어보삼 

        arr.reduce((p,v)=>{
            return p+v;
        }, 'hello world'); 
        console.log(arr);


        result = [];
        
        result = arr.reduce((p,v)=>{
            //p 현재 []
            //v 현재 1
            console.log(p,v);
            p.push(v); 
            return p; 
        },[]);

        console.log(result);

//         [] 1
// 0415.html:51 [1] 2
// 0415.html:51 (2) [1, 2] 3
// 0415.html:51 (3) [1, 2, 3] 4
// 0415.html:51 (4) [1, 2, 3, 4] 5
// 0415.html:51 (5) [1, 2, 3, 4, 5] 6
// 0415.html:51 (6) [1, 2, 3, 4, 5, 6] 7
// 0415.html:51 (7) [1, 2, 3, 4, 5, 6, 7] 8
// 0415.html:51 (8) [1, 2, 3, 4, 5, 6, 7, 8] 9
// 0415.html:51 (9) [1, 2, 3, 4, 5, 6, 7, 8, 9] 10
// 0415.html:56 (10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  


//Map 대체 
    let arr3 = ['asdfasdf','asdf','dfdfdf'];
    let arr2 = [];
        

    arr2 = arr3.reduce((p,v)=>{
        p.push(v.length);
        return p;
    },[]);

    console.log('map 대체 :',arr2); //map 대체 : (3) [8, 4, 6]


    //filter 대체로
    arr2 = arr.reduce((p,v)=>{
        if(v < 5){
            p.push(v);
        }
        return p;
    },[]);


    console.log('filter 대체',arr2); //filter 대체 (4) [1, 2, 3, 4]



 // reduce 어렵닿ㅎㅎ ㅎ _ ㅎ  

    // foo1 mandoo2 ingoo3 blockchain4 출력하기 
    let array = ['foo', 'mandoo', 'ingoo', 'blockchain'];
    let array_result = [];

    array_result = array.reduce((p,v,index)=>{
            console.log(p,v,index+1);

//             [] "foo" 1
// 0415.html:105 ["foo1"] "mandoo" 2
// 0415.html:105 (2) ["foo1", "mandoo2"] "ingoo" 3
// 0415.html:105 (3) ["foo1", "mandoo2", "ingoo3"] "blockchain" 4

            p.push(v+(index+1));
            return p;

    },[]);
    console.log(array_result);
//(4) ["foo1", "mandoo2", "ingoo3", "blockchain4"]


    array_result = array.reduce((p,v,index)=>{
        p.push(v+(index+1));
        return p
    },[]);
    console.log(array_result);

 

 

 

 

달력 만들기 ^^ .. 

        
        let setYear = 2021;
        let setMonth = 4;
        let setDay = 1;
        let dt = new Date(`${setYear}-${setMonth}-${setDay}`);

        console.log(dt); //Thu Apr 01 2021 00:00:00 GMT+0900 (대한민국 표준시)

        //let a = new Date;
        //console.log(a); //Thu Apr 15 2021 14:00:50 GMT+0900 (대한민국 표준시)



        //날짜를 가져오는 함수 
        let day = dt.getDate();
        console.log(day);  //1 - Day 1 

        let Month = dt.getMonth();
        console.log(Month);  //3 

        let year = dt.getFullYear();
        console.log(year);  //2021 

        let MonthTxt = String(Month).padStart(2,0);  
        console.log(MonthTxt); //03 

        let dayTxt = String(day).padStart(2,0);
        console.log(dayTxt); 
        
        
        console.log(String(year),MonthTxt,dayTxt); //2021 03 01 
        console.log(`${String(year)} - ${MonthTxt} - ${dayTxt}`); 2-21 - 03 - 01


        //                0    1     2      3     4     5     6
        let arrDayStr = ['일','월', '화' , '수', '목', '금', '토'];
        let weekDay = dt.getDay(); //해당 일에 대한 요일 나타내는 method 
        console.log(weekDay); //4  (목요일)  return in number

        console.log(arrDayStr[weekDay]); //목 이라고 뜸. 

        //마지막 날짜를 가져오는 것 만들기 
        // 필요한 이유 : 

        function getLastDay(year,month){
            let date = new Date(year,month,0);
            return date.getDate();
        }


        let dt2 = new Date(setYear, setMonth,0); // 0 마지막날짜를 뽑아오는거래 
        console.log(dt2.getDate());

        let lastDay = dt2.getDate();
        console.log(lastDay);

        //변수 정리 
        /* 
        년도 뽑아옴
        월 뽑아옴
        일도 뽑아옴
        1일이 시작하는 요일도 뽑아옴 -> 첫주 내용을 표현하기 위해 꼭 필요한 값 
        마지막 날도 뽑아옴 28? 30? 31? 
        */
        
        cal =[[1,2,3,4,5,6,7],[8,9,10,11,12,13,14],[1,2,3,4,5,6,7],[1,2,3,4,5,6,7],[1,2,3,4,5,6,7],];

        for(let i=1; i<=7; i++){
            console.log(i); // 1 2 3 4 5 6 7 이 떨어짐 
        }

        let txt = ' ';
        for (let i=1; i<=7; i++){
            console.log(i);
            txt += String(i).padStart(2,0)+' ';
        }
        console.log(txt);



        //목표 1. 1부터 30or31일 까지 7일씩 나누는 2차원 배열을 만들기 
        //목표 2. 첫번째 배열을 시작하는 요일만큼 밀어서 만들어야함. 
        //목표 3. 출력하기 
        
        let setYear = 2021;
        let setMonth = 4;
        let setDay = 1;
        let dt = new Date(`${setYear}-${setMonth}-${setDay}`);
    
    //let dt = new Date;
    //console.log(dt); //Thu Apr 15 2021 14:12:37 GMT+0900 (대한민국 표준시)
    
    let day = dt.getDate();
    let Month = dt.getMonth();
    let year = dt.getFullYear();

    console.log(day,Month,year); //15 3 2021 

    let MonthTxt = String(Month).padStart(2,0);
    let dayTxt = String(day).padStart(2,0);
    let yearTxt = String(year).padStart(4,0);
    console.log(MonthTxt,dayTxt,yearTxt); // 03 15 2021
    
    console.log(yearTxt, MonthTxt, dayTxt); //2021 03 15
    console.log(`${yearTxt} - ${MonthTxt} - ${dayTxt}`); //2021 - 03 - 15
    console.log(yearTxt+'-'+MonthTxt+'-'+dayTxt); // 2021-03-15
    
    
    let arrDayStr = ['일','월', '화' , '수', '목', '금', '토'];
    let weekDay = dt.getDay();
    console.log(weekDay); //4 
    
    console.log(arrDayStr[weekDay]); //목 

    let dt2 = new Date(5,9,0);
    console.log(dt2);

 

 

달력만들기 

ㅁ ㅐ 우 ㅇ ㅓ 렵 ㄷr...........................................

 

<!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 type="text/javascript">

        let setYear = 2021;
        let setMonth= 4;
        let setDay = 1;

        let dt = new Date(`${setYear}-${setMonth}-${setDay}`);


        console.log(dt);

        let day = dt.getDate();
        let month = dt.getMonth();
        let year = dt.getFullYear();

        let DAY = String(day).padStart(2,0);
        let MONTH = String(month).padStart(2,0);
        let YEAR = String(year).padStart(4,0);

        console.log(DAY, MONTH,YEAR);  //15 03 2021 

        let arrDay =  ['일','월', '화' , '수', '목', '금', '토'];
        let weekDay = dt.getDay();
        arrDay[weekDay];

        let dt2 = new Date(setYear, setMonth,0);
        let lastDay = dt2.getDate();
        console.log(lastDay);
        
        let cal = Array.from(Array(7), ()=>new Array(7).fill(0));
        console.log(cal);

// 0: (7) [0, 0, 0, 0, 0, 0, 0] cal[0] = v 
// 1: (7) [0, 0, 0, 0, 0, 0, 0] v[1]
// 2: (7) [0, 0, 0, 0, 0, 0, 0]
// 3: (7) [0, 0, 0, 0, 0, 0, 0]
// 4: (7) [0, 0, 0, 0, 0, 0, 0]
// 5: (7) [0, 0, 0, 0, 0, 0, 0]
// 6: (7) [0, 0, 0, 0, 0, 0, 0]
// length: 7
// __proto__: Array(0)

        let aaa = 1;
        let txt = ' ';
        cal.forEach((v,index)=>{
            v.forEach((v2,index2)=>{
                if(index==0){
                    v[index2] = arrDay[index2];       
                } else {
                    
                    console.log(aaa);
                    v[index2] = aaa;
                    aaa++;

                }
            });
        });
        console.log(cal);
        


        // for (let i=1; i<=lastDay; i++){
        //     console.log(i);
        //     txt += String(i).padStart(2,0)+' ';
        // }

        // console.log(txt);









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

 

 

열불 

 

 

다른 분 것

 

반응형

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글

[26일차] 20210419 git branch 조금 + Node.js 찍먹  (0) 2021.04.19
console.log에 달력 출력하기  (0) 2021.04.19
[23일차] 20210414 배열 Array 기본 이중배열  (0) 2021.04.14
[23일차] 배열 연습 / 배열 메서드, Array Method / filter, reduce, map, concat, sort, join etc.  (0) 2021.04.14
ZeroCho의 JS 초급강좌 2-4. 배열 기본 / 4-2. 배열 push pop shift unshift / 4-3. 배열 splice / 5-2. 이차원 배열 / 6-2. 배열 map method /  (0) 2021.04.14

'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' Related Articles

티스토리툴바