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

[12일차]20210330 경일홈페이지 취업자인터뷰 버튼만들기 / 조건문, 반복문, 함수 function기초 복습

알로호모라 2021. 3. 30. 15:29
반응형

 

 

 

 

 

오전  - 경일홈페이지 취업자인터뷰 버튼만들기

....................

 

 

인자값 = 매개변수 

 

<!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>
    <script >
        a=3;

        console.log(1==3); //-> True 라고 나옴. 비교연산자( < > = != ==) 사용 시에는 결과값이 Boolean임 (Ture or False)


        if(true){  //if () 안에는 boolean만 쓸 수 있음. 
                   // 비교 연산자만 사용하여서 했음. 
            console.log('된다?');
        }else{
            console.log('안된다'); 
        }

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

도통 어렵다..

 

 

<!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>
    <div id="root">AA</div>
    <script >
        flag=true;

        if(flag){
            console.log('실행된다?');
        } else{
            console.log('실행안된다?');
        }

        root=document.querySelector('#root');
        htmlcode=root.innerHTML; //AA 안에 있는 값을 가져옴. 

        if(htmlcod='AA'){
            flag=false
        }

        if(flag){
            console.log('실행된다?');
        } else{
            console.log('실행안된다?');
        }  //왜 if 두개? 마지막에 실행되는거 flag로 컨트롤해주는게 좋음. 왜flag 변수값바꿔서if문을 거느냐... 사이에 뭔가 겁나 많을 수도..
        //flag 는 변수값이고 boolean 이다 ~ 
    </script>
</body>
</html>

 

===================구글에 올라온 버튼 누르기 소스 ===============================

집가서 해보기..... 

 

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <!--
        wrap
    -->
    <div id="wrap">
        <div id="header_wrap">  <!--width 100%-->
            <!--wrap 안에 wrap-->
            <div id="header"><!--width: 1200px; , margin: 0 auto; 줄 부분-->
                <!--logo and gnb-->
            </div>

            <div id="snb_wrap"> <!--width 100%-->
                <div id="snb">  <!--width 1200px-->
                    <!--snb content-->
                </div>
            </div>
        </div>
        <div id="visual_wrap">  <!--width 100%-->
            <div id="visual">   <!--width 1920px-->

            </div>
        </div>

        <div id="contents"> <!--width 1200px-->
            <div id="interview">    <!--width 600px-->
                <h2>취업자인터뷰</h2>
                <ul class="interview_content">
                    <li class=""> <!--하나당 넓이가 238px-->
                        <img src="./img/interview.png">
                        <p>글자 내용 1</p>
                    </li>
                    <li class="">
                        <img src="./img/interview2.png">
                        <p>글자 내용 2</p>
                    </li>
                    <li class="">
                        <img src="./img/interview3.png">
                        <p>글자 내용 3</p>
                    </li>
                    <li class=" ">
                        <img src="./img/interview4.png">
                        <p>글자 내용 4</p>
                    </li>
                    <button class="prev" onclick="interviewBtn(0)"> &lt </button>
                    <button class="next" onclick="interviewBtn(1)"> &gt </button>
                </ul>
                
            </div>
        </div>
    </div>


    <script type="text/javascript" src="./index.js"></script>

</body>
</html>
var index = 0;
var beNum = 1;
var rolling = null;
function slider(type,currentIndex,newIndex){
    flag = true;
    li = document.querySelectorAll('.interview_content > li');
    intBtn = document.querySelectorAll('.interview_content > a')
    if(index == li.length){     // if ('code') 비교 연산자 [true false]
        index = 0;
    }

    if (type != undefined){
        flag = false;
    } 

    for(i=0; i < li.length; i++){
        var onNum = index+1;        //index+1 이 4를 넘어가면 0으로 초기화 한다.
        if(onNum== 4){
            onNum = 0;
        }

        if (type == 0 ) {
            if (i == currentIndex) {
                li.item(i).setAttribute('class', 'out2');
            } else if (i == newIndex) {
                li.item(i).setAttribute('class', 'on2');
            } else {
                li.item(i).setAttribute('class', '');
            }
        } else {
            if(i == index){
                li.item(i).setAttribute('class','out');
            }else if(i == onNum){
                li.item(i).setAttribute('class', 'on');
            }else{
                li.item(i).setAttribute('class', ' ');
            }
        }
    }
    
    if(flag){
        index ++; 
    } else {
        index = newIndex;
    }
       
}

function interviewBtn(type){
    console.log(index);
    var newIndex;
    if (type == 0) {
        newIndex = index - 1;
        if (newIndex == -1) { newIndex = 3; }
        console.log('이전 인덱스값' + newIndex,'현재인덱스값 '+index);
    } else if (type == 1) {
        newIndex = index + 1;
        if (newIndex == 4) { newIndex= 0; }
        console.log('다음 인덱스값' + newIndex,'현재인덱스값 '+index);
    }

    clearInterval(rolling);
    slider(type,index,newIndex);
    rolling = setInterval(slider,5000);    
}

rolling = setInterval(slider,5000);


*{
    margin: 0; padding: 0;
}

