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>
<input type=text name=name >
</td>
</tr>
<tr>
<td>별명 </td>
<td>
<input type=text name=Nickname>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<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">
<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">
<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">
<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">
<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 창을 발생시켜보았다.
확실하게 이해는 되지 않아 어렵게 느껴졌다.
코드를 다시 보며 이해하는 공부를 해야겠다.
QA Automation Engineer