1) 학습한 내용
폼
폼 요소에 접근하는 방법
id 값이나 class 값을 사용해 폼 요소에 접근하기
id 값이나 class 값을 사용해 폼 요소에 접근하는 방법은 querySelector() 함수나 querySelectorAll() 함수를 사용해서 특정 id 값이나 class 값을 가진 요소에 접근할 수 있다.
Name 값을 사용해 폼 요소에 접근하기
name 속성은 자바스크립트에서 폼 요소를 구별하고 접근할 수 있도록 HTML 초기부터 사용하던 방법이다.
- form 태그에 name 속성이 지정되어 있어야 하고, 그 태그 안에 포함된 폼 요소에도 name 속성이 있어야 한다.
폼 배열을 사용해 폼 요소에 접근하기
document의 속성 중 forms 속성은 문서 안에 있는 form 태그를 모두 가져와 배열 형태로 ㅂ나환한다. 이 방법은 폼 요소에 id나 class 속성도 없고 name 속성도 없을 때 사용한다.
document.forms[0].elements[0].value위의 것을 해석하면 현재 문서(document.)의 첫 번째 form(forms[0])의 첫 번째 요소(elements[0])의 값(value)를 의미한다.
<li>
<label class="field" for="billingName">이름 : </label>
<input type="text" class="input-box" id="billingName" name="billingName">
</li>
<li>
<label class="field" for="billingTel">연락처 : </label>
<input type="text" class="input-box" id="billingTel" name="billingTel">
</li>
<li>
<label class="field" for="billingAddr">주소 : </label>
<input type="text" class="input-box" id="billingAddr" name="billingAddr">
</li>'주문 정보'에 있는 폼 항목과 '배송 정보'에 있는 폼 항목이 모두 같지 않아도 되지만, 어느 항목을 어느 항목에서 복사할지는 알고 있어야 한다.
var check = document.querySelector("#shippingInfo"); //체크 상자의 id
check.addEventListener("click", function(){ //체크가 클릭되었다면 실행
if(check.checked == true){ //체크 표시가 나온다면
document.querySelector("#shippingName").value = document.querySelector("#billingName").value;
document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value;
document.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value;
}else{
document.querySelector("#shippingName").value = "";
document.querySelector("#shippingTel").value = "";
document.querySelector("#shippingAddr").value = "";
}
});'order.js'
input 태그의 새로운 유형
| 유형 | 설명 |
|---|---|
| input type = "email" | 이메일 주소 필드 |
| input type = "tel" | 전화번호 필드 |
| input type = "url" | 사이트 주소 필드 |
input 태그의 새로운 속성
| 속성 | 설명 |
|---|---|
| autocomplete | 자동 완성 기능을 켜고 끄는 속성 |
| autofocus | 해당 필드에 마우스 커서를 자동으로 표시 |
| placeholder | 필드 안에 힌트가 표시되어 사용자에게 어떤 내용을 입력해야 하는지 알려준다. |
| required | 필수 입력 항목을 지정 |
선택 목록에서 사용자가 선택한 옵션 항목 찾아내기
수강신청 페이지
<!DOCTYPE html>
<html lang="ko">
<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>수강신청하기</title>
<link rel="stylesheet" href="css/getForm.css">
</head>
<body>
<div id="container">
<h1>수강신청</h1>
<form name="testForm">
<fieldset>
<legend>신청인</legend>
<ul>
<li>
<label class="reg" for="userName">이름</label>
<input type="text" id="userName" name="userName" maxlength="50">
</li>
<li>
<label class="reg" for="class">학과</label>
<select name="major" id="major" onchange="displaySelect()">
<option>---- 학과 선택 ----</option>
<option value="archi">건축공학과</option>
<option value="mechanic">기계공학과</option>
<option value="indust">산업공학과</option>
<option value="elec">전기전자공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="chemical">화학공학과</option>
</select>
</li>
</ul>
</fieldset>
<fieldset>
<legend>신청 과목</legend>
<p>이 달에 신청할 과목을 선택하세요.</p>
<label><input type="radio" name="subject" value="speaking">회화</label>
<label><input type="radio" name="subject" value="grammar">문법</label>
<label><input type="radio" name="subject" value="writing">작문</label>
</fieldset>
<fieldset>
<legend>메일링</legend>
<p>메일로 받고 싶은 뉴스 주제를 선택해 주세요</p>
<label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
<label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
<label><input type="checkbox" name="mailing3" value="pops">모닝팝스</label>
</fieldset>
</form>
</div>
<script src="js/getForm.js"></script>
</body>
</html>function displaySelect(){
var selectedText = selectMenu.options[selectMenu.selectedIndex].innerText;
alert("<" + selectedText + ">를 선택했습니다.");
}피자 주문 금액 계산
<!DOCTYPE html>
<html lang="ko">
<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>연습문제 1</title>
<link rel="stylesheet" href="css/sol-1.css">
</head>
<body>
<div id="container">
<h1>피자 주문</h1>
<form>
<fieldset>
<legend>사이즈</legend>
<p>Large - 24000 원 </p>
</fieldset>
<fieldset>
<legend>추가 주문 </legend>
<label><input type="checkbox" name="pickle" class="checkbx" value="800">피클(800원)</label>
<label><input type="checkbox" name="chilly" class="checkbx" value="300">칠리 소스(300원)</label>
<label><input type="checkbox" name="deeping" class="checkbx" value="200">디핑 소스(200원)</label>
<label><input type="checkbox" name="stick" class="checkbx" value="4800">치즈스틱(4개, 4800원)</label>
<label><input type="checkbox" name="salad" class="checkbx" value="2400">콘 샐러드(2400원)</label>
</fieldset>
<fieldset>
<legend>합계</legend>
<input type="text" id="total" name="total" class="price" readonly>
</fieldset>
</form>
</div>
<script src="./js/quiz-1.js"></script>
</body>
</html>'quiz-1.html'
var price =24000;
var sideMenu = document.querySelectorAll(".checkbx");
var totla = document.querySelector("#total");
totla.value = price + "원";
for(var i=0; i < sideMenu.length; i++){
sideMenu[i].onclick = function(){
if(this.checked == true){
price += parseInt(this.value);
}else{
price -= parseInt(this.value);
}
totla.value = price + "원";
}
}quiz-1.js
2) 학습내용 중 어려웠던 점
지금까지는 CSS를 통해서 홈페이지 외형을 꾸미는 것을 해왔었다면 이번에는 자바스크립트라는 동적 지향 언어를 통해서 홈페이지를 작동시키는 것이었다. 자바스크립트가 자동차의 엔진을 담당한다는 걸 이해가 되었다. 특히, 실전문제를 응용해서 풀어야하는 것이 가장 힘들었다.
3) 해결방법
그나마, 다행인 점은 내가 이 자바스크립트에 관한 서적이 있어서 그나마 푸이 방법을 알 수 있다는 점이었으나 결국에는 스스로 공부하는 것이 유일한 방법이다.
4) 학습소감
이번 수업을 통해서 백엔드를 배워야한다면 프론트 엔드의 영역을 완전히 파악하고 이를 익혀야 할 필요는 가지게 되었다.
coding