6/16 개발일지

1)학습한 내용

DOM에 요소 추가하기

DOM트리에 노드 추가하기

<!-- console 창에서 순서대로 다음과 같이 작성하기
1. 요소 노드 만들기
var newP = document.createElement("p")

2. 텍스트 노드 만들기
var newText = document.createTextNode("주문이 완료되었습니다.")

3. 자식노드로 추가하기
newP.appendChild(newText)

4. 자식노드로 추가하기
document.body.appendChild(newP)

5. 속성 노드 만들기
var attr = document.createAttribute("class")
attr.value = "accent"

6. 속성 노드 연결하기 
newP.setAttributeNode(attr)

또는 

5, 6 단계 대신: 텍스트 노드를 만들어 웹 문서에 추가해 놓은 경우 setAttribute()함수 사용하면 더 간단.
newP.setAttribute("class", "accent")
-->

버튼에 이벤트 처리 함수 연결

hasChildNodes( ) 함수
특정 노드에 자식 노드가 있는지 확인하는 함수. 자식 노드가 있다면 true, 없다면 false 반환

childNodes 속성
현재 노드의 자식 노드를 가지고 있는 속성. 요소 노드 뿐만 아니라 빈 텍스트 노드도 자식으로 인식.

children 속성
현재 노드의 자식 노드 중 요소 노드만 가지고 있는 속성

insertBefore( ) 함수
부모 노드에 자식 노드를 추가할 때 기준 노드를 지정하고 그 앞에 자식 노드 추가

removeChild( ) 함수와 parentNode 속성
노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근한 후 부모 노드에서 삭제해야 함.
parentNode 속성 – 현재 노드의 부모 노드 정보를 가지고 있는 속성
removeChild( ) 함수 - 부모 노드에서 자식 노드를 삭제하는 함수

    <form action="">
      <input type="text" id="userName" placeholder="이름" required autocomplete="off">
      <button onclick="newRegister();return false;">신청</button>
    </form>

js

    function newRegister(){
    // 1. 새로운P요소 만들기
    var newP = document.createElement("P");

    //2. 텍스트 노드 만들기
    var userName = document.querySelector("#userName");
    var newText = document.createTextNode(userName.value);

    //3. 텍스트 노드를 P요소에 append
    newP.appendChild(newText);

    //4. nameList에 자식요소로 P요소를  append
    var nameList = document.querySelector("#nameList");
    nameList.insertBefore(newP, nameList.childNodes[0]); //최근이름이 위로 오도록 변경
    userName.value = "";

    //5. 삭제를 위해서  X  를 만든다 .
    var delBttn = document.createElement("span");
    var delText = document.createTextNode("X");
    delBttn.setAttribute("class", "del");
    delBttn.appendChild(delText);
    newP.appendChild(delBttn);

    //6. 실제로 삭제를 한다. 
    var removeBttns = document.querySelectorAll(".del");
    for (var i=0; i < removeBttns.length; i++){
        removeBttns[i].addEventListener("click", function(){
            if(this.parentNode.parentNode){//현재 노드(this)의 부모노드의 부모노드가 있을 경우 실행 
                this.parentNode.parentNode.removeChild(this.parentNode);
                //현재노드(this)의 부모 노드의 부모 노드를 찾아서 '현재 노드(this)의 부모 노드(p)를 삭제
            } 
        });
    }
}

폼과 자바스크립트

폼 요소에 접근하는 방법 - 선택자 사용
예)

<label class="field" for="billingName">이름 : </label>
<input type="text" class="input-box" id="billingName" name="billingName">

document.querySelector("#billingName").value

폼 요소에 접근하는 방법 - name 사용

	<form name="order">
			<fieldset>
				<legend> 주문 정보 </legend>
					<li>
						<label class="field" for="billingName">이름 : </label>
						<input type="text" class="input-box" id="billingName" name="billingName">
					</li>

			</fieldset>
		</form>

document.order.billingName.value

폼 요소에 접근하는 방법 - 배열 사용
선택자와 name속성이 없을 때 사용

	<form name="order">
			<fieldset>
				<legend> 주문 정보 </legend>
					<li>
						<label class="field" for="billingName">이름 : </label>
						<input type="text" class="input-box" id="billingName" name="billingName">
					</li>

			</fieldset>
		</form>

document.form[].elements[].value

배송 정보 자동 입력하기
html

		<form name="order">
			<fieldset>
				<legend> 주문 정보 </legend>
				<ul>
					<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>
				</ul>
			</fieldset>
		</form>
		<form name="ship">
			<fieldset>
				<legend> 배송 정보 </legend>								
				<ul>
					<li>
						<input type="checkbox" id="shippingInfo" name="shippingInfo">
						<label for="bill_info" class="check">주문 정보와 배송 정보가 같습니다</label>
					</li>
					<li>
						<label class="field" for="shippingName">이름 : </label>
						<input type="text" class="input-box" id="shippingName" name="shippingName">
					</li>
					<li>
						<label class="field" for="shippingTel">연락처 : </label>
						<input type="text" class="input-box" id="shippingTel" name="shippingTel">	
					</li>
					<li>
						<label class="field" for="shippingAddr">주소 : </label>
						<input type="text" class="input-box" id="shippingAddr" name="shippingAddr">
					</li>
				</ul>				
			</fieldset>
			<button type="submit" class="order">결제하기</button>
		</form>		

js

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   = "";
    }
});

폼 요소에서 아이디 글자 수 확인하기

var userId = document.querySelector("#user-id"); //아이디 필드 가져오기

function checkId(){
    if (userId.value.length < 4 || userId.value.length > 15 ){
        alert("4~15자리의 영문과 숫자를 사용하세요.");
        userId.select();
    }
}

폼 요소에서 비밀번호 비교하기

var pw1 = document.querySelector("#user-pw1"); //비밀번호 필드
var pw2 = document.querySelector("#user-pw2"); //비밀번호 확인 필드

function comparePw(){
    if(pw1.value != pw2.value){
        alert("암호가 다릅니다. 다시 입력하세요.");
        pw2.value="";
        pw2.focus();
    }
}

선택 목록 및 옵션 항목에 접근하기

// 학과 선택시 알림창 띄워 알려주기 
var selectMenu = document.testForm.major;  //셀렉트 메뉴 가져오기
function displaySelect(){
	var selectedText = selectMenu.options[selectMenu.selectedIndex].innerText;
	alert("<" +selectedText+">를 선택했습니다." );
}

체크 된 것의 가격을 더하기

	<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>

var price = 24000;

var sideMenu = document.querySelectorAll(".checkbx");
var total = document.querySelector("#total");
total.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);
        }
        total.value = price + "원";
    }
}

브라우저 객체 모델(BOM)

자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것

자주 사용하는 브라우저 내장 객체

2) 학습내용 중 어려웠던 점

X

3) 해결방법

X

4) 학습소감

DOM과 BOM 모두 다 상위객체에서 하나 하나 내려가면서 제일 하위 자식 노드까지 내려가는 것을 숙지하니 이해하기 쉬웠고 직접적인 명칭과 기능을 익힌다면 관련된 작업을 할 때 큰 도움이 될 것 같습니다.