유랑하는 개발자

스프링에서 게시판을 공부하며, form 에 입력된 데이터를 컨트롤러에 전송 하기 전에

유효성 검사를 하고 싶었지만, form 내부에 있는 input태그의 submit 타입은,

클릭 하면 바로 전송이 되서 유효성 검사를 진행 할 수 없었습니다.

그때, submit 타입을 button 타입으로 바꿔주시고

클릭 이벤트 발생시 form 을 submit 해주면 됩니다.

		$("#form1").on("click", function() {
			var title = $("#title").val();
			var startedDate = $("#startedDate").val();
			
			if(title==""){
				alert("Write the Title");
				$("#title").focus();
			} else if(startedDate==""){
				alert("Select the Started Date");
				$("#startedDate").focus();
			}
			
			document.getElementById("postForm").submit();	// 유효성 검사 후 submit
		});

브라우저 객체(BOM)의 객체인 screen 객체 메소드에 이은,

location객체와 history 객체의 메소드 입니다.

location.href : URL을 설정 및 반환 합니다.

location.host : URL 호스트 이름과 포트 번호를 설정 및 반환합니다.

location.hostname : URL의 호스트 이름을 설정 및 반환합니다.

location.hash : URL의 해쉬값을 설정 및 반환합니다.

location.origin : URL의 프로토콜, 호스트이름, 포트번호를 반환합니다.

location.protocol : URL의 프로토콜을 설정 및 반환합니다.

location.port : URL의 포트 번호를 설정 및 반환합니다.

location.search : URL의 쿼리스트링을 설정 및 반환합니다.

location.reload() : 화면을 새로고침 합니다.(F5와 같은 기능)

history.length : 방문 목록 갯수를 표현합니다.

history.back() : 이전 페이지로 이동 합니다.

history.forward() : 존재하는 다음 페이지로 이동 합니다.

history.go() : 인덱스 값에 맞춰 페이지가 이동 합니다.

navigator.appCodeName : 브라우저 이름을 반환합니다.

navigator.appName : 브라우저 이름을 반환합니다.

navigator.appVersion : 브라우저의 버전 정보를 반환합니다.

navigator.cookieEnabled : 쿠키 사용 여부를 반환합니다.

navigator.geolocation : 유저 접속 위치의 Geolocation 객체를 반환합니다.

navigator.language : 브라우저의 사용 언어를 반환합니다.

navigator.onLine : 온라인 브라우저 인지 확인합니다.

navigator.platform : 운영체제 정보를 반환합니다.

navigator.product : 브라우저 엔진 이름을 반환합니다.

navigator.userAgent : 서버 정보를 반환합니다.

navigator.javaEnabled() : 자바 사용 여부를 확인 합니다.(boolean)

결과 값이 보이는 내용만 테스트 하였습니다.

	console.log(navigator.appCodeName);
	console.log(navigator.appName);
	console.log(navigator.appVersion);
	console.log(navigator.cookieEnabled);
	console.log(navigator.geolocation);
	console.log(navigator.language);
	console.log(navigator.onLine);
	console.log(navigator.platform);
	console.log(navigator.product);
	console.log(navigator.userAgent);
	console.log(navigator.javaEnabled());

실행 결과 :

단순하게 날짜 (연/월/일)을 받아 현재 날짜 기준 디데이를 계산하는 코드입니다.

today는 Date() 객체를 이용한 오늘 날짜를 계산하는 변수이고,

stdDate는 입력받은 날짜를 Date()객체로 저장하는 변수입니다.

stdDate의 월에 -1을 해준 이유는, 

1~12월이 1~12가 아니라 0~11이기 때문입니다.

	var today = new Date();

	var inYear = prompt("년도 입력");
	var inMonth = prompt("월 입력");
	var inDate = prompt("일 입력");
	
	var stdDate = new Date(inYear,(inMonth-1),inDate);
	var gapDate = stdDate.getTime() - today.getTime();
	
	var gapDay = Math.ceil(gapDate / (60*1000*60*24));
	
	if(gapDay<0) {
		gapDay = -gapDay;
		console.log(gapDay+"일 지났습니다.")	
	} else if(gapDay>0) {
		console.log(gapDay+"일 남았습니다.");
	} else if(gapDay==0) {
		console.log("당일 입니다.");
	}

결과 :

홈페이지 개발시 날짜 및 시간을 출력하는 소스입니다. 

자바스크립트 내장객체중 Date 객체를 사용 하였습니다.

Date 객체의 getDay() 메소드는 현재 요일을 0(일)~6(토) 까지의 숫자로 표시 해줍니다.

그래서 switch 문을 이용하여 요일로 수정 하였습니다.

	var dt = new Date();
	var year = dt.getFullYear(); // 년도
	var month = dt.getMonth();	 // 월
	var date = dt.getDate();	 // 일
	var day = dt.getDay();		 // 요일(포맷 전)
	var hours = dt.getHours();	 // 시간
	var mins = dt.getMinutes();	 // 분
	var snd = dt.getSeconds();	 //초
	var msnd = dt.getMilliseconds(); // 밀리초
	
	console.log(day);
	var dayName;	// 요일(포맷 후)
	
	switch(day) {
		case 0:dayName="일요일"; break;
		case 1:dayName="월요일"; break;
		case 2:dayName="화요일"; break;
		case 3:dayName="수요일"; break;
		case 4:dayName="목요일"; break;
		case 5:dayName="금요일"; break;
		case 6:dayName="토요일"; break;
	}
	
	document.write(year+"년 "+month+"월 ",+date+"일 "+dayName+"
");
	document.write(hours+"시 "+mins+"분 "+snd+":"+msnd+"초");

출력 결과 : 

배열을 추가하는데 2가지 종류가 있습니다. 

1. 하나의 데이터를 추가할 때

2. 두개 이상의 데이터를 추가할 때 

var singularAdd = ['1', '2'];
var pluralAdd_1 = ['a', 'b'];
var pluralAdd_2 = ['A', 'B'];

singularAdd.push('3');
pluralAdd_1 = pluralAdd_1.concat(['c', 'd']);
pluralAdd_2 = pluralAdd_2.concat(['C', 'D', 'E']);

console.log(singularAdd);
console.log(pluralAdd_1);
console.log(pluralAdd_2);

결과 값 :

<input type="text"/> 박스를 이용하여 

1번 박스에서 2번 박스로 value값을 전송하는 방법입니다.

제이쿼리의 val() 메소드는 해당 영역에 있는 value 값을 불러 올 수 있습니다.

그 이후 document.getElementById("txtBoxId").value 에 해당 val() 값을 넣어주면 됩니다.

html 태그

        function test01() {
                 document.getElementById("txtBox2").value = $("#txtBox1").val();
	}