JS에 if문 적용해서 로그인 창, 다크모드, time

if (3 < 1){
  console.log('안녕')
} else {
  console.log('안녕2')
}

 

 JS의 if문 문법은 이런 구조이다.

 

and는 &&

or는 ||

 

그리고 ===도 있는데 type도 같은지 비교해준다. 1과 '1'이 ==인지에 비교하면 true이지만

===에서는 false가 나온다.  (그래서 !==도 있다.)

 

 

삼육구 게임을 예로들면

 

        function 삼육구(N) {
            if (N % 9 == 0) {
                console.log('박수 박수')
            } else if (N % 3 == 0) {
                console.log('박수') 
            } else {
                console.log('통과');
            }
        }

삼육구(숫자) 입력시 3의 배수에 대하여 실행된다.

 

 

 

 

 

그러면 기존에 만든 것에 대하여

 

        <div class="black-bg">
            <div class="white-bg">
              <h4>로그인하세요</h4>   <!-- 로그인 폼 직접 작성하기보단 이쁜 bootstrap쓰자-->
              <form action="success.html"> 
     <!-- form = 서버로 유저정보 전송하기위해 사용. 보통 url이지만 여긴 로컬 success.html-->
                <div class="my-3">
                  <input type="text" class="form-control">
                 </div>
                 <div class="my-3">
                   <input type="password" class="form-control">
                 </div>
                 <button type="submit" class="btn btn-primary">전송</button> 
                 <!--전송때만 submit 형식 유의!-->
                 <button type="button" class="btn btn-danger" id="close">닫기</button>
              </form> 
            </div>
          </div>
          
          
          
          
           <div class="main-bg">  <!--대문-->
            <h4>Shirt on Sale</h4>
            <button id="login" class="displayAlert">로그인</button>
          </div>

다음의 폼과 list 밑에 대문을 추가했을 때

 

 

전송버튼누르면 저기 <input>에 입력된 값이 공백이면 알림띄워주세요

 

를 구현해보자.

 

 

 

참고로 간단한 알림팝업 띄우고 싶으면 alert('어쩌구')를 쓰자

 

 

이런 화면으로 사용자에게 간단한 안내문을 간편하게 띄울 수 있다.

 

 

            $('.btn-primary').on('click', function(){
                if($('#IDinput').val() ==='' || $('#PWinput').val() === ''){
                    alert('공백으로 제출할 수 없습니다.');
                }
            })

이렇게 작성한다면 .form-control에 해당하는 두 input 중 하나라도 공백인 경우 알림창이 뜬다.

물론 이는 알림창만 띄웠을 뿐 전송완료라는 페이지로 여전히 넘어가지는 상태이다.

여기서 .val()은 원래 .value로 input에 입력된 값을 받는 역할을 한다. 

 

 

 

 

 

 

이번엔 다크모드를 만들어보자. 다크모드는 클래스 DARK를 기존에 각각붙여주는 방식으로 구현한다.

 

              <span class="badge bg-dark">Dark 🔄</span>

우선 이 코드를 navbar-bran 의 navbar밑줄에 넣자.

 

 

여기서 변수 선언에 대해 알자

 

자료를 잠깐 저장하고 싶으면 변수문법을 쓴다.

var 변수명 = 넣을값; 

이러면 된다. 변수명은 camelCase를 사용한다.

 

기존값에 +1하는 개념

 

변수명 = 변수명 + 1

변수명 += 1

변수명 ++

 

다 같은 의미이다.

 

var count = 0;

$('.badge').on('click', function(){
  count += 1;
  if (count % 2 == 1) {
    $('.badge').html('Light');
  } else {
    $('.badge').html('Dark')
  }
});

 

우선 이것은 다크모드를 눌렀을때 해당 버튼이 dark, light가 홀수, 짝수번 클릭에 따라 바뀌는 형태를 구현한 것이다.

여기서 실제 다크모드를 구현하기위해서는 

 .dark {
  background: black;
  color: white
 }

이런 클래스 탈부착은 기본이고

몇몇 css 디자인에 대해 세부적인 조정이 필요하다. (CSS쪽으로 가는 개념)

 

 

(참고) Bootstrap 스타일이 적용된 요소는 css 덮어쓰기가 어려울 수 있습니다.

bg-dark 클래스명을 bg-light 이런 식으로 바꾸거나 

아니면 붙어있던 class를 제거하거나 그러면 됩니다

 

 

 

 

변수선언은 var말고도 let, const도 있다.

let 거주지 = 'seoul';
const 가격 = 3000;

 

그러나 let은 변수를 중복 선언하는걸 차단한다. (var은 중복 선언 可)

 

const는 중복선언도 막고, 값에대한 재 할당(=)도 차단한다. 즉, 한번 할당된 값은 수정되지 않는다.

 

 

 

 

JS에는 또한 이러한 코드가 있는데

setTimeout(function(){ 실행할코드~ }, 기다릴시간);

시간은 ms단위이다. 예를들면

 

setTimeout(function(){ 
  console.log('안녕')
}, 1000);

 

라고 작성시 1초 후에 콘솔창에 안녕이 뜨는 개념이다.

 

 

<div class="alert alert-danger">
  5초 이내 구매시 사은품 증정
</div>

<script>
  setTimeout(function(){
    $('.alert').hide();
  }, 5000);

</script>

 

그래서 이와같이 5초가 지나면 사라지도록 설정할 수도 있다.

 

 

 

 

setInterval은 특정시간마다 실행시키는 것이다.

setInterval(function(){ 
  console.log('안녕')
}, 1000);

1초마다 '안녕'을 출력한다.

 

 

 

 

그렇다면 5초 후에 사라지는, 시간이 카운트되는 구조는 다음과 같이 작성할 수 있다.

 

    <div class="alert alert-danger">
        <span id="timer">5</span>초 이내 구매시 사은품 증정

      </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        var count = 5;
        setInterval(function() {
            count -= 1;
            if (count > 0){
                $('#timer').html(count);
            } else if (count == 0) {
                $('.alert').hide();
            }

 

여기서 <span>으로 숫자부분을 지정하여 해당 숫자가 바뀌도록 id를 지정해주었다.

count값을 대입하기위해 밖에서 변수선언을 하고 -1을 지정해주었다.

 

count가 0이되는 순간, 해당되는 글자는 모두 사라진다.

 

그러나 이 순간에도 timer는 계속 작동하고있으므로 이를 멈추려면 기존 타이머 함수도 변수선언을 한 후에

clearTimeout(변수) 혹은 claerInterval(변수) 실행해야한다.

 

 

    <div class="alert alert-danger">
        <span id="timer">5</span>초 이내 구매시 사은품 증정

      </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        var count = 5;
        var timeCount = setInterval(function() {
            count -= 1;
            if (count > 0){
                $('#timer').html(count);
            } else if (count == 0) {
                $('.alert').hide();
                clearInterval(timeCount);
            }
        },1000);

 

 

그래서 이렇게 실행가능하다.