사용자가 버튼을 눌러 액션을 취할 경우 ajax로 처리하여 결과에 따라 return값이 false인 경우

사용을 중단 처리 하고 싶었습니다. 

return false 처리를 했음에두 불구하고 중단되지 않고 submit처리가 되었습니다.

확인해보니 변수를 따로 선언해주어야 return false처리가 되는 것을 확인하였습니다.

먼저 placeholder()의 기능에 대해 알아보겠습니다.

아이디 : 

html5에서 제공하는 placdeholder() 참 유효한 기능이죠

위 기능처럼 입력해야하는 input태그에 설명을 추가할 수 있는 기능입니다.

사용자들의 입력을 도와주는 기능입니다.

이 유용한 기능이 브라우저 버전에 따라 지원하지 않을 수 있습니다.

웬만한 브라우저는 지원하지만 

Internet Explorer 의 경우 9버전이하는 placeholder 기능을 지원하지 않습니다.

지원하지 않더라도 jquery 소스를 이용해서 placeholder의 기능을 사용할 수 있습니다.

1. 먼저 jquery.placeholder.js 파일을 프로젝트 적절한 위치에 추가를 해줍니다. (해당 파일 첨부해드렸습니다.)

2. 파일을 추가했다면 사용하고자 하는 jsp파일에 js를 추가해줍니다.

<script src="/js/jquery.placeholder.js" type="text/javascript"></script>

3. 이제 사용방법에 대해 알아보겠습니다.

jsp실행 시 동작하는 ready함수 아래 $('#loginId').placeholder();를 해주면 됩니다.

<script>

$(document).ready(function(e) {

    $('#loginId').placeholder();

});

</script>

4. 적용된 소스입니다.

아이디 : 

기호에 맞게 사용하시면 될 것 같습니다.

jquery.placeholder.js

input 태그에서 disabled와 readonly 속성은 모두 입력을 못하게 하는 기능으로 같습니다.

하지만 from 태그에서 sumbit시에 차이점이 있습니다.

readonly의 경우 form 데이터로 전송이 가능하지만

disabled의 경우 from 데이터로 전송이 불가능합니다.

상황에 따라 사용하면 될 것 같습니다!

mouseover : 마우스가 해당 요소 안에 들어올 때 발생하는 이벤트

mouserout : 마우스가 해당 요소를 벗어날 때 발생하는 이벤트

예제를 통해 차이를 살펴보겠습니다.

좋아요 기능을 구현 예제를 통해 설명하겠습니다.

<a href>를 클릭하면 통해 updateProInterestThumb()함수를 실행하도록 하였네요.

	   
		
		
		
		 ${pivo.prothumbcount} 
		
        

updateProInerestThumb함수는 ajax통신을 통해 값이 컨트롤러를 통해 전해지며

값이 움직이게 되요. 좋아요의 경우 db값이 'Y'es 그렇지 않는다면 'N'o로 db로 값이 변경되는데요.

//좋아요 기능 구현 
var prothumb = "${pivo.prothumb}";
function updateProInterestThumb(){
	var userid = "${user.id}";
	if(userid == ""){
		alert("로그인해야 관심상품으로 등록이 가능합니다.");
	}else{
		if(prothumb=='Y'){ 
			prothumb='N'; //console.log("1      "+prothumb);
		}else{f
			prothumb='Y'; //console.log("2      "+prothumb);
		}//console.log("3     "+prothumb);
		$.ajax({
			url : '/updateProInterestThumb',
			type : 'POST',
			data : {'code':code , 'prothumb': prothumb},
			success : function(result){
				$('#prothumbYn').html('');
				var jsonObj = JSON.parse( result );
				if(jsonObj.prothumb== "Y"){
					$('#layLike').css('display', 'block');
					$('#layLike').html("
좋아요가 되었습니다.
전체보기
");
					$("#prothumbYn").html(""+" "+jsonObj.prothumbcount+"");
				}else{
					$('#layLike').css('display', 'block');
					$('#layLike').html("
좋아요가 취소되었습니다.
");
					$("#prothumbYn").html(""+" "+jsonObj.prothumbcount+"");
				}
			}	
		});
	}
}

div태그인 id가 layLike의 css속성을 블록으로 지정해줍니다.

그러면 블록모양으로 뜨겠죠.

그러면 이제 마우스 이벤트를 주도록 하겠습니다.

$('#layLike').mouseover(function(){
	$('#layLike').css('display', 'block');
});
$('#layLike').mouseout(function(){
	$('#layLike').css('display', 'none');
});

아래의 그림과 같이 마우스 포인터가 layLike아이디를 가진 div태그 안에 있으면 css속성은 block으로 유지가 되고

마우스 포인터가 layLike의 아이디를 가진 div태그 css속성은 none으로 사라지게 됩니다.

결과는 아래와 같습니다.!

마우스 오버 아웃 이벤트 사용하시는 분들은 예제를 통해 사용해보세요!

먼저 위키피디아의 jQuery 정의를 살펴보죠

 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 

jQuery는 자바스크립트의 라이브러리입니다.

즉 자바스크립트를 조금 더 쉽게 사용하기 위해 만들어진 언어라고 보면 됩니다.

DOM 노드들을 조작하는 작업은 $ 함수로 시작됩니다. 예를 들면 id를 호출하는 경우 자바스크립트는

document.getElmentById('id')라고 써야하지만 Jquery는 $('#id') 또는 $("#id")로 간단하게 표현이 가능합니다.

jQuery 사용방법은 다음과 같습니다.

http://jquery.com 홈페이지에 접속합니다.

다운로드를 클릭합니다. 

최신 버전을 다운 받아 해당 프로젝트에 기억하기 쉬운 위치에 js파일을 저장해줍니다.

또는

다운로드가 귀찮으시다면

<script type="text/javascript" src="//code.jquery.com/jquery-3.2.1min.js"></script>

를 jsp파일에 추가해줍니다.

jquery-3.1.1.min.js

혹시 몰라 파일 올려드립니다.

그러면 즐프하세요~

추가적으로 jQuery 연습 가능한 사이트 올려드릴게요~

부트스트랩으로 너무나 유명한 사이트죠

https://www.w3schools.com/