JavaScript Lv.1

Suji Park·2022년 8월 23일
JavaScript코딩애플
0

코딩애플

목록 보기
1/7
post-thumbnail

UI만드는 Step

  1. HTML/CSS로 미리 디자인
  2. 필요할 때 보여달라고 JS 코드 짜기
  • Onclick="js로 원하는 내용기재"
    <div class="alert-box" id="alert">알림창임</div>
    <button onclick="document.getElementById('alert').style.display='block'">버튼</button>
    결과물

JS의 function 문법

= 긴 코드 짧은 단어로 축약

  1. function 작명은 어떤 코드인지 알아들을 수 있도록 구체적인게 좋다.
    • 함수명 영어 작명 시엔
      (1) 소문자 시작
      (2) camelCase
  2. 긴 코드 재사용이 잦을 때도 편리하다.
<body>
    <div class="alert-box" id="alert">알림창임
        <button onclick="document.getElementById('alert').style.display='none'">닫기</button>
    </div>
    <button onclick="알림창열기">버튼</button>

    <script>
        function 알림창열기() {
            document.getElementById('alert').style.display='block'
        }
    </script>
</body>

코드 짤 때 자주 겪는 에러 메세지
1. 셀렉터 오타 주의
- 개발자도구 console 탭에서 error 중 of null 대부분 셀렉터 오타이다.
2. 그냥 기본 문법 오타

function의 Parameter

비슷한 함수가 많으면 그냥 가변적인 부분에 파리미터(인자)를 뚫어놓는다.
인자자리에 원하는 것을 넣음으로써 함수하나로 다양한 코드 실행가능해진다.

  • 파라미터 작명은 아무렇게나 가능
  • 파라미터 여러개 가능 ,로 구분

'문자는 따옴표 안에'
숫자는 그냥써도 된다. 

    <div class="alert-box" id="alert">알림창임
        <button onclick="알림창열기('block');">닫기</button>
    </div>
    <button onclick="알림창열기('none');">버튼</button>

    <script>
        function 알림창열기(구멍) {
            document.getElementById('alert').style.display=구멍;
        }
    </script>

복잡하면 한글부터 짜고 코드로 옮겨보기~

innerHTML과 innerText의 차이

  • element.innerText;
    이 속성은 element 안의 text 값들만을 가져옵니다.

  • element.innerHTML;
    innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다. HTML에 속성이 들어가있었으면 함께 적용 된다.

classNameSelector

  • class로찾기 가능
    getElementsByClassName('클래스네임')[인덱싱]
    • ID경우에는 중복을 허용하지 않으나, class는 중복이 가능하기때문에 인덱싱을 하는 것이 좋다.
    • 인덱싱은 0부터 시작

addEventListener

내가 원하는 요소를 찾고, addEventListener('event명', function(){
	실행할 함수;
})
  • 파라미터자리에 들어가는 함수 = 콜백함수
  • 코드를 순차적 실행할 때 가끔보임

마우스클릭 click, 마우스 갖다대기 mouseover 키입력keydown, 스크롤scroll 등 모두가 이벤트다.

SubMenu & classList

  • CSS는 하단에 써있을수록 우선 적용

  • class 부착식으로 개발하면

    • 애니메이션 추가 쉬움
    • 나중에 재사용 편리하다.

  • 원하는 요소에 클래스명 추가하는 방법
    요소 찾아오기.classList.add('추가할클래스명');

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

querySelector()

  • css 문법 그대로 사용할 수 있는 셀렉터
  • document.querySelector('.navbar-toggler')
  • 맨 위에 나오는 한 개만 찾아준다.

전체를 찾고싶으면 해당하는 모든 요소를 다 찾아서 배열로 가져온다.
인덱싱을 하면 선택가능하다.

  • document.querySelectorAll('.navbar-toggler')[0]

    toggle: show가 있으면 제거, 없으면 추가하라는 듯

jQuery

HTML 조작문법을 쉽게 바꿔주는 라이브러리들:jQuery, React, Vue 등
$ querySelector
addEventListener on
jQuery는 추가적으로 설치해서 사용할 

        // document.querySelector('#test-btn').addEventListener()
        $('#test-btn').on('click', function(){
            $('.hello').hide()
        })

  • 간단한 UI용 애니메이션 편리
    slideup()
    fadeup()
    hide() = display none의 효과와 같음
    html() = innerHTML 효과와 같다.
    on() = addEventListener()

  • 주의사항

  • $('셀렉터')로 찾으면 jQuery 함수만 붙일 수 있다.
  • querySelector로 찾으면 JavaScript로만 붙일 수 있다.
  • 모달창은 바디태그 시작하자마자 넣어야 잘 보인다.
    css에 position: fixed와 z-index: 5 를 주면 맨 앞에 보인다.

모달창에 애니메이션 추가하기

