진스

출처 : https://kkh0977.tistory.com/885 66. (javascript/자바스크립트) 터치 이벤트 등록 및 좌표 확인 실시 - touchstart , touchmove , touchend /* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* ===============.. kkh0977.tistory.com /* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascri..

SVG Line Animation SVG Line Animation SVG 속성을 활용한 애니메이션 최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9 웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속 ny-kim.tistory.com SVG Line Animation SVG 속성을 활용한 애니메이션 최근 열심히 웹 애니메이션을 찾아 공부하고 있습니다 :-9 웹 애니메이션을 그리는 데는 CSS 애니메이션이나 JS 라이브러리 등이 있는데, 오늘은 SVG 속성을 활용해 선을 그리는 애니메이션을 살펴보고자 합니다. SVG 살펴보기 준비운동 느낌으로 SVG에 대해 간단히 살펴봅시다. 아무 SVG 파일을 편집기로 열어보면 코드가 좌르륵 써있는 걸 볼 수 있습..

클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다 test checkTarget(event) { var ele = event.currentTarget; console.log(ele); event.target // 클릭된 span 태그를 반환 event.currentTarget // 이벤트가 바인딩된 div 요소를 반환 event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다.

https://shubamba.tistory.com/52 스와이프메뉴 클릭하면 가운데오기 swiper js버전 See the Pen swiper 선택요소 중앙정렬 by soohyeon (@sooh) on CodePen. 스크롤 버전 선택된 요소가 박스의 중앙정렬 될수있도록 scrollLeft값 조작 listWidth : 요소 전체 길이 boxHarf : 스크롤.. shubamba.tistory.com

안녕하세요. 오늘은 자바스크립트로 요소의 위치를 구하는 방법에 대해 포스팅 합니다. 요소의 위치를 구할 때, 생각해야할 개념이 있습니다. 이 개념은 자바스크립트 뿐만 아니라, 모든 화면 영역에서 공통으로 쓰이는 개념이라 생각하시면 됩니다. 해당 개념은 크게 절대위치와 상대위치 2가지로 설명 됩니다. 좌표를 처리하는 것은 생각보다 까다로우며, 단순히 API 하나로 처리되지 않습니다. 따라서 좌표를 잘 처리하기 위한 개념을 설명하고, 그 개념을 토대로 좌표를 구하는 방법에 대해 설명 할 예정입니다. 또한 Y값 기준으로 내용을 전개하며, 해당 개념을 그대로 X값을 구하시면 됩니다. 절대위치 와 상대위치란? 절대위치는 시작점으로 부터 떨어진 크기 값입니다. 중요한건 시작점이 어디인지 아는것이 매우 중요합니다. ..

출처 HTMLCollection과 NodeList 살펴보기 Ego sum operarius studens devsoyoung.github.io HTMLCollection과 NodeList 살펴보기 HTMLCollection과 NodeList는 DOM을 조작하다보면 종종 만나게 되는 컬렉션입니다. 둘 다 배열처럼 비슷하게 생겼지만 차이점을 가지고 있습니다. 각각 제공하는 메서드나 가지고 있는 노드의 타입이 다릅니다. 각각의 특징에 대해서 정리해봤습니다. HTMLCollection HTMLCollection은 문서 내에 순서대로 정렬된 노드의 컬렉션으로, 유사 배열입니다. HTMLCollection을 얻을 수 있는 간단한 방법은 HTML 엘리먼트의 children 프로퍼티에 접근하는 것입니다. console..

const people = [ {name:'사나',age:20,}, {name:'영희',age:21,}, {name:'철수',age:22,}, {name:'민정',age:24,} ] for for ( let i=0; i< people.length; i++){ console.log(people[i].name) } for in for ( let p of people){ console.log(p) } 구 최신 forEach 단순히 반복해줌 두번째 인자는 인덱스 people.forEach(function(person,index){ console.log(person,index) }) map 배열을 다른 배열로 재생산 const we = people.map(function(p){ return p.name //값을 ..

Array & Object 서로 구조가 비슷하지만 다르다. HTTP에서 메시지는 "문자열"로 전송이 되기 때문에 상대방에게 전송을 할 때 JSON.stringify() 메서드를 호출하여 JSON을 문자열로 만듭니다. 이 데이터를 받으면 다시 JSON으로 변환하기 위해 JSON.parese() 메서드를 호출하게 되고, 이 데이터를 JS Object의 값으로 할당하면 Object가 됩니다. const house ={ name:'이편한세상', year:1, palce:'서울' } json : 어떤 api에서 정보를 전송할때 많이 쓰이는 text파일 JSON.stringify() 메서드: JSON을 문자열로 만든다. const houseJSON= JSON.stringify(house) console.log(ho..