728x90
더보기
Day39. 230623
JavaScript에서 HTML문서 사용
1) Inline방식
- html문서 태그의 script코드 작성
<input type="button" value="Inline" name="btn1" id="btn1" class="btn1" onclick="alert('안녕!');" />
2) Internal방식
- html문서 내부의 script코드 작성
<input type="button" value="Internal" name="btn2" id="btn2" class="btn1" onclick="fun1();" />
<script type="text/javascript">
//funtion 함수명(매개변수리스트){구현코드}
function fun1(){ alert('Internal방식\nfun1()이다!!'); }
3) External방식
- 외부의 script파일과 연동
<input type="button" value="External" name="btn3" id="btn3" class="btn1" onclick="fun2();" />
<script src="../js/myFirstJS.js"> </script>
아래에 myFirstJS.js와 연동
myFirstJS.js>
function fun2(){
alert('\t\'External방식\nfun1()이다!!');
}
폼 배열을 사용해 폼 요소에 접근하기
document 속성 중 form 속성은 문서 안에 있는 <form>태그를 모두 가져와 배열 형태로 반환한다.
이 방법은 폼요소에 id나 class속성,name속성도 없을 때 사용한다.
<form> 태그 안에 포함된 요소에 접근하려면 elements 속성을 사용한다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form</title>
<!-- External방식- 외부의 script파일과 연동-->
<script src="../js/myFirstJS.js"> </script>
<style>
/*구글 웹 폰트사용하기(p217)*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
h2{font-family: 'Noto Sans KR', sans-serif;
}
/* 버튼 */
.btn1{width:60px; height:25px;}
</style>
</head>
<body>
<h2>form(p133)</h2>
<pre>
*form요소의 속성
- action: 서버(server)측 페이지
- method: get(기본값) | post
*GET에 대한 참고 사항:
-양식 데이터를 이름/값 쌍으로 URL에 추가합니다.
-GET을 사용하여 민감한 데이터를 보내지 마십시오! (제출된 양식 데이터는 URL에서 볼 수 있습니다!)
-URL의 길이는 제한되어 있습니다(2048자).
-사용자가 결과를 북마크하려는 양식 제출에 유용합니다.
-GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합합니다.
*POST에 대한 참고 사항:
-HTTP 요청 본문 내부에 양식 데이터를 추가합니다(제출된 양식 데이터는 URL에 표시되지 않음).
-POST는 크기 제한이 없으며 많은 양의 데이터를 보내는 데 사용할 수 있습니다.
-POST를 사용한 양식 제출은 북마크할 수 없습니다.
</pre>
<form name="frm1" id="frmid1">
<!-- <form action="ok.jsp" method="get"> -->
<fieldset>
<legend>Personalia:</legend>
<%--input type="hidden"은 노출x, 예)글번호, 회원id 등 --%>
<input type="hidden" name="userNick" value="비밀"/>
<ul>
<li>이름:<input type="text" name="userName" id="userName" size="10" maxlength="5"
autofocus="autofocus" placeholder="이름입력하세요"/></li>
<li>id: <input type="text" name="id" id="id" required="required" /></li>
<li>비밀번호: <input type="password" name="pwd" id="pwd" size="10"/></li>
<li>email:<input type="email" name="email" id="email"/></li>
<li>tel:<input type="tel" name="tel" id="email"/></li>
<li>url:<input type="url" name="mySite" id="mySite"></li>
<li>관심사(취미):
<input type="checkbox" name="hobby" id="h0" value="coffee" checked="checked"/><label for="h0">커피내리기</label>
<input type="checkbox" name="hobby" id="h1" value="movie"/><label for="h1">영화감상</label>
<input type="checkbox" name="hobby" id="h2" value="drama"/><label for="h2">드라마보기</label>
<input type="checkbox" name="hobby" id="h3" value="toon"/><label for="h3">웹툰보기</label>
<input type="checkbox" name="hobby" id="h4" value="music"/><label for="h4">음악감상</label>
<input type="checkbox" name="hobby" id="h5" value="book"/><label for="h5">독서</label>
</li>
<li><label for="language">과목선택</label>
<select name="language" id="language" size="10" multiple="multiple">
<option value="java" selected="selected">자바</option>
<option value="oracle">오라클</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">Javascript</option>
<option value="jquery">jQuery</option>
</select>
</li>
</fieldset>
<fieldset>
<legend>Personalia:</legend>
<li>date: <input type="date" name="d1" id="d1" ></li>
<li>datetime-local:<input type="datetime-local" name="d2" id="d2" /></li>
<li>month:<input type="month" name="d3" id="d3" /></li>
<li>week: <input type="week" name="d4" id="d4" /></li>
<li>time: <input type="time" name="d5" id="d5" /></li>
<li>date before 1980-01-01:<input type="date" id="datemax" name="datemax" max="1979-12-31"></li>
<li>date after 2000-01-01:<input type="date" id="datemin" name="datemin" min="2000-01-02"></li>
<li>약관동의여부:
<input type="radio" name="agree" id="agreeY" value="Y" checked="checked"/><label for="agreeY">동의</label>
<input type="radio" name="agree" id="agreeN" value="N" /><label for="agreeN">미동의</label>
</li>
<li>메모<textarea name="memo" rows="5" cols="20">기본값</textarea></li>
</ul>
<ul>
<li>색상:<input type="color" name="myColor"/></li>
<li>수량(number):<input type="NUMBER" name="quantity1" value="1" min="0" max="10" step="1"/></li>
<li>수량(range):<input type="range" name="quantity2" value="1" min="0" max="10" step="1"/></li>
<li>파일찾기(file):<input type="file" name="file" id="file" multiple="multiple"/></li>
</ul>
</fieldset>
<input type="submit" value="확인" class="btn1 "/>
<input type="image" src="../imges/submit4.png" name="submitING" id="submitING" class="btn1" />
<input type="reset" value="취소" class="btn1" />
<br/><br/>
<!-- Inline방식- html문서 태그의 script코드 작성 -->
<input type="button" value="Inline" name="btn1" id="btn1" class="btn1" onclick="alert('안녕!');" />
<input type="button" value="Internal" name="btn2" id="btn2" class="btn1" onclick="fun1();" />
<input type="button" value="External" name="btn3" id="btn3" class="btn1" onclick="fun2();" />
<input type="button" value="js전송" name="btnSubmit" id="btnSubmit" class="btn1" onclick="frmSubmit();" />
<br/><br/>
</form>
<script type="text/javascript">
<!-- Internal방식- html문서 내부의 script코드 작성 -->
//funtion 함수명(매개변수리스트){구현코드}
function fun1(){
alert('Internal방식\nfun1()이다!!');
}
/*<form name="frm1" id="frm1">
form요소에 action="ok.jsp" method="get"설정 */
function frmSubmit(){
alert('frmSubmit()호출성공');
//1)form요소에 접근
// let formElement = window.document.forms[0]; //폼컬렉션의 첫번째 요소로 접근
//let formElement = window.document.frm1; //폼컬렉션의 이름으로 접근
//상위객체.하위객체
//window.document.폼객체.폼하위객체
let formElement = document.getElementById("frmid1"); //document객체의 getElementById()메서드를 이용해 접근
//유효성 검사-필수입력,글자수체크,비번일치여부 등
//id필수입력
//id요소에 접근 값이 없으면 경고창에 "ID는 필수입력입니다." 출력
if(formElement.id.value==""){ //입력값이 없으면
window.alert('ID는 필수입력입니다.');
return;
}
//2)폼요소의 action속성의 값을 "ok.jsp"설정
formElement.action="ok.jsp";
//2)폼요소의 method속성의 값을 "get"설정
formElement.method="get";
//3)method의 방식으로 action에서 지정한 페이지로 폼의 내용을 전송
formElement.submit();
}
</script>
클래스 변수명= new 클래스명();
변수명.필드명 -> 필드의 값을 가져오기=>GET
변수명.필드명=값; -> 필드의 값을 설정 =>SET
변수명.메서드명();
</body>
</html>
728x90
'개발 수업 > WEB' 카테고리의 다른 글
| [JavaScript] 자바스크립트 변수 (0) | 2023.06.26 |
|---|---|
| [JSP] 스크립트릿(scriptlet) 태그 (0) | 2023.06.23 |
| Visual Studio 설치 (0) | 2023.06.22 |
| [HTML] Get방식, Post방식 (0) | 2023.06.22 |
| [CSS] 폼(form) (0) | 2023.06.22 |
