너와 나의 프로그래밍

웹 어플리케이션을 만들때 검색 기능을 많이 만들곤 한다. 간단하게 filter 함수와 match함수, 정규식을 통해 간단하게 구현할 수 있다. (위 예제는 Vue.js로 구현한 화면입니다.) 리스트(array)에 filter Method로 간단하게 해결하는 방법입니다. 위 예제는 title, headline, subtitle 모두 대소문자를 구분하지 않고 검색을 하는 코드입니다. 정규식의 "i" 플래그쉽을 통해 보다 고급적인 검색이 가능합니다. 입력을 할 때 마다 '입력 값'이 정규식으로 대소문자를 구분하지 않는 방식을 match 함수로 통해 return 됩니다. (리스트 BBQ의 검색을 하는 화면) 이런식으로 javascript로 간단하게 정규식을 표현 할 수 있습니다. (정규식의 대한 사용법은 정말 ..

SelectBox의 Option의 Text color를 바꾸는 동작을 구현하는 중 IE에서만 Text의 Color가 정상적으로 변경되지 않는 문제가 발생하였다. DOCTYPE html> Document window.onload = function(){ var selectbox = document.getElementsByTagName('select')[0]; var options = selectbox.querySelectorAll('option'); document.getElementById('change').addEventListener('click', function(){ for(var i = 0; i < options.length; i++) { options[i].style.color = 'blue'..

IE에서만 Object.values()를 사용할 수 없는 문제가 발생.(진짜 스트레스 받는다...) FireFox, Edge, Chrome에서는 Object.values()를 쓰면 손쉽게 JSON의 키 값을 가져올 수 있지만, 유독 IE만 안되는 현상이 있어서 Jquery와 javascript를 써서 값을 구하는 방식을 구현해 봤다. 꼭 저렇게 안구하고 key값, value값 따로 구하려고 한다면 반복문을 사용해서 값을 뽑아내는 것을 추천한다. ▼결과값. for...in 참고 자료 : https://msdn.microsoft.com/ko-kr/library/55wb2d34(v=vs.94).aspx

간혹 HTML안에 다른 HTML을 삽입하고 싶은 경우가 종종 생긴다. JSP 같은 경우는 단순 Include를 시켜주면 되지만, 순수 HTML과 Javascript로 구현하기가 까다롭다. 아래의 예제는 header와 footer를 index.html에서 다른 html을 불러오는 식으로 구현했다.

IE8 이후 버전의 Textarea는 자동으로 늘어나지 않는다. ex) function keyup(obj) { obj.style.height = '1px'; obj.style.height = (obj.scrollHeight) + 'px'; } 이런식으로 스크립트 처리를 해서 자동으로 줄바꿈이 될 수 있도록 처리를 하였다.

[Javascript] Chrome에서 TextBox를 onblur->focus를 했을 때 무한 루프 현상 다른 브라우저(Edge, FF, IE)에서는 발생하지 않았으나, Chrome에서만 발생하는 문제가 있었다. window.onload = function() { var input = document.getElementById("test"); input.addEventListener("blur", function() { if (confirm("confirm")) { alert("true."); } else { alert("false."); input.focus(); } }); } input이 blur가 되면 confirm창으로 확인/취소를 하고 취소를 하면 input에 다시 focus를 주는 기능을 구..