Javascript 공부 #2

UI 애니메이션 추가할 때 가능한 CSS 만으로 처리하는게 좋음

• 자바스크립트에게 너무 많은 일을 시키면 성능이 저하되기 때문

 

 

one-way UI 애니메이션 만드는 법

A 상태 → B 상태로 바뀌는 일방향 애니메이션

1. 시작스타일
2. 최종스타일
3. 원할 때 최종스타일로 변하라고 코드 짜줌
4. transition 추가

각각 클래스로 만들어놈

 

 

 

fadeIn, fadeOut 애니메이션 만들기

---

.black-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  visibility: hidden;
  opacity: 0;
  transition: all 1s;
}

위와 같이 visibility 속성 hidden 주고, opacity 0, transition 속성을 통해 1초간 서서히 바뀌도록 코드 짬

.show-modal {
  visibility: visible;
  opacity: 1;
}

그리고 붙였다 뗐다 하는 show-modal 클래스에 opacity 1 주면 서서히 바뀌는 것을 볼 수 있다.

form tag 안의 버튼 타입 지정해주는 것이 좋다

전송 버튼의 경우 type=’submit’ 과 같이 지정하고, 닫기 버튼의 경우 type=’button’ 과 같이 지정해주는 것이 좋다.

<form> 은 서버로 유저 정보 전송하려고 사용하는 것

form tag 안의 속성 action = ‘url ~~~’ 과 같이 지정

 

 

 

조건문

---

if (조건){
        실행할 코드
      }

자바스크립트의 조건문도 타 프로그래밍 언어와 같다

form이 전송될 때 submit 이라는 이벤트가 발생하기 때문에 다음과 같이 작성해도 된다

("form").on("submit", function () {
        if ($(".form-control").val() == "") {
          alert("아이디 입력해주세요!");
        }
      });

위와 같이 form 태그를 찾은 다음에 submit 이벤트에 이벤트 리스너를 달아주어도 잘 동작한다.

 

 

 

Input에 사용자가 입력한 값 갖고오고 싶을 때

---

document.getElementById(".form-control").value;

$(".form-control").val();

 

 

폼 예제에서 아이디 입력 안하면 alert창 띄우기

---

$("#send").on("click", function (event) {
        if ($(".form-control").val() == "") {
          alert("아이디 입력해주세요!");
          event.preventDefault();
        }
      });

event.preventDefault(); 를 통해서 폼 전송 하는 것을 막을 수 있다.

 

 

 

input 태그에서 일어나는 이벤트

• input → 값이 변경 될 때마다 이벤트 감지
• change → 값이 변경되고 사용자가 커서를 다른 데로 옮기면 이벤트 감지

 

 

연산자

---

• === : 엄격한 비교 왼쪽과 오른쪽의 타입까지 엄격하게 판단
• == : 느슨한 비교 알아서 타입 변환을 해보고 왼쪽과 오른쪽의 값만 비교 ex) 1 ==’1’ true 라고 판단, 1===’1’ flase 라고 판단

 

 

조건문 HomeWork #1

---

function game369(num) {
        if (num % 3 == 0) {
          console.log("짝!");
        } else {
          console.log("통과");
        }
      }
			game369(6);
			game369(9);
			game369(11);

      function upgradeGame369(num) {
        if (num % 9 == 0) {
          console.log("짝짝!");
        } else if (num % 3 == 0) {
          console.log("짝!");
        } else {
          console.log("통과");
        }
      }
      upgradeGame369(6);
      upgradeGame369(9);
      upgradeGame369(11);

      function successOrNot(a, b) {
        if (a < 40 || b < 40) {
          console.log("탈락");
        } else if (a + b < 120) {
          console.log("탈락");
        } else {
          console.log("합격");
        }
      }

      successOrNot(70, 70);
      successOrNot(30, 100);
      successOrNot(50, 50);

 

 

 

var, let, const

---

var 이름 = "Kim"; // 재선언, 재할당 가능
let 이름 = "Kim"; // 재선언 불가 (코드 짤 떄 변수명 똑같이 만드는 실수 방지)
const 이름 = "Kim"; // 재선언, 재할당 불가 (바뀌지 않는 값, 상수 저장)

 

 

타이머 기능

---

setTimeout(function () { 코드 ...}, 3000);

setTimeout 함수 사용, 3000ms 후에 function 안의 코드들 실행

setInterval(function () {코드 ...}, 1000);

setInterval 함수 사용, 1000ms(1초) 마다 function 안의 코드 실행 (반복적)

 

 

 

자바스크립트 문법 vs 브라우저 사용법

---

var, let, const, if, function...

