자바스크립트 함수 및 정보 정리 - 2

모달창 코드는 body 안에서 제일 앞에다 놓기

 

애니메이션(fadeIn 등)은 css만으로 처리하는게 좋음(성능이 이것이 더 효율적임)

 

one-way UI 애니메이션 설정방법

1. 시작스타일

2. 최종스타일

3. 원할때 최종스타일로 변하라고 코드짬

4. transition 추가

opacity 투명도

visibility: hidden; 애니메이션에 적합, 모습만 숨기는 것

 

애니메이션 효과 - transition: all 1s; 부착 및 script에 addClass / removeClass 로 변경

.black-bg {

    width : 100%;

    height : 100%;

    position : fixed;

    background : rgba(0,0,0,0.5);

    z-index : 5;

    padding: 30px;

    visibility: hidden;

    opacity: 0;

    transition: all 1s;

  }

폼태그 안에 버튼 여러개 있을 때 일반 버튼은 타입을 버튼으로 해놓아야 문제 없음

          <button type="submit" class="btn btn-primary" id="forward">전송</button>

          <button type="button" class="btn btn-danger" id="close">닫기</button>

$('form').on('submit', function(e) {   // 폼태그 자체를 셀렉트로 선택하고 submit으로 막음

        if ($('#email').val().trim() == "") {

          alert("입력하세요.");

          e.preventDefault();   // 이걸로 막으면 폼태그 전송 안됨

        }

      })

$(“#email”).on(“input”, function() {  // input: 뭔가 작성할 때 발동, change는 바꾸고 커서를 다른 곳 찍을때 발동

})

 

엄격한 비교 “===” -> 1 === ‘1’ -> false

 

변수 : 함수 안에서 만든 변수는 함수 밖으로 탈출할 수 없다.

var

let : 재선언 불가, 재할당 가능, 범위 -> {모든 중괄호}

const : 재선언 불가, 재할당 불가, 범위 -> {모든 중괄호}

타이머 

      setTimeout(function(){ // 5000ms 후에 실행

        $('.alert-danger').hide();

      }, 5000)

 

      setInterval(function(){ // # 1000ms 마다 실행

        $('.alert-danger').toggle();

      }, 1000)

정규식

/abc/.test('abcde') : /안/ -> 정규식

/[a-z]/.test('abcdc') : a~z까지 하나가 들어있는지 확인

/[a-zA-Z]/.test('abcdcA') true

/[ㄱ-ㅎ가-힣]/.test('도레미') true 모든 한글이 들어있는지

\S : 아무 문자 1개라는 뜻, 특수기호 포함

^a : a로 시작하는지

a$ : a로 끝나는지

a|b : a 또는 b 포함하는지

 

\S+@\S+\.\S+ : 이메일, .은 특수기호기 때문에 앞에 백슬래시 포함, + 글자 여러개

if문 안에 정규식 작성하는 법

if (/\S+@\S+\.\S+/.test(email) == false) {

          alert("이메일 형식이 맞지 않습니다.");

          e.preventDefault();

        }

 

함수 

return 밑에 있는 코드는 실행되지 않는다.

 

.toFixed(몇째자리) -> 반올림 함수

parseFloat(num) -> 문자를 숫자로 바꿈

 

“window” 안에 “document”

 

(css)

overflow-y: scroll; 넘치는 내용을 스크롤로 만들어 달라

스크롤 관련 함수

 

window.addEventListener('scroll', function(){

        console.log(window.scrollY);

        window.scrollTo(0,100)

 

      })

스크롤이 스무스하게 움직이는 이유: 부트스트랩에서 자동 적용

해제하려면 css에 아래 내용 추가

 

:root {

scroll-behavior: auto;

}

        var a = document.querySelector('.lorem').scrollTop; // 스크롤 현재 높이

        var b = document.querySelector('.lorem').scrollHeight; // 스크롤 전체 높이

        var c = document.querySelector('.lorem').clientHeight; // 현재 보이는 스크롤 높이

 

document.querySelector(‘html’).scrollHeight

= document.documentElement.scrollHeight