JS
-
AJAX parameter 타입 별 처리 방법JS 2023. 2. 13. 16:09
POST 1. String, int, boolean 등 단일 변수를 전송할 때 $.ajax({ type: 'POST', async: true, url: "url주소", data: {test: "test"}, success: function(response) { alert(response.data); }, error: function(error) { console.log(error); } }) @ResponseBody @RequestMapping(value = "/{workspace}/system/control/testMethod", method = RequestMethod.POST, produces = "application/json;charset=utf8") public String testMethod..
-
JQuery JS keyup 합산 이벤트JS 2022. 10. 13. 09:46
$(".className").on('keyup', function() { calSum(this); this.value = this.value.replace(/[^0-9.-]/g, '').replace(/^(-)|-+/g,'$1').replace(/^([^.]*\.)|\.+/g, '$1'); this.value = priceToString(this.value); let sum = 0; let inputList = document.getElementsByClassName("className"); for(let i=0; i
-
Video.js / videojs-yotube : video js로 유튜브 영상 재생하기JS 2022. 9. 11. 19:57
아직 업로드할 동영상에 대한 상세 설명을 듣지 못했기 때문에 일단 Video js로 작업을 진행했다. youtube 동영상을 재생하게 된다면 아마도 youtube player api로 변경할 듯하다. 1. css와 js를 임포트 한다. 2. html 작성 3. css 작성 .content { width: 100%; height: 100vh; max-width: 100%; background: darkolivegreen; overflow: hidden; } 끝!
-
c3.js 차트 라이브러리JS 2022. 6. 6. 18:24
https://c3js.org/ C3.js | D3-based reusable chart library Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom st c3js.org d3 기반의 차트를 쉽게 제작할 수 있게 해주는 자바스크립트 라이브러리 1. 사용하기 전 css 에 c3 css 링크 추가 c3와 d..
-
NodeJS : nodemailer을 이용한 이메일 전송JS 2022. 5. 1. 16:26
프로젝트에 임시비밀번호를 생성하고 메일로 전송하는 기능을 만들려고 애를 썼는데 nodeJS를 사용하니 스프링 부트를 사용할 때보다 훨씬 쉽게 구현이 가능했다. 다음에 또 사용할 일이 있을 때 도움이 될까해서 간단하게 튜토리얼을 작성해보기로 했다. 1. 메일 imap 설정 각 사이트마다 imap 설정창이 있으니 사용하려는 사이트의 메일 설정에서 IMAP 를 사용으로 체크한다. 2. 기본 폴더를 생성하고 npm init / npm i express nodemailer / npm i -D nodemon 또 필요한게 있다면 추가로 설치한다 3. intit 명령에서 설정한 entry point (ex: index.js, app.js ... ) 를 생성한다. const express = require('expres..
-
노마드코더 6일차JS 2021. 11. 15. 21:45
classList element의 class 내용물을 조작하는 것을 허용한다. #classList의 function * contains() : 명시한 class가 HTML element의 class에 포함되어있는지 알려준다. ex) if(h1.classList.contains(clickedClass)) { } -> classList가 clickedClass를 포함하고 있는지 확인 *remove() ex) h1.classList.remove(clickedClass); -> h1 classList의 clickedClass를 제거함 *add() ex) h1.classListList.add(clickedClass) -> clickedClass를 추가함 *toggle() : click이벤트가 일어나면 css로 s..
-
노마드코더 5일차JS 2021. 11. 14. 23:22
Event 마우스로 해당 영역에 마우스를 올리거나 클릭, copy/paste 했을 때 등 어떤 행동이 발생했을 때 어떤 기능을 수행할지 function으로 정의할 수 있다. 이벤트 사용하기 1. title.addEventListener("이벤트이름", 함수이름); -> .remmoveEventListener 을 통해 삭제할 수 있다. const h1 = document.querySelector(".hello:first-child h1"); console.dir(h1); //클릭 시 색 변경 function handleTitleClick(){ console.log("click!"); h1.style.color = "blue"; } //마우스가 해당 영역에 올라오면 출력 function handleMouse..