기본 뼈대 jQuery Event 🔻BOM, DOM 이벤트 등록 방법 BOM btn.onclick = function() {} DOM btn.addEventListener('click', function() {}); 🔻jQuery 이벤트 함수 1. 전용 이벤트 함수 객체.이벤트함수(콜백함수) $('#btn1').click(function() { alert('btn1'); }); 2. 범용 이벤트 함수 객체.on(이벤트명, 콜백함수) $('#btn2').on('click', function() { alert('btn2'); }); 다양한 이벤트를 on 으로 접근한다. 이벤트함수는 BOM, DOM에서 사용하는 것과 같다. 3. 이벤트 제거 전용 함수, 범용 함수의 이벤트를 제거한다. $('#btn2').of..
🔻jQuery() 함수 jQuery 라이브러리의 핵심이며, HTML 문서 내에서 요소를 선택하고 조작하기 위한 강력한 도구이다. 이 함수를 사용하여 CSS 선택자를 이용해 HTML 요소를 찾고, 해당 요소에 대해 다양한 작업을 수행한다. 🔻jQuery() 함수 특징 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. 2. 반환값에 무언가를 적용하면 항상 자동으로 루프가 동작되어 각 요소마다 적용된다. 3. 자바스크립트 객체와 jQuery 객체는 서로 형변환할 수 있다. 기본 뼈대 jQuery 함수 상자1 상자2 상자3 상자4 상자5 1. CSS 선택자 또는 다른 표현을 사용해서 태그를 검색한다. jQuery('CSS 선택자').css() 로 접근한다. 2. 반환값에 무언가를 적용하면 항상 자..
🔻jQuery 란 자바스크립트 코드를 간결하게 작성하고, 크로스 브라우징 문제를 해결하며, 다양한 기능을 쉽게 사용할 수 있게 해주는 라이브러리이다. 자바의 .jar 파일 여러개 모아놓은 것이라 생각하면된다. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and ex..
🔻화살표 함수, Arrow Function 자바의 람다와 비슷한 개념이다. 자바의 람다는 익명 객체의 추상 메소드를 표현하는 기술이었지만, 자바스크립트의 화살표 함수는 익명 함수를 표현하는 기술이다. 기본 구문 const add = (a, b) => a + b; 함수 선언 방법 1. 함수 선언문 function f1() { console.log('f1'); } f1(); 2. 함수 표현식 (리터럴) == 익명함수 const f2 = function () { console.log('f2'); } f2(); 익명이므로 그냥 호출할 수가 없어 변수에 저장하여 호출한다. 변수에 저장하지않고 호출하는 방법인 즉시호출이 있다. 즉시호출 전체를 묶고 호출한다. (function() { console.log('f2_1..
자바스크립트에서 객체를 여러개 만들 때, 유의해야 할 점은 실수로 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다. 🔻일반적인 객체 생성 o1.name = '홍길동'; o1.hello = function() { console.log('hello'); }; o2.name = '아무개'; o2.hllo = function() { console.log('안녕'); } 위 코드의 문제점은 오타를 내도 제어하지 못한다는 것이다. o2의 hello를 hllo로 잘못 작성하여 o1과 o2는 다른 객체로 생성되었다. 객체를 여러개 만들 때, 유의해야 할 점은 프로퍼티의 오타나 생략했을 때 다른 객체가 생성된다. 생성자 함수는 이 점을 보완할 수 있다. 🔻생성자 함수 자바의 클래스 개념을 가지고 있다. 자바의 생성자..
🔻스크롤 이벤트🔻 특정 위치로 스크롤이 내려가면 배경색과 글씨색을 바꾼다. 기본 뼈대 Title 스크롤 위치 확인하기 window.scrollY : 현재 문서나 요소의 세로(수직) 스크롤 위치를 나타내는 속성이다. document.getElementById('div1').getBoundingClientRect().top getBoundingClientRect().top 으로 문서 좌측 상단 기준으로 'div1' 의 위치를 알 수 있다. div1 요소가 화면의 맨 위에 위치하고 있다면, 위의 코드는 0을 반환한다. div1이 화면 위쪽에서 내려간 위치에 있다면, 양수의 값이 반환하며, div1이 화면 아래에 있다면, 음수의 값이 반환한다. 이벤트 전체코드 Title Lorem ipsum dolor sit ..
🔻배경 이미지 조작🔻 스트라이트 이미지 활용한다. 스프라이트 이미지는 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것으로 연속된 이미지가 하나의 이미로 합쳐져 있다면 backgroundPosition을 이동시켜 움직이는 것 같은 효과를 보여준다. 🔻heart🔻 '두근두근' 버튼을 누르면 backgroundPosition을 이동시킨다. 기본 뼈대 배경 이미지 조작 이벤트 원본이미지에서 하나의 하트만 보이게 너비 지정을 한다. 버튼을 누를 때마다 x의 위치를 감소시켜 이미지를 왼쪽으로 이동시킨다. 보이는 영역은 고정이고 연속된 이미지가 왼쪽으로 움직이면서 애니메이션과 같은 효과를 보여준다. 🔻puma🔻 사진을 클릭하면 스프라이트 이미지의 위치값이 변한다. 한 번 더 클릭하면 위치이동을 멈춘다. 기본 ..
🔻사진 슬라이더🔻 콤보박스로 선택한 값에 따라 사진을 이동시킨다. 키보드 방향키로도 사진 이동가능하게 한다. 기본 뼈대 고양이 고양이1 고양이2 고양이3 고양이4 고양이5 이벤트
🔻반응형 메뉴바 만들기🔻 메뉴를 하나 클릭하면 튀어나오는 애니메이션과 위치이동을 한다. 다른 메뉴를 클릭하면 원래 메뉴는 원위치로 들어가고 클릭한 메뉴가 튀어나온다. 같은 메뉴를 클릭하면 원위치로 돌아간다. 기본 뼈대 이벤트 olditem 이라는 변수에 이전 클릭한 메뉴 객체를 담아 현재와 같으면 원위치로 돌아가고 다른 메뉴이면 olditem를 원위치시키고 클릭한 메뉴를 위치이동 시킨다.
🔻transition 추가하기🔻 JavaScript에서 transition을 추가하기 위해 타이머를 사용한다. 상자를 클릭하면, 회전을 하고 다시 클릭하면 회전을 멈춘다. 기본 뼈대 transition 추가하기 상자 이벤트 위 방법은 script로만 조작하는 방법으로 현재는 이벤트와 속성에 대한 변화는 자바스크립트에서 작업하고, 타이머 역할은 CSS의 transition으로 자바스크립트와 CSS 함께 사용하는 추세이다. JavaScript + CSS 같이 사용하기 transition 추가하기 상자 위와 같이 작성하면 상자는 한번 클릭할 때마다 랜덤한 각도로 회전한다.
