🔥 부트캠프-웹 개발 🔥/JavaScript

video play pause ended 1) video html안에 image를 넣는것 처럼 video도 넣을 수 있다. src : 경로 autoplay : 자동 재생 muted : 음소거 controls : 컨트롤 바 loop : 반복 poster : video가 로드 되기 전 나타낼 이미지 width : 너비 2) play / pause script에 play(), pause()를 사용하면 video를 재생, 일시정지를 할 수있다. 버튼에 변수와 할당을 한 뒤 event 생성을 통해 구현해 보았다. 이렇게 코드를 작성하면 상태변수 없이 버튼 하나에 play와 pause 기능을 하게 할 수 있다. display : none이 들어있는 on class를 사용해 play버튼을 누르면 play()가 되며 ..

footer 높이 따라오기 사진 슬라이드 1) footer 높이 따라오기 제목1 제목2 제목3 제목4 제목5 제목1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia debitis, ullam sapiente itaque nulla beatae eius molestiae excepturi non repellendus doloremque nam, temporibus consequatur vero. Voluptatibus? 제목1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima expedita autem harum officia..

window.height / width window.open location window.scrollY window.scrollTo header fixed 1) window.height / width 웹 페이지의 높이와 가로의 px을 출력할 수 있다. 2) window.open window.open을 사용하면 새로운 웹 페이지가 열리게 된다. ('주소', '이름', '옵션') 3초 뒤에 열리는 구글 창은 가로 300, 세로 300 크기로 열리게 된다. 3) location window.open은 새로운 페이지가 열리고 반면 location은 현제 페이지가 바뀌게 된다. 4) scrollY window.scrollY는 현재 열려있는 페이지의 가장 윗부분이 몇 px인지 나타내 준다. 5) scrollTo w..

상품리스트 상품 : 뽀로로 담기 삭제 상품 : 악어 담기 삭제 상품 : 펭구 담기 삭제 상품 : 루피 담기 삭제 상품 : 누렁이 담기 삭제 상품 : 곰 담기 삭제 장바구니 장바구니 비우기 상품리스트로 const get = (target) => { return document.querySelector(target) } const getAll = (target) => { return document.querySelectorAll(target) } // 재할당 함수 const re = () => { $l_li = getAll('.left ul li'); $r_li = getAll('.right ul li'); $add = getAll('.left ul li .add'); $del = getAll('.left ..

select multiple checkbox radio append point-events 1) select 고양이 야옹이 애옹이 냥냥이 양옹잉 선택 : xx select option index값을 이용해 선택한 option을 출력할 수 있다. 2) multiple 고양이 야옹이 애옹이 냥냥이 양옹잉 선택 : xx select에 multiple을 추가하면 스크롤 방식으로 나오게 된다. for of를 사용해서 복수 선택 시 모두 출력되도록 해 보았다. 3) checkbox 고양이 야옹이 애옹이 냥냥이 양옹잉 xxx checkbox의 경우 checked와 value를 이용하면 체크가 된 checkbox의 value값을 뽑아낼 수 있다. 4) radio 고양이 야옹이 애옹이 냥냥이 양옹잉 xxx radio는 ..

cloneNode querySelector 함수 작성 이벤트 연결 / 해제 form input txt value form input checkbox value form input select value 1) cloneNode cloneNode를 사용하면 대상 노드를 복사한다. true 값을 넣었으므로 자식도 복사되어 '복사'까지 clone되었다. 2) querySelector 함수 작성 let item1 = document.querySelector('.item1') let item2 = document.querySelector('.item2') let item3 = document.querySelector('.item3') 매번 document.querySelector를 사용하기 번거롭다면 함수로 정의해..

버블링 / 캡쳐링 preventDefault node 요소 요소 생성 / 이동 1) 버블링 / 캡쳐링 이벤트 캡처링 : 상위에서 하위로 이벤트 전파 이벤트 버블링 : 하위에서 상위로 이벤트 전파 하위에서 상위로 이벤트가 전파되므로 셋 box를 클릭하면 셋-둘-하나가 출력이 된다. 반대로 상위에서 하위로 이벤트가 전파되어 하나-둘-셋이 출력되었다. 2) preventDefault 링크가 걸린 이벤트를 취소할 때 사용한다. 구글 네이버 네이트 이렇게 맨 위에 preventDefault를 넣으면 a 링크를 눌러도 이벤트가 생성되지 않는다. 여러 링크를 막아야 할 땐 두 가지 방법을 사용한다. let link = document.querySelectorAll('a[href="#"]'); link.forEach(..

export / import 예제 1) export / import 외부 js파일에 있는 요소들을 사용하고 싶을 때 쓴다. let arr = ['1번','2번','3번','4번','5번']; export default arr; arr 배열만 test.js 파일에 추가 하고 export default arr;를 넣어준다. 그리고 script에 type을 추가 하고 import로 arr을 불러와 주면 사용이 가능하다. 2-1) 예제 xx 현재번호 0/00 let arr = []; for (let i = 0; i < 18; i++) { arr.push('사진에 대한 타이틀'+i); } let li = document.querySelectorAll('.wrap .right ul li'); let pic = do..

mouse 이벤트 상태변수 getComputedStyle key 이벤트 게임 1) mouse 이벤트 click 외에 마우스를 사용했을 때 함수가 실행되게 할 수 있다. btn.addEventListener('click', e => { output.innerHTML = ""; }); // 좌클릭 box1.addEventListener('click', e => { output.innerHTML += `click` }); // 더블클릭 box2.addEventListener('dblclick', e => { output.innerHTML += `dblclick` }); // 우클릭 box2.addEventListener('contextmenu', e => { output.innerHTML +=`contextm..