Javascript 정리 ②

영긔·2024년 4월 1일
CSSJavaScriptfrontendhtml
1

📒 Vanilla JS

목록 보기
2/8
post-thumbnail

📌 로그인창 띄우기

html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <button class="btn btn-danger" id="close">닫기</button>
        </div>
      </div>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>
      <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>
      <button id="login">로그인</button>
      <p class="hello">안녕</p>
      <button id="test-btn">버튼</button>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        // document.querySelector('.list-group')
        $('.hello').html('바보');
        $('.hello').css('color','red');
        $('.hello').addClass('show');
        $('#test-btn').on('click',function(){
            // $('.hello').hide(); 사라지게 하기
            // $('.hello').fadeOut(); 페이드아웃되게
            $('.hello').slideUp();
        })
        document.getElementsByClassName('navbar-toggler')[0]
        .addEventListener('click',function(){
            document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })
        document.getElementById('login').addEventListener('click',function(){
            document.querySelector('.black-bg').classList.add('show-modal')
        })
        document.getElementById('close').addEventListener('click',function(){
            document.querySelector('.black-bg').classList.remove('show-modal')
        })
    </script>
  </body>
</html>
document.querySelector('.black-bg').classList.add('show-modal')

black-bg의 클래스에 show-modal을 추가하도록 한다.

document.querySelector('.black-bg').classList.remove('show-modal')

black-bg의 클래스에 show-modal을 제거하도록 한다.

css

#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
  margin-bottom: 2rem;
}

#alert-close-btn {
  display: none;
}

.list-group {
  display: none; /*안보이도록 함*/
}
.show {
  display: block; /*보이도록 함*/
}

.black-bg {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  display: none;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show-modal {
  display: block;
}

이런식으로 작성해 로그인 창을 띄우거나 사라지게 할 수 있다.

결과화면

📌 애니메이션 추가

.black-bg {
  //(생략)
  visibility: hidden;//안보이게
  opacity: 0;
  transition: all 1s;
}

.show-modal {
  visibility: visible;//보이게
  opacity: 1;
}

css를 이런식으로 변경하여 애니메이션을 추가할 수 있다. 애니메이션을 만들기 위해서는 display보다 visibility를 사용하는 것이 좋다. opacity는 투명도를 뜻한다. 0은 아예 안보임, 1은 불투명도 100%를 뜻한다.

📌 공백검사하고 form태그 활용하기

html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css" />
    <title>Hello, world!</title>
  </head>
  <body>
    <div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>
          <form action="success.html">
            <div class="my-3">
              <input type="text" id="email" class="form-control">
             </div>
             <div class="my-3">
               <input type="password" id="pw" class="form-control">
             </div>
             <button type="submit" class="btn btn-primary" id="send">전송</button>
             <button type="button" class="btn btn-danger" id="close">닫기</button>
          </form>
        </div>
      </div>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
          <span class="navbar-brand">Navbar</span>
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>
      <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
      </ul>
      <div class="main-bg">
        <h4>Shirts on Sale</h4>
        <button id="login" class="btn btn-danger">로그인</button>
      </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        
        document.getElementsByClassName('navbar-toggler')[0]
        .addEventListener('click',function(){
            document.getElementsByClassName('list-group')[0].classList.toggle('show');
        })
        document.getElementById('login').addEventListener('click',function(){//로그인 버튼 누를시 모달창뜸
            document.querySelector('.black-bg').classList.add('show-modal');
        })
        document.getElementById('close').addEventListener('click',function(){//닫기 버튼 누를시 모달창 닫힘
            document.querySelector('.black-bg').classList.remove('show-modal');
        })
        document.querySelector('form').addEventListener('submit',function(e){//e를 넣어주어야 preventDefault를 사용할 수 있음
            if(document.getElementById('email').value == ''){//이메일 입력안했을시
                e.preventDefault()//SUBMIT으로 자동제출되는 것을 방지
              alert('이메일을 입력하세요');//alert창 뜸
            }
            if(document.getElementById('pw').value == ''){//비번 입력 안했을시
                e.preventDefault()//SUBMIT으로 자동제출되는 것을 방지
              alert('비밀번호를 입력하세요');
            }else if(document.getElementById('pw').value.length<6){//비번 6자 미만일 경우
                e.preventDefault()
              alert('비밀번호를 6자 이상 입력하세요');
            }
        })
    </script>
  </body>
</html>

success.html (form 제출시 보이는 화면)

전송완료~ //submit할 경우 뜨는 창

css

#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
  margin-bottom: 2rem;
}

