자바스크립트-8일차

이주열·2022년 6월 16일

학습한 내용

JavaScript 기초/ 실습 - (실습) 유용한 JS 기능 구현하기 2 - DOM, form, BOM

1. DOM

실습1. 참가 신청 명단 표시하기

form / nameList에 목록을 생성할 것이다

// 이벤트 함수 정의
function newRegister(){
    // 새로운 P 요소 만들기
    var newP = document.createElement("P");
    
    // 텍스트 노드 만들기
    var userName = document.querySelector("#userName");
    var newText = document.createTextNode(userName.value);

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

    // nameList에 자식 요소로 P요소를 append
    var nameList = document.querySelector("#nameList");
    // nameList.appendChild(newP);
    // 최근 이름이 위로 오도록 변경(15라인 대신)
    nameList.insertBefore(newP, nameList.childNodes[0]);
    userName.value = "";
    
    // 삭제를 위해서 x표시 만들기
    var delBttn = document.createElement("span");
    var delText = document.createTextNode("X");
    delBttn.setAttribute("class", "del");
    delBttn.appendChild(delText);
    newP.appendChild(delBttn);

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

삭제 하기 - 자기 자신을 삭제할 수는 없어서, 부모 노드를 찾아서 삭제해야 함
한 번만 부모노드로 올라가서 삭제하면 span 태그만 삭제되어서 한 번 더 올라가야 p태그 전체를 삭제하게 됨

실습2.

텍스트 단락을 누르면 글자 크기 20px 글자색 blue 배경색 #ccc 지정 소스

	<script>
		var myText = document.querySelector("#myText");
		myText.addEventListener("click", function(){
			myText.style.fontSize = "20px";
			myText.style.color = "blue";
			myText.style.backgroundColor = "#ccc";
		})
	</script>

실습3.

체크 표시를 누르면 항목 텍스트의 글자색이 #ccc로 바뀌는 소스

	<script>
		var buttons =document.querySelectorAll(".check");
		for(var i=0; i<buttons.length; i++){
			buttons[i].addEventListener("click", function(){
				this.parentNode.style.color = "#ccc";
			})
		}
	</script>

2. 폼과 자바스크립트

  • css 선택자 사용
  • name 속성 사용
  • css 선택자도 없고, name 속성도 없을 때 form 배열 사용

실습4. 배송 정보 자동 입력하기

체크박스에 체크하면 입력한 주문 정보를 배송 정보에 자동 입력하기
토글 이용

// 체크 상자의 id 불러 오기
var check = document.querySelector("#shippingInfo");
// 체크가 클릭되었다면 실행 이벤트 - 토글
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 = "";
    }
});

  • 배송 정보의 체크를 풀면 복사된 정보 사라짐

실습5. 아이디랑 비밀번호 체크

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

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

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

}

정규 표현식

실습6. 학과 선택하면 alert창 오게 하기

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

  • document.testForm.major.options
    -> option에 대한 접근/ 인덱스로 접근 가능

  • document.testForm.major.options[4]
    -> 전기전자공학과

  • 학과 선택이 선택하면 인덱스 알아오기

  • document.testForm.major.options.selectedIndex
    -> 5

실습7. 가격표

체크박스를 이용해 총 가격 구하기

// 가격 가져오기
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 + "원";
    }
}

  • 체크가 되었는지 판단하여, 되어있다면 가격 더하고, 체크 안 되어있다면 가격 빼기

3. 브라우저 객체 모델 BOM

브라우저 객체 모델이란

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

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

1) window -브라우저 창 안에 존재하는 모든 요소의 최상위 객체
2) Document - body 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음
3) History - 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
4) Location - 현재 페이지에 대한 URL 정보를 가짐
5) Navigator - 현재 웹 브라우저 정보를 가지고 있는 객체
6) Screen - 현재 사용 중인 화면 정보를 다루는 객체

팝업 창 표시하기

1) window.open("https://www.naver.com")

창 크기, 위치 조절하기

  • resizeBy() 함수 – 현재 브라우저 창의 크기를 기준으로 괄호 안의 값을 더함.
  • moveBy() 함수 – 현재 브라우저 창의 위치를 기준으로 괄호 안의 값을 더함.
  • 웹 브라우저 버전, 렌더링 엔진, 사용자 에이전트 문자열 등을 비롯해 웹 브라우저 정보가 담긴 객체
    1) appCodeName - 브라우저 이름을 문자열로 반환
    2) appName - 브라우저 공식 이름을 문자열로
    3) appVersion - 브라우저 버전을 문자열로
    4) connection - 브라우저 장치의 네트워크 정보가 담긴 객체를 반환
    5) platform - 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환
    6) userAgent - 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환
	<script>
		document.write("<table>");				
		document.write("<tr><td class='title'>브라우저 코드명</td><td> " + navigator.appCodeName + "</td></tr>");
		document.write("<tr><td class='title'>브라우저 종류</td><td>" +  navigator.appName + "</td></tr>")
		document.write("<tr><td class='title'>브라우저 버전</td><td>" + navigator.appVersion + "</td></tr>")
		document.write("<tr><td class='title'>브라우저 플랫폼</td><td>" + navigator.platform + "</td></tr>")
		document.write("<tr><td class='title'>브라우저 에이전트</td><td>" + navigator.userAgent + "</td></tr>");
		document.write("</table>")
	</script>

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

전반적인 자바스크립트에 대해 오늘까지 학습을 하였다. 수업을 통해 따라가기는 쉬웠으나, 복습을 하거나 혼자 연습문제를 해결하는 과정에서는 어려움이 있었다. 아직 부족하지만, 많은 코딩하는 연습이 필요할 것 같다.

profile
이주열
예비 프론트엔드 개발자
이전 포스트

자바스크립트-7일차

다음 포스트

자바스크립트-9일차

0개의 댓글