(국비교육) 44 - vs code + jQuery CDN + project1 이어하기11 + append + Toggle + Show/Hide + 로그인 검사하기 + ajax

■ jQuery 

 

 

viewport : 지금 보고 있는 화면으로, 웹페이지에서 사용자가 볼 수 있는 영역을 의미한다. 

 

※ 참고

! + 엔터 : 기본 html 세팅 자동으로 입력해주기

 

제이쿼리는 자바스크립트 라이브러리이므로,

제이쿼리 파일은 자바스크립트 파일(.js 파일) 형태로 존재한다.

 

자바스크립트 사용을 위해서는 웹페이지에 제이쿼리 파일을 로드해야 하는데,

방법은 1. CDN 이용 2. 제이쿼리 파일 다운받아 로드하는 방법 2가지가 있다. 

 

http://www.tcpschool.com/jquery/jq_intro_apply

코딩교육 티씨피스쿨

 

■ CDN 을 이용하여 로드하기

 

 

CDN(Content Delivery Network)이란 웹 사이트의 접속자가 서버에서 콘텐츠를 다운받아야 할 때,

자동으로 가장 가까운 서버에서 다운받도록 하는 기술이다. 

 

홈페이지 내 노란색 표시 releases ~ 들어가기

 

 

uncompressed : 압축x

minified: 엔터 공백 없애고 용량 최소화 -> 로딩 속도 좀 더 빠르게 함

slim : 필요 코드만 들어있음

 

우리는 minified 를 이용해봤다. 

 

 

코드 넣어서 복사하여 사용 가능

 

 

https://releases.jquery.com/

jQuery CDN

 

■ 클릭 시 다양한 효과 확인해보기

 

 

$(document).ready(function(){}); 제이쿼리 기본형태

$(function(){}); 축약형태

 

 

바디 부분 버튼 생성

 

 

 

 $("h1").text(); 

: h1 의 텍스트 가져오기

 

즉 버튼 클릭하면 h1 의 텍스트가 알람으로 뜬다. 

 

 

<p> : 문단태그

p 문단을 클릭하면 문자 변경, 글자색 변경, 배경색 변경,

바깥 테두리 변경, 폰트 변경이 가능하다. 

 

 

remove() : 특정 효과 없애기

문단 클릭하면 버튼이 사라진다. 

 

id 는 # 으로, class 는 . 으로 표현한다.

 

버튼을 클릭하면 해당 멘트와 함께 버튼이 생성된다. 

text 는 문자열만 그대로를 보여주고,

html 은 안에 html 코드를 문자가 아닌 직접 만들어줘서 버튼 모양이 나온다. 

 

https://hellogk.tistory.com/88

jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가

 

 

 

val()는 INPUT 태그에 정의된 value속성의 값을 확인하고자 할때 사용되는 함수이다. 

버튼을 클릭하게 되면 input 에 입력한 값이 알람으로 나오게 된다. 

 

 

글자 길이는 length 로 구할 수 있다. 

안녕하세요 5 글자 나온다. 

 

■ 제이쿼리 파일 다운받아 로드하는 방법 (저장소 우리쪽)

 

 

jquery-3.7.0.min.js

0.08MB

 

<script src="./jquery-3.7.0.min.js"></script> 를 통해 부를 수 있다.

파일은 html 안에 미리 넣어줘야 한다. 

 

제대로 작동되어 ! 알람 뜨는 것 확인 가능하다. 

 

■ append 기능 / 리스트 선택 / for 반복구문 / 사운드 넣기

 

 

append : 기존에 있던거 살리고 뒤에 붙여준다. 

버튼을 클릭하면 h1 에 추가합니다. 가 엔터처리 되면서 계속 붙는다. 

 

 

순서 없는 list 만들어준다. 

 

 

리스트 선택 버튼을 클릭하면 전체 리스트가 알람으로 뜨도록 설정 가능하다. 

 

 

html 태그 포함하여 나온다. 

 

 

list 목록에서 li를 찾는데, 

0번째에 있는 텍스트와 같은 문자를 알림으로 뜨기

 

 

for 문을 통해 반복 알람 뜨게 할 수 있다.

반복되는 index 와 같은 인덱스를 가진 값을 알람 뜨게 설정한다. 

 

 

for문을 돌아서 알람이 뜨고 난 후 1번 인덱스 값이 다음과 같이 문구가 변경된다

 

