로그인 만들 때 썼던 th:inline = "javascript부분 복습
1.onclick="login()"
로그인창 보여주는 자바스크립트 부분을 작성한다
<button type="button" id="loginBtn" onclick="login();">로그인</button></td>
2.th:inline="javascript"
이제 <body>밑에서 자바스크립트 부분을 작성한다. 타임리프를 활용한 자바스크립트 작성시 th:inline="javascript"를 쓴다.
<script th:inline="javascript">
var resultCode = /*[[${resultCode}]]*/;
var resultMsg = /*[[${resultMsg}]]*/;자바에서 만들어준 model의 텍스트값을 출력을 할 때 th:text 를 사용하거나 [[..]]를 사용하여 가져올 수 있다.
예를 들어 th:text = "${resultCode}" 아니면 [[${resultCode}]] 이렇게 쓸 수 있다
자바에서는 view.addObject("resultCode",400)이렇게 썼었음 . 그니까 400이 출력된다.
(400은 http 응답상태코드인데 잘못된 문법으로 인한 서버 에러를 나타낸다. 내가 설정한거임 )
보통 타임리프에서만 쓰면 var resultCode = [[${resultCode}]] 이렇게만 쓰면 된다.
하지만 자바스크립트를 이용하는 경우, /*[[${resultCode}]]*/ 이렇게 주석처리를 해줘야 타임리프 실행시에는 실행되고, 정적 페이지에서는 null값이 표시된다.
이렇게 표시하는 이유는 정적인 페이지를 열었을 경우에 에러가 나는 것을 방지하기 위함이다.
자바스크립트로 모델 텍스틀 가져올 때는 주석 처리를 넣어 텍스트를 가져온다.
3.로그인 사용자 확인 function validation() , 변수 지정
function validation() {
var userId = $('#userId');
var userPw = $('#userPw');
$('#') 여기서 #는 html에서 id값을 가져올 때 쓴며 , $(...) 로 감싸줘야 변수 지정이 완료된다.
var userId = $('#userId');
${} 랑은 다른 것이다. ${}는 자바에 쓴 model객체를 가져올 때 쓴다.
response타입을 가진 boardVO는 readBoard의 boardNo을 가지고 있는 getBoard메소드를 가지고 있다.
이 객체를 타임리프에서 가져올 때 ${board}를 사용하여 가져온다.
4.value 텍스트 공백제거 $.trim($('').val())
if($.trim(userId.val()).length == 0){
alert('사용자 ID를 입력하세요');
userId.focus();
return false;
}
if($.trim(userPw.val()).length == 0){
alert('사용자 패스워드를 입력하세요');
userId.focus();
return false;
}
return true;
}if($.trim(userId.val()) 을 하면 userId의 모든 공백값을 제거해준다.
따라서 if($.trim(userId.val()).length==0 ) 은 userId가 아무것도 입력이 안되어있을 때 생성된다.
개발할 때 많이 쓰는 패턴이며 보통 아래와 같은 형식이다.
if($("").val() ==""){
alert("입력하세여");
return ;
}여기에 trim()을 더하면 이렇게 된다. ,trim()만 더해주면 된다.
if($.trim($("").val()).length==0){
alert("입력하세여");
return ;
}focus()이벤트는 자바스크립트 기능인데, input부분에 커서를 자동으로 깜빡이게 위치시켜 입력할 수 있도록 도와준다.
5.로그인 진행 function login()
function login(){
// 아이디 비번 제대로 입력하면 로그인 진행
if(validation()){
$('#loginFrm').submit();
}
}$('#loginFrm')은 form 전체를 받는다.
submit()을 사용할 때는 form전체를 감싸는 id를 넣고 submit()을 해주어야한다.
6.로그인 제출 후 resultCode값
$(document).ready(function(){
//페이지 호출 목적이 로그인 실패로 인한 로딩이라면 이거 출력
if( typeof resultCode =='undefined' || resultCode==400){
alert(resultMsg);
}
})&&와 ||의 차이점 ...
처음에는 && 연산자를 사용하였는데 , 이러면 두개가 모두 참이여야한다.
따라서 ||를 사용하여 둘중에 하나가 참이여도 alert값을 출력할 수 있도록 하였다.
||는 둘중에 하나가 참이라도 return 값을 출력한다
'front > html,Js,타임리프' 카테고리의 다른 글
| 자바스크립트 function() (0) | 2022.02.02 |
|---|---|
| 자바스크립트 기초 (자바스크립트의 특징 5개) (0) | 2022.02.01 |
| 타임리프 테이블말고 row로 들어있는 반복문 만들기 (0) | 2022.01.25 |
| 자바스크립트 forEach()반복문 (0) | 2022.01.15 |
| 자바스크립트에서 $는 무슨 뜻일까?? (DOM) (0) | 2022.01.15 |
댓글