가자공부하러!

1. 목표2. 기능 3. 소스코드 1. 목표 1. 개발환경 > Spring Boot 2.1.7, JDK 8 2. JavaScript, jQuery, 정규식을 활용해 회원가입 기능 구현 > 뷰 요소 : ID, 이름, 비밀번호, 비밀번호 확인, 이메일 > 정규식 활용 뷰 요소 : - ID : 영소문자, 영대문자, 숫자만 가능하게끔 설정. 공백 포함 불가. - 이름 : 공백 포함 불가. - 이메일 : 이메일 형식에 맞게끔 설정(aaa@bbbb.bbb) 2. 기능 1. ID 중복체크 > ID 입력란에 키다운 이벤트가 발생하면 ajax 통신을 통해 중복된 아이디인지 판별 > 중복되지 않은 아이디인 경우에만 회원가입 버튼 활성화 2. 입력요소 빈 칸 체크 > ID, 이름, 비밀번호가 비어있는지 체크 > 비어있지 않..

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. Calendar 외부의 값 가져오기1. 버튼 클릭 시 이벤트 가져오기 > 배열 형태 - 예) 2차원 배열 - 보낼 때 : var arr = [ {'title':'evt4', 'start':'2019-09-04'..

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. Full Calendar 한글표기 설정1. 참고 : https://fullcalendar.io/docs/locale#loading-locales-with-script-tags-and-browser-globals..

1. 개발환경1. 다운로드 > Javascript Full Calendar 홈페이지 : https://fullcalendar.io > Javascript Full Calendar Scheduler : https://fullcalendar.io/docs/premium 2. 실습환경 : Spring Boot 2.1.7, JDK8, JSP, tiles, Full Calendar 4.3.1 3. 적용페이지 : src/main/webapp/WEB-INF/views/calendar/calmain.jsp 2. 적용방법1. 프로젝트 폴더로 다운로드 받은 fullcalendar의 packages 폴더 import > 경로 : src/main/resources/static/fullcalendar 2. view 작성 > c..

Javascript와 jQuery로 DOM을 조작하여 1990년 1월부터 2030년 12월까지 캘린더를 그리는 코드 구성1. calmain.jsp - JSP 뷰 2. script - Javascript, jQuerty 코드3. CalendarController.java - 컨트롤러4. CustomCalendarUtil.java - 달력 관련 유틸 클래스 1. calmain.jsp 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465calendar! ${y } 년 ${m } 월 Colored by Color Scriptercs 2. script..

기초(1) - 변수, 자료형, URL, 조건문, 반복문 등 https://opentutorials.org/course/3085/18868 수업의 목적 https://opentutorials.org/course/3085/18778 HTML과 JavaScript의 만남 1 (script 태그) https://opentutorials.org/course/3085/18782 HTML과 JavaScript의 만남 2 (이벤트) https://opentutorials.org/course/3085/18869 HTML과 JavaScript의 만남 3 (콘솔) https://opentutorials.org/course/3085/18870 데이터타입 - 문자열과 숫자 https://opentutorials.org/cour..

참고 사이트 1. medium.com 1. Javascript > document.getElementById("ID");- 아이디 값이 여러개일 경우 첫 번째 id값을 반환 > document.getElementsByName("name");- name에 명시된 조건에 맞는 모든 값들을 live NodeList로 반환- index로 접근이 가능하며 length 속성을 가짐 > document.getElementsByClassName("class");- 특정 클래스명을 가진 엘리먼트들을 NodeList로 반환 > document.getElementsByTagName("li"); - 특정 태그명을 가진 엘리먼트들을 HTMLCollection으로 반환 > document.querySelector(".myClas..

1. 슬라이더 1. https://pgwjs.com/pgwslider/ PgwSlider - Responsive slider for jQuery / Zepto Download Current version: 2.3 And of course, you will need Jquery or Zepto to use this responsive slider plugin. Example To test the adaptive slider, just resize your browser and/or configure some options, and see the result below: HTML: Shanghai, China Ne pgwjs.com 2. http://www.superslide2.com/SuperSlide.2..

java에서 개행문자가 포함된 문자열을 받아와서 parse 함수를 사용할 때, unexpected token 에러가 발생한다. 이 때, 문자열.data.trim().replace(/\r/gi, '\\r').replace(/\n/gi, '\\n'); 처리해주고 parse하면된다. $.ajax({ type : "GET", url : "http://localhost:8090/std190730_JSP6_BBS_reply/bbs?command=showonepost", data : {"seqNum":seq}, datatype : "json", success : function(data){ alert('success : ' + data.trim() + " , type : " + data.trim().type); va..

참고(Ajax) : https://opentutorials.org/course/1375/6843 1. Ajax가 뭐에요? > Asynchronous Javascript and XML- 비동기 : 어떠한 작업의 수행을 시작하고 완료되기 전에 다른 작업을 시작할 수 있다는 의미- javascript, xml- xml 말고 다른 데이터 타입도 많이쓰기 때문에 xml은 최초에 붙인 이름이라고 생각 > Javascript를 이용해서 내부적으로 통신할 수 있는 방식의 하나 > 특정 정보를 웹페이지를 로딩할 때 포함하지 않고 사용자의 필요에 의해 불러온다. 2. 기본 작동 방법 - Ajax는 어떻게 쓰나요? > 참고(jQuery Ajax) : https://opentutorials.org/course/1375/685..

참고 사이트1. 총 정리 : http://www.nextree.co.kr/p4327/ 2. 정규식 예제 : > https://coding-factory.tistory.com/196 > https://develop88.tistory.com/ 3. 정규식 함수 : https://tonks.tistory.com/20 jQuery 정규식1. 기본 정규식 > 숫자만 허용 : var chkNum = /^[0-9]+$/; > 공백 체크 : var chkBlank = /\s/g; 자주 사용하는 함수 1. search() > 검색된 문자열의 위치를 반환 > 예시) 입력문자열 : 123123, 찾을문자열 : 312, 결과 : 2(index) 2. test() > 조건식을 만족하는지 여부를 boolean 타입으로 리턴 > ..

Nodejs -> 자바스크립트를 이용해서 Nodejs가 갖고있는 기능을 호출하면? 웹애플리케이션을 Nodejs로 만들 수 있다. 참고 사이트 자바스크립트 : Mozilla MDN web docs이벤트 : 제타위키 자바스크립트 이벤트Document : w3schools Document Object Properties and Methods 분류 이벤트 설명 웹페이지 onload ★★ 웹페이지 로드가 끝났을 때 폼 onchange ★★ 값이 변경되었 때 폼 onsubmit ★ 폼이 제출될 때 마우스 onclick ★★★ 클릭되었을 때 마우스 onmouseenter ★ 마우스커서가 영역 안으로 들어왔을 때 마우스 onmouseover ★ 마우스커서가 영역 안으로 들어왔을 때 + 자식요소 출입 마우스 onmous..