기초/자바스크립트
-
[JS] Map, Filter, Reduce기초/자바스크립트 2022. 12. 17. 02:53
인프런 강의 정리 함수형 프로그래밍과 Javascript ES6+ *custom Map 함수 /** f : 맵 속성을 위임할 함수 iter : 이터러블을 반환하는 제너레이터 function : 이터러블을 받아 맵을 생성하는 함수 **/ const map = (f, iter) => { let res = []; for (const a of iter) { res.push(f(a)); } return res; }; *원하는 value만 맵으로 생성 console.log(map(p => p.name, products)); console.log(map(p => p.price, products)); /** let names = []; for (const p of products) { names.push(p.name)..
-
[JS] 제너레이터기초/자바스크립트 2022. 12. 17. 00:40
인프런 강의 정리 함수형 프로그래밍과 Javascript ES6+ 일반함수 이름에 *을 붙여 제너레이터 함수를 만든다 제너레이터 함수 : 이터레이터를 만들어준다. 마지막 return 값은 done을 할 때 반환되는 값이다. function *func() { yield 1; if ( false ) yield 2; yield 3; } 제너레이터는 문장을 순회할 수 있는 값으로 만들 수 있다. 제너레이터를 통해 순회할 수 있는 이터러블을 쉽게 만들 수 있다. //제너레이터 코드를 이용한 홀 수 이터러블 만들기 //1씩 무한하게 증가시키는 함수 function* infinity(i = 0) { while (true) yield i++; } //1씩 무한하게 감소시키는 함수 function* infinity2(i..
-
[JS] 일급 함수와 고차함수기초/자바스크립트 2022. 12. 14. 19:04
인프런 강의 정리 함수형 프로그래밍과 Javascript ES6+ 일급함수 - 함수를 값으로 다룰 수 있다. - 조합성과 추상화의 도구이다. - 함수가 값으로 다뤄질 수 있다. 고차함수 - 함수를 값으로 다루는 함수 - 함수를 인자로 받아서 실행하는 함수 -일급함수 예제 const inc = x = x + 1; log( inc ); // x = x + 1 log( inc(10) ); // 11 const func1 = () = () => 1; const func2 = func1(); log( func1() ); // () => 1 log( func2 ); // () => 1 log( func2() ); // 1 고차함수 - 함수를 인자로 받아서 실행하는 함수 const apply = func => fun..
-
GridSatck (Test.html)기초/자바스크립트 2022. 3. 16. 11:30
대쉬보드를 위젯형식으로 만드는 방법을 찾아보다가 좋은 소스를 발견했다. https://gridstackjs.com/# gridstack.js | Build interactive dashboards in minutes. Getting Started Create your first interactive grid by copy-pasting the HTML+JS, as seen below... Code npm install gridstack then in html: .grid-stack { background: #FAFAD2; } .grid-stack-item-content { background-color: #18BC9C; } var items = [ {content: ' gridstackjs.com 사용법..
-
[JS] 모자이크 처리기초/자바스크립트 2022. 3. 4. 09:39
테스트 페이지 https://eaststar1129.github.io/mozaic.html 구성도 마우스를 올렸을때 그림에 마우스 영역이 나타나며 모자이크를 클릭시 모자이크 / 되돌리기를 구현 코드 Canvas 활용 Canvas 3개 - 원본 - 마우스 영역 - 수정되는 영역 페이지 로드시 원본, 모자이크영역에 이미지 삽입, hover영역 초기화 마우스 move시 hover 영역에서 사각형을 계속 표시 마우스 out시 hover 영역 초기화 마우스 click시 원본데이터를 가져와 모자이크 / 원본그대로 수정데이터에 삽입 Canvas의 index는 원본 < 수정본 < hover 순 [css] html, body{ margin:0; padding:0; } #divCanvas { position:relativ..
-
[Javascript] OpenLayers + GeoServer + PostGIS + VWORLD + WFS,WMS기초/자바스크립트 2020. 11. 11. 16:23
[목표] 제공받은 SHP파일을 DB에 저장하고 웹페이지에서 데이터를 불러와 수정할 수 있는 사이트를 개발 [PPT 정리] drive.google.com/file/d/1rcVbrXGgZy5zdDSkk-uvDB16624rB0cw/view?usp=sharing [환경설정] *Windows 10 64bit *Tomcat 9.0 *Java OpenJDK 1.8.0 [설치프로그램] *postgreSQL www.postgresql.org/ PostgreSQL: Downloads Downloads PostgreSQL Downloads PostgreSQL is available for download as ready-to-use packages or installers for various platforms, as we..
-
[JS] 기초 훈련(내장함수)기초/자바스크립트 2017. 4. 26. 17:17
Javascript자바와는 상관이 없다.정적인 HTML을 보완하기 위한 용도HTML 문서를 제어할수 있는 동적인 언어HTML5 + Javascript ( 표준 채택 )msg박스alert( " " ) 메세지박스alert("문자열") prompt : 입력받기prompt("설명","초기값"); confirm : 확인 / 취소 true / false 값으로 받기confirm("문자열") = > 값을 true/false값으로 반환한다 document : 현재 문서의 있는 저장된 값들을 찾을 수 있다.찾는 값이 많은 경우 배열(리스트)로 읽어오기에 인덱스로 찾아준다ex) .getElementsByTagName("p")[0]> 첫번째 p태그의 정보를 가져온다. .all사용된 모든 태그들을 가져온다. .getEleme..