클릭 시 2번째 인덱스 뒤로 append 효과가 생긴다.

목록에 해당하는 값이 누를때마다 생성된다. 

 

 

각 리스트 클릭할 시 다르게 색깔 변경된다

 

 

오디오 객체를 통해 mp3 불러올 수 있다. 

플레이 하게 되면 티모야 놀자 버튼 클릭 시 티모 웃음소리 들린다. 

 

■ 이미지 변경하기 / 토글 사용하기

 

 

버튼 클릭시 이미지가 바뀌도록 설정해준다. 

1차 진화 2차 진화 버튼을 만들어주고 1차 진화 클릭 시 1차 진화 버튼 사라지게 만들어준다. 

 

 

 

attr 에는 이미지가 가진 속성 적어준다.

각 버튼을 클릭하면 다른 이미지가 나온다. 

 

 

이동하기 버튼 만들어주기

 

여기서 marginLeft 는 왼쪽에 마진을 준다는 의미이다.

mLeft 를 출력하면 20px 와 같이 문자와 같이 출력된다.

 

이를 위해 slice 처리를 해준다.  

0px 나오는 거에서 0번째 인덱스부터 가져오고 -2까지 자른다.

 

따라서 처음부터 px 가 줄어든 곳까지 잘라서 mLeft 에 담기게 된다.

이를 Number 를 통해 숫자처리 해주고 다시 담아주고,

이미지에 css 를 통해 mLeft + 20 을 하게 되면 버튼을 누를 때마다 20씩 이동한다. 

 

 

문단을 만들어준다.

문단이 클릭하면 효과를 받는 다는 것을 확실히 표현하기 위해 다음과 같이 효과를 준다. 

 

 

토글키(Toggle Key)"라는 것은 "한번 누르면 어떤 기능이 ON되고,

한번 더 누르면 OFF되는 키를 말한다.

t1 을 클릭하게 되면 t2 가 느리게 열리게 만들어진다. 

 

■ 게시판 보이기 감추기 (Show and Hide)

 

 

다음과 같이 글쓰는 게시판을 만들고 style 을 부여해준다. 

 

 

이제 화면에 보이는 것을 제어할 것이다.

 

첫 화면에서는 글쓰는 영역과 글쓰기 감추기 버튼을 숨김처리한다.

만약 글쓰기 보이기 버튼을 클릭하면 글쓰는 부분과 글쓰기 감추기 버튼은 show 를 통해 보여주고,

글쓰기 보이기 버튼은 hide 로 숨겨준다.

 

반대로 글쓰기 감추기 버튼을 클릭하면 글쓰는 부분과 글쓰기 감추기 부분은 hide 로 숨겨주고,

글쓰기 보이기 부분은 다시 show 를 통해 나타내준다. 

 

■ 로그인 검사하기

 

 

로그인을 입력받고 클릭시 다음과 같이 설정해준다.

id 변수는 input id 에 입력받은 값이고, pw 는 input pw 에 받은 값이다.

 

 

콘솔을 통해 제대로 연결되었는지 확인 가능하다. 

 

 

if 조건을 통해 아이디가 4글자보다 작으면 다음과 같이 알림창이 뜨고,

커서가 아이디 입력창으로 가게 만들어준다.

 

그리고 그 값을 false 로 변경한다.

 

 

암호도 마찬가지로 checkID 가 true 인데 5글자보다 작다면 동일한 효과를 준다. 

 

 

checkID 와 checkPW 모두 참일 경우 로그인을 진행한다.

 

로그인 정보를 전송하기 위해 <form> 엘리먼트를 동적으로 생성한다.

<form>은 HTML 폼 요소로, 서버로 데이터를 전송하는 용도로 사용된다.

 

form.attr("method", "post")는 폼의 전송 방식을 POST로 설정한다. 

POST 방식은 민감한 정보(비밀번호 등)를 전송할 때 사용되며, URL에 데이터가 노출되지 않는다.

 

form.attr("action", "./join")은 폼 데이터를 전송할 서버의 주소를 지정하는 것이다.

"join"이라는 페이지로 데이터를 전송한다. 

 

form.attr("name", "loginForm")은 폼의 이름을 "loginForm"으로 설정하는 것이다. 

폼을 구분하는 데 사용될 수 있지만, 현재 코드에서는 굳이 필요하지 않다. 

 

