06.16 목 DOM2

이재빈·2022년 6월 16일

AI스쿨_JS

목록 보기

8/18

DOM

자바로 Document을 수정하는 것 = 자바로 HTML을 만드는 것

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)

 <p class="accent">주문이 완료되었습니다.</p>

폼

HTML에 name이라는 속성을 줌(자바스크립트가 영향을 줌)
폼 요소에 접근하는 방법
1. css 선택자 사용 : id값을 사용해서 접근 후 값 가져옴
2. name 속성 사용 : <form>태그와 폼 요소에 모두 name 속성이 있어야 가능
3. 배열 사용 : 위 두 가지 방법을 사용하지 못할 때 form 배열 사용

체크박스 모델

<script>
var check = document.querySelector("#shippingInfo"); //배송정보의 checkbox id
check.addEventListener("click", function(){   //체크가 클릭되었다면 실행 
    if(check.checked == true){ //체크 표시가 있다면?
    	//다른 값으로 대입해라 #shipping => #billing
        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(){
    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();
    }
}
</script>

선택 목록, 옵션 항목 접근

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

체크박스 가격 합하기 : 피자주문 예

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

브라우저 객체모델

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

팝업 창 표시하기:
open() : 다양한 형태로 새창 열기
창 크기 조절하기
resiezeBy() : 현재 브라우저 창의 크기를 기준으로 괄호 안의 값을 더하는 것
resizeto() : 브라우저 창의 최종 크기
창 위치 조절
moveby() : 현재 브라우저 창의 위치를 기준으로 괄호 안의 값을 더하는것
resizeto() : 브라우저 창의 최종 크기

Navigator 객체

웹 브라우저 버젼, 렌더링 엔진, 사용자 에이전트 문자열 등을 비롯해 웹 브라우저 정보가 담긴 객체

History 객체

브라우저에서 '뒤로','앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소 저장
읽기 전용

tip

```
<button onclick="newRegister();return false;">신청</button>
```
button은 자동으로 submit하게 되서 빈페이지를 보여주게 되기때문에, 현재 페이지에서 계속 하기 위해 return=false로 리턴값을 무시한다.
Number 과 parseInt 문자열을 숫자로 바꿔주는 역할을 합니다.
- number : 숫자값으로 작업할 수 있게 해주는 Object 객체. 객체는 생성자를 사용하여 만들고, 원시 숫사 자료형은 함수를 사용해 생성
- parseInt() : 문자열 인자를 파싱해서 특정진수의 정수를 반환
- 결론:
  숫자가 먼저 오는 숫자와 텍스트가 혼합 변수 값은 parseInt 만 숫자 출력.
  0이 먼저 시작한 숫자는 parseInt, Number 모두 0을 제외한 숫자만 출력
  소수점의 결과를 다 나타내고 싶을 때는 Number 객채를 사용