자바기반의 웹&앱 응용 SW개발자 양성과정 56일차 -87

for in 반복문

자바스크립트는 배열이나 객체를 더욱 쉽게 다룰 수 있도록 for in 반복문을 제공한다. 

 

  start.addEventListener("click", function st() {
    // boxs[0].classList.add("pose1");
    // boxs[1].classList.add("pose2");
    // boxs[2].classList.add("pose3");

    for (var i in boxs) {
      boxs[i].classList.add("pose1");
    }

 

일반적인 for문은 java와 비슷하다.

  var rotateIndex = 0;

  spin.addEventListener("click", function st() {
    // boxs[0].classList.add("pose1");
    // boxs[1].classList.add("pose2");
    // boxs[2].classList.add("pose3");
    for (var i = 0; i < boxs.length; i++) {
      var removeIndex = (i + rotateIndex) % 3;
      var addIndex = (i + 1 + rotateIndex) % 3;

      boxs[i].classList.remove(`pose${removeIndex}`);
      boxs[i].classList.add(`pose${addIndex}`);
    }
    rotateIndex++;
  });

 

z-index

 

z-index는 겹쳤을 때 먼저 보여줄 우선순위를 지정하는 속성이다.

z-index값이 클수룩 우선순위를 가지며 작을수록 순위가 낮아진다.

 

 #s4 .container {
          position: relative;
          height: 200px;
          border: 1px solid gray;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        #s4 .container .box {
          position: absolute;
          width: 100px;
          height: 100px;
          background: blueviolet;
          color: white;
          font-weight: bold;
          text-align: center;
          line-height: 100px;
          transition: 1s;
        }

        #s4 .container .pose0 {
          z-index: 3;
        }

        #s4 .container .pose1 {
          z-index: 2;
        }

        #s4 .container .pose2 {
          z-index: 1;
        }
      </style>
      <div class="input-container">
        <input type="button" value="오른쪽회전" name="spin" />
      </div>
      <div class="container">
        <div class="box pose0">박스1</div>
        <div class="box pose1">박스2</div>
        <div class="box pose2">박스3</div>
      </div>

 

js로도 스타일을 변경할 수 있지만 css로 하는 것이 더 바람직하다.

위치를 변경할땐 transform을 이용하자.

 

 

랜덤 값 얻기

전역 NaN 속성은 Not-A-Number(숫자가 아님)를 나타냅니다.

 

Math.Randow 은 0~1까지의 랜덤 한 부동소수점을 포함한 값을 나타냅니다.

  spin.addEventListener("click", function () {
    var randomXValue = Math.floor(Math.random() * 500);
    var scaleValue = Math.random() * 2 + 1;

    var transition = randomXValue;
    var scale = scaleValue;

    boxs[0].style.transform = `translate(${transition}px) scale(${scale})`;
  });

 

 

 

css

Translate 현재위치에서부터 이동하도록 한다.

letf right는 기본값을 설정해주어야만 한다.

scale 은 현재 크기에서부터 크기를 조절할 수 있다.

width, height는 기본값을 설정해주어야 한다.