[14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼

        var index=0;
        
        function hello(){
        var index=1;
            console.log(index);
        }
        
        console.log(index)
        hello();
        console.log(index);

var를 쓰면 저 지역 안에서 변수를 선언하는거같음

        var index=0;
        
        function hello(){
            index=1;
            console.log(index);
        }
        
        console.log(index)
        hello();
        console.log(index);

var 없이 index=0; 하면 위의 선언한index 값을 바꿈

        index=0;
        
        function hello(){
            index=1;
            console.log(index);
        }
        
        console.log(index)
        hello();
        console.log(index);

        var index=10;
        function hello (){
            index=0;
            console.log(index);
        }

        console.log(index);
        hello();
        console.log(index);
        hello();

10 ok

0 ok

0 -> ???? var index=10; 이 아니고 위의 hello(); =0 값 나타내고 그대로 index도 0 으로 이어짐

0 ok

        var index=10;
        function hello (){
            index++;
            console.log(index);
        }

        console.log(index);
        hello();
        console.log(index);
        hello();

        var index=10;
        function hello(){
            index=0;
            console.log(index);
        }
        index++;

        hello(); //0
        console.log(index); //0
        hello(); //0

index++ 은 안되는균...

hello 함수 에서 index 는0 되고 바로 console.log(index); 에 그대로 0이 찍힘.

        var index=10;
        function hello(){
            index=0;
            console.log(index);
        }

        console.log(index); //10
        index++;
        console.log(index); //11
        hello(); //0 
        console.log(index); //0
        hello(); //0

        index=10;
        function hello(){
            index=0;
            console.log(index);
        }

        console.log(index); //10
        index++; 
        console.log(index); //11
        hello();  //0
        console.log(index);  //0
        hello();  //0

        index=10;
        function hello(){
            var index=0;
            console.log(index);
        }

        console.log(index); //10
        index++; 
        console.log(index);  //11
        hello();   //0
        console.log(index);  //10 (틀림) - > 11! 
        hello();  //0

11 (틀림)

        var index=10;
        function hello(){
            var index=0;
            console.log(index);
        }

        console.log(index); //10
        index++; 
        console.log(index);  //11
        hello();  //0
        console.log(index);  //11
        hello(); //0

==============================================================

    <div id="root">d</div>

    <script type="text/javascript">
    
    let root=document.querySelector('#root');
    console.log(root.innerHTML);
    let li= document.createElement('li');
    li.innerHTML="GOOD";
    root.appendChild(li);

오늘 만든 버튼 클릭 이미지 옮기기 업그레이드버젼

<!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="./fiverr.css">
</head>
<body>
    <div id="wrap"> <!--100%-->
        <div id="container"> <!--100%-->
            <div id="container2"> <!--100%-->
                <span>
                    <h2>Popular professional services</h2>
                </span>
                <div class="slider-package"> <!--100%-->
                    <div class="btn">
                        <button class="lbtn" onclick="left();">&lt</button>
                        <button class="rbtn" onclick="right();">&gt</button>
                    </div>
                    <div class="slick-list-bg">
                        <div class="slick-list"> <!--100%-->
                            <ul class = "list1">  <!--ul1[0]-->
                                <li><img src="./images/1-1.jpg"></li>
                                <li><img src="./images/1-2.jpg"></li>
                                <li><img src="./images/1-3.jpg"></li>
                                <li><img src="./images/1-4.jpg"></li>
                                <li><img src="./images/1-5.jpg"></li>
                            </ul>
                            <ul class="list2 ">    <!--ul1[1]-->
                                <li><img src="./images/2-1.jpg"></li>
                                <li><img src="./images/2-2.jpg"></li>
                                <li><img src="./images/2-3.jpg"></li>
                                <li><img src="./images/2-4.jpg"></li>
                                <li><img src="./images/2-5.jpg"></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        slick1=document.querySelector('.slick-list>ul.list1');
        slick2=document.querySelector('.slick-list>ul.list2');
        ul1=document.querySelectorAll('.slick-list>ul');

        var isFirst = true;

        function left(){
            if (isFirst) {
                slick1.setAttribute('class', 'list1 going2');
                slick2.setAttribute('class', 'list2 coming2');
                isFirst = false;
            } else {
                slick1.setAttribute('class', 'list1 coming2');
                slick2.setAttribute('class', 'list2 going2');
                isFirst = true;
            }
        }

        function right(){ 
            if (isFirst) {
                slick1.setAttribute('class','list1 going');
                slick2.setAttribute('class','list2 coming');
                isFirst = false;
            } else {
                slick1.setAttribute('class','list1 coming');
                slick2.setAttribute('class','list2 going');
                isFirst = true;
            }
        }
        

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

변수 = true ;

vs false 를 가지고 만듬

나는 0, 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>
    <link rel ="stylesheet" href="./fiverr.css">
</head>
<body>
    <div id="wrap"> <!--100%-->
        <div id="container"> <!--100%-->
            <div id="container2"> <!--100%-->
                <span>
                    <h2>Popular professional services</h2>
                </span>
                <div class="slider-package"> <!--100%-->
                    <div class="btn">
                        <button class="lbtn" onclick="left();">&lt</button>
                        <button class="rbtn" onclick="right();">&gt</button>
                    </div>
                    <div class="slick-list-bg">
                        <div class="slick-list"> <!--100%-->
                            <ul class = "list1">  <!--ul1[0]-->
                                <li><img src="./images/1-1.jpg"></li>
                                <li><img src="./images/1-2.jpg"></li>
                                <li><img src="./images/1-3.jpg"></li>
                                <li><img src="./images/1-4.jpg"></li>
                                <li><img src="./images/1-5.jpg"></li>
                            </ul>
                            <ul class="list2 ">    <!--ul1[1]-->
                                <li><img src="./images/2-1.jpg"></li>
                                <li><img src="./images/2-2.jpg"></li>
                                <li><img src="./images/2-3.jpg"></li>
                                <li><img src="./images/2-4.jpg"></li>
                                <li><img src="./images/2-5.jpg"></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        slick1=document.querySelector('.slick-list>ul.list1');
        slick2=document.querySelector('.slick-list>ul.list2');
        ul1=document.querySelectorAll('.slick-list>ul');

        var isFirst = true;

        function left(){
            if (isFirst) {
                slick1.setAttribute('class', 'list1 going2');
                slick2.setAttribute('class', 'list2 coming2');
            } else {
                slick1.setAttribute('class', 'list1 coming2');
                slick2.setAttribute('class', 'list2 going2');
            }
            isFirst ^= true;
            // isFirst = !isFirst;
        }

        function right(){ 
            if (isFirst) {
                slick1.setAttribute('class','list1 going');
                slick2.setAttribute('class','list2 coming');
            } else {
                slick1.setAttribute('class','list1 coming');
                slick2.setAttribute('class','list2 going');
            }
            isFirst ^= true;
            // isFirst = !isFirst;
        }
        

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

xor ?

true+true = false

true+flase = true

false+false = false

언제나 true 이

1 true

0 false

<!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="./fiverr.css">
</head>
<body>
    <div id="wrap"> <!--100%-->
        <div id="container"> <!--100%-->
            <div id="container2"> <!--100%-->
                <span>
                    <h2>Popular professional services</h2>
                </span>
                <div class="slider-package"> <!--100%-->
                    <div class="btn">
                        <button class="lbtn" onclick="left();">&lt</button>
                        <button class="rbtn" onclick="right();">&gt</button>
                    </div>
                    <div class="slick-list-bg">
                        <div class="slick-list"> <!--100%-->
                            <ul class = "list0">  <!--ul1[0]-->
                                <li><img src="./images/1-1.jpg"></li>
                                <li><img src="./images/1-2.jpg"></li>
                                <li><img src="./images/1-3.jpg"></li>
                                <li><img src="./images/1-4.jpg"></li>
                                <li><img src="./images/1-5.jpg"></li>
                            </ul>
                            <ul class="list1 ">    <!--ul1[1]-->
                                <li><img src="./images/2-1.jpg"></li>
                                <li><img src="./images/2-2.jpg"></li>
                                <li><img src="./images/2-3.jpg"></li>
                                <li><img src="./images/2-4.jpg"></li>
                                <li><img src="./images/2-5.jpg"></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        slick1=document.querySelector('.slick-list>ul.list0');
        slick2=document.querySelector('.slick-list>ul.list1');
        ul1=document.querySelectorAll('.slick-list>ul');

        var listNum = 0;

        function left(){
            if (listNum) {
                slick1.setAttribute('class', 'list0 going1');
                slick2.setAttribute('class', 'list1 coming1');
            } else {
                slick1.setAttribute('class', 'list0 coming1');
                slick2.setAttribute('class', 'list1 going1');
            }
            listNum ^= 1;
        }

        function right(){ 
            if (listNum) {
                slick1.setAttribute('class','list0 going0');
                slick2.setAttribute('class','list1 coming0');
            } else {
                slick1.setAttribute('class','list0 coming0');
                slick2.setAttribute('class','list1 going0');
            }
            listNum ^= 1;
        }
        

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

/* CSS Style Sheet*/
*{margin:0;padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
img{display:block;line-height:0;}
#wrap{
    width:100%;
    height:100%;
    background-color: darkcyan;
    float:left;
   
}

#container{
    width:100%;
    height:2000px;
    background:darkkhaki;
    margin: 0 auto;
}

