javascript30 [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [JavaScript30] 🕹 30. Whake A Mole 두더지 잡기 게임 초기코드 초기화면 👉 0. 변수 선언 👉 1. randomTime() 두더지가 나왔다 들어갈 랜덤시간. 최소 min ~ max 👉 2. randomHole() 두더지가 나올 구멍을 랜덤하게 고른다. 만약 마지막에 고른 hole이랑 뽑은 hole이 같다면 다시 구멍을 고른다. 즉, 이미 나와있는애가 다시 골라지면 다시 고른다는 뜻. 👉 3. peep() 실제로 두더지를 나오게... JavaScriptjavascript30JavaScript [javascript30] 14 Must Know Dev Tools Tricks javascript30javascript30 Javascript_30_24 오늘은 제가 예비군을 받는 날입니다 :) 사실 지금 받고 있어요. 사용자와 상호작용을 일으키는것은 nav tag 입니다! ⬆ 위에 main 을 id 로 갖는 nav 태그가 그 메뉴바 인겁니다!! nav 은 메뉴바 element를 가지고, topOfNav 는 해당 메뉴바의 상단 위치 값을 가지고 있습니다 :) fixNav 함수를 보면, 조건문이 하나 있어요. 즉, nav 인 메뉴바의 상단 위치... javascript30javascript30 Javascript_30_22 Derek 입니다 😁 조만간 이 javascript 30 시리즈를 마무리해야겠어요. 문단 내의 a 태그에 마우스가 올라가면 해당 태그를 강조시킨다. 글 속에 존재하는 a 태그를 마우스가 해당 태그 위를 지나갈때 강조시켜주는 기능입니다. Derek 과 Wes Bos의 구현코드 먼저 triggers 변수는 문단에 존재하는 모든 a 태그 배열을 지닙니다. 또한 highlight 변수를 만들어 일단... javascript30javascript30 [JavaScript30] 🖌 08. FUN WITH HTML5 CANVAS HTML에 canvas를 이용해 각종 효과를 넣어봄. 👉 canvas const ctx = canvas.getContext('2d'); 캔버스의 드로잉 컨텍스트를 반환함. webgl | experimental-webgl: 3차원 렌더링 컨텍스트 webg2 : 3차원 렌더링 컨텍스트를 나타내는 `WebGLRenderingContext객체를 생성 bitmaprenderer : 캔버스의 컨텐츠를 ... JavaScriptjavascript30JavaScript [JavaScript30] 📷 05. FLEX PANEL GALLERY flex-box를 이용한 레이아웃 및 효과를 공부. 👉 display: flex; flex 방식 Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬 할 수 있는 효율적인 방법을 제공함. display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main... JavaScriptjavascript30JavaScript [JavaScript30] ☑️ 10. Hold Shift to Check Multiple Checkboxes shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것 초기 코드 초기화면 👉 1. checkbox들을 모두 찾음. input type이 checkbox인 모든 태그를 찾음. 👉 2. 함수 생성 shiftkey를 누르는 이벤트가 발생하고, checked상태면 checkbox들을 돌면서 처음 클릭한 것과 마지막 클릭한것사이의 모든 체크박스들을 체크함. inBetween에 fals... JavaScriptjavascript30JavaScript [javascript30] JavaScript Drum kit 키보드를 클릭하여 A,S,D,F...등을 눌렀을때 이벤트 발생 클릭 시 각 자판에 연동된 음원파일 재생 클릭 시 노랗게 하이라이트 발생 style.css index.html A, S, D, F.... 키보드를 누른다 playSound() 함수에서 입력받은 값을 바탕으로 음원파일을 재생한다.. classList에 .playing css를 추가한다. classList에 .playing css를 ... javascript30javascript30 [javascript30] Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 filter filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 => inventor의 first 와 last 합을 반환 sort1 sor... javascript30javascript30 [JavaScript30] 📋 26. Stripe Follow Along Dropdown nav메뉴에 mouse가 올라가면 dropdown메뉴가 각각의 크기,위치에 맞게 보여짐. 초기 코드 초기 화면 👉 1. 마우스 올릴 시 dropdown띄우기 trigger-enter클래스를 추가하여 띄우고 지운다. 👉 2. 내용크기따라 흰색박스 변경 dropdown의 opacity를 1로하여 보이게한다. getBoundingClientRect()를 통해 해당 컨텐츠의 정보를 받아와 흰박스의 ... JavaScriptjavascript30JavaScript [JavaScript30] ☁️ 25. Event Capture, Propagation, Bubbling and Once Event Capture, Propagation, Event Bubbling, Once에 대해 알아보자. 초기 코드 초기 화면 Event Bubbling과 Event Captureing 이벤트는 타겟 엘리먼트를 포함한 부모 요소에도 영향을 미치기 때문에 자식요소를 포함하는 부모요소에 이벤트리스너를 지정하여 관리한다. 즉, 부모 요소에 위임을 한다. 이벤트를 관리하는 방법으로 아래 두가지 방법... JavaScriptjavascript30JavaScript [JavaScript30] 📋 24. Sticky Nav 스크롤 되면 고정되는 메뉴. 초기 코드 초기 화면 👉 1. 상수, 변수 생성 메뉴 영역과 메뉴의 상단 좌표값을 저장해둠. 👉 2. 스크롤시 메뉴를 fixed시킨다. css 추가내용 fixed-nav에 대한 css를 추가 작성. 메뉴의 최상단이 스크롤의 상단값보다 작을 때 : 즉, 스크롤이 내려갔을 때 fixed-nav라는 클래스를 추가해준다. 아닌경우에 fixed-nav 삭제 로고의 경우 기... JavaScriptjavascript30JavaScript Javascript_30_16 안녕하세요! Derek 입니다. 벌써 반을 넘어 16번째 게시물이라, 어서 빨리 끝내버리고 싶은 마음 뿐입니다 ;) 마우스의 위치에 따라 텍스트의 그림자가 움직이도록 구현한다. 보이는 기능에 비해서는 난도가 조금은 있었던 것 같아요. 수학적인.. 먼저 HTML 의 구조는 다음과 같습니다. Derek 과 Wes Bos의 구현코드 함수가 한 가지밖에 없어서 심적으로 부담은 되진 않았어요. 그림자... javascript30javascript30 [JavaScript30] 🗺 21. GeoLocation 초기 코드 초기 화면 👉 GeoLocation API 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API 👉 watchPosition() 장치의 위치가 바뀔 때 마다 자동으로 호출할 함수를 등록할 때 사용. 선택적으로 오류 발생 시 사용할 함수도 지정 가능 GeolocationCoordinates에서 얻을 수 있는 정보 latitude : 위도 longitude : 경도... JavaScriptjavascript30JavaScript
[Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS [JavaScript30] 🕹 30. Whake A Mole 두더지 잡기 게임 초기코드 초기화면 👉 0. 변수 선언 👉 1. randomTime() 두더지가 나왔다 들어갈 랜덤시간. 최소 min ~ max 👉 2. randomHole() 두더지가 나올 구멍을 랜덤하게 고른다. 만약 마지막에 고른 hole이랑 뽑은 hole이 같다면 다시 구멍을 고른다. 즉, 이미 나와있는애가 다시 골라지면 다시 고른다는 뜻. 👉 3. peep() 실제로 두더지를 나오게... JavaScriptjavascript30JavaScript [javascript30] 14 Must Know Dev Tools Tricks javascript30javascript30 Javascript_30_24 오늘은 제가 예비군을 받는 날입니다 :) 사실 지금 받고 있어요. 사용자와 상호작용을 일으키는것은 nav tag 입니다! ⬆ 위에 main 을 id 로 갖는 nav 태그가 그 메뉴바 인겁니다!! nav 은 메뉴바 element를 가지고, topOfNav 는 해당 메뉴바의 상단 위치 값을 가지고 있습니다 :) fixNav 함수를 보면, 조건문이 하나 있어요. 즉, nav 인 메뉴바의 상단 위치... javascript30javascript30 Javascript_30_22 Derek 입니다 😁 조만간 이 javascript 30 시리즈를 마무리해야겠어요. 문단 내의 a 태그에 마우스가 올라가면 해당 태그를 강조시킨다. 글 속에 존재하는 a 태그를 마우스가 해당 태그 위를 지나갈때 강조시켜주는 기능입니다. Derek 과 Wes Bos의 구현코드 먼저 triggers 변수는 문단에 존재하는 모든 a 태그 배열을 지닙니다. 또한 highlight 변수를 만들어 일단... javascript30javascript30 [JavaScript30] 🖌 08. FUN WITH HTML5 CANVAS HTML에 canvas를 이용해 각종 효과를 넣어봄. 👉 canvas const ctx = canvas.getContext('2d'); 캔버스의 드로잉 컨텍스트를 반환함. webgl | experimental-webgl: 3차원 렌더링 컨텍스트 webg2 : 3차원 렌더링 컨텍스트를 나타내는 `WebGLRenderingContext객체를 생성 bitmaprenderer : 캔버스의 컨텐츠를 ... JavaScriptjavascript30JavaScript [JavaScript30] 📷 05. FLEX PANEL GALLERY flex-box를 이용한 레이아웃 및 효과를 공부. 👉 display: flex; flex 방식 Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬 할 수 있는 효율적인 방법을 제공함. display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main... JavaScriptjavascript30JavaScript [JavaScript30] ☑️ 10. Hold Shift to Check Multiple Checkboxes shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것 초기 코드 초기화면 👉 1. checkbox들을 모두 찾음. input type이 checkbox인 모든 태그를 찾음. 👉 2. 함수 생성 shiftkey를 누르는 이벤트가 발생하고, checked상태면 checkbox들을 돌면서 처음 클릭한 것과 마지막 클릭한것사이의 모든 체크박스들을 체크함. inBetween에 fals... JavaScriptjavascript30JavaScript [javascript30] JavaScript Drum kit 키보드를 클릭하여 A,S,D,F...등을 눌렀을때 이벤트 발생 클릭 시 각 자판에 연동된 음원파일 재생 클릭 시 노랗게 하이라이트 발생 style.css index.html A, S, D, F.... 키보드를 누른다 playSound() 함수에서 입력받은 값을 바탕으로 음원파일을 재생한다.. classList에 .playing css를 추가한다. classList에 .playing css를 ... javascript30javascript30 [javascript30] Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 filter filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 => inventor의 first 와 last 합을 반환 sort1 sor... javascript30javascript30 [JavaScript30] 📋 26. Stripe Follow Along Dropdown nav메뉴에 mouse가 올라가면 dropdown메뉴가 각각의 크기,위치에 맞게 보여짐. 초기 코드 초기 화면 👉 1. 마우스 올릴 시 dropdown띄우기 trigger-enter클래스를 추가하여 띄우고 지운다. 👉 2. 내용크기따라 흰색박스 변경 dropdown의 opacity를 1로하여 보이게한다. getBoundingClientRect()를 통해 해당 컨텐츠의 정보를 받아와 흰박스의 ... JavaScriptjavascript30JavaScript [JavaScript30] ☁️ 25. Event Capture, Propagation, Bubbling and Once Event Capture, Propagation, Event Bubbling, Once에 대해 알아보자. 초기 코드 초기 화면 Event Bubbling과 Event Captureing 이벤트는 타겟 엘리먼트를 포함한 부모 요소에도 영향을 미치기 때문에 자식요소를 포함하는 부모요소에 이벤트리스너를 지정하여 관리한다. 즉, 부모 요소에 위임을 한다. 이벤트를 관리하는 방법으로 아래 두가지 방법... JavaScriptjavascript30JavaScript [JavaScript30] 📋 24. Sticky Nav 스크롤 되면 고정되는 메뉴. 초기 코드 초기 화면 👉 1. 상수, 변수 생성 메뉴 영역과 메뉴의 상단 좌표값을 저장해둠. 👉 2. 스크롤시 메뉴를 fixed시킨다. css 추가내용 fixed-nav에 대한 css를 추가 작성. 메뉴의 최상단이 스크롤의 상단값보다 작을 때 : 즉, 스크롤이 내려갔을 때 fixed-nav라는 클래스를 추가해준다. 아닌경우에 fixed-nav 삭제 로고의 경우 기... JavaScriptjavascript30JavaScript Javascript_30_16 안녕하세요! Derek 입니다. 벌써 반을 넘어 16번째 게시물이라, 어서 빨리 끝내버리고 싶은 마음 뿐입니다 ;) 마우스의 위치에 따라 텍스트의 그림자가 움직이도록 구현한다. 보이는 기능에 비해서는 난도가 조금은 있었던 것 같아요. 수학적인.. 먼저 HTML 의 구조는 다음과 같습니다. Derek 과 Wes Bos의 구현코드 함수가 한 가지밖에 없어서 심적으로 부담은 되진 않았어요. 그림자... javascript30javascript30 [JavaScript30] 🗺 21. GeoLocation 초기 코드 초기 화면 👉 GeoLocation API 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API 👉 watchPosition() 장치의 위치가 바뀔 때 마다 자동으로 호출할 함수를 등록할 때 사용. 선택적으로 오류 발생 시 사용할 함수도 지정 가능 GeolocationCoordinates에서 얻을 수 있는 정보 latitude : 위도 longitude : 경도... JavaScriptjavascript30JavaScript