form태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function check(){
//form 태그에 name을 주면
//form 이름 . input이름 식으로 접근
if(!frm.name.value){//이름에 입력한 값이 없다면
alert('이름을 입력해야 해요');
frm.name.focus();
return; //submit못하게 return
}
frm.submit();
}
function check2(){
//form에 name을 주지 않았을 경우
var vname = window.document.forms[1].name.value;
var vid=document.forms[1].id.value;
if(!vname){
alert('이름을 입력하세요');
document.forms[1].name.focus();
return;
}
if(!vid){
alert('아이디를 입력하세요');
document.forms[1].id.focus();
return;
}
document.forms[1].method="POST";//메소드 방식 변경
document.forms[1].action="password.jsp";//action변경
document.forms[1].submit();//전송
}
function check3(){
//joinF
if(!joinF.name.value){
alert("이름을 입력하세요");
joinF.name.focus();
return false;
}
if(!joinF.id.value){
alert("아이디를 입력하세요");
joinF.id.focus();
return false;
}
//아이디값이 4자미만이거나 8자 이상이면 메시지 출력
if(joinF.id.value.length<4||joinF.id.vlaue.length>=8){
alert("아이디 길이를 확인 4 - 7");
return false;
}
return true;
}
</script>
</head>
<body>
<h1>from객체</h1>
<form name="frm" action="findId.jsp">
<h1>아이디 찾기</h1>
이름: <input type="text" name="name">
<button type="button" onclick="check()">Submit</button>
<!--button 컨트롤은 기본 타입이 submit타입
서버에 지정된 페이지로 전송하려고 한다. 따라서 유효성 체크를 하려면
일반 button타입으로 설정하고 check()함수 통해서 submit하도록 하자-->
</form>
<hr color='blue'>
<form action="findPwd.jsp">
<h1>비밀번호 찾기</h1>
이름: <input type="text" name="name"><p></p>
아이디: <input type="text" name="id"><p></p>
<button type="button" onclick="check2()">Submit</button>
</form>
<hr color='blue'>
<form name="joinF" action="findPwd.jsp" method="POST" onsubmit="return check3()">
<!--return 값이 false이면 x true이면 전송-->
<h1>회원가입</h1>
이름: <input type="text" name="name"><p></p>
아이디: <input type="text" name="id"><p></p>
*아이디는 영문자,숫자로 4자 ~ 8자 이내
<p></p>
<button type="submit">Submit</button>
</form>
</body>
</html>html먼저 실행 후 script
window.onload를 이용하면
html이 모두 뜬 후 돌아간다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#flayer1{
position: absolute;
left :300px;
top: 250px;
width:200px;
height: 200px;
background-color: darkorange;
z-index: 1;
}
#flayer2{
position: absolute;
left :400px;
top: 350px;
width:200px;
height: 200px;
background-color: rgb(101,185,206);
z-index: 2;
}
</style>
<script>
var obj1,obj2;//전역변수 선언
window.onload=function(){
obj1=document.getElementById("flayer1");//전역변수 flayer1
obj2=document.getElementById("flayer2");//flayer2
}
/*모든 html요소는 style객체를 갖는다. style객체를 다루기 위해서는
'style.스타일속성명="값"' 형태로 지정한다.
다만, css에서는 background-color:'yellow'
javascript에서는 '-'를 허용하지 않으므로 '-'을 빼고
단어의 첫글자를 대문자로 적는다.
*/
var freset=function(){
obj1.style.backgroundColor="";
obj1.style.width="";
obj1.style.height="";
obj1.style.color="";
obj1.style.zIndex="";
obj1.style.position="";
obj1.style.left="";
obj1.style.top="";
obj1.style.border="";
obj1.style.visibility="";
obj1.style.backgroundImage="";
}
var fbgColor=function(){
//flayer1에 배경색을 바꾸기 'green'
obj1.style.backgroundColor="green";
}
var fcolor=function(){
obj1.style.color="yellow";
}
var fsize=function(){
obj1.style.width="400px";
obj1.style.height="400px";
}
fpos=function(){
//flayer1의 위치를 absolute,x좌표를 600px;
obj1.style.position="absolute";
obj1.style.left="600px";
}
fpos2=function(){
//flayer1의 위치를 relative
//x좌표 60px, y좌표 60px;
obj1.style.position="relative";
obj1.style.left="60px";
obj1.style.top="60px";
}
fzindex=function(){
obj1.style.zIndex=3;
}
fimg=function(){
//flayer1에 배경 이미지를 넣으세요
obj1.style.backgroundImage="url('images/a.jpg')";
}
fborder=function(){
//flayer1에 테두리를 thick dashed tomato
obj1.style.border="thick dashed tomato";
}
fhide=function(){
//flayer1 감추기
obj1.style.visibility="hidden";
}
</script>
</head>
<body>
<h1>style객체</h1>
1. 화면의 레이어를 두 장 만들고 레이어의 다양한
속성을 바꿀 수 있는 버튼을 만들어보자<p>
<input type="button" value="레이어 초기상태" onclick="freset()"><p>
<input type="button" value="레이어 배경색 바꾸기" onclick="fbgColor()"><p>
<input type="button" value="레이어 글자색 바꾸기"
onclick="fcolor()"><p>
<input type="button" value="레이어 크기 바꾸기"
onclick="fsize()"><p>
<!-- width:400px -->
<input type="button" value="레이어 절대적 위치 바꾸기" onclick="fpos()"><p>
<!-- position: absolute; left:600px -->
<input type="button" value="레이어 상대적 위치 바꾸기" onclick="fpos2()"><p>
<!-- position: relative;left:60px; top:60px -->
<input type="button" value="레이어 순서 바꾸기" onclick="fzindex()"><p>
<!-- z-index: 1~9 값이 높을 수록 위에 올라감 -->
<input type="button" value="레이어 배경그림 넣기" onclick="fimg()"><p>
<!-- background-image:url('파일명'); -->
<input type="button" value="레이어 경계선 넣기" onclick="fborder()"><p>
<!-- border: 1px dashed red -->
<input type="button" value="레이어 감추기" onclick="fhide()">
<!-- visibility : hidden 반대는 visible-->
<div id="flayer1">첫번째 레이어</div>
<div id="flayer2">두번째 레이어</div>
<!-- 레이어 지정시 id로 구분되도록 한다.
class로 지정하면 자바스크립트로 제어할 수 없다.-->
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 48일차 - JavaScript 이벤트 종류, 이벤트 처리 (0) | 2020.06.22 |
|---|---|
| 국비지원 47일차 - JTextPane, JavaScript Math객체, 가위바위보 (0) | 2020.06.19 |
| 국비지원 45일차 - 채팅앱(콘솔, GUI), JavaScript (0) | 2020.06.17 |
| 국비지원 44일차 - URL, InetAddress, TCP(Socket), location객체, History객체 (0) | 2020.06.16 |
| 국비지원 43일차 - Bridge Stream, JavaScript 내장객체, window객체, document 객체 (0) | 2020.06.15 |