#container2{
    width:100%;
    height:407px;
    background-color:darkgreen;
    margin-top:100px;

}

#container2>span{
    width:1400px;
    height:62px;
    margin: 0 auto;
    background:chartreuse;
}

#container2>span>h2{
    color:white;
    font-size: 24px;
    display: inline-block;

}

.slider-package{
    width:100%;
    height:345px;
    position:absolute;
    z-index:0;
}



.slick-list{
    width:1400px;
    height:345px;
    background:darkmagenta;
    position: relative;
    overflow: hidden;
    margin:0 auto;
}


.slick-list>ul>li{
    display: inline-block;
    padding:0 10px;
}

.slick-list>ul{
    display: inline-block;
    position:absolute;
    width:1400px;
}

.list2{
    left:1400px;
}

.slick-list>ul>li>img{
    width:252px;
    height:345px;    
}

.btn{
    width: 1393px;
    height:40px;
    position:absolute;
    z-index:5;
    left:49%;
    transform: translateX(-49%);
    top:150px;
    
}



.slider-package>.btn>.lbtn{
    width:30px;
    height:30px;
    background:white;
    color:black;

    font-weight:bold;
    border:1px solid white;
    border-radius: 20px;
    cursor:pointer;
    float:left;
    
    
}

.slider-package>.btn>.rbtn{
    width:30px;
    height:30px;
    background:white;
    color:black;
    
    font-weight:bold;
    border:1px solid white;
    border-radius: 20px;
    cursor:pointer;
    float:right;
}

