유랑하는 개발자

웹 페이지 사용자는 배터리 절약, 개인 정보 보호 등을 이유로

자바스크립트 사용을 비활성화 해 놓는 경우가 있습니다.

따로 설정하지 않았을때 default 값으로 js 사용이 비활성화 되어있는 경우도 있습니다.

그런 상황에서 자바 스크립트 활성화를 요청하기 위해 사용되는 태그가 <noscript> ~ </noscript> 입니다.

자바 스크립트를 사용하지 않는 사용자에게 메세지를 보내세요.(쪽지 메세지가 아닙니다)

스프링에서 게시판을 공부하며, 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
		});

Ajax 전송 때문에 거의 몇 일 동안 프로젝트 진행을 못 했는데

알고보니 제가 엉뚱하게 사용하고 있었네요 ㅠㅠ

Ajax의 이론을 자세히 모르시는 분은 꼭 먼저 이론을 이해 하시는걸 추천합니다.

간단하게,

ajax 메소드 안의 url 은 요청이 전송될 위치이며, type은 필요 방식에 설정 하시면 됩니다.

data 또한 전송할 데이터들을 선언 해주시면 되구요,

error, success, complete 는 예외처리라고 생각하실 수 있겠지만,

success 는 정상 처리 되었을때, complete는 finally 같은 구문이고,

error야 말로 예외처리라 할 수 있습니다.

$.ajax({
	url : "전송할 URL",
	type : "POST",
	data : {
		title : title,
		startedDate:startedDate,
		finishedDate : finishedDate,
		summary : summary
	},
	dataType : "json",
	error : function(error) {
		alert("error 발생");
	},
	success : function(data) {
		alert("전송 성공");
	},
	complete : function() {
		alert("최종 성공");
	}
});

웹페이지 개발을 보다 동적으로 하기 위해 제이쿼리를 사용하는데

이때 문서 객체 구조 요소를 선택하기 위해 '선택자'를 이용합니다.

선택자와 사용법 입니다.

브라우저 객체(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());

실행 결과 :

자바스크립트의 배열을 추가,  삭제, 정렬 기능을 사용할 수 있는

배열 메소드를 코딩 하였습니다.

join('문자열') : 배열 객체 데이터를 문자열로 이어줍니다.

reverse() : 배열 객체 데이터의 정렬 순서를 역방향으로 해줍니다.

slice(index1, index2) : index1 ~ index2 까지의 구간을 잘라서 표현합니다.

sort() : 배열 객체 데이터를 오름차순으로 정렬합니다.

concat(배열) : 선택된 배열+'배열'을 하나의 배열로 연결 합니다.

pop() : 배열 객체 데이터의 마지막 데이터를 삭제합니다.

push() : 마지막 인덱스에 새로운 데이터를 추가 합니다.

shift() : 배열 객체 데이터의 맨 첫번째 데이터를 삭제 합니다.

unshift() : 첫번째 인덱스 앞에 새로운 데이터를 추가 합니다.

	var arr1 = ['A', 'B', 'C', 'D'];
	var arr2 = ['가', '나', '다', '라'];
	var arr3 = [1, 5, 3, 8, 2, 7];
	var arr4 = ['E', 'F', 'G', 'H'];
	var arr5 = ['a', 'b', 'c', 'd'];

	console.log(arr1.join(' & '));	// join('문자열')
	console.log(arr1.reverse());	// reverse()
	console.log(arr3.slice(0,3));	// slice(index1, index2)
	console.log(arr3.sort());		// sort()
	console.log(arr3.splice());		// splice()
	console.log(arr4.concat(arr5));	// concat(array)
	arr2.pop();		// pop()
	arr2.push('카카');	// push('문자열')
	arr2.shift();		// shift()
	arr2.unshift("가가"); // unshift('문자열')
	console.log(arr4.length);	

결과 : 

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

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+"초");

출력 결과 : 

1. for - in 문을 사용

var objTest = {'a' : 1000, 'b' : 2000, 'c' : 3000, 'd' : 4000,  'e' : 5000};

for(var i in objTest) {
     document.write("Key : " + i + ", value : " + objTest[i] + "
);
}

배열을 추가하는데 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);

결과 값 :