본문 바로가기

DEV/JS

(53)
[JS] 초보자를 위한 바닐라 자바스크립트 (노마드 코더스) 이직하고 나서 자바스크립트를 만질 일이 거의 없어져서 등한시하고 있었는데, 노마드 코더에서 무료 강의가 있다고 해서 초보자를 위한 강의지만 룩업한다는 느낌으로 수강하게 되었다. 다 아는 거라고 해도 기초 강의를 듣다보면 내가 놓치고 있었던 부분을 알게 될 때도 있고 그렇게 알게 된 건 쉽게 잊혀지지 않는 것 같아서 쭉 들었다. 보통 강의들이 지루하고 그래서 듣다가 흐지부지 될 때가 많았는데 니꼴라스가 너무 잘 가르쳐서 재미있게 봤다. (f**k이 난무하는 수업이다 ㅋㅋ) 초보자를 위한 자바스크립트 강의 중에 제일 좋은 것 같다. 노마드코더에서 수강하면 수료증도 받을 수 있다. https://academy.nomadcoders.co/courses/enrolled/435558 노마드코더 회원가입을 하지 않아..
[JS] JavaScript Drum Kit을 응용한 Zinee Piano 들어가며 이 강의는 ES6 자바스크립트 문법을 기반으로 작성되어 있습니다. ES6 문법에 익숙하지 않아서 예제 코드에서 모르는 것들은 찾아서 아래 참고자료에 링크로 모아두었습니다. 강의 속 예제와 아래 코드펜이 100% 똑같진 않지만 거의 비슷한 데모가 있어서 가져왔습니다. See the Pen JavaScript Drum Kit by Maegan Womble (@MaeganW) on CodePen. 만드는 과정 1. 피아노 건반 모양을 html/css로 만듭니다. (마크업 하는 과정은 생략합니다.) 2. 건반에 매칭 된 알파벳을 키보드 자판으로 누르면 data-key 값에 저장된 keyCode값을 읽어옵니다. 3. (2)에서 얻은 keyCode 값과 동일한 keyCode 값을 가진 audio 파일을 재..
[jQuery] common.js jQuery로 작업할 때 가장 많이 쓰던 코드들이다. 1. 공통 header, footer html 파일을 로드2. 제이쿼리 탭 메뉴 소스3. 제이쿼리 아코디언 메뉴 소스4. 제이쿼리 드롭다운 메뉴 소스5. 제이쿼리 커스텀 셀렉트 박스 소스 $(function() { // layout $('#header').load('../../docs/base/header.html'); $('#footer').load('../../docs/base/footer.html'); }); /* Tab */ function tab(e, num){ var num = num || 0; var menu = $(e).children(); var con = $(e+'-con').children(); var select = $(menu)..
[jQuery] 마크업 스크립트로 반복해서 넣기 마크업에서 단순히 아이템들이 채워져 있는 모습을 보여주기 위해 반복되는 돔을 Ctrl+C/V 해놓는 경우가 많은데, 템플릿으로 분리하고 필요한 갯수만큼만 스크립트로 반복해서 삽입할 수 있도록 했다. HTML JS function cloneChild(target, n){ for(var i=1; i
[jQuery] input click(touch) -> select all IssueiOS 하위 버전(10미만)에서 auto copy가 안 되는 이슈가 있어서, 인풋 영역을 터치하면 자동으로 영역을 잡아주는 기능으로 대체했다. 적어도 드래그 하면서 셀렉트 영역을 잡는 수고로움을 덜어주기 위해! 그런데 select()만으로는 iOS 에서 영역이 전체 선택되지 않고, readonly 임에도 불구하고 커서가 나타났다 (키보드 없이). 그래서 찾아보니 setSelectionRange()를 사용하면 된다는 걸 알았다. Syntax inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection); [참고] https://developer.mozilla.org/ko/docs/Web/API/H..
[jQuery] 티스토리 단축키 추가하기 티스토리 기본 단축키 사실 기본 단축키가 있다는 걸 오늘 알았다. 단축키로 's'를 쓰려고 하니까 뭔가 엉키는 것 같아서 찾아보니 기본 제공 단축키가 있었다! Q : 관리자 페이지A : 이전 글 보기S : 다음 글 보기Z : 최근 글 보기X : 최근 댓글 보기C : 최근 트랙백 보기 티스토리 단축키 추가하기 Q, A, S, Z, X, C는 이미 사용 중이니 유의해야 한다. 다른 블로그에는 자바스크립트 버전이 있긴 한데 필요없는 코드도 있는 것 같아, jQuery 버전으로 만들어봤다. /* 단축키 추가하기 */ var shortcut = new Array(); shortcut['w'] = "/admin/entry/post/"; /* 새 글 쓰기 */ $(document).keypress(function(e..
[JS] Preload images with javascript BEFORE range 값을 변경하면 배경 이미지가 transition을 통해 자연스럽게 변하는 형태다. 비주얼이 큰 부분을 차지하는 페이지이다. 아래 스크린 샷에서 볼 수 있듯 처음에는 이미지 1개만 로드되어, 배경이 변경될 때 깜빡이는 현상이 생긴다. 이미지가 처음에 모두 로드되어 있다면 없어질 현상이다. AFTER 방법을 찾아보니 간단한 스크립트를 통해 미리 받아 놓을 수 있었다. JavaScript Method #1 Unobtrusive, gracefully degrading, and easy to implement, simply edit/add the image paths/names as needed — no other editing required: This method is especiall..
[Youtube] Band Corona Player - TopViewCount50 See the Pen Band Corona - TopViewCount50 by Hyejin Oh (@zineeworld) on CodePen.

반응형