.slick-list>.coming0{
    animation:slider1 1s;
    animation-fill-mode: forwards;
}
@keyframes slider1{
    from{left:1400px}to{left:0px}
}

.slick-list>.going0{
    animation:slider2 1s;
    animation-fill-mode: forwards;
}
@keyframes slider2{
    from{left:0px}to{left:-1400px}
}

/*/////////////////////////////*/

.slick-list>.coming1{
    animation:slider3 1s;
    animation-fill-mode: forwards;
}
@keyframes slider3{
    from{left:-1400px}to{left:0px}
}

.slick-list>.going1{
    animation:slider4 1s;
    animation-fill-mode: forwards;
}
@keyframes slider4{
    from{left:0px}to{left:1400px}
}

<!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="./fiverr.css">
</head>
<body>
    <div id="wrap"> <!--100%-->
        <div id="container"> <!--100%-->
            <div id="container2"> <!--100%-->
                <span>
                    <h2>Popular professional services</h2>
                </span>
                <div class="slider-package"> <!--100%-->
                    <div class="btn">
                        <button class="lbtn" onclick="move(0);">&lt</button>
                        <button class="rbtn" onclick="move(1);">&gt</button>
                    </div>
                    <div class="slick-list-bg">
                        <div class="slick-list"> <!--100%-->
                            <ul class = "list0">  <!--ul1[0]-->
                                <li><img src="./images/1-1.jpg"></li>
                                <li><img src="./images/1-2.jpg"></li>
                                <li><img src="./images/1-3.jpg"></li>
                                <li><img src="./images/1-4.jpg"></li>
                                <li><img src="./images/1-5.jpg"></li>
                            </ul>
                            <ul class="list1 ">    <!--ul1[1]-->
                                <li><img src="./images/2-1.jpg"></li>
                                <li><img src="./images/2-2.jpg"></li>
                                <li><img src="./images/2-3.jpg"></li>
                                <li><img src="./images/2-4.jpg"></li>
                                <li><img src="./images/2-5.jpg"></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        slick1=document.querySelector('.slick-list>ul.list0');
        slick2=document.querySelector('.slick-list>ul.list1');
        ul1=document.querySelectorAll('.slick-list>ul');

        var arr = ['going', 'coming'];
        var listNum = 0;
        var opposite = 1;

        function move(direction){ 
            slick1.setAttribute('class', 'list' + listNum + ' ' + arr[listNum] + direction);
            slick2.setAttribute('class', 'list' + opposite + ' ' + arr[opposite] + direction);
            listNum ^= 1; // 0이면 1이고 1이면 0으로 만들어라 ~ 
            opposite ^= 1;
        }

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

i++;
i %= 3;

i = i%3;

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

[fiverr 웹사이트 만들기] (0)	2021.04.05
[15일차] fiverr 웹사이트, 반응형, 스크롤 (0)	2021.04.02
[14일차]20210401 fiverr 사진 움직이기 + 기타 (0)	2021.04.01
[13일차 복습] JavaScript 함수, 객체 , 배열 연습 (1)	2021.04.01
[13일차]20210331 var, let, const ,객체 공부 정사각형, 피라미드 별 만들기 (0)	2021.03.31

GOOD DAY

[14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼

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

티스토리툴바

[14일차 복습] 변수 선언 var / console.log 로 알아보기 / fiverr 사진 클릭 움직이기 업그레이드 버젼

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

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

티스토리툴바