ul,li{
    list-style: none;
}

a{
    text-decoration: none;
}

img{
    display: block;
    line-height: 0;
}

#warp{
    width: 100%;
}

#header_wrap{
    width: 100%;
    
    background: red;
}

#header{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: blue;
}

#snb_wrap{
    width: 100%;
    height: 200px;
    background: yellow;
    position: absolute;
    z-index: 3;
}

#snb{
    width: 1200px;
    height: 200px;
    margin: 0 auto;
    background: tomato;
}

#visual_wrap{
    width: 100%;
    height: 500px;
    background: green;
    
}

#visual{
    width: 1920px;
    height: 500px;
    margin: 0 auto; /*absolute 때문에 안먹음 but relative는 먹음*/
    background: silver;
    position: relative;
    z-index: 1;
}

#contents{
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    /*background: pink;*/
}

.interview_content{
    width: 238px;
    position: relative;
    height: 500px;
   /* overflow: hidden;*/
}

.interview_content > li{
    position: absolute;
    display: none;
}

.interview_content>li>img{
    width: 238px;
    height: 158px;
}

.interview_content > li.on{
    display: block;
    animation: slider1 1s;
    animation-fill-mode: forwards;
}

.interview_content > li.out{
    display: block;
    animation: slider2 1s;
    animation-fill-mode: forwards;
    /*animation-fill-mode: forwards; 한번 실행하고 멈춘다? --> 찾아보기*/
}

.interview_content>li.out2{
    display: block;
    animation: slider3 1s;
    animation-fill-mode: forwards;
}

.interview_content>li.on2{
    display: block;
    animation: slider4 1s;
    animation-fill-mode: forwards;
}


/*그림을 두개씩 컨트롤 한다고 생각!*/

@keyframes slider1{
    from{
        left: 238px;
    }
    to{
        left: 0px;
    }
}

@keyframes slider2{
    from{
        left: 0px;
    }
    to{
        left: -238px;
    }
}

/*out2*/
@keyframes slider3{
    from{
        left: 0px;
    }
    to{
        left : 238px;
    }
}

/*on2*/
@keyframes slider4{
    from{
        left: -238px;
    }
    to{
        left: 0px;
    }
}


/*슬라이드 버튼*/
.prev{
    position: absolute;
    left: 0px;
    top: 200px;
    width: 20px;
    height: 30px;
    background: red;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    
}

.next{
    position: absolute;
    top: 200px;
    width: 20px;
    height: 30px;
    background: blue;
    line-height: 30px;
    color: #fff;
    outline: 0;
    text-align: center;
    left: 218px;
    
}

.prev:hover , .next:hover{
    background: rgb(128, 128, 128);
    text-decoration: none;
}

다 시 천천히 설명들으니 이해는 가는데 복잡해서 계속 공부해야할듯.....

 

 

============================오후 =========기초추가 복습 수업 ================

 

문제 풀기함 -> 매우 도움이 됨! 

<!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>
/*
        
    a=0; //대입 연산자
    a==0; //비교 연산자


    console.log(a); //0
    console.log(a==0); //True 

    function a(){
        console.log(0);
    }    //-> function 정의하고 나서 실행이 바로 안됨. 
          //이것을 실행할려면 사용을 해야합니다. 사용법은 
          //함수명();

          // function a(){} -> a();
          //a=0;  -> a;
          //변수와 함수의 사용법을 정확히 숙지해야함


          // 함수의 매개변수 or 인자값 설정하는 법 


        //{} : '코드블록' 이 나오는 것들의 특징 : if문, for문, function 등. 

    function hello(){
        console.log('hello함수', 'hello world');
    }

    if(true){
        console.log('if문', 'hello world');
    }
    
    for(i=0; i<10; i++){
        console.log('for문', 'hello world');
    }
          
// 총 console 몇개 나올까???11개 

    
    function hello(a){
        console.log(a);
    }

    hello(); //에러나옴 
    hello(1); //-> 1이 a값으로 들어가서 console.log가 1이 찍히게됨 


    // -> 에러 나옴. 함수에는 매개 변수(인자값)이 있음. 함수를 쓸 때 내가 원하는 값을 줄 수 있는게 
    //    hello(); 여기임 . 



    function hello(a,b){
        console.log(a);
        console.log(b);
    }

    hello(1); 

    // 1 / undefined (두번째 값은 값이 없다~ ) 
 

    for (i=2; i<=9; i++){
        console.log(i*2);
    }

    for (i=3; i<=9; i++){
        console.log(i+'*1='+i);
    }
*/
구구단 만들어보기 ! 

    function gugudan (a){
        
        for()
        
        console.log(a*);
    } 

//함수 사용해서 인자값 그대로 출력하기 문제 

    function hello(item){
        console.log(item);
    }

    add('a'); //  -> a라는 글자가 출력됨.   -> "" '' 를 안씀.. 

    
    

   5번째일때  hello world 

    for (i=1; i<=10; i++){    // i=1, 라고 씀. 
        if(i==5){
            console.log('hello world');
        }else{
            console.log(i);
        }
    } 

