자바스크립트 기초 (2)

새벽로즈·2023년 9월 18일

TIL 자바스크립트

TIL

목록 보기

10/72

코딩애플(https://codingapple.com/course/javascript-jquery-ui/)에서 강의를 듣고 공부 목적으로 적은 정리글입니다.

부트스트랩 라이브러리 CDN (v 5.3)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

부트스트랩은 미리 만들어 놓은 UI들을 복사붙여넣기 해서 사용이 가능함

네비 바 만들기

네비 바는 부트스트랩의 UI를 가져와서 붙여넣기하고 서브메뉴를 숨겨둔다.

  <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>

<script>
  document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
    document.getElementsByClassName('list-group')[0].classList.toggle('show')
  })
</script>

☞ 'show'라는 클래스를 추가하면 display:block이 되고 사라지면 기존 display:none이 되는 식으로 만든다.

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){}) : 문서의 클래스이름이 'navbar-toggler'인 첫번째 인덱스를 찾아서 클릭하면 다음 함수가 실행된다.
document.getElementsByClassName('list-group')[0].classList.toggle('show') : 문서의 클래스이름이 'list-group'인 첫번째 인덱스를 찾아서 'show'라는 클래스를 토글(클래스 추가 및 제거)시킨다.

Queryselector

document.querySelector('.list-group-item') : list-group-item 클래스의 맨 위의 첫번째 한가지만 찾아줌

document.querySelectorAll('.list-group-item')[1] : 모든 list-group-item 클래스를 찾아서 몇번째 클래스를 인덱스하면 됨

  document.querySelector('.navbar-toggler').addEventListener('click', function(){
    document.querySelectorAll('.list-group')[0].classList.toggle('show')
  })

☞ getElementsByClassName를 쿼리셀렉터로 바꿀 수 있음.

[주의할 점] : 쿼리셀렉터는 getElementsByClassName과 다르게 클래스.이나 아이디#이 있어야함.

제이쿼리

자바스크립트를 간소화해서 사용할 수 있음
1. querySelector('.nav-bar') 대신 $('.nav-bar')
2. addEventListener 대신 on

//html 변경
document.querySelector('.hello').innerHTML = '하이';
$('.hello').html('하이')

//컬러 변경
document.querySelector('.hello').style.color = 'red'
$('.hello').css('color','red') 

//클래스 추가
document.querySelector('.list-group').classList.add('show')
$('.list-group').addClass('show') //.removeClass(), .toggleClass()

//addEventListener
document.querySelector('.test_btn').addEventListener('click', function(){})
$('.test_btn').on('click', function(){})

//사라지게 하기
$('.hello').hide();

☞ 순수 JS 대신 제이쿼리로 쓰면 위 처럼 반으로 줄어들게 쓸수 있다.

모달창

모달창은 body태그 맨 앞에 띄움.
1번째 방법

<button class="btn_login">로그인하기</button>

  <div class="black-bg">
    <div class="white-bg">
      <h4>로그인하세요</h4>
      <button class="btn btn-danger" id="close">닫기</button>
    </div>
  </div> 

<script>

document.querySelector('.btn_login').addEventListener('click',function(){
  document.getElementsByClassName('black-bg')[0].style.display = 'block';
})

document.querySelector('#close').addEventListener('click', function(){
  document.getElementsByClassName('black-bg')[0].style.display = 'none';
})
</script>

2번째방법

<button id="login">로그인하기</button>

<script>
document.getElementById('login').addEventListener('click',function(){
  document.querySelector('.black-bg').classList.add('show-modal')
})

//열기
$('#login').on('click',function(){
  $('.black-bg').addClass('show-modal')
})

//닫기
$('#close').on('click',function(){
  $('.black-bg').removeClass('show-modal')
})

</script>

###one-way UI애니메이션
1. 시작스타일
2. 최종스타일
3. 원할때 최종 스타일 변하기
4. transtion 추가하기

[CSS]
display : none은 아예 없던것 처럼
visibility: hidden은 숨겨두기

.black-bg {
  visibility: hidden;
  opacity: 0;
  transition:  all 1s;
}

.show-modal{

  visibility: visible;
  opacity: 1;
}

☞ transition: all 1s;은 시작 스타일에 넣어야하고, 모두 1초에 걸쳐서 애니메이션 된다.

폼 태그

전송 버튼은 타입이 'submit'이여야하고 닫기 버튼의 타입은 일반 'button'이여야한다.
form action은 서버로 유저 정보를 전송하기 위해서 사용함

IF 조건문

특정 조건이 충족되면 사용할 수 있음
if (조건){
조건이 참이면 실행될 코드
} else {
조건이 거짓이면 실행될 코드
}

alert

alert('안녕');

자바스크립트 함수인 alert를 입력하면 웹브라우저에 '안녕'이라는 모달창이 뜬다.

사용자가 입력한 값을 가져오는것
document.getElementById('email').value;

document.querySelector('#send').addEventListener('click',function(e){ //#send를 클릭했을때
  if(document.getElementById('email').value == ''){     //email의 값이 없다면
    alert('아이디를 입력해주세요.') //아이디입력해달라는 창이 뜸
    e.preventDefault(); //폼 전송 막기 : 이게 없으면 바로 전송완료로 이동됨
  };
});

여러 조건문을 쓰고 싶으면 else if

    if (1 == 3) {
      consol.log('맞아요')
    } else if ( 3 == 3){
      console.log('맞아요2')
    }

else if는 여러번 사용 가능

      <form action="success.html">
        <div class="my-3">
          <input type="text" class="form-control" id="email">
        </div>
        <div class="my-3">
          <input type="password" class="form-control" id="pw">
        </div>
        <button type="submit" class="btn btn-primary" id="send">전송</button>
        <button type="button" class="btn btn-danger" id="close">닫기</button>
      </form>


document.querySelector('#send').addEventListener('click',function(e){
  if(document.getElementById('email').value == ''){    
    alert('아이디를 입력해주세요.')
    e.preventDefault();    
  }

  if(document.getElementById('pw').value == ''){
    alert('비밀번호를 입력해주세요.')
    e.preventDefault();    
  }
  if(document.getElementById('pw').value.length < 6){
    alert('비밀번호가 짧습니다')
    e.preventDefault();    
  }
});