# JS30

gygy

이전 프로젝트 [JS30] - 11) Custom Video Player 에서 한번 비디오에 대해 다룬적이 있었던데다 간단한 프로젝트여서 어렵지는 않았다. 다만 offsetY의 높이를 원하는 재생속도로 어떻게 변환할지가 고민이 되어 해당 부분은 강의를 참고했다. speed 바 숫자 표기 바 전체 높이 대비 숫자 구하기 0.4x 부터 0.1씩 올라가 4x가 최대 속도여야 한다. 따라서 최솟값과 최댓값을 지정해준다. 클릭한 곳의 바에서의 높이를 전체 바 높이로 나눈뒤, 최댓값과 최솟값 사이구간의 길이를 곱해준다. 여기에 최솟값은 min여야 하니 min을 더해준다. Number.prototype.toFixed() 숫자를 고정 소수점 표기법으로 표기해 반환한다. @param digits 소수점 뒤에 나타날 자릿수 Reference -

gygy

🧪 Javascript 30 Challenge Day 8 [JS30] - 8) Fun with HATML5 Canvas 🧲 1일 1알고리즘 문제풀이 [Code Signal] Array Replace 🧶 JS 메소드 정리 오늘 푼 알고리즘 문제에서 사용한 메소드 정리 [배열안 같은 요소의 모든 위치 찾기(indexOf - 2nd param)](https://velog.io/@gygy/%EB%B0%B0%EC%97%B4%EC%95%88-%EA%B0%99%EC%9D%80-%EC%9A%94%EC%86%8C%EC%9D%98-%EB%AA%A8%EB%93%A0-%EC%9C%84%EC%B9%98-%EC%B0%BE%EA%B8%B0indexOf-2nd-

gygy

transform transform: rotate transform-origin transform-origin: x-axis y-axis; rotate으로 회전을 시키면 가운데 축으로 돌아가게 된다. transform-origin: 100%;을 주면 아래와 같이 지정한 축을 중심으로 돌아가게 된다. JS - 일정한 시간마다 시침 이동 setInterval로 1초마다 getSec 함수를 호출한다. getSec함수에서는 1초 단위로 생성자 함수로 now인스턴스를 생성하여 Date 객체에서 현재 시

hyeondex

현재시간을 받아와 시계로 표시하는 것 CSS > transform-origin: 오른쪽을 기준으로 변형시 원점을 잡아주는 것 > transition-timing-function : 요소의 움직임 기능을 정의하는 것 // ++트랜지션 효과가 진행되는 동안의 변화를 지정하는 것 |속성|설명| |:----------|:----------| |linear| 처음 속도 = 마지막 속도 |ease| 처음 속도 느림 > 빠름 > 느림 |ease-in| 속도 느림(천천히) > 정상 속도 |ease-out| 정상 속도 > 느리게(천천히) 끝남 |ease-in-out| 천천히 시작 > 정상 속도 > 느려짐 | step-start| 애니메이션을 시작점에서만 표현 뭔가 픽셀 단위로 보이는 느낌? |step-end| 애니메이션을 끝점에서만 표현 |steps(int, start or end)| 애니메이션을 단계별로 설정 |📌 *

hyeondex

01. JS Drum Kit data-key에 할당된 값을 가지고 값에 맞는 키보드를 눌렀을 때 오디오가 실행된다. 해당 오디오와 키보드의 키를 할당한 key에 data-key="" 을 넣어줍니다. 중간 script git commit > 템플릿 문자열은 '' X ``로 감싸서 처리 ${ } 감싸기 가능 > addEventListener :: 이벤트 등록, 여러개 이벤트 등록 가능 > const :: 블록 범위의 상수 선언, 재 할당 X 재 선언 X console.log에서 확인해야 할 부분 keycode가 어떻게 들어오는지 확인하기. const로 지정한 것들이 제대로 값을 불러오는지 확인하기 마지막 script git commit

secho

JS30 Day08 Fun with HTML5 Canvas 요구사항 canvas 요소를 사용해 그림판을 만듦 선수지식 canvas요소 사용 Canvas width, height요소만 존재 고정크기의 드로잉 영역을 생성하고 하나 이상의 랜더링 컨텍스트를 노출해 컨텐츠를 생성, 출력함 getContext()를 이용해 그리기 함수를 사용할 수 있음 코드

secho

JS30 Day07 Array cardio Day2 요구사항 array 메소드에 대해 학습 some : every: find: findIndex: 코드 1번 some, Date를 사용하여 19살이상인 성인인지 확인하는 함수를 작성 -> 적어도 하나가 성인이므로 true의 결과를 출력 2번 every를 사용하여 모두가 성인인지 확인하는 함수를 작성 -> 모두 성인이 아니므로 false를 출력 3번 filter이랑 다른 find를 사용하여 특정 id를 갖는 comment를 반환하도록 작성 4번 findIndex를 사용하여 특정 id의 인덱스를 반환하도록 작성 4번 slice를 사용하여 4번에서 얻은 index를 가진 코멘트를 제

secho

JS30 Day06_Ajax Type Ahead 요구사항 검색했을 때 새로고침 없이 검색결과가 입력한 글자마다 나오도록 api에서 데이터를 가져오고, 가공해서 원하는 결과로 parsing 선수지식 정규표현식 promise, fetch api call

secho

JS30 Day05 Flex Panels Image Gallery 요구사항 flexbox.io display:flex에 대해 학습 flex로 grid형태로 만들고 각 영역을 조정함으로써 애니메이션 추가 translateY 로 애니메이션을 만듦 JS로 각 패널을 클릭했을 때 toggle로 on, off 선수지식 classList.toggle flex, justify-content, align-item flex box 참고 뷰포트, 요소의 크기가 불명확하거나 동적으로 변할 때 효율적으로 배치, 분산하는 레이아웃 방식 flex container, item으로 구성된다. 정렬하려는 요소의 부모요소에 display:flex flex container 속성: flex-direction, flex-wrap, `j

secho

JS30 Day04 Array Cardio Day 1 요구사항 array 메소드에 대해 다룸 filter, map, sort, reduce 등을 이용해 주어진 문제를 해결 선수지식 array 메소드들에 대한 이해 prototype에 map메소드가 없으면 유사배열 객체나 반복가능한 객체를 얕게 복사해 새로운 Array 객체로 만들어 순회할 수 있도록 배열형태로 반환해야한다 spread인 [...], Array.from()을 사용해주도록 하자. NodeList는 Array와 다름 NodeList는 JS API가 아닌 Browser API임. Array.isArray메서드로 배열인지 확인할 수 있음 이는 유사배열임 문제와 코드 1. Array.prototype.filter() \1. Filter the list of inventors

secho

JS30 Day03 Updating CSS Variables and JS 요구사항 자바스크립트를 이용해서 CSS를 변경한다. input의 이벤트를 통해 변경되는 value값에 px(suffix)를 붙여 :root전역 CSS에 재할당해주어야 함. RGB값은 px가 필요없으므로 data-sizing을 지정해주지 않음. 값이 없다면 undefined가 되므로 ' '공백으로 처리하도록해야함 선수지식 this.dataset=>data-*으로 지정된 속성들을 보여줌 CSS에도 scope가 있음. 전역으로 선언해도 자식은 부모 -> 상위로 올라가면서 style이 먹음 1. CSS에서 변수사용법 HTML 어디에서나 변수에 접근하도록 선언 :root는 가상 선택자. html보다도 우선순위가 높다. 전역스코프의 CSS변수를 선언할 때 사용 변수는 `var

secho

JS30 Day02 CSS + JS Clock 요구사항 시, 분, 초를 갖는 시계를 만들 것 JS와 CSS만으로! 선수지식 CSS transform, rotate degree transform-origin -> transition 속성 transition-timing-function JS setInterval 현재시간을 반환할 Date 객체의 메소드들 1. transform? CSS animate하는데 많이 사용되는 속성 웹 요소의 위치를 이동하거나 크기 조절, 회전시킬 수있음. scale, rotate, translate, skew에 대해서 정리하겠음 1.1 scale() X, Y축으로 확대 / 축소 1.2 rotate() - 지정요소 회전 지정한 각도만큼 회전 양수는 시계,

secho

JS30 Day01 Drum kit keyCode는 deprecated. 대신 key를 사용함 요구사항 9개의 키를 눌렀을 때 각 키에서 드럼 소리를 나도록 이벤트를 작성해라 연속으로 눌렀을 때 한번만 실행되지 않고 누른 숫자만큼 끊김없이 실행되도록해라 키 클릭시 눌른 키가 무엇인지 확인할 수 있도록 애니메이션추가 특정시간 이후 애니메이션이 사라지도록 작성 바닐라 JS로 각 키 버튼을 누를시 해당하는 사운드가 나오도록 작성한다. keycode.info에서 해당하는 키코드를 확인한다. data-key 65가 클릭되었을때 해당하는 audio가 출력되도록 작성한다. 선수지식 트랜지션에도 생명주기와 비슷한것이 존재 1. dataset 속성