본문 바로가기

JavaScript/javascript 활용하기

JavaScript/javascript 활용하기 2020. 12. 6. javascript - transition, animation 각 transition과 animation은 시작과 끝을 나타내주는 이벤트들이 존재한다 transitioinstart 트랜지션이 시작 할 때 transitionend 트랜지션이 종료 될 때 animationstart 애니메이션이 시작 될 때 animationend 애니메이션이 종료될 때 animationiteration 애니메이션 반복 시 transition 예시 클릭한 방향으로 해당 ball element를 이동시킨다. clientY, clientX 브라우저 페이지내의 위치를 반환한다, 스크롤은 무시하고 해당 페이지를 기준으로한다. elapsedTime 해당 이벤트가 발생하는데 걸린 시간을 나타낸다 transition을 1s로 설정했기 때문에 1이 나오게 된다. propertyName event가 발생..
JavaScript/javascript 활용하기 2020. 12. 6. CSS - 스크롤 이벤트 output Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo culpa id ratione alias illum aliquam accusamus deleniti dolores dignissimos, temporibus iste perspiciatis voluptatem repudiandae debitis similique fugiat dolor, doloremque quos mollitia repellendus iure exercitationem molestiae ab! Veritatis harum voluptate enim ducimus amet vitae veniam dignissimos possimus facilis eaque minu..
JavaScript/javascript 활용하기 2020. 12. 3. CSS - 움직이는 문 만들기 reset.css html, body, h1, h2, h3, h4, h5, h6, p, blockquote, code, img, dl, dt, dd, ol, ul, li, fieldset, legend, caption { margin: 0; padding: 0; border: 0; } div, span, article, section, header, footer, p, ul, li, fieldset, legend, label, a, nav { box-sizing: border-box; } html { height: 100%; } body { min-height: 100%; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p..
JavaScript/javascript 활용하기 2020. 11. 29. 이벤트 위임 처리하기 버튼1 버튼2 버튼3 위의 코드를 확인해보면 eventContainer 하나에만 event를 줬음에도 불구하고 e.target이라는 속성을 통해 클릭된 현재 객체에 대해 정보를 가져오는것을 확인할 수 있다. 이를 이벤트 위임이라고 한다. addEventListener의 수가 늘어갈수록 브라우저의 속도가 느려질수 있기때문에 이벤트위임을 잘 활용하는것이 중요하다. 여기서 우리는 각 버튼을 클릭할때마다 button에 있는 data-id를 가져오려고한다. 위와같이 버튼 전체를 클릭하는 경우에는 dataset이 나타나게 되어있지만 버튼이나 1, 2, 3 등의 span태그 내부를 누르는경우 정상적으로 dataset 을 가져올 수 없게된다. 이를 해결하는 방법이 두가지 있는데 첫번째는 css로 해결하는 방법이다. p..
JavaScript/javascript 활용하기 2020. 7. 8. javascript를 활용한 tic tac toe 만들어보기 index.html tictactoe.js // 해야 될것 1차 // 3*3테이블을 만든다 // 테이블을 눌렀을때 턴이 넘어가야한다 // 1P는 O를 표시하고 // 2P는 X를 표시해야한다. // 먼저 O를 가로, 세로, 대각선으로 이어서 하면 승리한다. //1p와 2p를 나누는 flag함수가 필요할거같다 //한번클릭할때 턴이 넘어가야한다 //데이터를 관리해주는부분 //데이터를 기반으로 렌더링해주는부분 let turnFlag = true; let wrapper = document.querySelector(".wrapper"); let lines = []; // 줄들을 관리 (tr 정보들 관리) let squares = []; // 칸 (td 정보들 관리) let turn = ""; // O, X로 바뀌는..
JavaScript/javascript 활용하기 2020. 3. 4. 자바스크립트를 활용해 현재 날짜부터 마지막 날짜 구하기 자바스크립트를 활용해서 해당 필요한 날짜들을 추가해주는 로직을 만들었다. 날짜 클릭시 class를 추가하고 다른 날짜를 클릭하면 나머지 active 클래스가 제거되는 방식으로 만들었다. 영화 예매율순 가나다순 영화 목록 가져오기 극장 날짜 시간
JavaScript/javascript 활용하기 2020. 3. 3. 자바스크립트 2중 for문을 활용한 좌석 만들기 미니 프로젝트를 위해 영화 좌석을 선택하는 란을 만들기 위해 만들어보았다. 버튼 클릭시 clicked를 toggle로 전환하고 클릭시에 추가된 clicked 들을 가져오는 로직이다 clicked class가 추가된 경우엔 clicked class를 제거하고(toggle기능, toggle함수도 있지만 이부분에서는 따로 구현했다) 배열에 있는 값도 배열에서 splice를 통해 제거해준다 이를 다시 selectedsSeats 배열에 뿌려준다

티스토리툴바