목록웹개발/JS & JQuery (6)
알버트의 개발하는 블로그
* c3 차트 라이브러리 : d3.js를 베이스로한 차트 생성 라이브러리 - D3.js는 데이터를 기반으로 문서를 조작하기 위한 자바스크립트 라이브러리다. - c3 차트 라이브러리 사용법 1. 설치 - c3 차트 라이브러리를 관련 사이트(https://github.com/c3js/c3/releases/latest)에서 다운로드 후, 스크립트 및 css 로딩 * c3 차트 라이브러리는 d3 라이브러리에 의존적이므로 d3 라이브러리도 같이 로딩할 수 있도록 한다. 2. 차트 생성방법 c3 차트는 generate() 라는 함수로 생성 가능 차트를 표시하기 위한 div 생성 후 generate 함수 호출 (div에 chart 바인딩) And, call generate() with arguments: var ch..
웹소켓을 사용하면 서버와 브라우저간 연결을 유지한 상태에서 데이터를 교환할 수 있다. 이때 데이터는 '패킷'으로 전달되며 전송은 커넥션 중단과 추가 http 요청없이 양방향으로 이뤄진다. 웹소켓 커넥션을 만드려면 new WebSocket을 호출하면 되는데, 이때는 ws라는 특수 프로토콜을 사용한다. //웹소켓 커넥션 생성 코드 let socket = new WebSocket("ws://javascript.info"); 소켓이 정상적으로 만들어지면 밑에 네 개의 이벤트를 사용가능하다. 1. open – 커넥션이 제대로 만들어졌을 때 발생함 2. message – 데이터를 수신하였을 때 발생함 3. error – 에러가 생겼을 때 발생함 4. close – 커넥션이 종료되었을 때 발생함 let socket ..
1. keyup : 누른 키에서 손을 뗄 때 실행시켜 준다. $("#아이디명").keyup(function(e){ if(e.which == 13){ // 호출할 함수나 기능 작성 } }); 2. keydown : 키보드에 어떠한 키가 눌릴때 실행된다. $("input[name=name명]").keydown(function(e) { if(e.which == 13){ // 호출할 함수나 기능 작성 } }); which 대신 keyCode로도 실행이 가능하다. $(document).keyup(function(e) { // focus 되고 enter눌렀을 경우 if ($(".클래스명").is(":focus") && e.key == "Enter") { // 호출할 함수나 기능 작성 } }); $(document)..
1. JSON이란? JSON은 Java Script Object Notation 의 약자이다. JSON은 단순한 데이터 포멧이다. 데이터를 표시하는 방법일 뿐이다. 2. JSON을 쓰는 이유 : json파일이 가지고 있는 데이터를 받아서 객체나 변수에 할당해서 사용하기 위해서 3. JSON의 구조 1. Object(객체) - name/value 의 순서쌍으로 set이다. - {} 로 정의된다. ex) { "이름" : "홍길동" } 2. Array(배열) - 그 배열이 맞다. ex) [ 10, "array", 32 ] 4. JSON의 예 { "이름" : "홍길동", "나이" : 22, "특기" : ["배구", "야구"] } 5. JSON은 왜 쓰는가? 위의 예제 json파일의 이름을 ' 길동info.jso..
1. 어제 날짜 계산하기 var now = new Date();// 현재 날짜 및 시간 console.log("현재 : ", now); var oneDayAgo = new Date(now.setDate(now.getDate() - 1));// 어제 console.log("어제 : ", oneDayAgo); 2. 몇달 전, 몇달 후 날짜 계산하기 var now = new Date();// 현재 날짜 및 시간 console.log("현재 : ", now); var oneMonthAgo = new Date(now.setMonth(now.getMonth() - 1));// 한달 전 console.log("한달 전 : ", oneMonthAgo); var now = new Date();// 현재 날짜 및 시간 c..
1. 오늘의 날짜와 시간 구하기 var today = new Date(); //today값은 정리되지 않는 값으로 나온다. 그래서 포맷을 변경해주어야 한다. 2. 날짜 포맷 변경하기 ( YYYY-MM-DD ) var today = new Date(); var year = today.getFullYear(); var month = ('0' + (today.getMonth() + 1)).slice(-2); var day = ('0' + today.getDate()).slice(-2); var todayFormat = year + '-' + month + '-' + day; // todayFormat : 2021-05-30 3. 시간 포맷 변경하기 ( hh:mm:ss ) var today = new Date(..