개발자입니다
IT BANK) JSP 6일차 - Javascript, 코드 분리 본문
220914
-클릭시 경고 창 발생 : alert('메시지')
확인/취소 창 발생 : confirm('메시지')
<script> // ex12
function alertMessage(){
alert('안녕하세요.\n환영합니다.');
var result = confirm('처음 방문하셨나요?');
alert(result);
msg = document.getElementById("msg");
if(result){
msg.innerHTML = '처음 방문해주셔서 감사합니다.';
}else{
msg.innerHTML = '다시 방문해주셔서 감사합니다.';
}
}
</script>
</head>
<body>
<label onclick="alertMessage()">클릭</label>
<p id="msg"></p>
</body>
-새 창 열기(주로 팝업 창에 많이 씀) : window.open('주소')
_blank : 새 창에서 열기
_self : 현재 창에서 열기
<script> //ex13
function newWindowOpen(){
// window.open('http://www.naver.com')
window.open('http://www.google.com', '_blank', 'width=600, height=400, top=100, left=300')
}
</script>
</head>
<body>
<label onclick="newWindowOpen()">새창 열기</label>
</body>
-웹 페이지 열릴때 실행
<body onload="함수()">
<title>ex14-1</title>
<script>
function newWindowOpen(){
// window.open('http://www.naver.com')
window.open('ex14-2.jsp', '_blank', 'width=600, height=400, top=100, left=300')
}
</script>
</head>
<body onload="newWindowOpen()">
</body>
-창 닫기 : window.close()
<title>ex14-2</title>
</head>
<body>
<h1>공 지 사 항</h1>
<p>21화~
감사드립니다 </p>
<br><br><br><br>
<input type="checkbox" onClick="window.close()"> 하루 동안 닫기
</body>
-아이디, 비번 입력
*javascript 코드는 웹 브라우저가 실행함. 곧 사용자 컴퓨터 자원만 사용함. 그래서 계속 클릭하므로써 발생하는 서버 부하를 방지함
→ Client Computer (O)
→ Server Computer (X)
*키보드 값 입력되어 있으면 함수 호출 : onkeyup="함수()"
*페이지 이동 : onclick="location.href='ex15-2.jsp'"
<title>ex15</title>
<script>
function check(){
f = document.getElementById('f')
user_id = document.getElementById('id')
user_pw = document.getElementById('pw')
if(user_id.value == ""){
alert('아이디는 필수 입력 정보입니다.')
return;
}
if(user_pw.value == ""){
alert('비밀번호는 필수 입력 정보입니다.')
return;
}
f.action = 'ex15-2.jsp'
f.submit()
}
</script>
</head>
<body>
<form id="f">
<label>아이디</label><input type="text" name="id" id="id"> <br>
<label>비밀번호</label><input type="password" name="pw" id="pw" onkeyup="checkPassword()">
<span id="msg">(*필수항목)</span>
<br>
<input type="button" value="로그인" onclick="check()">
<input type="button" value="취소" onclick="location.href='ex15-2.jsp'">
</form>
아이디, 비밀번호 미입력시 경고창
비밀번호 5자리 이상 입력 문구(<script>에 코드 추가)
function checkPassword(){
user_pw = document.getElementById('pw')
msg = document.getElementById('msg')
if(user_pw.value == ""){
msg.innerHTML = '비밀번호를 입력하세요'
}else if(user_pw.value.length < 5){
msg.innerHTML = '비밀번호는 5자리 이상 입력하세요.'
}else{
msg.innerHTML = '비밀번호는 잘 입력되었습니다.'
}
}
-quiz3
<title>quiz3_button</title>
</head>
<body>
<input type="button" value="가입" onclick="location.href='quiz3_register.jsp'">
</body><title>quiz3_register</title>
<script>
function check(){
f = document.getElementById('f')
user_id = document.getElementById('id')
user_pw = document.getElementById('pw')
user_pwchk = document.getElementById('pwchk')
if(user_id.value == ""){
alert('아이디는 필수 사항입니다.')
return;
}
if(user_pw.value == ""){
alert('비밀번호는 필수 사항입니다.')
return;
}
if(user_pwchk.value == ""){
alert('비밀번호 확인은 필수 사항입니다.')
return;
}
if(user_pw.value != user_pwchk.value){
return;
}
f.action = 'quiz3_success.jsp'
f.submit()
}
function checkPassword(){
user_pw = document.getElementById('pw')
user_pwchk = document.getElementById('pwchk')
msg_pwchk = document.getElementById('msg_pwchk')
if(user_pw.value == "" || user_pwchk.value == ""){
msg_pwchk.innerHTML = ''
}else if(user_pw.value != user_pwchk.value){
msg_pwchk.innerHTML = '불일치!!'
}else{
msg_pwchk.innerHTML = '확인!!'
}
}
</script>
</head>
<body>
<form id="f">
<input type="text" placeholder="아이디" name="id" id="id">
<span>(*필수항목)</span> <br>
<input type="password" placeholder="비밀번호" name="pw" id="pw">
<span>(*필수항목)</span> <br>
<input type="password" placeholder="비밀번호 확인" name="pwchk" id="pwchk" onkeyup="checkPassword()">
<span id="msg_pwchk">불일치</span> <br>
<input type="text" placeholder="이름" name="name" id="name">
<hr noshade>
<input type="button" value="등록" onclick="check()">
<input type="button" value="취소" onclick="location.href='quiz3_button.jsp'">
</form>
</body>// 해당 코드만 작성
<title>quiz3_success</title>
<script>
alert('가입을 축하 합니다')
location.href='quiz3_button.jsp'
</script>
-질문: 창 여는 방법 비교
f.action = 'quiz3_success.jsp' // 데이터 가져가서 수행이라 조금 다르게 작동
window.open('quiz3_success.jsp', '_self') // 아래 코드와 동일 기능
location.href='quiz3_success.jsp'
■ 코드 분리
코드가 너무 길어져 jsp 파일 분리 → 가독성 좋아짐
해당 위치에 코드 대체하는 것은 아래처럼 입력한다.
<%@ include file="ex16_header.jsp" %>
-CSS 분리 : <style>태그 내부 코드를 .css 파일로 복사 - <style>태그 삭제 후 다음과 같은 방식으로 입력
<link href='/jsExam/exams/ex16.css' type="text/css" rel='stylesheet'>
-Javascript 분리 : <script> 태그 내부 코드 .js 파일로 복사 - <script> 태그를 다음과 같은 방식으로 수정
<script src="/jsExam/exams/ex16.js"></script>
'JSP > IT BANK - JSP' 카테고리의 다른 글
| IT BANK) JSP 8일차 - JSP(내장 객체) (0) | 2022.09.16 |
|---|---|
| IT BANK) JSP 7일차 - JSP(태그 종류, 기초) (0) | 2022.09.15 |
| IT BANK) JSP 5일차 - Javascript (0) | 2022.09.13 |
| IT BANK) JSP 4일차 - HTML, CSS (0) | 2022.09.08 |
| IT BANK) JSP 3일차 - HTML, CSS (0) | 2022.09.07 |
'JSP/IT BANK - JSP' Related Articles
more