등은 자바스크립트 프로그래밍 문법이다.

 

document.querySelector(), alert(), setTimeout(), addEventListener()

등은 웹브라우저 사용법이다.

웹 개발을 잘하고 싶다면 자바스크립트 문법만 공부 할게 아니라 브라우저 사용법도 많이 알아야 좋은 웹 페이지를 만들 수 있다.

 

 

 

setInterval 함수 사용하기 예제

---

const timer = setInterval(함수, 1000);

      function 함수() {
        var sec = $("#sec").text();
        sec -= 1;
        if (sec != 0) {
          $("#sec").text(sec);
        } else {
          $(".alert").hide();
          clearInterval(timer);
        }
      }

setInterval() 멈추고 싶으면 함수를 변수에 넣은 후, 멈추고 싶을 때 clearInterval(변수); 와 같이 사용하면 된다.

 

 

 

정규표현식 (regular expresstion)

---

정규표현식을 이용하여 이메일, 비밀번호 등 형식 검사하는 데 사용할 수 있다.

/abc/

/…/ 안에 정규식을 표현해주면 된다.

그리고 test() 함수를 이용하여 /abc/.test(”abcdef”) abcdef 문자열을 검사한다.

test 함수 안에 정규식으로 검사하고 싶은 문자열을 넣어주면 된다.

/\\S+@\\S+\\.\\S+/  

 

 

 

캐러셀 만들기

---

슬라이드 되는 UI 들을 캐러셀 이라고 한다.

one-way 애니메이션 만들기

1. 애니메이션 시작 전 화면 만들기
2. 애니메이션 종료 후 화면 만들기
3. 언제 종료화면으로 변할지 JS 코드짜기
4. transition 추가하기

다음과 같이 이미지 배치

<div style="overflow: hidden">
    <div class="slide-container">
      <div class="slide-box">
        <img src="car1.png">
      </div>
      <div class="slide-box">
        <img src="car2.png">
      </div>
      <div class="slide-box">
        <img src="car3.png">
      </div>
    </div>
 </div>

overflow: hidden 을 통해 오른쪽으로 길게 빠져나온 이미지 보이지 않도록 설정

.slide-container {
  width: 300vw;
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

그리고 다음과 같이 css 값 설정하여 화면에 맞게 배치

• vw 단위는 브라우저 폭에 비례한 단위이다. 100vw는 브라우저 폭의 100%

html 요소를 왼쪽으로 이동시킬 때, margin-left 아니면 transform 속성 사용하면된다.

transform 이 애니메이션 작업할 때 좀 더 효과적

캐러셀의 translateX 속성을 애니메이션 할 수 있습니다. 우리가 좋아하는 디자인을 정확하게 실행할 수 있으므로 매우 융통성이 있을 것입니다. translateX는 CSS의 left 속성과 달리 디바이스의 GPU에 의해 처리되기 때문에 성능 기준에도 매우 적합합니다.

 

 

버튼 눌렀을 때 css 속성 바꾸는 이벤트처리

---

	$(".slide-1").on("click", function () {
        $(".slide-container").css("transform", "translateX(0vw)");
      });
      $(".slide-2").on("click", function () {
        $(".slide-container").css("transform", "translateX(-100vw)");
      });
      $(".slide-3").on("click", function () {
        $(".slide-container").css("transform", "translateX(-200vw)");
      });

 

다음 버튼 눌렀을 때 다음 사진으로 변경하기

---

     $(".slide-next").on("click", function () {
        if (now == 1) {
          $(".slide-container").css("transform", "translateX(-100vw)");
          now = 2;
        } else if (now == 2) {
          $(".slide-container").css("transform", "translateX(-200vw)");
          now = 3;
        } else if (now == 3) {
          $(".slide-container").css("transform", "translateX(0vw)");
          now = 1;
        }
      });

 

 

사진 갯수와 상관없이 잘 동작하는 코드 ( 확장성 좋은 코드 )

---

$(".slide-next").on("click", function () {
        $(".slide-container").css("transform", `translateX(-${now}vw)`);
        now += 100;
        if (now >= numPhoto) {
          now = 0;
        }
      });

백틱(``) 안에 작성하여 변수를 직접 문자열에 반영

다음과 같이 작성하면 사진의 갯수가 4,5,6…개로 늘어나더라도 numPhoto 변수만 만져주면 코드를 쉽게 확장할 수 있기에 전의 코드보다 확장성이 좋은 코드라고 할 수 있다.

항상 모든 코드는 다음과 같이 짜야한다

1. ui 만드는 4-step
2. 배운 자바스크립트 문법을 어디다 쓰는지
3. 한글로 코드짜라는거