반응형 Programing/JavaScript123 동적 생성 요소 핸들링 비교 / 추가, 이벤트처리, 값 변경, insertAdjacentHTML, appendChild, innerHTML 동적 생성 요소 핸들링 비교 / 추가, 이벤트처리, 값 변경, insertAdjacentHTML, appendChild, innerHTML javascript 에서 요소를 동적으로 추가하는 방법에는 2가지가 있습니다. 첫 번째, insertAdjacentHTML 을 활용한 방법 HTML String을 만들어 추가하는 방법입니다. [구문] element.insertAdjacentHTML(position, htmlText); position 옵션에는 4가지가 있습니다. beforebegin : element의 전에 삽입 afterbegin : element의 가장 첫번째 child 위치에 삽입 beforeend : element의 가장 마지막 child 위치에 삽입 afterend : element의 다음에.. Programing/JavaScript 2021. 8. 4. javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링 javascript 이벤트 버블링 방지 이벤트 중복 방지 / 이벤트 버블링, 캡처링 이벤트 버블링이란 이벤트가 발생한 target 부터 부모로 이벤트를 전달 하는 것을 말합니다. var parentDiv = document.createElement("div"); parentDiv.addEventListener("click", function(){ alert("parentDiv click"); }); var childDiv = document.createElement("div"); childDiv.addEventListener("click", function(){ alert("child click"); }); var a = document.createElement("a"); a.addEventListene.. Programing/JavaScript 2021. 4. 13. iframe contentDocument contentWindow 차이 iframe contentDocument contentWindow 차이 오늘의 iframe 요소에 접근하는 contentDocument와 contentWindow의 차이를 알아보겠습니다. contentDocument, contentWindow 둘 다 iframe 하위 오소에 접근 할 수 있는 방법입니다. contentWindow 는 iframe의 window (전역)을 의미하고, contentWindow.document 는 contentDocument와 같습니다. contentWindow가 contentDocument의 상위 요소 라고 할수 도 있겠네요. IE에서는 contentWindow는 5.5 버전부터, contentDocument는 8버전부터 지원을 합니다. 추가적으로 iframe간 포커스 이동을.. Programing/JavaScript 2021. 3. 8. javascript nextSibling nextElementSibling 차이 javascript nextSibling nextElementSibling 차이 nextSibling, nextElementSibling 모두 같은 노드 레벨의 다음 값을 가져옵니다. 둘의 차이는 nextSibling은 공백이든, 텍스트든 가리지 않고 다음에 있는 것을 가져오게 되고, nextElementSibling 은 Element(요소)만 가져오게 됩니다. 예를들어 아래와 같은 HTML 코드가 있을 경우 nextSibling테스트 nextSibling과 nextElementSibling 의 결과를 보겠습니다. var aDiv = document.getElementById("a"); console.log(aDiv.nextSibling); //nextSibling테스트 console.log(aDiv.n.. Programing/JavaScript 2021. 1. 21. SVG 파일 읽어 DOM 객체로 변환, SVG 내용변경 후 다운로드 SVG 파일 읽어 DOM 객체로 변환, SVG 내용변경 후 다운로드 몇 백개되는 SVG 파일에 공통된 내용을 변경해 달라는 요청을 받았을 때 작성한 코드입니다. 우선 복수의 파일을 읽을 element 가 필요하겠죠? 몇 백개 되는 파일을 일일히 넣을 수 없으니 multiple로 설정합니다. 그리고 file에 change event를 등록해줍니다. var file = document.getElementById("file"); file.addEventListener("change", function(){ var files = e.target.files; for(var i in files){ (function(file, index){ setTimeout(function(){ var reader = new Fi.. Programing/JavaScript 2020. 11. 13. prototype chain 에 대하여, 상속의 개념, 중복을 줄이자! prototype chain 에 대하여, 상속의 개념, 중복을 줄이자! prototype의 개념과 활용에 대해서는 아래의 Link를 참고하세요! Link : aljjabaegi.tistory.com/295 Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. 자바스크립트의 모든 객체 들은 부모 역할을 하는 객체와 연결 되어 있습니다. 이런 부모 역할을 하는 객체를 Prototype이 aljjabaegi.tistory.com link : aljjabaegi.tistory.com/542 javascript 의 상속 첫번째 prototype 기반의 상속 java.. Programing/JavaScript 2020. 11. 4. javascript 의 상속 첫번째 prototype 기반의 상속 javascript 의 상속 첫번째 prototype 기반의 상속 javascript에서 상속을 구현할 수 있는 2가지 방식 중에 prototype을 이용한 상속에 대해 알아보겠습니다. javascript prototype에 대한 내용은 아래의 Link로 대체합니다. Link : aljjabaegi.tistory.com/295 Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. 자바스크립트의 모든 객체 들은 부모 역할을 하는 객체와 연결 되어 있습니다. 이런 부모 역할을 하는 객체를 Prototype이 aljjabaegi.tistory.com 일단 상속에.. Programing/JavaScript 2020. 10. 27. vanila javascript 개선된 초성검색 기능 구현 vanila javascript 개선된 초성검색 기능 구현 이전에 포스팅한 초성검색은, 단순 한글 초성 검색을 했을 경우 값을 조회하는 기능였습니다. Link : aljjabaegi.tistory.com/219 Oracle 오라클 자음 초성 추출 함수, 자음으로 검색, 초성 검색 Oracle 오라클 자음 초성 추출 함수, 자음으로 검색, 초성 검색 개발을 하다보면 자음으로만 검색할 수 있게 해달라는 요청이 들어오곤 한다. 그럴때마다 유용하게 사용하는 것이 아래의 함수이다 aljjabaegi.tistory.com Link : aljjabaegi.tistory.com/220 Mysql 자음 초성 추출 함수, 자음으로 검색, 초성 검색 Mysql 자음 초성 추출 함수, 자음으로 검색, 초성 검색 개발을 하다보.. Programing/JavaScript 2020. 10. 26. javascript 요소(Element)의 이동 추가 삽입 insertBefore() javascript 요소(Element)의 이동 추가 삽입 insertBefore() javascript의 insertBefore 함수는 특정 노드에 요소를 삽입할때 사용합니다. 테이블의 열의 순서를 변경할 때 유용하게 사용되죠 구분을 보시죠. 부모노드.insertbefore(삽입할 노드, 삽입할 노드의 다음 노드) 예를들어 아래와 같이 하나의 tr 태그에 6개의 td가 있다고 합시다. 이때 컬럼1을 컬럼3 앞에 삽입하고 싶다면, tr.insertBefore(td[0], td[2]); m가 됩니다. td[0] 은 컬럼1이 될 것이고, 컬럼3의 인텍스가 td[2]이니 td[0]이 td[2]앞에 삽입되게 됩니다. 좀더 자세하게 보도록 하죠. var tableHeaderTr = document.getEleme.. Programing/JavaScript 2020. 9. 28. Javascript Object Extend, merge, copy 객체 합치기, 병합하기 복사하기 assign Javascript Object Extend, merge, copy 객체 합치기, 병합하기 복사하기 assign 이번 포스팅에서는 Javascript 에서 Object를 다루는 방법을 알아보겠습니다. Object 선언 //리터럴방식 var obj = {a:'a', b:'b'}; //OBject생성자방식 var obj2 = new Object(); obj2['a'] = 'a'; obj2['b'] = 'b'; //생성자함수방식 function Func(c, d){ this.a : c, this.b : d }; var obj3 = new Func('a', 'b'); javascript 에서 Object를 선언하는 방식은 위와 같은 3가지 방식이 있습니다. 프로토타입 체이닝이 약간 다르긴 하지만 Object를 .. Programing/JavaScript 2020. 3. 16. customoverlay를 활용한 kakaomap marker 회전 마커회전 customoverlay를 활용한 kakaomap marker 회전 마커회전 기존의 마커 속성에 접근하여 마커를 회전하는 방법은 아래의 link를 참고하세요. link : https://aljjabaegi.tistory.com/321 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도 마커 회전하기, 이미지 회전, 방위각 적용 다음지도에 자동차 마커가 올라가는데 방위각에 따라서 회전해 달라는 요청을 받았습니다. 그런데 다음지도 도큐먼트에는 마커를 회전하는게 나와있지 않아, 마.. aljjabaegi.tistory.com 위의 방법은 단점이 있습니다. 카카오맵쪽에서 마커 회전에 대한 API를 제공하지 않기때문에, 내부 오브젝트의 이미지 변수명이 바뀌게 되면 동작하지 않게되죠. 매번 오브젝트의 변수.. Programing/JavaScript 2020. 2. 24. javascript call, apply, bind 차이점! 알짜만 빼먹기! javascript call, apply, bind 함수 알짜만 빼먹기 call, apply, bind 는 함수의 this를 명시적으로 바인딩 할때 사용합니다. 유용하면서 자주 사용되는 함수이고, 형태는 조금씩 다르니 익숙해 지도록 합시다. 위의 세 함수는 Function의 prototype으로 모든 함수에서 사용이 가능합니다. 프로토타입에 대해서는 아래의 Link를 참고하세요. Link : https://aljjabaegi.tistory.com/295 Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. Javascript prototype 프로토타입 이란? prototype을 사용하는 방법을 알아보자. 자바스크립트의 모든 객체 들은 부모 역할을 하는 객.. Programing/JavaScript 2020. 2. 21. javascript DOM 변경 감지 How to detect javascript dom change javascript DOM 변경 감지 How to detect javascript dom change ※IE에선 특정요소의 변화를 감지 못하는 경우가 있습니다. 그럴때 요소를 body로 변경하여 체크 하세요. 특정 DOM 요소의 변경을 감지하여 특정 이벤트 처리를 해야 할 경우가 있습니다. 이럴때 사용하는 것이 MutationObserver 입니다. MutationObserver 는 childList, attributes 등의 변경을 개발자가 감지 할 수 있도록 도와줍니다. 그럼 사용법을 보도록 하겠습니다. [문법] var mutationObserver = new MutationObserver( function callback }); mutationObserver.observe(element, optio.. Programing/JavaScript 2020. 1. 31. XMLHttpRequest ajax Spring @ResponseBody, @RequestBody 404 에러 json data null 이유 XMLHttpRequest ajax Spring @ResponseBody, @RequestBody 404 에러 json data null 이유 XMLHttpRequest 를 활용한 비동기 통신에서 404 에러가 발생하는 원인에 대해서 알아보도록 하겠습니다. XMLHttpRequest를 통한 비동기 통신부는 아래의 Link를 참고하세요. Link : https://aljjabaegi.tistory.com/520 Javascript ajax XMLHttpRequest 통신 구현 Javascript ajax XMLHttpRequest 통신 구현 최근 웹 개발 트랜드 최근 React, Angular, Vue, GO 등 다양한 Javascript 프레임워크들이 대두되면서 Jquery 의 점유율이 떨어지고 있는 것.. Programing/JavaScript 2020. 1. 16. Javascript ajax XMLHttpRequest 통신 구현 Javascript ajax XMLHttpRequest 통신 구현 최근 웹 개발 트랜드 최근 React, Angular, Vue, GO 등 다양한 Javascript 프레임워크들이 대두되면서 Jquery 의 점유율이 떨어지고 있는 것이 추세입니다. 2006년 jQuery 가 발표된 이후 브라우저간 갖고 있던 이질성이 해결되고, DOM 또한 효율적으로 다룰 수 있게 되면서 Javascript 프레임워크 1위 자리를 유지했었죠. 현재도 많은 사용자가 jQuery를 사용하고 있는 것도 사실입니다. 하지만, 스마트폰의 시대가 열리면서 한정적인 CPU와 메모리, 데이터의 사용으로 불필요한 코드들이 많아 무거운 jQuery는 개발자들이 점점 배제하기 시작합니다. Link : 다양한 javascript 프레임워크 V.. Programing/JavaScript 2020. 1. 16. 이전 1 2 3 4 5 6 ··· 9 다음 💲 추천 글 반응형