자바스크립트 DOM / Event - Udemy(부트스트랩4와 함께하는~)

DOM (Document Object Model) : 자바스크립트로 웹 페이지를 제어하도록 해준다.

 

document.getElementsByTagName()    :    태그 이름으로 요소 찾기

document.querySelector()    :    선택자 이름으로 요소 찾기

document.getElementsByClassName()    :    클래스 이름으로 요소 찾기

document.getElementsById()    :    ID 이름으로 요소 찾기

 

→ h1 태그를 가진 모든 요소들을 배열형태로 담은 다음 0번째 인덱스의 요소를 temp 변수에 넣는다.

 

 

 

Event

이벤트는 웹페이지에서 사용자가 행한 행위에 반응하는 것을 의미한다.

일반적으로 빠르게 이벤트를 적용할 때는 인라인(inline) 방식을 사용한다.

체계적으로 이벤트 처리를 구현하려면 addEventListener() 방식을 사용한다.

 

addEventListener() 방식

객체 지향 프로그래밍 기법에 특화된 체계적인 이벤트 처리 방식

 

 

 

 

jQuery

자바스크립트 기술을 쉽게 활용할 수 있도록 해주는 자바스크립트 라이브러리이다.

CDN을 사용해 jQuery를 즉시 웹 페이지로 불러올 수 있다. 

CDN 생성 웹사이트 : https://code.jquery.com

 

 

jQuery 기본문법

$(선택자).행위()

 

ex)

$(this).hide()    :    현재 선택된 요소를 숨긴다.

$("p").hide()    :    모든 <p>태그 요소를 숨긴다.

$(".test").hide()    :    모든 test 클래스 요소를 숨긴다.

$("#test").hide()    :    모든 test ID 요소를 숨긴다.

 

 

 

웹문서 준비 이벤트 처리

$(document).ready() 함수를 이용해 웹문서가 준비됨과 동시에 특정 함수를 정의한다.

 

 

 

웹사이트에 접속한 사용자가 하는 모든 행위를 이벤트라고 한다.

 

click() 이벤트 처리 함수

특정한 요소를 한번 클릭했을 때의 이벤트 처리한다.

 

 

기본적으로 jquery에서 함수를 정의할 때는 document.ready 함수에 정의한다.

 

 

mouserenter() 이벤트 처리 함수

특정한 요소에 마우스 커서가 접근 했을 때의 이벤트를 처리한다.

 

mouserleave() 이벤트 처리 함수

특정한 요소에서 마우스 커서가 나갔을 때의 이벤트를 처리한다.

 

 

 

keypress() 이벤트 처리 함수

특정한 요소에서 키보드가 눌렸을 때의 이벤트를 처리한다.

일반적으로 비밀번호 입력을 체크할 때 사용한다.

 

 

 

 

jQouery 이펙트

자바스크립트를 이용해 만들어진 jQuery의 다양한 기술들을 의미한다.

 

hide/show    :    특정 요소를 숨기거나 보여준다.

fade    :    특정한 행위를 서서히 수행한다.

slide    :    미끄러지는 듯한 효과를 수행한다.

animation    :    애니메이션 효과를 수행한다.

callback    :    특정 효과가 완전히 끝난 이후에 효과를 수행한다.

chaining    :    연계 효과를 수행한다.

 

 

hide/show 를 자동으로 입히고 싶으면 toggle을 사용한다.

 

 

 

 

fade 이펙트

jquery slim 버전에는 포함되지 않는다.

 

 

밀리세컨드 단위로 서서히 toggle이 이루어질 수 있도록 시간을 설정할 수 있다.

 

 

fadeTo 함수

시간과 정도를 명시할 수 있는 구체적인 함수이다.

 

 

slide 이펙트

 

animation 이펙트

 

 

 

stop 이펙트

 

expand 버튼을 클릭하면 5초가 소요되는 이펙트를 실행하고 expand를 실행하는 도중에 stop 함수를 클릭하면 이펙트를 꺼버린다.

 

callback

특정한 효과가 끝난 이후에 새로운 효과를 수행한다.

 

 

hide라는 특정함수에 매개변수로써 또 다른 함수를 넣어주면 해당 함수가 끝난 이후에 추가된 함수가 실행된다. 

 

chaining 

한 번에 직관적으로 연속적인 이벤트를 수행하는 방법이다. callback보다 더 직관적인 방법이다.

아래 예시에서는 총 3개의 함수가 연속적으로 실행된다.

 

 

 

 

jQuery HTML

jQuery는 HTML 요소에 접근할 수 있는 다양한 기술을 제공한다.

 

 

→ 버튼을 클릭하면 p태그의 속성 중 style에 font-weight: bold; 값을 주겠다.

 

만약 alert($("p").attr("style"));  이라면 p태그의 style 속성의 값을 가져온다.

 

 

 

매개변수가 있고 없고의 차이는 데이터를 가져오느냐 쓰냐의 차이이다.

 

jQuery로 HTML 데이터 추가

jQuery에서 HTML 데이터 추가 함수는 다음과 같다.

 

append()    :    특정한 요소 안에서 끝 부분에 내용을 삽입한다.

prepend()    :    특정한 요소 안에서 앞부분에 내용을 삽입한다.

after()    :    특정한 요소 이후에 내용을 삽입한다.

before()    :    특정한 요소 이전에 내용을 삽입한다.

 

 

jQuery로 CSS 다루기

 

addClass는 사전에 만들어진 class를 어떠한 태그 아래에 적용하고자 할 때 사용한다.

 

 

이런식으로 직접적으로 css 속성을 줄 수 도 있다.