2022-06-16
DOM 트리와 노드 복습하기
1)
버튼에 이벤트 처리 함수 연결hasChildNodes()
: 특정 노드에 자식 노드가 있는지 확인하는 함수. 자식 노드가 있다면 true, 없다면 false 반환childNodes
속성 : 현재 노드의 자식 노드를 가지고 있는 속성. 요소 노드 뿐만 아니라 빈 텍스트 노드도 자식으로 인식한다.children
속성을 쓰면 빈 텍스트는 제외하고 현재 노드의 자식 중 요소 노드만 가지고 온다.insertBefore()
: 부모 노드에 자식 노드를 추가할 때 기준 노드를 지정하고 그 앞에 자식 노드를 추가removeChild()
와 parentNode
속성 :<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)
배송 정보 자동 입력하기document.querySelector("#billingName").value
id 값 접근
document.ship.shippingName.value
<form>
태그와 폼 요소에 모두 name 속성이 있어야함
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 파일 내에서 조금씩 쓰는 거였다.