Ⅰ. 데이터타입
-- Dynamic Web Project(JavaScriptStudy) - Next - build\WEB-INF\classes - web.xml 체크
-- Folder(chap1)와 Html File(form_01) 생성
<body>
<div id="container">
<div id="container">
<h2 id="underline">회원가입</h2>
</div>
<div id="frm">
<form name="registerFrm">
<ul>
<li>
<label for="name">아이디</label>
<input type="text" name="userid" id="userid" size="20" maxlength="20" required autofocus autocomplete="off" />
</li>
<li>
<label for="passwd1">암호</label>
<input type="password" name="passwd" id="passwd1" size="20" maxlength="20" required/>
</li>
<li>
<label for="passwd2">암호확인</label>
<input type="password" id="passwd2" size="20" maxlength="20" required/>
</li>
<li>
<label for="name">성명</label>
<input type="text" name="name" id="name" size="20" maxlength="20" required/>
</li>
<li>
<label for="email">이메일</label>
<input type="email" name="email" id="email" size="40" maxlength="40" placeholder="예 abc@gmail.com"/>
</li>
<li>
<label for="tel">전화번호</label>
<input type="tel" name="tel" id="tel" size="20" maxlength="11" placeholder="-는 제외하고 입력"/>
</li>
<li>
<input type="submit" class="btn" value="확인" />
<input type="reset" class="btn" value="취소" />
</li>
</ul>
</form>
</div>
</div>
</body>
<style type="text/css">
div#container {
width: 80%;
margin: 0 auto;
}
h2#underline {
text-decoration: underline;
text-align: center;
}
div#frm ul {
list-style-type: none;
}
div#frm ul > li {
padding: 10px 0;
}
div#frm ul > li > label {
display: inline-block;
width: 100px;
}
input.btn {
width: 70px;
height: 30px;
font-size: 12pt;
font-weight: bold;
margin: 20px 0 0 40px;
}
</style>
<button type="button" onclick="checkType()">자바스크립트에서 변수타입 확인하기</button>
<button type="button" class="btn" onclick="goSubmit()">확인</button>
<button type="reset" class="btn">취소</button>
-- input submit은 데이터를 조건에 맞든 안 맞든 무조건 보내버리므로 input submit 대신 button을 사용한다.
-- 반드시 type을 꼭 적어 주어야 한다.
<head>
<script type="text/javascript">
function checkType(){
alert("확인 버튼을 클릭하셨습니다.")
}
</script>
</head>
checkType()
var a = 10;
alert("a=10을 했을 때 변수 a의 타입은 => " + typeof a)
a = 21.345;
alert("a=21.345을 했을 때 변수 a의 타입은 => " + typeof a)
a = "안녕하세요?";
alert("a="안녕하세요?"을 했을 때 변수 a의 타입은 => " + typeof a)
a = true; // a = false;
alert("a=true을 했을 때 변수 a의 타입은 => " + typeof a)
checkType()
a = document.registerFrm.userid;
alert("a=document.registerFrm.userid을 했을 때 변수 a의 타입은 => " + typeof a)
a = document.registerFrm.user;
alert("a=document.registerFrm.user을 했을 때 변수 a의 타입은 => " + typeof a)
function goSubmit(){
var frm = document.registerFrm;
var useridVal = frm.userid.value;
alert("userid => " + useridVal);
console.log("userid => " + useridVal);
}
1. 아이디 입력란에 데이터값이 들어왔는지 검사하기
function goSubmit(){
var frm = document.registerFrm;
var useridVal = frm.userid.value.trim();
if(useridVal == "") {
alert("아이디를 입력하세요!");
frm.userid.value = "";
frm.userid.focus();
return;
}
}
2. 암호 입력란에 데이터값이 들어왔는지 검사하기
var passwd1Val = frm.passwd.value.trim();
if(passwd1Val == ""){
alert("암호를 입력하세요!");
frm.passwd.value = "";
frm.passwd.focus();
return;
}
3. 암호 입력란과 암호확인 입력란의 데이터값이 같은지 다른지 검사하기
var passwd2Val = document.getElementById("passwd2").value.trim();
if(passwd1Val != passwd2Val){
alert("암호와 암호확인값이 서로 다릅니다.")
frm.passwd.value = "";
document.getElementById("passwd2").value = "";
frm.passwd.focus();
return;
}
4. 성명 입력란에 데이터값이 들어왔는지 검사하기
var nameVal = frm.name.value.trim();
if(nameVal == ""){
alert("성명을 입력하세요!");
frm.name.value = "";
frm.name.focus();
return;
}
5. 이메일 입력란에 데이터값이 들어왔는지 검사하기
var emailVal = frm.email.value.trim();
if(emailVal == ""){
alert("이메일을 입력하세요!");
frm.email.value = "";
frm.email.focus();
return;
}
6. 전화번호 입력란에 데이터값이 들어왔는지 검사하기
var telVal = frm.tel.value.trim();
if(telVal == ""){
alert("전화번호를 입력하세요!");
frm.tel.value = "";
frm.tel.focus();
return;
}
7. 모든 입력란이 올바르게 입력이 된다면 폼에 있던 데이터를 전송하기
frm.action="register.do";
frm.method="post";
frm.submit();
Ⅱ. 선택자 잡기
Folder(chap1)에 Html File(form_02) HTML5 ch02_form의 02.html 복사하여 생성
<button type="button" class="btn" onclick="goSubmit();">확인</button>
<button type="reset" class="btn">취소</button>
▷ 자바스크립트에서 id 속성을 가지고 선택자를 잡는 방법
-- document.getElementById("id값");
<script type="text/javascript">
function goSubmit(){
var val = document.getElementById("userid").value.trim();
console.log("typeof val : " + typeof val);
console.log("아이디 : " + val);
}
</script>
▷ 자바스크립트에서 name 속성을 가지고 선택자를 잡는 방법
-- document.getElementsByName("name속성값");
-- 리턴타입은 배열타입
<label>취미</label>
<label for="hobby1" class="hobby">게임</label><input type="checkbox" name="hobby" id="hobby1" value="game"/>
<label for="hobby2" class="hobby">영화감상</label><input type="checkbox" name="hobby" id="hobby2" value="movie"/>
<label for="hobby3" class="hobby">글쓰기</label><input type="checkbox" name="hobby" id="hobby3" value="writing"/>
<label for="hobby4" class="hobby">음악감상</label><input type="checkbox" name="hobby" id="hobby4" value="music"/>
var val = document.getElementsByName("hobby");
console.log("typeof val : " + typeof val);
for(var i=0; i<val.length; i++){
console.log(val[i].value);
}
-- 체크가 되어져 있든 안 되어져 있든 모든 값이 나타난다.
▷▷ 체크가 되어진 것만 나타내려면
console.log(val[i].checked);
-- 체크가 되어 있으면 true, 안 되어 있으면 false
for(var i=0; i<val.length; i++){
if(val[i].checked)
console.log(val[i].value);
}
-- 체크된 것만 출력된다.
▷ 자바스크립트에서 class 속성을 가지고 선택자를 잡는 방법
-- document.getElementsByClassName("Class명");
-- 리턴타입은 배열타입
val = document.getElementsByClassName("myselect");
console.log("typeof val : " + typeof val);
for(var i=0; i<val.length; i++){
console.log(val[i].value);
}
<li>
<label for="school">최종학력</label>
<select id="school" class="myselect">
<option value="highSchool">고졸</option>
<option value="collage">초대졸</option>
<option value="university">대졸</option>
<option value="graduate">대학원졸</option>
</select>
</li>
<li>
<label>선호프로그램</label>
<select name="program" id="program" class="myselect">
<optgroup label="데이터베이스">
<option value="Oracle">Oracle</option>
<option value="MSSQL">MSSQL</option>
<option value="sybase">sybase</option>
</optgroup>
<optgroup label="개발언어">
<option value="Java">Java</option>
<option value="JSP">JSP</option>
<option value="Spring">Spring</option>
<option value="C/C++">C/C++</option>
</optgroup>
</select>
</li>
▷ 자바스크립트에서 Tag를 가지고 선택자를 잡는 방법
-- document.getElementsByTagName("Tag명");
-- 리턴타입은 배열타입
val = document.getElementsByTagName("label");
for (var i = 0; i < val.length; i++) {
console.log(val[i].innerText);
}
문제 ▷▷ 취미를 선택하는 체크박스에 아무 체크도 안 했더라면 "취미는 최소한 1개 이상 선택하세요."라는 alert이 뜨게 하세요.
var hobbyArr = document.getElementsByName("hobby");
var cnt = 0;
for(var i=0; i<val.length; i++){
if(hobbyArr[i].checked)
{
cnt++;
}
if(cnt == 0) {
alert("취미는 최소한 1개 이상 선택하세요.")
}
else {
console.log(val[i].value);
}
}
문제 ▷▷ 취미를 선택하는 체크박스에 최소한 2개 이상 체크를 안 했더라면 "취미는 최소한 2개 이상 선택하세요."라는 alert을 띄우세요.
var hobbyArr = document.getElementsByName("hobby");
var cnt = 0;
for(var i=0; i<val.length; i++){
if(hobbyArr[i].checked)
{
cnt++;
}
if(cnt <= 2) {
alert("취미는 최소한 2개 이상 선택하세요.");
return
}
else {
console.log(val[i].value);
}
}
Ⅲ. window.onload
window.onload = function() {
alert("안녕하세요?");
}
-- 웹브라우저에 HTML문서(document)가 로드되고 나서 자동적으로 실행할 내용이 있으면 그 내용은 위와 같이 기술해 주면 된다.
window.onload = function() {
var val = "";
var year = 1950;
for(var i=0; i<2019-1950+1; i++){
val += "<option>"+(year+i)+"</option>";
}
var obj = document.getElementById("birthYear").innerHTML = val;
}
현재 날짜 구하기
var now = new Date();
var currentYear = now.getFullYear(); // 현재 년도
var currentMonth = now.getMonth()+1; // 현재월
var currentDay = now.getDate(); // 현재일
var today = currentYear+"-"+currentMonth+"-"+currentDay;
alert("오늘날짜 : " + today);
-- 현재 월은 1~12가 아닌 0~11로 나타나기 때문에 꼭 1을 더해 주어야 한다.
var now = new Date();
var currentYear = now.getFullYear();
var currentMonth = now.getMonth()+1;
var currentDay = now.getDate();
if(currentMonth < 10)
month = "0"+month;
if(currentDay < 10)
day = "0"+day;
var today = currentYear+"-"+currentMonth+"-"+currentDay;
alert("오늘날짜 : " + today);
-- 현재월과 현재일이 10보다 작으면 앞에 "0"이 붙어서 나온다.
var val = "";
var year = 1950;
for(var i=0; i<(currentYear-1950)+1; i++){
val += "<option>"+(1950+i)+"</option>";
}
<li>
<label>출생년도</label>
<select name="birthYear" id="birthYear"></select>
</li>
문제 ▷▷ 출생년도가 1950년도가 아닌 2019년도부터 먼저 나오도록 하세요.
var val = "";
var year = 1950;
for(var i=0; i<(currentYear-1950)+1; i++){
val += "<option>"+(currentYear-i)+"</option>";
}
문제 ▷▷ 배열을 이용하여 아래의 결과가 나오도록 하세요.
<li>
<label for="sports">스포츠</label>
<select name="sports" id="sports"></select>
</li>
▷ 배열을 나타내는 두 번째 방법
var val2 = "";
var sports = ["야구", "축구", "농구", "배구", "수영", "에어로빅", "탁구"]
for(var i=0; i<sports.length; i++){
val2 += "<option>"+sports[i]+"</option>";
}
var obj2 = document.getElementById("sports").innerHTML = val2;
▷ 배열을 나타내는 두 번째 방법
<li>
<label for="beverage">음료</label>
<select name="beverage" id="beverage"></select>
</li>
var beverageArr = new Array();
beverageArr.push("커피");
beverageArr.push("사이다");
beverageArr.push("콜라");
beverageArr.push("환타");
var beverage = "";
for(var i=0; i<beverageArr.length; i++){
beverage += "<option>"+beverageArr[i]+"</option>";
}
var obj2 = document.getElementById("beverage").innerHTML = val2;
출생년도의 선택에 따라 현재 나이를 출력해 보세요.
<li>
<label>출생년도</label>
<select name="birthYear" id="birthYear" onchange="goCurrentAge();"></select>
</li>
<li>
<label>현재나이</label>
<div id="currentAge" style="display: inline;"></div>
</li>
function goCurrentAge() {
var birthYear = document.getElementById("birthYear").value;
var now = new Date();
var currentYear = now.getFullYear();
var currentAge = currentYear - parseInt(birthYear) + 1; // 현재 나이
document.getElementById("currentAge").innerHTML = currentAge;
}
'수업내용' 카테고리의 다른 글
| [Day40][Javascript] join / 팝업창 / 우편번호 검색 (0) | 2019.10.22 |
|---|---|
| [Day39][Javascript] 정규 표현식 / 배열 / split (0) | 2019.10.21 |
| [Day34][JDBC] 글 검색 (0) | 2019.10.11 |
| [Day33] 글쓰기에 따른 point 점수 증가 / 글 목록 조회(DTO, HashMap) / 글 삭제 (0) | 2019.10.10 |
| [Day32][JDBC] 게시판 메뉴 / 글쓰기 / 글목록 조회 / 싱글톤 패턴 (0) | 2019.10.08 |
