[개발일지 31일차]

MSJ·2022년 6월 16일
0

WEB

목록 보기
31/41
post-thumbnail

2022-06-16

DOM

DOM에 요소 추가하기

DOM 트리와 노드 복습하기

  1. 요소 노드 만들기
  2. 텍스트 노드 만들기
  3. 자식노드로 추가하기 (append)
  4. 속성 노드 만들기
  5. 속성노드 연결하기

실습 예제와 DOM접근 함께해보기


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

  1. 노드 추가 & 표시
  2. 노드 순서 바꾸기 & 삭제
    -> hasChildNodes() : 특정 노드에 자식 노드가 있는지 확인하는 함수. 자식 노드가 있다면 true, 없다면 false 반환
    -> childNodes 속성 : 현재 노드의 자식 노드를 가지고 있는 속성. 요소 노드 뿐만 아니라 빈 텍스트 노드도 자식으로 인식한다.
    -> 따라서 children 속성을 쓰면 빈 텍스트는 제외하고 현재 노드의 자식 중 요소 노드만 가지고 온다.
    -> insertBefore() : 부모 노드에 자식 노드를 추가할 때 기준 노드를 지정하고 그 앞에 자식 노드를 추가
    -> removeChild()parentNode 속성 :
    1) 노드는 자신을 스스로 삭제할 수 없으므로, 부모 노드 접근 후 삭제해야한다.
    2) parentnode 속성 : 현재 노드의 부모 노드 정보를 갖고 있는 속성
    3) removeChild() : 부모 노드에서 자식 노드를 삭제하는 메서드
<script>
function newRegister(){
    //아하, 각각 create+Node 를 써서 객체로 만들어야 사용을 할 수 있다.

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

    // 2. 텍스트 노드 만들기
    var userName = document.querySelector("#userName"); // 텍스트 입력 필드에서 보내는 내용을 가져옴
    var newText = document.createTextNode(userName.value); // 입력 필드에서 받은 것을 newText라는 곳에 넣음

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

    // 4. html id = nameList 에 P요소를 자식요소로 넣는다
    var nameList = document.querySelector("#nameList");
    // nameList.appendChild(newP); // 그냥 아래로 차례대로 추가
    nameList.insertBefore(newP, nameList.childNodes[0]); // 최근 이름이 위에서부터 추가하도록 변경 
    userName.value = ""; //텍스트 필드 지우기

    // 5. 명단 지우기(1) - 삭제를 위해 X를 생성
    var delBtn = document.createElement("span");
    var delText = document.createTextNode("X");
    delBtn.setAttribute("class", "del");
    delBtn.appendChild(delText); // 
    newP.appendChild(delBtn);

    // 6. 명단 지우기(2) - 실제로 삭제하는 기능
    var removeBtns = document.querySelectorAll(".del");
    for (var i=0; i < removeBtns.length; i++){
        removeBtns[i].addEventListener("click", function(){
            if(this.parentNode.parentNode){ // 현재 노드(this)의 부모노드의 부모노드가 있을 경우 실행 (span->p->div)
                this.parentNode.parentNode.removeChild(this.parentNode);
                // 현재노드(this)의 부모 노드의 부모 노드를 찾아서 '현재 노드(this)의 부모 노드(p)를 삭제
            }
        });
    }
}

// 신청만 누르면 X가 생성되는데, 텍스트가 비어있으면 작동이 안되게 만드는 것까지 해야한다..! (예외처리)
</script>

2) 배송 정보 자동 입력하기

폼요소 접근해보기

1. CSS 선택자 사용

document.querySelector("#billingName").value
id 값 접근

2. name 속성 접근 후 값 가져오기

document.ship.shippingName.value
<form> 태그와 폼 요소에 모두 name 속성이 있어야함

3. 배열 사용

document.forms
document.forms[0].elemets[1].value
document : 현재문서의
forms[0]: 첫 번째 form의
elements[1] : 두 번째 요소의
value : 값.

<script>
// 배송 정보 자동 입력하기
var check = document.querySelector("#shippingInfo"); //  체크 상자 id가 shippingInfo
check.addEventListener("click", function(){ // 체크가 클릭 됐을 때 실행.  토글: 버튼은 하난데 기능은 두개 (실행, 해제 같은) 체크박스는 true, false가 이미 내장되어있다
    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 = "";
    }
});
</script>

아이디, 비밀번호 확인

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

// change 이벤트 발생 시 각각의 함수를 실행하도록 설정
userId.onchange = checkId;
pw1.onchange = checkPw;
pw2.onchange = comparePw;

function checkId(){ // 정규식 09az을 나중에 추가해주면 영문과 숫자만 쓸수있게 된다..
    // https://curryyou.tistory.com/234
    // https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC
    if (userId.value.length < 4 || userId.value.length > 15){
        alert("4~15자리의 영문과 숫자를 사용하세요");
        userId.selected();
    }
}

function checkPw(){
    if (pw1.value.length < 8) {
        alert("비밀번호는 8자리 이상이어야 합니다.")
        pw1.value = "";
        pw1.focus();
    }
}

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

아래 예제로 실습해보기

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

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

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

document.testForm.major.options[4]
-> <option value="elec">전기전자공학과</option>
다섯 번째 옵션 항목에 접근
document.testForm.major.options[4].innerText
-> "전기전자공학과"
다섯 번째 옵션 항목의 화면 표시 내용
document.testForm.major.options[4].value
->"elec"


라디오 버튼&체크 상자 접근

라디오 버튼 '문법' 선택시
document.testForm.subject[0].checked
-> false
document.testForm.subject[1].checked
-> true
document.testForm.subject[2].checked
-> false

체크박스 '해외 단신, 5분 회화' 체크 시
document.testForm.mailing1.checked
-> true
document.testForm.mailing2.checked
-> true
document.testForm.mailing3.checked
-> false


태그 자체에서 폼 검증하기

<input> 태그의 새로운 유형
<input type = "email"> 태그 자체 내장된 기능이 이메일 주소 형식에 맞지 않으면 오류 메시지를 띄워줌
<input type = "tel"> 전화번호 숫자가 입력되지 않을 시 오류 메시지
input type = "url"> 사이트 주소 http:로 시작하지 않을시 오류 메시지

<input> 태그의 새로운 속성`
autocomplete : 자동 완성 기능을 키거나 끄는 속성
autofocus : 해당 필드에 마우스 커서 자동 표시
placeholder : 필드 안에 힌트 내용 표시 가능
required : 필수 입력 항목 지정. 미입력시 오류를 띄워준다

어려운 점

태그는 익혀도 js 문법이 익숙치 않아 문장 만들기가 어려운 것 같다. 영어 단어를 외워도 문장으로 만들지 못하는 것과 비슷한 느낌

해결 방법

제일 기본적인 js 형태를 외워둘 필요가 있는 듯

<script>
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 + "원";
    }
}
</script>

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

소감

... : ) 그동안 콘솔창에서 접근하는 걸 왜 보여주는지 몰랐는데 다 js 파일 내에서 조금씩 쓰는 거였다.

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글