목차
1. HTML 파일 유효성 검사
2. 쿠키 생성
3. jQuery 적용
1. HTML 파일 유효성 검사
1) 게시판 양식에 대한 유효성 검사 → ★boardform.html 참고
① 유효성 검사가 필요한 html 파일 작성(boardform.html)
- 유효성 검사가 필요한 항목의 태그에 id와 name 값 설정
- 전송 기능(submit)이 있는 버튼에 대해 유효성 검사를 할 때는 submit 이벤트로 처리한다.
- submit 이벤트는 해당 버튼 태그가 아닌 <form> 태그 안에서 처리한다.
- ex) <form method="get" action="board.jsp" onSubmit="return check()">
② 유효성 검사를 위한 함수 생성(board.js) →★ board.js 참고
- 확장자가 ‘js’인 파일을 만들고 유효성 검사를 위한 함수 생성
③ 외부 자바스크립트 파일 불러오기
- 자바스크립트 파일을 외부 파일로 만들면 관리도 용이하고 필요시 재사용도 가능하다.
- <script> 태그를 열고, 태그 안에서 함수가 저장되어 있는 파일을 불러온다.
- ex) <script src = "board.js"></script>
④ <actioin> 태그로 데이터 전달받을 jps 파일 생성(board.jsp)
- <form> 태그의 action 속성은 데이터를 서버로 보낼 때, 해당 데이터가 전달될 주소를 저장한다.
2) 회원가입 양식(memberform.html)에 대한 유효성 검사
① 유효성 검사가 필요한 html 파일 작성(memberform.html) → ★ memberform.html / 참고
- 유효성 검사가 필요한 항목의 태그에 id와 name 값 설정
② 유효성 검사를 위한 함수 생성(member.js) → ★member.js 참고
- ID 중복 검사
- 주민번호 뒷자리로 포커스 이동
- 이메일 도메인 선택
- 유효성 검사
③ 외부 자바스크립트 파일 불러오기
- ex) <script src = "member.js"></script>
2. 쿠키를 이용한 팝업창 제거 → ★cook.html / popup.html 참고
• 팝업 창 쿠키 생성
- 쿠키: 사용자가 웹사이트에 접속할 경우 해당 사이트에서 사용자의 컴퓨터에 설치하는 기록 정보 파일
- checkbox 속성과 date 객체 등을 이용해서 쿠키를 생성할 수 있다.
- 쿠키를 이용해서 지정된 시간 동안 팝업창을 열지 않을 수 있다. (ex. 하루 동안 열지 않기, 일주일 동안 열지 않기)
3. jQuery 기초
1) jQuery란
- 오픈 소스 기반의 자바스크립트 라이브러리(함수)
2) jQuery 적용 방법
① 방법 1. jQuery 파일을 다운로드 받아서 로드하기
- jQuery 홈페이지에서 파일을 다운로드
- <head></head> 사이에 아래 코드 입력:
<script src="js/jquery-3.6.0.min.js"></script>
② 방법 2. CDN (Content Delivery Network) 방식으로 로드하기
- <script> 태그 내에 아래 코드 입력:
<script src="http://code.jquery.com/jquery-latest.js"></script>
://code.jquery.com/jquery-latest.js">
'Javascript' 카테고리의 다른 글
| 44일차: 자바스크립트_브라우저 내장 객체 / 입력 양식 2021.08.13 (0) | 2021.08.13 |
|---|---|
| 43일차: 자바스크립트_Date객체 / 배열 / String객체 / Math 객체 / 이벤트 처리 2021.08.12 (0) | 2021.08.12 |
| 42일차: 자바스크립트_반복문 / 함수 / Date 객체 2021.08.11 (0) | 2021.08.12 |
| 41일차: 톰캣 프로젝트 배포 / 자바스크립트 기초 / 연산자 / 조건문 2021.08.10 (0) | 2021.08.10 |