로그인 정보를 담은 숨겨진(hidden) <input> 요소들을 폼에 추가한다. 

숨겨진 요소는 사용자에게 보이지 않지만, 폼 데이터로 전송된다. 

 

form.appendTo("body")는 생성된 폼을 <body> 요소에 추가한다. 

따라서, 폼은 현재 웹페이지에 존재하는 다른 HTML 요소와 함께 표시된다. 

 

form.submit() 메서드를 호출하여 폼을 제출한다.

폼에 포함된 데이터가 "./join" 페이지로 전송되며, 폼의 전송 방식이 POST이므로,

아이디와 비밀번호는 안전하게 서버로 전달된다.

 

 

Jquery 에서 로그인을 만들어 줬기 때문에

spring에 있는 form 닫는 태그를 이동해서 Jquery 만 작동하게 만들어준다. 

 

 

jquery 사용을 위해 해당하는 코드 적어준다. 

 

 

이제 작업한 로그인 관련 내용을 JQuery 로 작성해본다.

하단의 로그인 버튼을 클릭했을 시 작동하는 function 을 작성한다.

 

input 으로 입력받은 id 값을 변수 id 에 저장

input 으로 입력받은 pw 값을 변수 pw 에 저장한다. 

 

if 조건을 통해 아이디가 5글자보다 작으면 다음과 같이 알림창이 뜨고,

그 외의 조건 중 비밀번호가 5글자보다 작으면 마찬가지로 알림창이 뜬다. 

 

이외는 아이디와 암호가 정확하게 입력되었음으로,

서버로 데이터를 전달하는 form 태그를 입력해준다.

 

보안을 필요로 하는 값이므로 전달하는 방식은 post 방식으로 전달하고

데이터를 전송할 서버의 주소는 로그인 페이지로 지정해준다. 

 

로그인 정보를 담은 숨겨진(hidden) <input> 요소들을 폼에 추가한다. 

숨겨진 요소는 사용자에게 보이지 않지만, 폼 데이터로 전송된다. 

 

form.appendTo("body")는 생성된 폼을 <body> 요소에 추가한다. 

따라서, 폼은 현재 웹페이지에 존재하는 다른 HTML 요소와 함께 표시된다. 

 

form.submit() 메서드를 호출하여 폼을 제출한다.

 

 

 

리소스에 js 파일 만들어주고 안에 파일을 넣어준다. 

 

 

서블렛 xml 에서 파일 경로 설정해준다. 

요청이 "/js/"로 시작하는 경우에 해당 리소스들은 "resources/js/" 디렉토리에서 찾게 된다. 

 

 

jquery 해당 부분 복붙한다.

 

 

resources 폴더 안에 js 폴더에 넣어졌던 파일이 제대로 들어갔음을 확인할 수 있다.  

 

 

아이디 중복 검사하는 버튼을 만들어준다. 

그리고 그에 대한 결과값을 나타내는 메세지를 span 을 통해 생성해준다. 

 

 

중복검사 버튼을 클릭했을 때 만약 공백이거나 5글자보다 작은 경우 알람창이 뜬다. 

 

 

이제는 하단에 효과를 준다. 

 

만약 공백이거나 5글자보다 작은 경우

하단에 멘트가 "아이디는 5글자 이상이어야 합니다." 라고 뜨고 빨간색으로 표시된다.

표시 이후에는 아이디 창으로 커서가 이동한다. 

 

 

AJAX 요청을 통해 서버에 비동기 요청을 보낸다. 

요청은 ./checkID 로 POST 방식으로 보내지며 id 정보는 data 객체에 담겨져 전송된다.

 

성공했을 경우 서버에서 넘어온 데이터를 success 콜백 함수를 통해서 메세지를 통해 결과를 출력한다.

실패했을 경우 error 콜백 함수를 통해 메세지와 함께 에러 메세지를 출력한다.

 

return false 를 통해 클릭 시 페이지 이동을 막기 위해 사용된다. 

 

즉, 아이디 필드에 입력된 값이 5글자 이상인 경우에만

AJAX 요청을 보내서 아이디의 중복 여부를 서버에 확인하고, 결과를 출력한다.

5글자 미만인 경우에는 경고 메시지를 출력하고, AJAX 요청은 발생하지 않는다.

 

※ 참고

 

css 잘 안먹을떄 version 을 다음과 같이 업데이트 하면 바로 먹는다.