UI에 애니메이션 추가하려면

  • 성능때문에, 가능하면 CSS만으로 처리하는게 좋다.
  • 애니메이션 만드는 법칙
  1. one-way UI 애니메이션 만드는 법
  • A상태 -> B상태 일방향
    (1) 시작스타일
    (2) 최종스타일(class로 만들어놓기)
    (3) 원할 때 최종스타일로 변하라고 JS 코드 짜기
    (4) transition 추가

visibility:hidden 애니메이션을 만들 때 display:none을 대체하는 것

  • 자리를 차지하면서 투명도가 0이다.
  • visibility:visible; 는 display: block과 비슷하다
  1. 위에서 내려오는 애니메이션
    slide-up slide-down : hieght 속성 조절 overflow:hidden 조절

모달창 안에 form만들기

  • form
    서버로 유저정보 전송하려고 쓰는 것이다.
    <form action = "url">

  • button
    전송하는 button에 type은 submit을 넣어주고
    나머지 button에 type="button"을 줘야 오류나지 않는다. 

<button type="submit" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>

  • 전송버튼 누를 때 첫째 input에 입력된게 없으면 alert 띄우기

  • 조건문 쓰는 법
    if(조건){조건이 참일 때 실행할 코드}
    else{위 조건이 참이 아닐 때 실행할 코드}

else if문법: 조건식을 연달아 쓰고 싶으면 사용, 여러개를 해도 상관없다.

  • 앞의 조건식이 참이면 뒤에 있는 조건식은 읽지않는다. if else if

  • if if 면 앞의 조건식과 상관없이 둘째 if문도 실행된다.

  • 비교연산자

연산자내용
==같다.
<크다
>작다
<=크거나 같다.
>=작거나 같다.
  • 유저가 input에 입력한 값
    document.getElementById().value
  • 폼 전송 막으려면
    - JS event.preventDefault()
    - jQuery e.preventDefault()
  • 비번이 6자 미만이면 더 길게 입력하라고 안내문 띄우기
    - .length글자의 개수 세기 
       else if (document.getElementById('password').value.length < 6) {
                alert("비밀번호가 6자 미만입니다. 더 길게 입력하세요.");
                event.preventDefault(); 
            }
  • <script> 안의 코드는 새로고침할 때마다 한번씩 실행된다.

event (Iuput change)

  • addEventListener
    • input 이벤트는 에 입력한 값이 변할 때마다 실행된다.
    • change 이벤트는 에 입력한 값이 변한채로 포커스가 바뀔 때 실행된다.

or and

  • 실은 if문 안에 boolean(true/false) 넣어야 잘 작동한다.
  • 비교연산자를 써도 true/false로 판정하기 때문에 작동하는 것
  • type = 자료의 형태를 의미한다.
  • 자료가 문자인지 숫자타입인지 boolean타입인지 그에 대한 형태

  • 또 다른 연산자

    • 다름을 비교하고 싶으면 !==
    • 엄격한 비교 === : 타입까지 같아야 같다고 판정한다.
    • 느슨한 비교 ==

  • 조건 2개 이상을 동시에 비교하고 싶으면

    • && and 둘다 참이면 전체를 참으로 해준다.
    • || or 둘 중 적어도 하나가 참이면 전체를 참으로 판단.

다크 모드 with 변수 문법

  • badge 클릭횟수가 홀수면 내부 글자를 Light로 변경
    badge 클릭횟수가 짝수면 내부 글자 Dark로 변경

  • 변수문법

    • 자료 잠깐 저장하는 변수 문법
      var 변수이름 = 변수에 넣을 값;
    • 등호=는 대입할당일뿐이다.
    • 변수에는 모든 자료 다 넣을 수 있다.
    • 변수에 +1 하는 법
      • 변수++
      • 변수+= 1
      • 변수 = 변수 +

    나눈 후 나머지 구해주는 나머지 연산자 %
    홀수의 경우 %2 == 1
    짝수의 경우 %2 == 0

진짜 다크모드는 class 미리 만들어 놓으면 된다.

Bootstrap UI들은 스타일을 바꾸려면 class명을 수정해야 한다.

  • 변수의 선언, 할당, 범위 

    	* `var 이름;`  변수의 선언 
		* 변수를 선언만 했을 때는 undefined가 출력된다. 

	* `var **이름 = 'kim';**` 변수의 할당

    * 재할당은 자유이다.

    • 변수의 범위 
      function 함수() {
var 이름 = 'kim';
}
      • 함수 안에서 변수를 만들면 사용 가능 범위는 함수 내부이다.
      • 함수 바깥에서 변수를 만든 것은 함수 안에서 사용가능하다.
  • 변수의 종류
    * let 장점: 만든 변수 또 만드는 것을 방지해준다.
    • const 장점: 변하면 안되는 값을 보관하기 좋다.
      varletconst
      재선언O재선언X재선언X
      재할당O재할당O재할당X
      function 안에도 들어갈 수 있음{중괄호에서만 쓸 수 있음}{중괄호에서만 쓸 수 있음}
profile
Suji Park
천방지축😛 얼레벌레🙄 빙글빙글🙃 돌아가는 수지의 코드~🎵
다음 포스트

JavaScript Lv.2

0개의 댓글