배열은 목록이며 JavaScript에 데이터를 저장하는 방법입니다.

배열은 대괄호 []로 만듭니다.

배열의 각 항목은 0부터 시작하는 번호가 매겨진 위치에 있습니다.

myArray [0]과 같은 구문으로 번호가 지정된 위치를 사용하여 배열의 한 항목에 액세스 할 수 있습니다.

myArray [0] = "new string"과 같은 구문을 사용하여 번호가 지정된 위치를 사용하여 배열의 항목을 변경할 수도 있습니다.

배열에는 길이 속성이있어서 배열에있는 항목 수를 볼 수 있습니다.

배열에는 .push () 및 .pop () 등의 고유 한 메서드가 있습니다.이 메서드는 각각 배열에서 항목을 추가 및 제거합니다.

배열에는 .slice () 및 .shift ()와 같이 다른 기능을 수행하는 다른 많은 메서드가 있습니다. 
Mozilla Developer Network 웹 사이트에서 모든 배열 방법에 대한 설명서를 읽을 수 있습니다.

배열을 포함하는 변수는 let 또는 const로 선언 할 수 있습니다. 
const로 선언 된 경우에도 배열은 여전히 ​​변경 가능합니다. 그러나 const로 선언 된 변수는 다시 할당 할 수 없습니다.


저작자표시 비영리 변경금지

'Coding' 카테고리의 다른 글

fabric 참고  (0) 2018.06.21
es6 ::: getter & setter  (0) 2018.06.19
선택 안됨 Jquery ::: 반복연습 2번째  (0) 2018.06.12
Jquery ::: 반복연습 1번째  (0) 2018.06.12
ODOO 11 ::: ORM API - Environment  (0) 2018.04.27

Jquery


반복연습 2번째




HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2번째 슬라이드 만들기</title>
    <link href="main.css" rel="stylesheet">
</head>
<body>

<div class="slide-block">
    <div class="slide">
        <div class="item" data-color="#9999FF" data-target="1"></div>
        <div class="item" data-color="#FFCCCC" data-target="2"></div>
        <div class="item" data-color="#996666" data-target="3"></div>
        <div class="item" data-color="#FF9966" data-target="4"></div>
        <div class="item" data-color="#6699CC" data-target="5"></div>
    </div>
    <div class="slide-arrow">
        <div class="left">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
        </div>
        <div class="right">
            <i class="fa fa-angle-right" aria-hidden="true"></i>
        </div>
    </div>
    <div class="anchor">
        <div class="active" data-anchor="1"></div>
        <div data-anchor="2"></div>
        <div data-anchor="3"></div>
        <div data-anchor="4"></div>
        <div data-anchor="5"></div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/3398c33652.js"></script>
<script src="main.js"></script>
</body>
</html>




CSS


*{
    border: 0;
    padding: 0;
    margin: 0;
}

.slide-block {
    width: 700px;
    height: 400px;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    margin: 10% auto;
}

.slide-block > .slide {
    width: 3500px;
    height: 400px;
    position: absolute;
    transition: 0.4s;
    left: 0;
    top: 0;
}

.slide-block > .slide > .item {
    width: 700px;
    height: 400px;
    float: left;
}

.slide-arrow {
    font-size: 50px;
}

.slide-arrow > .left ,
.slide-arrow > .right {
    position: absolute;
    padding: 160px 0;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
}

.slide-arrow > .left:hover ,
.slide-arrow > .right:hover {
    color: rgba(255,255,255,1);
    transition: 0.4s;
}

.slide-arrow > .left {
    left: 20px;
}

.slide-arrow > .right {
    right: 20px;
}

