본문 바로가기

Frontend/JavaScript26

[JavaScript] 헷갈리지 말자! for loop 유형 (in, of) 화면단 스크립트를 짜면서 for 문을 도는데, 뭔가 이상하다 🤨 ... 왜 for loop 이 내가 원하는대로 안돌까 ... !!!!! 그 이유를 찾고, 앞으로 헷갈리지 않기 위해 작성하는 포스팅 :) 1. for in loop for in loop 는, for loop 를 "Index" 기준으로 돈다. 2. for of loop for of loop 는, for loop 을 "value" 기준으로 돈다. jQuery 대신 자바스크립트로 풀어야 할 땐 이 점 유의해서 원하는 for loop 를 사용하자 😉 2020. 3. 12.
input 태그에 숫자만 입력가능하도록 설정하기 화면을 개발하다보면, 누구나 한 번 쯤은 겪게 될 상황.input 태그에 숫자만 입력가능하도록 하는 것. 아마 일부분의 사람들은 input 타입을 text 로 설정한 뒤 onKeyup 이나 onKeyPress 등으로 이벤트를 잡아 숫자로 치환하는 방식을 쓸 것이다. 1cs 123onlyNumber : function(obj) { obj.value = obj.value.replace(/[^0-9]/g, '');}Colored by Color Scriptercs 하지만, 이 방법보다 더 좋은 방법이 있다. input type 을 "text" 로 하면 일반 키패드가 뜨니 HTML5 에서 새로 추가된 "number" 를 사용하면 숫자키패드가 노출된다는 것.(이것만 바꾼다고 해서 다 되는 것은 아니다, AOS 에.. 2019. 7. 26.
[JavaScript] Chart.js 로 파이차트 만들 때 backgroundColor 핸들링하는 방법 이번에는 Chart.js 로 데이터를 예쁘게 뿌려주는 작업을 진행하고 있다.작업을 진행하면서 차트에 표현 할 색깔을 내 마음대로 입혔는데 ㅋㅋㅋㅋㅋㅋ 팀장님이 색이 별로라고 하셔가지고 ㅠ클릭하면 랜덤으로 색이 바뀌도록 구현해버렸다 ㅎㅎ; (색이 마음에 안들면 클릭해서 변경하시라고 .. 🍒🍒) 하고 싶어서 여기저기 찾아보았지만,마땅한 방안을 찾을 수 없었고 결국 내가 열심히 삽질하다 만들었다.. ^-^ 뿌듯한 마음에 바로 공유하려고 달려옴. 우선, 기본적인 Chart.js 사용법은 https://www.chartjs.org/docs/latest/charts/doughnut.html 공식홈페이지 참고하면 되고 (!)여기서 가장 중요한 핵심 속성은 legend 와 onClick 이벤트이다. 1. 13번 라인과.. 2019. 7. 23.
KB927917 오류 해결 및 자바스크립트에서 Map 온전히 사용하기 자바스크립트에서 Key, Value 로 사용할 일이 생겨서 너무나 당연하게 아래와 같이 Map 을 선언, 사용했다.1234567var testScript = { map: new Map(), init: function() { ... }, ...};cs 그런데! 기획자 분에게 IE8 에서 페이지가 안뜬다고 연락이 왔다.. 이상하다, 내 VM에 있는 IE로 IE8 테스트했었는데..접속한 원격주소 받아서 확인해보니 진짜 페이지가 안뜬다 ㅋㅋㅋㅋㅋ 아래는 오류메세지.HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) 와. 진짜 엄청 애먹었다.사유를 보고 태그도 다 주.. 2019. 6. 14.
자바스크립트에서 IE버전 확인하는 방법 ==== 2019.07.23 추가 ==== 들어가기 전에 앞서서, 아래 방법보다 더 좋은 방법을 찾아서 위에 얹어놓습니다. $.browser.msie / $.browser.version 아래 적어놓은 긴 코드 필요없이 위 jQuery 로도 충분히 확인이 가능합니다! (safafi, chrome, ie 확인) JavaScript 에서 현재 보고 있는 화면이 Chrome 인지, IE(Internet Explorer) 인지 확인해야 될 때가 있다. 특히, 내가 사용한 jQuery 나 JavaScript 기능 중 에서 IE버전을 탈 때.... 브라우저에서 콘솔로 navigator.userAgent 명령어를 내리면 아래와 같이 뿌려주는데, 이걸로 파싱을 할 수 있다! * Chrome * IE8 * IE9 * IE.. 2019. 6. 12.
Array 확장 for 문 사용 시 유의할 점 요즘엔 일반적인 for 문이 아니라, 코드가 간결한 확장 for 문을 많이 사용한다. 하지만 ... 자바스크립트에서 아래처럼 Array 를 확장 for 문 돌렸을 때 유의할 점이 있는데, 그건 바로 IE8 이하에서는 Array 의 길이를 잘 못잡는지 이상하게 동작한다는 것 이다 8ㅁ8 var array = ["1", "2", "3"]; for (var value in array) { console.log(value); } IE8 에서 해당 부분을 디버깅했을 때, value 인 "1", "2", "3" 을 다 돌고 또 돈다. 그 때의 value 는 array 의 메소드들 ;; 어찌 됐든, 자바스크립트에서 Array 를 for 문을 돌려야 한다면 그냥 일반적인 for 문을 돌리자 ㅠ 참고 블로그 : http.. 2019. 5. 27.