3의 배수가 되었을 때 hello world


   
    for (i=1; i<=15; i++){
        if(i%3 == 0){  //i를 3으로 나눴을 때 나머지값 이 0이라면 
            console.log("hello world");
        }else{
            console.log(i);
        }
    }

    for(i=1; i<=15; i++){
        if(i==3||i==6||i==9||i==12||i==15||){   // ||뜻은 or
            console.log('hello world');
        }else{
            console.log(i);
        }
    }


    for(i=1; i<=15; i++){
        if(i==3){
            console.log('hello world');
        } else if (i==6){
            console.log('hello world');
        } else if (i==6){
            console.log('hello world');
        }
    }


    변수가 어떻게 이동되는지 알아보기 


    function hello(){
        i=0;
        console.log(i);
        i++;
    }
    hello();   //-> 0이 나옴. 코드는 위~ 아래 가 기본 
    hello();   // 두번쓰면? 둘다 00 나옴.  


    // i=0; 변수가 어느 코드 블록에 있냐에 따라 데이터 처리가 달라짐 {}코드 블록 안에 변수 선언은 
    //그 안에서만 가능 
    i=0;
    function hello(){
        i=0;
        console.log(i);
        i++;
    }
    hello();  
    console.log();    


// 변수 선언 시 var 붙이는거 -> 전역 변수가 됨. 어디든지 쓸 수 있는 변수 
    var b = "나는 비다";
        function hello(){
            var b="나는 에이다";  // 여기서 var를 없애면 나는 에이다 두번 나옴. 
            console.log(b);
        }
    hello();  
    console.log(b);

// '나는 에이다 두번 나옴 ' 


    var num=0;
        function hello(){
            console.log(num);
        }
    hello();  // -> 0이 뜸  


    var num=0;   // 여기서의 num은 function 안에서도 사용됨
        function hello(){
            console.log(num);
            num++;
        }
    hello();
    hello();  // 0, 1이 뜸 

    var num=0;   // 여기서의 num은 function 안에서도 사용됨
        function hello(){
            console.log(num);
            num++;
        }
    hello();
    hello();  // 0, 1이 뜸 
    console.log(num); // 2가 뜸. 

    setInterval(hello,1000) 

//7까지 뜨고 1, 0 이 뜨고싶을 떄ㅖ 
    var num=0;   // 여기서의 num은 function 안에서도 사용됨
        function hello(){

            if(num==8){
                num=0;
            }
            console.log(num);
            num++;

        }
    hello();
    hello(); 
    hello(); 
    hello();  
    hello(); 
    hello(); 
    hello(); 
    hello(); 
    hello(); 
    hello(); 

    //FOR 넣고 1~10 출력 
    var num=0;  
        function hello(){
            for(i=0; i<10; i++){
                console.log(i,num);
            }
            num++;

        }
    hello();
    hello(); 
    hello(); 
    hello();  
    hello(); 
    hello(); 
    hello(); 
    hello(); 
    hello(); 
    hello();

    // -> 출력값 생각해보기 










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

 

 

위에 공부 ~ 

 

낼도 기초 계속 공부할 예정.. 

 

 

 

 

 

처음 성공한 알고리즘,,,,, (?) 구구단

        function gugudan(){
            var n=1;
            for(i=2; i<=9; i++){
                for(n=1; n<=9; n++){
                console.log(i+'*'+n+'='+(i*n));
                }
            }
                n++;
        }
        setInterval(gugudan);

구구단이 반복됨 

        function gugudan(){

            for(i=2; i<=9; i++){
                for(n=1; n<=9; n++){
                console.log(i+'*'+n+'='+(i*n));
                }
            }
   
        }
        gugudan();

구구단 1 번 완성 -> console값 딱 떨어짐 

            for(i=2; i<=9; i++){
                for(n=1; n<=9; n++){
                console.log(i+'*'+n+'='+(i*n));
                }
            }

구구단 1번 완성 -> console값 마지막에 Live reload enabled 가 나옴 

 

구구단을 body에 프린트 하려면 어캐하징????????????

 

 

    function gugudan(){

        for(i=2; i<=9; i++){
            for(n=1; n<=9; n++){
            document.writeln(i+'*'+n+'='+(i*n));
            }
            document.writeln("<br>");
        }

    }
    gugudan();
    

            for(i=2; i<=9; i++){
                for(n=1; n<=9; n++){
                    document.writeln(i+'*'+n+'='+(i*n));

                }
            }

 

 둘다 됨. 

반응형

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

[13일차]20210331 var, let, const ,객체 공부 정사각형, 피라미드 별 만들기  (0) 2021.03.31
[12일차 복습] JavaScript 기초 문법 연습  (0) 2021.03.30
[11일차 연습] 움직이는 이미지 overflow:hidden, Java script  (0) 2021.03.30
[11일차]20210329 경일홈페이지 취업자인터뷰 이미지 왼쪽으로 움직이기 + 블록체인 특강  (0) 2021.03.29
[10일차 연습] 경일게임아카데미 홈페이지 만들기  (0) 2021.03.28

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

티스토리툴바