15일차_HTML

23.03.29 수 15일차

UI 구현(PHP)

• form < input > 태그

<input type="image"> 
이미지 불러올때 사용
<input type="hidden"> 
값을 숨겨 보내기
<input type="file"> 
바이너리값(첨부파일) 가져올때 사용
‘’‘
* <input>태그 종류별 작성 방법

<input type="number" min=숫자 max=숫자>
숫자값만 입력 가능한 텍스트 창 (MIN,MAX로 최대 최소값 설정가능)

<input type=hidden  name=별칭 value="값">
특정 액션에서 값을 숨겨서 넘기기

<input type=range  name=별칭 min=숫자  max=숫자  >
슬라이드 바를 생성 (MIN,MAX로 최대 최소값 설정가능)

<input type=url  name=별칭 required>
URL 값을 보여줌 (필수값으로 설정)

<input type=tel  name=별칭 pattern="정규표현식">
전화번호 입력 화면 보여줌 (정규표현식으로 형식 지정)

• < input >태그 속성

required 
다음 액션으로 넘어갈 때 필수값으로 설정되어 값을 입력해야 넘어감
<input type=text  name=별칭 required >

readonly 
다음 액션으로 넘어갈 때 값을 넘길 수 있음
(테스트할때 일반적으로 자주 사용)
<input type=text  name=별칭 readonly required value="우리딸">

disabled 
다음 액션으로 넘어갈 때 값을 넘길 수 없음 
(value값이 있어도 NULL값으로 넘어감)
<input type=text  name=별칭 disabled required value="영심이">

size
출력창의 Text입력 필드의 좌우 길이 조절
<input type=text  name=별칭 size="25">

• 알림 화면 출력

<script > -- 자바스크립트
function funck(){
	alert("확인"); --
	return false;
}
</script>
이름 값이 입력됐을때는 다음액션으로 진입되고
이름 값이 빈칸일 경우 확인 알림창 생성 스크립트
<form action=form_ok0328.jsp   onsubmit="return funck()" method=post>
알림창 확인버튼 선택시 초기화면으로 Return

• Button으로 Submit 동작하기

<script >
function funck(){
	f1.submit();
}
</script>
스크립트에서 funck의 변수로 f1.submit 동작 시킬 수 있다.
<input type=button  onClick="funck()" value="저장하기" >
onClick="함수명"으로 Submit 동작처럼 다음 액션으로 넘어갈 수 있다.

• ERROR 종류

404 
: 파일 경로(이름확인)
500
: 구문 오류(문법확인)

여러개의 SUBMIT 만들기

• 코드 1
  저장하기/수정하기 버튼 선택 시
  확인 알림창 발생 방법

<script >
function funSave(){
	 if(f1.name.value==""){
		alert("이름 입력 필수");
		return false;
	} 
	
	if(f1.Nickname.value==""){
		alert("별명 입력 필수");
		return false;
	}
	f1.action="funSave_ok0329.jsp";
}

function funUpdate(){
	 if(f1.name.value==""){
		alert("이름 입력 필수");
		return false;
	} 
	
	if(f1.Nickname.value==""){
		alert("별명 입력 필수");
		return false;
	}
	f1.action="funUpdate_ok0329.jsp";
}
</script>

<form name="f1"  method=post>

<tr>
	<td>이름 </td> 
	<td> &nbsp; 
	<input type=text  name=name >
	</td>
</tr>
<tr>
	<td>별명 </td> 
	<td> &nbsp; 
	<input type=text  name=Nickname>
	</td>
</tr>
<tr>
	<td colspan=2 align="center"> &nbsp; 
	<input type=submit  onClick="funSave()" value="저장하기" >
		<input type=submit  onClick="funUpdate()" value="수정하기" >
	<input type=reset  value="다시작성" > </td>
</tr>

• 코드 2
  저장하기/수정하기 버튼 선택 시
  확인 알림창 발생 방법 2

<tr>
	<td colspan=2 align="center"> &nbsp; 
	<input type=submit  
	         onClick="javascript:f1.action='funSave_ok0329.jsp' " value="저장하기" >
	<input type=submit  
	         onClick="javascript:f1.action='funUpdate_ok0329.jsp' " value="수정하기" >
	<input type=reset  value="다시작성" > 
	</td>
</tr>

• 코드 3

저장하기/수정하기 버튼 선택 시
확인 알림창 발생 방법 3

function funk(str){
	alert("확인:" + str);
	if (str=='save'){
		f1.action="funSave_ok0329.jsp";
	}else{
		f1.action="funUpdate_ok0329.jsp";
	}
}

<tr>
	<td colspan=2 align="center"> &nbsp; 
	<input type=submit  onClick="funk(' save')" value="저장하기" >
	<input type=submit  onClick="funk(' update')" value="수정하기" >
	<input type=reset  value="다시작성" > </td>
</tr>

ALERT 발생 시키기(if문 활용)

• 코드 4 2중 알림(2중 if문)

확인 알림창 후 name칸이 빈칸일 경우
저장하기/수정하기 버튼 선택시 이름을 입력해주세요 알림창 발생

function funk(str){
	alert("확인:" + str);
	if (str=='save'){
		if(f1.name.value==""){
			alert("이름을 입력해주세요")
		}else{
		f1.action="funSave_ok0329.jsp";
		}
	}else{
		f1.action="funUpdate_ok0329.jsp";
	}
}

<tr>
	<td colspan=2 align="center"> &nbsp; 
	<input type=submit  onClick="funk(' save')" value="저장하기" >
	<input type=submit  onClick="funk(' update')" value="수정하기" >
	<input type=reset  value="다시작성" > </td>
</tr>

• 코드 5(if,else 활용)

function funk(str1, str2){
	alert("확인:" + str1 +", 점수:" + str2);
	
	if (str1=='save'){
		alert('저장 버튼확인')
			}else if(str1=='update'){
				alert('업데이트 버튼확인')
			}else{
				alert('체크확인!!')
				if(str2>=90){
					alert("수") ;
				}else if(str2>=80){
				if(str2>=85){
						alert("B+") ;
					}else{
						alert("B") ;
					}
				}else if(str2>=70){
					alert("미") ;
				}else{
					alert("재시험") ;
				}
			}
}

<tr>
	<td colspan=2 align="center"> &nbsp; 
	<input type=submit  onClick="funk(' save',' 100')" value="저장하기" >
	<input type=submit  onClick="funk(' update',' 200')" value="수정하기" >
	<input type=submit  onClick="funk(' numk',' 65')" value="체크" >
	<input type=reset  value="다시작성" > 
	</td>
</tr>

네트워크 이론

OS
유닉스(LINUX)
아파치(A)(번역) < (아파치)JSP, (아파치)PHP
-------------------------------------------------------
공통
톰캣(T)
-------------------------------------------------------
윈도우(NT)
윈도우용 APM
IIS(번역)  < ASP(IIS, MYSQL을 같이 사용), ASP.NET 
톰캣(번역) < (window)JSP, (window)PHP

• 느낀점

다중 if문과, else, else if 문의 다양한 활용으로 
여러개의 alert 창을 발생시켜보았다.
확실하게 이해는 되지 않아 어렵게 느껴졌다.
코드를 다시 보며 이해하는 공부를 해야겠다.