JavaScript & jQuery18 jQuery - 여러 대상에 같은 이벤트 바인딩 & 이벤트 객체 핸들링 jQuery - 여러 대상에 같은 이벤트 바인딩 & 이벤트 객체 핸들링 개발 도중 초기에는 두가지 기능밖에 없던 버튼 기능이 다섯개로 늘어나면서 중복되는 코드가 많아져서 리팩토링하는 과정에서 jQuery를 이용하여 이벤트 바인딩을 하였다. 다섯개에 버튼중 클릭된 객체를 얻기 위해 이벤트 객체를 이용하여 정보를 얻는 과정을 정리한다. 여러 대상 이벤트 바인딩하기 기존에는 다음과 같이 각각 개별로 이벤트가 구현이 되어 있었다. let lowBtn = document.getElementById("low-btn"); lowBtn.addEventListener( 'click', function(){ }) 이렇게 한두개 일때는 문제가 없지만 개수가 늘어남에 따라 계속 만들어주고 중복되는 코드들이 발생하여 유지보수에.. 2021. 7. 28. JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기 JavaScript - z-index 값 동적으로 변경 & 특정 문자를 포함한 클래스 찾기 구현하는 프로젝트에서 여러개에 모달창을 띄워서 정보를 나타내는데 여러개를 동시에 띄우면 css의 적용된 z-index값이 그대로 적용되므로 내가 클릭한 모달창을 제일 앞으로 띄우기 위해서는 클릭이벤트가 발생할때 마다 동적으로 값을 변경해줄 필요가 있다. 그 과정에서 z-index값 변경시 주의점과 변경해줄 모달들만 찾기 위해 사용한 특정 문자를 포함한 클래스 찾는 방법을 정리한다. z-index값 변경 보통 css의 style 속성 값을 변경할때 아래와 같이 많이 사용한다. document.getElementById("target_img").style.src = "book.gif"; 이와 같이 생각해서 docume.. 2021. 7. 26. Include HTML을 이용한 html 파일 분리하기 들어가며 웹페이지 구조를 잡다보면 중복적으로 들어가게 되는 코드들이 존재하게 된다. 예를들어 상단에 헤더나 하단의 푸터같은 경우를 예로 들 수 있다. 기존 스프링에서 했을때는 thymleaf를 이용하여 이 작업을 하였는데 이번에 javascript만으로도 분리를 하는 방법을 알게 되어 정리한다. includeHTML.js 해당 스크립트문을 통해서 include-html이 포함된 html 파일을 로드할 수 있다. function includeHTML(callback) { var z, i, elmnt, file, xhr; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i.. 2021. 7. 21. JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기 JavaScript - Google Map API를 이용하여 웹페이지에 구글맵 띄우기 웹페이지들을 보다보면 오시는길과 같은 서비스 페이지에 맵 기능이 있는 것을 보았을 것이다. 구글에서 제공하는 google map api를 통해서 쉽게 구현이 가능하다. API KEY 발급 먼저 코드를 작성하기 전에 api를 사용하기 위한 API KEY를 발급받아야한다. 어려운 내용이 아니고 다른 블로그에 발급받는 방법에 대해 잘 정리된 글들이 많아 이 부분은 생략을 하겠다. 아래 사이트에 접속하여 발급이 가능하다. https://console.cloud.google.com/apis/dashboard Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을.. 2021. 7. 19. JavaScript - '==' 와 '===' 차이점 JavaScript - '==' 와 '===' 차이점 자바스크립트에서는 '='가 3개인 비교 연산자가 있다. 2개와 3개의 차이점을 알아보자. 차이점 '==' : 비교하는 두개의 값을 강제로 같은 형으로 변환 후에 비교를 수행한다. '===' : 비교하는 두개의 값이 타입과 값이 모두 같을 경우에 true를 리턴. 즉, '==' 연산자는 타입이 다르더라도 같은 형으로 변환했을시 값만 같으면 true를 리턴하는 것이다. 아래 예제를 통해 쉽게 알아볼 수 있다. See the Pen 문자열 by anna (@hianna) on CodePen. 여기서 추가로 null과 undefined를 비교를 하게 되면 결과는 어떨까? 위에 결과를 보면 어느정도 예상이 가능할 것이다. 결과는 '=='로 비교하였을때는 tru.. 2021. 7. 16. JavaScript - 페이지 전체 로딩 표시 띄우기 JavaScript - 페이지 전체 로딩 표시 띄우기 JavaScript와 JQuery를 이용하여 쉽게 표시가 가능하다. 먼저 전체 스크립트 소스는 다음과 같다. 사용방법 다음과 같이 3개의 함수를 선언해주고 html에 id가 mask인 div를 하나 만들어준다. 그리고 원하는 타이밍에 loading 함수를 호출해주면 loading에 path에 맞는 gif 이미지가 뜨는 방식이다. 위에 예제로는 setTimeout 함수를 사용하여 3초가 동작하다가 closeLoadingWithMask 함수를 호출하여 종료하는 방식이다. 이렇게 원하는 시간 뒤에 종료할때는 setTimeout 함수를 사용하면 되고 따로 종료 시점이 필요한 경우에는 그 시점에 해당하는 함수 안에 closeLoadingWithMask 를 호출.. 2021. 7. 15. 이전 1 2 3 다음