#alert-close-btn {
  display: none;
}

.list-group {
  display: none;
}
.show {
  display: block;
}

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

.show-modal {
    display: block;
  /* visibility: visible;
  opacity: 1; */
}
.main-bg{
    padding: 100px 20px;
    background: lightgrey;
}

이런식으로 작성하면 화면은 아래와 같이 동작한다.

🔰 제출 요건을 맞추지 못할 경우

🔰 제대로 입력한 경우

submit.html 화면이 뜨는 것을 확인할 수 있다.

📌 기타

🔎 input vs change

document.getElementById().addEventListener('input',function(){})

input은 입력할 때마다 실행

document.getElementById().addEventListener('change',function(){})

change는 입력 후에 커서를 잃을 때마다 실행

🔎 엄격한 비교 vs 느슨한 비교

엄격한 비교시에는

if (1===1)

느슨한 비교시에는

if (1=='1')

🔎 truthy vs falsy 자료

truthy 자료들
0 제외 숫자, 문자, [], {}

falsy 자료들
0, '', null, undefined, NaN

📌 예제

💡 369게임 만들기 (3의 배수일 경우 OK)

        const num = prompt("숫자를 입력하세요");
        if(num%3==0){
            console.log('3의 배수입니다');
        }else {
            console.log('3의 배수가 아닙니다.')
        }

💡 369 게임 심화 버전 (9의 배수일경우 박수2번, 3의 배수일 경우 박수 1번)

        const num = prompt("숫자를 입력하세요");
        if(num%9==0){
            console.log('박수 2번');
        }else if(num%3==0){
            console.log('박수 1번');
        }else{
            console.log('통과');
        }

결과화면

💡 공인중개사 시험 예제

공인중개사 시험점수를 입력하면 합격인지 알려주도록 만들기
공인중개사 1차 시험은 2개 과목
과목마다 100점 만점이지만 두 과목 합해서 120점 이상이면 합격
한 과목이라도 40점 미만이면 불합격
과목 점수 2개를 파라미터로 입력하면 합격인지 불합격인지 여부를 콘솔창에 출력해라

두 과목 합해 120 이하 -> 불합격
120 이상일 경우
if 최소 한 과목 40점 미만 -> 불합격
else -> 합격

        var [num1, num2] = prompt("두 숫자를 입력하세요").split(" ");//공백으로 나눔
        num1 = parseInt(num1);//입력받은 값을 숫자로 변환해줌
        num2 = parseInt(num2);
        if (num1<0||num1>100||num2<0||num2>100){
            console.log('범위에 맞는 숫자를 입력해주세요');
        }
        else if (num1+num2<120) {
            console.log('불합격');
        } else{
            if(num1<40||num2<40){
                console.log('불합격');
            }else{
                console.log('합격');
            }
        }

🤔 주의점: parseInt를 사용해 입력받은 값을 숫자로 변환해주는 것을 잊지않기

😏 생각해 볼 점: parseInt()하면 정수로 변환 해주지만, Number()를 사용하면 소숫점까지 변환 해준다!

📌 Dark mode 만들기

html

<!doctype html>
<html lang="en">

<head id="head">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css" />
    <title>Hello, world!</title>
</head>

