분류 전체보기
[JSP] 구글 차트를 이용한 그래프 그리기
file: Personal.jsp .. 체중 변화 그래프 DB에 기록된 체중 데이터를 가지고 그래프를 그리고자 하였다. 인터넷에 검색해 보았을때 네이버에서도 Billboard.js라는 이름의 차트를 그리는 프로그램을 제공하는 듯 하다. 네이버보다 먼저 떠오른 것이 구글 차트여서 구글 차트를 이용해보려고 하였다. https://developers.google.com/chart Charts | Google Developers Interactive charts for browsers and mobile devices. developers.google.com 구글에서는 친절하게 설명 페이지를 제공하고 있지만 실제로 응용해보려니 어려움이 많았다. 차트를 그리는 기본적인 틀은 페이지에서 마음에 드는 그래프의 코드를..
[Today I Learn] 2022.05.26
TIL 2022.05.26 - [JSP] - [Ajax] Oracle DB로부터 데이터를 가져와서 출력하기 button 태그의 경우 type="button"을 지정하지 않으면 자체로 sumit이 작동한다. → 가급적 을 습관적으로 입력하도록 하자 input 이클립스에서 빨간 밑줄이 발생하더라도 좌쯕 코드행 번호에 마우스를 갖다대었을 때 오류 메시지가 나오지 않으면 중요한 오류는 아니므로 걱정을 덜어도 된다 request.getContextPath()을 사용한 경로 설정에 주의하기 input 태그의 값을 변경하지 못하도록 하려면 readonly를 설정한다 자바에서 정수/정수의 계산은 몫 부분만을 결과값으로 반환한다. 1/3 = 0 1/(double)3 = 0.333 What I did ajax 학습 개인 ..
[Today I Learn] 2022.05.24
TIL jQuery - 입력양식에 대한 이벤트 change() : 내용을 변경할 때 focus() focusin() : 초점이 맞춰지기 바로 전에 발생 focusout() : 초점이 사라지기 바로 전에 발생 blur() : 초점이 사라지면 발생 select() : 선택할 때 submit() : submit 버튼을 누를 때 reset() : reset 버튼을 누를 때 - 이벤트 연결 종류 bind() : 현재 존재하는 문서 객체에만 ex) bind("click", function() {}); unbind() : bind()로 연결된 이벤트 제거 on() : bind와 비슷하게 이벤트 연결. 동적으로 추가된 요소들에게 이벤트 추가가 가능 ex) $(document).on("click", "#parent di..
[Today I Learn] 2022.05.23
TIL 5/19 날아가버린 TIL html() : 태그를 포함하는 부분 text() : 태그가 포함되지 않은 텍스트 부분 remove() : 한 개의 객체만 지움 empty() : 태그 내의 모든 태그 제거 append() : 태그 내에 요소 삽입 jQuery $(selector).method(function(event) { }); event : click, dbclick, mousedown, mouseup, mouseenter, mouseleave, mousemove, mouseout, mouseover가 있다 focus() : 커서가 들어갈 때 실행 blur() : 커서가 빠져나올 때 실행 prop() : 선언만 되면 되는 속성(checked 등)에서 속성을 껐다 켰다 할 수 있음 버튼을 클릭해도 동..
[JSP] select 태그의 데이터 전송
if(command.equals("/member/memberJoinAction.do")) { ... String memberEmail = request.getParameter("MEBMEREMAIL"); String[] memberHobby = request.getParameterValues("MEMBERHOBBY"); // memberHobby = ['축구','농구','배구']라고 할 때 String hobby = "": for (int i=0; i < memberHobby.length; i++) { hobby = hobby + "," + memberHobby[i]; } // hobby = ',축구,농구,배구' hobby = hobby.substring(1) // 0번 인덱스 값인 ','를 제거 : h..
[Today I Learn] 2022.05.19
TIL jQuery each() : for문과 비슷하게 생각. 배열 요소에 접근할 때 사용, 콜백함수를 사용(매개변수로 인덱스와 요소) filter() : 기준에 의해 걸러진 새로운 집단을 만들 수 있음. eq() : 필터 선택자, 특정 위치에 존재하는 객체 .each(array, function(index, element)) : $("h2").each(function(i, e) {})와 같이 이미 앞에서 array(선택된 배열)가 있다면 매개변수에 array를 사용하지 않아도 된다. each() 메서드의 형태 1. $.each(object, function(index, item){ }) 2. $(selector).each(function(index, item){ }) addClass("클래스명") : ..
[Today I Learn] 2022.05.18
TIL jQuery $("td:odd") 는 테이블의 td를 한 줄로 세운 후 홀수 번째 인덱스에 해당하는 요소를 찾는 것 css는 더 작은 범위에 있는 것을 우선으로 함 filter(index, object) 메서드 사용 매개변수로 index, element를 갖는다. 매개변수의 순서를 기준으로 index와 object를 읽어들인다 필터를 사용하면 성능을 개선시킬 수 있다 : 모든 is( ) : 판단의 메서드, true/false를 반환 $ : DOM 객체를 JQuery객체로 변환하기 위해사용 ex) $("input") : input태그를 jquery에 사용하기 위해 호출 function checkBtn() { $("input[name=check]").each(function() { if($(this)..
[Today I Learn] 2022.05.16
TIL jQuery 자바스크립트에서 사용하는 라이브러리 - 화면이 깜빡거리지 않아도 내용이 변경 가능하다 크로스 브라우징이 가능(IE, Edge, Chrome, FireFox..) CDN 인터넷 상의 다른 서버에 있는 파일을 빌려와서 사용 - 인터넷이 끊어질 경우 작동 x (직접 다운받은 경우는 작동된다) jQuery 사용시 아이디 선택자 주의 : 1개만 선택 가능 html에서 button을 만드는 방법은 2가지이다 , jquery에서는 input 으로 만든 버튼만 선택이 가능하다 jquery로 만든 객체는 dom객체와는 구분된다 자바스크립트에서 상태가 변할 때 함수 적용 : onchange 사용 열심히 배웠지만 학습단계에서는 바닐라 자바스크립트를 연습하는것을 추천 (by 니코). 작업 환경이 jQuer..
[Today I Learn] 2022.05.12
TIL 부트스트랩을 사용하면 확실히 직관적으로 페이지를 구성할 수 있다 페이지 작성 시 참고할 수 있는 웹 사이트를 찾아두는 것이 좋다. Html+CSS+JS, JS만 사용, 부트스트랩 사용 등 사이트 제작자 마다 다른 유형을 확인할 수 있다. 클래스, 아이디 명칭, 주석은 팀과의 협업을 위해 (간략히하거나 함축하기 보다는) 자세하게 적어두는 편이 더 좋다 작성자, 작성내용, 작성일자 까지 적어주면 가장 좋고, 간단히 작업할 경우 작성 내용만큼은 꼼꼼히 적자 스토리보드 작성시 웹사이트의 도움을 받자 : 피그마(http://www.figma.com) 수정 작업 할 때 주석으로 구역 표시부터 하는 게 도움이 되는 듯 웹 서버(정적) : 안정적, 낮은 비용, 로직 x WAS(동적) : 로직을 수행, 높은 비용..