정보 기술 놀이터

Chart.js는 JavaScript charting입니다. 여러 종류의 차트를 그릴 수 있지만 본 포스팅은 라인 차트 예제만 다루도록 차후에 다른 차트도 다뤄보도록 하겠습니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 스크립트는 사이트에서 다운받아 사용해도 되고, CDN으로 사용해도 괜찮습니다. // 직접 다운로드 // CDN view 파일에는 ca..

jqPlot는 차트를 그려주는 jQuery 플러그인입니다. jqPlot 튜토리얼을 진행해보도록 하겠습니다. 1. jqPlot download (http://www.jqplot.com/) 튜토리얼에는 가장 최신 버전인 jquery.jqplot.1.0.9.d96a669을 사용하였습니다. 2. js, css 파일 확인 차트 그리기에 필요한 jquery.jqplot.js, jquery.jqplot.css 파일이 있고, plugins에 다양한 기능을 제공하는 js 파일들이 들어있습니다. 본인의 웹 프로젝트에서 원하는 경로에 넣어주면 됩니다. 3. View 코드 작성 본 튜토리얼에서는 Springboot 기반 Mustache 템플릿 엔진을 사용하였습니다. 코드는 아래와 같습니다. jqplot 플러그인을 먼저id="..

업무 중에 데이터의 길이를 구해야 할 상황이 생겼다. 눈으로 세는 건 어렵고.. 프로그래밍 언어를 이용하기는 귀찮고.. 길이를 구해주는 툴을 찾는 것도 귀찮을 때.. 1. 브라우저를 실행한다. 2. 개발자 도구(F12)를 실행한다. 3. Console 탭을 선택한다. 4. 다음을 입력한다. let str = '길이를 구할 문자열' str.length

1. setTimeout() 일정 시간 후에 함수 호출 다음 스크립트를 실행하면 3초 뒤 "Don't turn it off" 알람이 나타난다. function warning(msg) { alert(msg); } setTimeout(warning, 3000, "Don't turn it off"); 다음과 같은 형태로 작성할 수도 있다. setTimeout(function (msg) { alert(msg); }, 3000, "Don't turn it off"); 2. setInterval() 주기적으로 일정 시간 후에 함수 호출 일정 간격으로 함수를 계속 호출한다. 배너, 게시판 등의 내용을 번갈아 보여주고자 할 때 setInterval()를 사용할 수 있다. var bannerNumber = 0; setI..