본문 바로가기
반응형

자바스크립트

 (96)
[javeScript] 간단한 자동 슬라이드 (본인 참고용) 슬라이드 박스가 추가 되면 배열이 무너진다. 박스의 상대적 위치와 절대적 위치를 알고 이것을 적용할 수 있다면 해결 할 수 있으려나 모르겠다. 또한 마우스를 클릭한 상태에서 박스가 지정된 위치를 벗어나지 않고 다음 슬라이드로 넘어가게 하려면 드래그 관련 이벤트나 메서드, 계산법 등을 찾아봐야 겠다. 코드 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. 시연영상 간단한 캐러셀
[javascript] 배열에서 특정한 문자열을 포함한 경우만 뽑아 보았다. 가짜 검색창 기능을 만들어보면서, 제일 궁금했던 것은 어떻게 특정한 문자열을 포함한 리스트를 가져오는가 였다. 구글에 검색해보니 다양한 방법들이 존재했는데, 그 중에서도 간단하게 써먹을 만한 것을 하나 기록해볼 것이다. 우선 사용된 배열의 메서드는 filter() 하고 indexOf() 메서드 두 개이다. filter 메서드는 조건에 일치하는 요소만 뽑아서 새로운 배열로 반환하는 메서드이고, indexOf 메서드는 접근한 문자열이 파라미터와 일치하는 경우 해당 문자가 위치한 인덱스 번호를 반환하는 메서드인데, indexOf 메서드에서 걸러낸 인덱스 번호에 위치하는 문자열을 filter 메서드가 순회하면서 새로운 배열로 반환해주는 과정을 거친다. 아무튼, 이에 대한 설명을 포함해서 작성해보면 다음 코드로 ..
[javaScript] 프로미스(Promise)에 대해 알아보았다(1)ㅣstate 프로퍼티 까지만 프로미스를 쓰는 이유와 형식 우리가 비동기적으로 코드를 작성하다 보면 함수 안의 함수, 그 함수 안의 함수, 또 그 함수 안의 함수 ....... 형태로 중첩되는 방향으로 콜백함수를 매개변수로 사용할 수 있는데, 이를 보통 콜백 지옥(Callback Hell) 이라 부른다고 하더라. 이런 코드들은 결국 코드의 들여쓰기가 마치 > 요런 모양으로 깊어지니까 본인 포함해서 다른 사람이 이 코드를 본다면 혼란에 빠질 수 있고, 무엇보다 유지보수에 치명적이기 때문에 이를 보완하여 비동기로 처리하는 시점을 명확히 할 수 있는 객체가 바로 Promise 라고 한다. Promise는 ES2015 에 처음으로 등장했다고 하는데, 내가 코딩 공부를 시작한게 올해 반년 뒤였으니 엄청 오래되었네. Promise는 비동기적 처..
[javascript] 배열에서 중복값 제거 해보기 쇼핑몰을 만들어 보고 있는데, 중복되는 id가 장바구니에 포함되는 것이 너무 거슬렸다. 그래서 이를 제거하는 방법을 알아보니까 3가지나 있더라, 그 중에서 제일 어려워 보였지만 알아두면 다양한 곳에 써먹을 만한 것 하나만 정리해 놓을 생각이다. let arr = [1,2,2,2,2,4,4,5,6]; let newarr = arr.filter((arrEl,i)=>{ return arr.indexOf(arrEl) === i } ); console.log(newarr); 우선 indexof() 메서드는 배열.indexOf(찾고자하는 배열의 요소) 로 입력하게 되면, 찾고자 하는 배열의 요소가 위치한 인덱스 번호를 반환한다. 즉, 배열 [1,2,2,2,4,4,5,6].indexOf(5) 라고 했을 때 '5' 라..
[js 코드] 스크롤 시 특정 위치에서 div 배경색 바꾸기 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. ㅁ pageYOffset 와 pageXOffset window.pageYOffset 으로 접근하면 현재 웹 화면의 스크롤 세로축의 현재 위치에 대한 px 정보를 확인할 수 있다. 가로축 스크롤 위치는 window.pageXOffset 으로 접근이 가능하다. 참고로 scrollY 와 scrollX 는 앞서 언급한 pageYOffset 과 pageXOffset과 동일한 기능이다. 하지만, 웹 브라우저의 호환성을 생각한다면 쓰지 않는 것이 좋다 하더라. ㅁ 기존 태그에 새로운 클래스 추가와 삭제 기존의 태그에 새로운 클래스를 추가(add)하려면 다음과 같이 접근한다. 태그요소. classList.add('..
[javascript] 현재 위치 정보 가져오기 위해 Geolocation 을 찾아보았다. 날씨 앱을 만들어 보던 중 현재 위치 기반으로 현재 날씨를 보여주는 앱을 만들면 좋겠다 싶어서 관련 방법을 찾아보았다(솔직히 내부적으로 어떻게 돌아가는지 잘 이해는 안 된다. 그냥 정보를 가져올 수 있네? 같은 감탄만 가득). 찾아보니 Geolocation API 가 존재했고, 다행히 자바스크립트 자체적으로 내장된 API 였다. Geolocation API 는 사용자의 위치를 지도에 표시하거나 사용자의 위치와 관련된 개인화된 정보를 표시하기 위해 웹 앱에서 사용자의 위치 정보를 검색하려는 경우 등에 활용하는 것으로 요약하자면 현재 위치 정보를 가져오는 API 이다. 이 API는 내부적으로 다양한 인스턴스를 가지지만, 대표적으로 위치 기반 관련 정보를 포괄적으로 가져오기 위해서는 getCurrentPosi..
[js 지식] 문서객체모델 과 노드 계층 구조 문서객체모델(DOM) 문서객체모델(DOM; Document Object Model) 은 일종의 인터페이스로 우리가 바라보는 화면의 요소(Element)에 접근할 수 있도록 돕는 역할을 한다. 즉, 현재 우리가 보고 있는 이 블로그의 UI의 각 요소에 접근하여 조작하기 위해서는 DOM 이 필요하며, 이 DOM에 접근해서 관련 요소를 조작함으로써 웹에 관한 정보를 획득할 수 있게 된다. 다시 말해, DOM이 없다면 자바스크립트는 웹 페이지에 대한 정보를 얻을 수 없다는 말과 같다. 이러한 DOM 에서 제공하는 API는 document를 통해 사용할 수 있는데, 여기서 document 객체는 모든 DOM트리의 시작점에 해당하며 브라우저가 불러온 웹 페이지를 총징한다. 요약 하자면 index.html 내에 작성..
[javascript] 버튼 클릭 시 움직이는 슬라이딩 기능 버튼 클릭 시 슬라이딩 되면서 이미지가 전환되는 기능 1. 코드 See the Pen Untitled by youngwan2 (@youngwan2) on CodePen. let btn = document.querySelectorAll('button'); let 슬라이드 = document.querySelectorAll('.container .inner div'); console.log(슬라이드); console.log(btn); btn.forEach((btnEl)=>{ btnEl.addEventListener('click',()=>{ render(btnEl); console.log(btnEl); }); }); function render(btnEl){ 슬라이드.forEach((divEl)=>{ if(bt..
반응형

티스토리툴바