개발자는 언제나 맑은 뒤 흐림

특수문자를 정규식을 사용해서 막기 onkeyup 과 ononkeydown 에서 현재 입력창의 값을 받아서 처리 한다. function check(obj){ //정규식으로 특수문자 판별 var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼@\#$%&\'\"\\\(\=]/gi; //배열에서 하나씩 값을 비교 if( regExp.test(obj.value) ){ //값이 일치하면 문자를 삭제 obj.value = obj.value.substring( 0 , obj.value.length - 1 ); } }

많은 크롬 클립보드 복사 방법이 있지만... 나는 안되더라. 그래서 찾은 제타위키 설명글! 정말 나의 바이블이다. JavaScript 클립보드로 복사하기 - 제타위키 다음 문자열 포함... zetawiki.com function copyToClipboard(val) { var t = document.createElement("textarea"); document.body.appendChild(t); t.value = val; t.select(); document.execCommand('copy'); document.body.removeChild(t); }

Gem : https://github.com/joshuajansen/magnific-popup-rails : gem 'magnific-popup-rails', '~> 1.1.0’ Git : https://github.com/dimsemenov/Magnific-Popup Demo : http://dimsemenov.com/plugins/magnific-popup/ Codepen demo : https://codepen.io/collection/nLcqo/ closeBtnInside 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Example 1: From an element in DOM $('.open-popup-link').magnificPopup({ type:'inline', midC..

설치 로컬에서 설치 $ gem install mustache Gem 파일에서 선언 gem "mustache", "~> 1.0" {{ }} : http://mustache.github.io/ 자바스크립트 : https://github.com/janl/mustache.js Gem : https://github.com/mustache/mustache.github.com 사용법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Loading... Hello {{ name }}! function loadUser() { var template = $('#template').html(); Mustache.parse(template); // optional, speeds up ..

JavaScript가 프로토타입 기반의 OOP 인 줄은 사실 잘 몰랐다. 위키백과 : 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 이런 부분에서 js를 많이 배워두면 좋을 것 같다. 이제 기본 문법만 쓰다가 드디어 최신 문법을 적용하겠다면 꼭 배워두고 가야하는 것들이 있다. Class 기술문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes class를 사용할 때 function을 사용하지 않아도 된다. class Polygon { constructor(height,..

스크롤로 이동하여 이미지 화면이 다가오면 이미지를 슬라이드로 나타낸다. (https://github.com/KIMSG/javascript30/blob/master/day13/index.html) debouce 함수는 이미지를 나타내게 해주는 함수이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function checkSlide(e) { sliderImages.forEach(sliderImage => { const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown ..

비밀키를 누르면 유니콘이 나오도록 하는 것입니다. (https://github.com/KIMSG/javascript30/blob/master/day12/index.html) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); if(pressed.join('').includes(secretCode)){ console.log('DING'..

비디오 플레이어 활용하기 (https://github.com/KIMSG/javascript30/tree/master/day11) Html, css, js 파일 총 3개가 있다. 1 2 3 4 5 /* Build out functions */ function togglePlay() { const method = video.paused ? 'play' : 'pause'; video[method](); } Colored by Color Scripter cs paused 속성은 동영상이 재생중이면 true, 정지되어 있으면 false를 반환합니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused 1 2 3 function skip..

shift키를 눌러서 checkbox 연속 선택하기 https://github.com/KIMSG/javascript30/blob/master/day10/index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handleCheck(e) { let inBetween = false; if(e.shiftKey && this.checked){ checkboxes.forEach(checkbox => { console.log(checkbox); if(checkbox ..