[SeSAC DT 과정] JS function, selctor, event , j query

▶︎ java script

1️⃣ function

• 반복되는 동작을 하나로 묶어놓고 호출시키는 기능을 함

• 기본형식

function 이름 (매개변수,매개변수,…parameter){
실행코드;
}

function plus(a, b){
    console.log(a + b);
} //plus라는 이름의 함수 선언

-> 이름을 불러서 호출해줘야 실행됨

• 매개변수 인자를 입력해줄 수 있음

function 이름 (인자, 인자,…argument)

plus(9, 60); //plus 함수 실행!

2️⃣ selctor

• 특정 노드에 접근하기 위한 메서드

  • 직접호출

    • getElementsByTagName()
    • getElementsByClassName()
    • getElementsByID()
    • querySelector() **많이 쓰임
    • querySelectorAll() ** 많이 쓰임
      - 노드 리스트(집합)로 불러오므로 전체 선택 하려면 배열로(인덱스)

  • 간접호출

    ( 💡 console.log()를 통해 자식 노드 어떻게 들어가있나 찍어보기 )
    • parentNode 부모 노드
    • childNodes 자식 노드
    • firstChild 첫번째 자식
    • lastChlid 마지막 자식
    • nextSibling 다음 형제
    • previousSibling 이전 형제

  • 노드에 대한 정보 추출

    • nodeName
    • nodeValue 값
      • 대상을 속성 노드로 선택했다면 속성값을 리턴
      • 대상을 텍스트 노드로 선택했다면 텍스트값을 리턴
    • nodeType

3️⃣ event

• 특정 동작에 대한 반응을 지시하는 기능을 함

• 이벤트리스너 : eventListener, eventHandler : 특정 이벤트가 발생했을 때 그 동작을 처리하는 함수

• 이벤트 등록

addEventListiner(‘이벤트명’('click', 'load' 등), 실행할 함수(이벤트 리스너),’이벤트전파방식’(생략가능, true/false))

• 이벤트 전파 방식
  • 버블링 : 위쪽으로 올라가면서 전파되는 방식(오름차순) false
  • 캡쳐링 : 아래쪽으로 내려가면서 전파되는 방식(내림차순) true

---

▶︎ j query

1️⃣ 👀 j query?

자바스크립트의 편리한 사용을 위한 오픈 소스 기반의 자바스크립트 라이브러리

2️⃣ method

• css(’속성’,’값’) -> 축약 css({속성:값,속성:값…})

• class 호출 관련 메서드
  • addClass(‘클래스명’)
  • removeClass(‘클래스명’)
  • hasClass(‘클래스명’) -> true(가지고 있다) / false (없다)

• on (addEventListiner 역할)

• show(), hide(), toggle()
  • fadeIn(), fadeOut(), fadeToggle() -> 투명도값 조정 (속도 기본값 400(0.4s) //1s = 1000)
  • slideUp(), slideOut(), sildeToggle() -> 높이 조정
  • toggle은 앞의 두가지 기능을 한 번에 쓰는 것 (🔦 On/off switch 처럼)

• 요소선택 : parent(), children(), fin() 상위요소 하위요소, siblings() 형제선택, next() 바로 뒷 요소 선택 , prev() 바로 앞 요소 선택

• $(this) => 대상 요소 중 현재 이벤트가 발생한 요소를 리턴

• setInterval
  • 시간 간격으로 함수가 호출됨
  • 자바스크립트 내장 함수

  • const 변수명 = setInterval(함수명, 시간)

  • 1000 = 1s , 기본값 400 (0.4s)
• clearInterval
  • setInterval을 변수로 지정해야 사용 가능

  • clearInterval(변수명)