<body id="total">
    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <form action="success.html">
                <div class="my-3">
                    <input type="text" id="email" class="form-control">
                </div>
                <div class="my-3">
                    <input type="password" id="pw" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary" id="send">전송</button>
                <button type="button" class="btn btn-danger" id="close">닫기</button>
            </form>
        </div>
    </div>
    <nav class="navbar navbar-light bg-light">
        <div class="container-fluid">
            <span class="navbar-brand">JSShop</span>
            <span class="badge bg-white" style="color: black;" id="darkButton">Light 🔄</span>
            <button class="navbar-toggler" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <ul class="list-group">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
        <li class="list-group-item">A fourth item</li>
        <li class="list-group-item">And a fifth one</li>
    </ul>
    <div class="main-bg">
        <h4>Shirts on Sale</h4>
        <button id="login" class="btn btn-danger">로그인</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</body>

</html>

js

  var ifDark = 0;
  document.getElementById("darkButton").addEventListener("click", function () {
    ifDark++;
    if (ifDark % 2 == 1) {//다크모드
      document.querySelector(".badge").classList.remove("bg-white");
      document.querySelector(".badge").classList.add("bg-dark");
      document.querySelector(".badge").style.color = "white";
      document.querySelector(".badge").innerHTML='Dark 🔄';
      document.getElementById("total").classList.add("dark");
      document.querySelector(".navbar").classList.remove("navbar-light");
      document.querySelector(".navbar").classList.add("navbar-dark");
      document.querySelector(".navbar").classList.remove("bg-light");
      document.querySelector(".navbar").classList.add("bg-dark");
    } else if (ifDark % 2 == 0) {//라이트모드
      document.querySelector(".badge").classList.remove("bg-dark");
      document.querySelector(".badge").classList.add("bg-white");
      document.querySelector(".badge").style.color = "black";
      document.querySelector(".badge").innerHTML='Light 🔄';
      document.getElementById("total").classList.remove("dark");
      document.querySelector(".navbar").classList.remove("navbar-dark");
      document.querySelector(".navbar").classList.add("navbar-light");
      document.querySelector(".navbar").classList.remove("bg-dark");
      document.querySelector(".navbar").classList.add("bg-light");
    }

css

.dark{
    background: black;
    color: white;
}

이런식으로 작성하면 클릭을 홀수번 할때마다 다크모드가 켜지고 짝수번 클릭한다면 라이트모드로 돌아간다.

작동화면

📌 변수

🔎 var vs let vs const

var
재선언 가능, 재할당 가능
전역 범위, 함수 범위를 갖는다.

  var globalVar = 1 // 전역 범위

  function helloWorld() {
    var functionVar = 1 // 함수 범위
  }

globalVar은 전역범위여서 어디여도 참조가능하나, funtionVar은 함수범위이므로 해당 함수 안에서만 참조가능하다

  if (true) {
    var blockVar = '아긔영긔'
  }
  console.log(blockVar)
  // 아긔영긔

var는 전역범위, 함수범위만 갖기때문에 블록안에 선언되어도 블록 외부에서 사용할 수 있다. 그러나 let, const의 경우에는 블록 범위기 때문에 위와 같이 작성할 경우 에러가 뜬다.

🤔취약점: 재선언, 재할당이 가능하므로 의도적이지 않게 재정의되어 의도하지 않은 결과를 초래할 수 있음

let
재선언 불가능, 재할당 가능
블록 범위

    let greeting = "안녕";
    if (true) {
        let greeting = "잘가";
        console.log(greeting); // "잘가"
    }
    console.log(greeting); // "안녕"

이때, 블록 안의 greeting과 블록 밖의 greeting은 서로 다른 변수로 취급된다.

const
재선언 불가능, 재할당 불가능
블록 범위

profile
영긔
SKYDeveloper
이전 포스트

Javascript 정리 ①

다음 포스트

Javascript 정리 ③

0개의 댓글