JavaScript35

• 

  Javascript Canvas drawImage 이미지 추가 방법 Javascript Canvas drawImage 이미지 추가 방법 Canvas에 이미지를 추가하기 위해서는 CanvasRenderingContext2D.drawImage() 를 활용합니다. 파라미터의 개수에 따라 일반 이미지 추가와 추가할 이미지의 일부 영역을 추가로 구분됩니다. 일반 이미지 추가 문법은 아래와 같습니다. 일반 이미지 추가 문법 drawImage(image, sx, sy, sWidth, sHeight); 파라메터 설명 [image]*필수 CSSImageValue, an HTMLImageElement, an SVGImageElement, an HTMLVideoElement, an HTMLCanvasElement, an ImageBitmap, or an OffscreenCanvas. [sx.. Programing/JavaScript 2022. 2. 18.

• 

  javascript 비공개 프로퍼티와 메소드, class prototype private public javascript 비공개 프로퍼티와 메소드, class prototype private public javascript 프로퍼티와 메소드를 private하게 활용하는 방법을 알아보겠습니다. 이번 포스팅의 선행학습이 되어야 하는 내용은 아래의 Link를 참고하세요! Link : https://aljjabaegi.tistory.com/586 javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype javascript 생성자 알짜만 빼먹기, 현업 활용 예 class, prototype 생성자 (Constructor) 는 인스턴스 (메모리상에 존재하게 하는) 객체를 생성하고 초기화 하는 함수입니다. 생성자 함수로 객체를 생성하고 aljjabaegi.tistory.com Link .. Programing/JavaScript 2021. 11. 10.

• 

  javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 javascript 수선의 발 구하는 방법, 직선과 점의 가장 가까운 점 구하는 방법, 폴리라인과 마커간 최단거리 이번 포스팅은 수학적인 지식이 약간은 필요합니다. 수선의 발(foot of perpendicular) 이란 수선과 직선 또는 평면이 만나는 점을 뜻하며, 한 점에서 직선 또는 평면에 대해 수선을 그었을 때 만나는 점을 의미합니다. 간단히 직선과 점을 이은 수선의 각이 90도가 되는 점을 의미합니다. (점과 직선과의 최단거리) 아래의 이미지 처럼 검은색 두 점을 연결한 직선과 파란색 점을 연결하였을 때 직각이 되는 빨강색 점을 수선의 발이라고 합니다. 이제 이 수선의 발을 구하는 공식을 사용하여 카카오 지도에 표시해 보도록 하겠습니다. 저의 경우 링크와(폴리라인) 정류소(마커) 사이의 최단거리.. Programing/JavaScript 2021. 9. 28.

• 

  javascript 2개 div 스크롤 위치 동기화 처리, 동시에 같은 위치로 움직이기 javascript 2개 div 스크롤 위치 동기화 처리, 동시에 같은 위치로 움직이기 2개의 그리드가 있을 때 어떤 그리드에서 스크롤을 움직이든 2개의 그리드의 스크롤 위치를 동기화 하는 방법에 대해 알아보도록 하겠습니다. 스크롤 위치는 돔 요소의 scrollTop 을 변경해주면 됩니다. 간단히 생각해보면 스크롤이 생기는 요소에 scroll 이벤트를 등록하여 다른 요소의 scrollTop 값을 적용해주면 될 것 같습니다. document.getElementById("grid1").addEventListener("scroll", function(){ document.getElementById("grid2").scrollTop = this.scrollTop; }); document.getElementByI.. Programing/JavaScript 2021. 9. 1.

• 

  javascript 배열 비교 방법 javascript 배열 비교 방법 javascript 에서 배열을 비교하는 방법을 알아보겠습니다. [배열의 길이로 비교] 배열의 길이는 Array.length 를 사용하여 비교할 수 있습니다. const array1 = [1,2,3,4]; const array2 = [4,3,2,1]; const compareLength = function(a,b){ if(a.length == b.length){ return true; }else{ return false; } } 단순히 길이 비교로는 배열의 값이 같은지 까지는 확인 할 수 없죠. 값을 비교해 보겠습니다. 제일 먼저 떠오르는 방법은 for문을 돌며 각각 비교하는 것이죠. [for문을 사용한 비교] if(compareLength(array1, array2).. Programing/JavaScript 2021. 8. 17.

• 

  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.

• 

  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.

• 

  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.

• 

  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.

• 

  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.

• 

  Javascript jQuery selector 비교 정리 querySelectorAll getElements 차이 NodeList, HTMLCollection 차이 Javascript jQuery selector 비교 정리 querySelectorAll, getElements 차이 NodeList, HTMLCollection 차이 javascript와 jQuery의 selector 를 비교 정리 하는 시간을 갖어 보겠습니다. jQuery의 selector에 대해서는 아래의 link를 참고하세요. Link : https://aljjabaegi.tistory.com/58 jQuery Selector 셀렉터 사용법 jQuery Selector 셀렉터 사용법 이번 포스팅에서는 jQuery의 기본 셀렉터에 대해서 알아보도록 하겠습니다. 셀렉터는 HTML DOM element 에 보다 쉽게 접근 할 수 있게 해주며 jQuery 에서 제공하는 막강한 기능의.. aljjabaeg.. Programing/JavaScript 2020. 1. 8.

• 

  JavaScript 정규식 정규표현식 알짜만 빼먹기 JavaScript 정규식 정규표현식 알짜만 빼먹기 이번 포스팅에서는 Javascript의 정규표현식, 줄여 정규식에 대해 알짜만 쏙쏙 빼먹는 시간을 갖어보겠습니다. 우선, 정규식이 뭐냐? MDN의 설명을 좀 참고하면, 정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서 정규 표현식 또한 객체 입니다. 라고 정의하고 있네요. 쉽게 말해 보다 쉽게 문자열 패턴을 만드는 방법입니다. 문자열 패턴을 만드는 방법이니 문자열 함수에서 주로 사용이 되겠죠? replace 나 split, match, search 등과 같이 사용하는 것을 보신 적이 있으실 꺼에요. 예를 들어보도록 하죠. Javascript 에는 java 와 같은 replaceAll 함수가 없습니다... Programing/JavaScript 2019. 6. 17.

• 

  jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회 추천 그리드 ▼ Link : https://aljjabaegi.tistory.com/593 [VanilaJS Free Grid library] Aljjabaegi Grid Grand Open [Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회, aljjabaegi.tistory.com jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회 jqGrid에 filterToolbar와 dateRangePicker를 적용한 화면 입니다. [구현된 기능] ● 그리드 헤더.. Programing/jQuery 2017. 11. 29.

• 

  javascript 자바스크립트 UNIX Timestamp 변환 timestamp to date String javascript 자바스크립트 UNIX Timestamp 변환 timestamp to date String Unix timestamp 를 Date String으로 변환하는 함수 function getTimestampToDate(timestamp){ var date = new Date(timestamp*1000); var chgTimestamp = date.getFullYear().toString() +addZero(date.getMonth()+1) +addZero(date.getDate().toString()) +addZero(date.getHours().toString()) +addZero(date.getMinutes().toString()) +addZero(date.getSeconds().toStr.. Programing/JavaScript 2017. 11. 24.