.anchor {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.anchor > div {
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    display: inline-block;
    margin: 0 4px;
}

.anchor > div:hover,
.anchor > .active{
    background-color:rgba(255,255,255,1);
}




JS


$(window).on('load', function() {

    var activeSlide = 1;
    var activeNode = 1;

    $(".left").on("click", function(){
       if (activeSlide === 1){
           activeSlide = 5;
       }else {
           activeSlide -= 1;
       }
        activeNode = activeSlide;
       moveSlide(activeSlide);
       lightAnchor(activeNode);
    });
    $(".right").on("click", function(){
        if (activeSlide === 5){
            activeSlide = 1;
        }else {
            activeSlide += 1;
        }
        activeNode = activeSlide;
        moveSlide(activeSlide);
        lightAnchor(activeNode);
    });
    $(".anchor div").on("click", function(){
        activeSlide = $(this).attr("data-anchor");
        moveSlide(activeSlide);
        lightAnchor(activeSlide);
    });

    function moveSlide(targetSlide){
        var targetNode = targetSlide - 1;
        var distence = targetNode * 700;
        $(".slide").css("left", - distence);
    }

    function lightAnchor(targetAncor){
        $(".active").removeClass("active");
        $("[data-anchor='"+targetAncor+"']").addClass("active");
    }

    // .item data-color속성 받아서 background로 넣기
    $(".item").each(function(){
        $(this).css("background-color", $(this).attr("data-color"));
    });
})



저작자표시 비영리 변경금지

'Coding' 카테고리의 다른 글

es6 ::: getter & setter  (0) 2018.06.19
ES6 ::: 배열  (0) 2018.06.18
Jquery ::: 반복연습 1번째  (0) 2018.06.12
ODOO 11 ::: ORM API - Environment  (0) 2018.04.27
rpc  (0) 2018.04.26

Jquery


반복연습 1번째


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>슬라이드 만들기 1번째</title>

    <script src="https://use.fontawesome.com/3398c33652.js"></script>
    <script src="jquery.js"></script>
</head>
<style>
    * {
        border: 0;
        padding: 0;
        margin: 0;
    }
    .slide_box {
        width:700px;
        height:400px;
        position: relative;
        overflow: hidden;
        margin: 10% auto;
    }
    .slide {
        width: 2100px;
        height: 400px;
        border: 1px solid #aaa;
        position: absolute;
        transition: 0.4s;
        transition-timing-function: ease-in-out;
        left: 0;
        top: 0;
    }
    .slide-item {
        width:700px;
        height: 400px;
        float: left;
    }
    .slide_nav {
        text-align: center;
        width: 100%;
        position: absolute;
        bottom: 20px;
    }
    .slide_nav > ul > li {
        background: rgba(255,255,255,.5);
        width: 15px;
        height: 15px;
        margin:0 4px;
        border-radius: 10px;
        display: inline-block;
        cursor: pointer;
    }
    .slide_nav > ul > li:hover {
        background: rgba(255,255,255,1);
    }
    .slide_nav ul .active {
        background: rgba(255,255,255,1);
    }
    .arrow{
        font-size: 50px;
        cursor: pointer;
    }
    .arrow > .left:hover,
    .arrow > .right:hover{
        transition: 0.4s;
        color: rgba(255,255,255,1);
    }
    .arrow > .left {
        position: absolute;
        top: 40%;
        left: 20px;
        color: rgba(255,255,255,.5);
    }
    .arrow > .right {
        position: absolute;
        top: 40%;
        right: 20px;
        color: rgba(255,255,255,.5);
    }
</style>
<body>

<div class="slide_box">
    <div class="slide">
        <div class="slide-item" data-node="1" data-color="red"></div>
        <div class="slide-item" data-node="2" data-color="blue"></div>
        <div class="slide-item" data-node="3" data-color="black"></div>
    </div>
    <div class="slide_nav">
        <ul>
            <li class="active" data-anchor="1"></li>
            <li data-anchor="2"></li>
            <li data-anchor="3"></li>
        </ul>
    </div>
    <div class="arrow">
        <div class="left" data-direction="left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
        <div class="right" data-direction="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
    </div>
</div>


<script>
    $(window).on('load', function(){

        // 현재 slide를 담기위한 activeSlide 변수
        var activeSlide = 1;

        // 현재 slide와 연결된 노드를 담기 위한 node 변수
        var node = 1;


        // .arrow > div를 클릭하면
        $('.arrow div').on('click', function(){

            // direction 변수에 나 자신의 data-direction 속성값을 담을거야.
            var direction = $(this).attr('data-direction');

            // direction이 'lift'와 일치하고
            if (direction === 'left'){

                // activeSlide가 1이면
                if(activeSlide === 1){

                    // activeSilde를 5로 바꿀거야.
                    activeSlide = 3;

                // activeSlide가 1이 아니면
                }else {

                    //activeSlide에서 1을 뺄거야.
                    activeSlide = activeSlide - 1;
                }


            // direction이 'right'와 일치하고
            }else if (direction === 'right'){

                // activeSlide가 5면
                if (activeSlide === 3){

                    // activeSlide를 1로 바꿀거야.
                    activeSlide = 1;

                // activeSlide가 5가 아니면
                }else {

                    // activeSlide에 1을 더할거야.
                    activeSlide = activeSlide + 1;
                }

            // 모든 조건이 false면 에러메세지를 띄울거야.
            }else{
                alert('error');
            }

            // node변수는 현재 activeSlide와 같은 값을 가지고있어야하므로
            // node변수에 activeSlide값을 넣을거야.
            node = activeSlide;

            // moveSlide메소드로 현재 activeSlide를 움직일거야. *기능발사!*
            moveSlide(activeSlide);

            // lightNav메소드로 현재 activeSlide와 매치되는 slide_nav 색을 강조할거야. *기능발사!*
            lightNav(activeSlide);
        });

        // .slide_nav 안에 li들을 클릭하면
        $('.slide_nav li').on('click', function(){

            // node 변수에 data-anchor속성을 받아서 클릭한 li안에 넣어줄거야.
            node = $(this).attr('data-anchor');

            // activeSlide에 node를 int로 형변환해서 넣어줄거야 (속성을 받아오면 문자열로 받아와서 형변환 해야돼)
            activeSlide = parseInt(node);

            // moveSlide메소드로 클릭한 node값에 매칭된 activeSlide를 움직일거야. *기능발사!*
            moveSlide(activeSlide);

            // lightNav메소드로 클릭한 node값에 매칭된 activeSlide를 움직일거야. *기능발사!*
            lightNav(activeSlide);
        });

        // .slide-item에 하나씩 반복해서 메소드를 실행할거야
        $('.slide-item').each(function (){

            // 반복된 요소 하나하나마다 요소의 data-color속성을 읽어서 css로 넣어줄거야
           $(this).css("background-color", $(this).attr('data-color'));
        });

        // 슬라이드를 움직이게하는 moveSlide메소드를 만들거야.
        // targetSlide에는 activeSlide값이 들어갈거야
        function moveSlide(targetSlide) {

            // 시작 슬라이드는 구하는  targetNod는 0부터 시작해야하기때문에 -1 해줘야돼
            var targetNod = targetSlide - 1;

            // 한번 슬라이드 될 때 움직일 left만큼 targetNod에 곱해서 distence변수에 넣어줄거야
            var distence = targetNod * 700;

            // .slide의 css에 left를 distence만큼 빼줄거야
            $('.slide').css('left', - distence);
        };

        // 슬라이드가 움직일때마다 현재 슬라이드와 매칭되는 slide_nav를 밝게 해줄거야
        function lightNav(anchor){

            //밝게해주는 스타일이 들어있는 .active 클래스를 지워줄거야
            $('.active').removeClass('active');

            //현재 anchor에 따라 active클래스를 추가해줄거야
            $('[data-anchor="'+anchor+'"]').addClass('active');
        }
    });
</script>
</body>
</html>



저작자표시 비영리 변경금지

'Coding' 카테고리의 다른 글

ES6 ::: 배열  (0) 2018.06.18
선택 안됨 Jquery ::: 반복연습 2번째  (0) 2018.06.12
ODOO 11 ::: ORM API - Environment  (0) 2018.04.27
rpc  (0) 2018.04.26
ODOO 11 ::: ORM API - 레코드세트  (0) 2018.04.26

+ Recent posts

티스토리툴바