[JS] Level1 6-10강 정리

ByeolGyu·2024년 6월 16일
JavaScript

JavaScript

목록 보기
2/17

✔ 서브메뉴 & classList (6강)

- Bootstrap

  • <head> 안에
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  • <body> 안에
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

- NavBar & 서브메뉴

◦ NavBar

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

◦ NavBar 버튼 → 서브메뉴 보이도록

  • class 탈부착식으로 구현 가능

복수의 클래스 네임

  • 클래스 네임을 여러개 사용 할 때 띄어쓰기 후 클래스명 적음
<ul class="list-group show">

css

  • 평소에 .list-group이 붙은 요소는 none으로 숨겨놓고
    show라는 클래스를 부착하면 block으로 보여주는 식
.list-group {
  display : none
}
.show {
  display : block
}

버튼 클릭시 클래스명 추가 / 제거

  • 추가 : 셀렉터로찾은요소.classList.add('클래스명')
  • 제거 : 셀렉터로찾은요소.classList.remove('클래스명')
  • 토글 : 셀렉터로찾은요소.classList.toggle('클래스명')

class="navbar-toggler" 가진 요소를 클릭하면 class="list.group"인 요소에 show라는 클래스명 추가

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.add('show');
});

class="navbar-toggler" 가진 요소를 클릭하면 class="list.group"인 요소에 show라는 클래스명이 있으면 제거, 없으면 추가

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

- querySelector

  • getElementById()
    : id는 특성상 같은 아이디를 사용하지 않아 고유함

  • getElementsByClassName()
    : 일치하는 class가 들어있는 모든 html 요소를 찾아 그 중 몇번째 요소를 바꿀지 순서를 붙여줌

	<script>
		<p class="title1"> 테스트1 </p>
		<p class="title1"> 테스트2 </p>
		<script>
 			 document.getElementsByClassName('title1')[0].innerHTML = '안녕';
	</script>

  • querySelector()
    : 맨 위의 한 개 요소만 선택함 css 셀렉터 문법 사용 가능
    - css에서 마침표는 class 라는 뜻, #은 id라는 뜻

  • querySelectorAll()
    : 해당하는 요소를 모두 찾아서 [ ]안에 담아줌
    클래스가 중복으로 여러개 있는데 X번째 요소를 선택하고 싶은 경우 사용
    -

✔ jQuery(7강)

  • JQuery는 html 조작을 쉽게 바꾸어주는 라이브러리
  • 긴 자바스크립트 코드를 짧게 적을 수 있음

jQuery 설치

  • jQuery cdn 검색
  • jQuery 3.x 버전 <script> 태그를 찾아서 html 파일에 추가
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  • jQuery가 설치된 곳 하단에서 jQuery 문법 사용 가능!
    (상단에 jQuery 사용하면 적용안됨)

jQuery 예시

// jQuery 사용 전
document.querySelectorAll('.hello')[0].innerHTML="안녕";
        document.querySelectorAll('.hello')[1].innerHTML="안녕";
        document.querySelectorAll('.hello')[2].innerHTML="안녕";
        
// jQuery 사용 후
 $('.hello').html("hi");
 
// 스타일 변경, 클래스명 추가•제거 등도 가능
$('.hello').css('color', 'red');
$('.hello').addClass('show');
$('.hello').removeClass('클래스명');
$('.hello').toggleClass('클래스명');

주의점

  • jQuery 셀렉터로 찾으면 jQuery 함수를 뒤에 붙여야 함

jQuery 이벤트 리스너

  • addEventListener 대신 on 사용 (단, $()로 사용한 것에만)
// jQuery 사용 전
document.querySelector('#test-btn').addEventListener('click', function(){});

// jQueyr 사용
$('#test-btn').on('click', function(){		
         $('.hello').html("메롱");
 })

jQuery UI 에니메이션

$('#test-btn').on('click', function(){
       $('.hello').hide(); 		//diaplay : none과 비슷	
       $('.hello').fadeOut();	// 서서히 사라짐
       $('.hello').slideUp();	// 줄어들며 사라짐
 })
  • show() fadeIn() slideDown() fadeToggle() 등 사용 가능

✔ 모달창만들기 & 간단한 애니메이션(8강)

jQuery로 모달창 띄우기

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

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

// javaScript
	document.querySelector('#close').addEventListener('click', function (){
            document.querySelector('.black-bg').classList.remove('show-modal');
        });
        
// jQuery
        $('#close').on('click', function(){
            $('.black-bg').removeClass('show-modal');
        });
      </script>

one-way 일방향 애니메이션

  1. class로 시작스타일 만들기
  2. class로 최종스타일 만들기
  3. JS 코드 - 원할 때 최종스타일로 변화주기 위해
  4. 시작스타일에 transition 추가

✔ 폼만들며 배워보는 if else (9강)

  • <form>은 서버로 유저 정보를 전송하기위해 사용함
  • 전송버튼 누르면 폼 전송이 되며 action에 적은 url로 이동
  • 공백확인
    document.getElementById('firstInput').value == ''
    • form 전송 시 submit이라는 이벤트도 함께 발생함
      → 이벤트 리스너 작성 시 form태그를 찾고 click대신 submit 작성해도 됨
      $('form').on('submit', function(){})

✔ else if 문법 (10강)

form 전송 막기

  • 이벤트리스너 콜백함수에 e라는 파라미터 추가해주고
    e.preventDefault()

공백검사 & 글자수 검사

  • 전송버튼 누를 때 아이디랑 패스워드 둘 다 공백검사
    .value == ''

  • 전송버튼 누를 때 입력한 비번이 6자 미만이면 알림띄우기
    .value.length < 6

<div class="black-bg">
        <div class="white-bg">
          <h4>로그인하세요</h4>

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

        </div>
    </div> 

    <script>
        $('form').on('submit', function(e){
            if (document.getElementById('firstInput').value == ''){
                alert("아이디를 입력하세요.")
                e.preventDefault(); // 폼 전송 막음
            } else if (document.getElementById('secondInput').value == ''){
                alert("비밀번호를 입력하세요.")
                e.preventDefault();
            } else if (document.getElementById('secondInput').value.length < 6){
                alert("비밀번호는 6자리 이상 입력하세요.")
                e.preventDefault();
            } 
        }); 
    </script>

코딩애플 JavaScript 입문과 웹 UI개발

profile
ByeolGyu
ByeolGyu
이전 포스트

[JS] Level1 1-5강 정리

다음 포스트

[JS] Level1 11-14강 정리

0개의 댓글