Do it! 자바스크립트

9강 폼과 자바스크립트

1. 폼 요소에 접근하는 여러 가지 방법

• id 값이나 class 값을 사용해 폼 요소에 접근하기

document.querySelector("#billingName")
<input type=​"text" class=​"input-box" id=​"billingName" name=​"billingName">​
document.querySelector("#billingName").value
'한라산'

• name 값을 사용해 폼 요소에 접근하기

document.ship.shippingName
<input type=​"text" class=​"input-box" id=​"shippingName" name=​"shippingName">​
document.ship.shippingName.value
'도레미'

• 폼 배열을 사용해 폼 요소에 접근하기

document.forms
HTMLCollection [form]
document.forms[0].elements
HTMLFormControlsCollection(3) [input, input, button.order]
document.forms[0].elements[0].value
'duswn673'

• 배송 정보 자동 입력 프로그램 만들기 - 주문 정보 내용 가져오기

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

2. 폼 요소에서 입력값 검증하기

• 입력값 검증 프로그램 만들기 - 아이디 글자 수 확인하기

var userId = document.querySelector("#user-id");

userId.onchange = checkId;

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

• 입력값 검증 프로그램 만들기 - 비밀번호 확인하기

var userId = document.querySelector("#user-id");
var pw1 = document.querySelector("#user-pw1");
var pw2 = document.querySelector("#user-pw2")

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();
    }
}

select() 함수와 focus()함수
select() 함수는 기존에 입력한 값을 선택
focus() 함수는 기존에 입력한 값이 지워지고, 텍스트 필드에 커서

3. 다양한 폼 요소 다루기

( 책 읽어보기로 이해완(?) )

10강 웹 브라우저를 다루는 방법, 브라우저 객체 모델(BOM)

1. 브라우저 객체 모델이란?

Browser Object Model
웹 '브라우저' 전체를 객체로 관리하는 것

✔ 자주 사용하는 브라우저 내장 객체
▫ Window 브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
▫ Document 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음
▫ History 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
▫ Location 현재 페이지에 대한 URL 정보를 가지고 있는 객체
▫ Navigator 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체
▫ Screen 현재 사용 중인 화면 정보를 다루는 객체

2. 웹 브라우저를 제어하는 Window 객체

• 새 창을 여는 open( ) 함수

window.open("https://www.daum.net/")

• 크기를 조절하는 resizeBy( ), reSizeTo( ) 함수

var newWin = window.open("","","width=300 , height=300")

newWin.resizeBy(100,100)

newWin.resizeBy(-100,-100)
newWin.resizeTo(200,200)

✔ resizeBy( ) 함수는 음수 값 사용 가능
✔ resizeTo( ) 함순는 음수 값 사용 불가

• 위치를 조절하는 moveBy( ), moveTo( ) 함수

newWin.moveBy(500,500)
newWin.moveTo(0,0)

✔ moveBy( ) 현재 위치를 기준으로 가로, 세로 움직임
✔ moveTo( ) 화면의 왼쪽 위 모서리를 기준으로 가로, 세로 움직임

• 팝업 창 표시 프로그램 만들기 - Window 객체 함수로 팝업 창 띄우기

function openPop(){
    var newWin = window.open("popup.html"," ","width=400, height=400");
    if(newWin == null){
        alert("팝업이 차단되어 있습니다. 팝업 차단을 해제하고 새로고침해 주세요.")
    }
}

window.onload = openPop;

3. 브라우저 정보가 담긴 Navigator 객체

• 렌더링 엔진이란?
  Navigator 객체는 렌더링 엔진의 이름을 보고 웹 브라우저 종류로 구별
  렌더링 엔진(Rendering Engine)이란 브라우저에서 웹 문서를 화면에 표시하기 위해 웹 문서의 태그와 스타일을 해석하는 프로그램

• Navigator 객체의 속성 알아보기
  진동 감지 속성이나 배터리 상태를 체크하는 속성 등 새로운 속성이 계속 추가

• 사용자 에이전트 문자열로 자바스크립트 엔진 확인하기

4. 그 밖의 브라우저 객체

---

💬 하루 되돌아보기
드디어 Doit! 자바를 다 봤다.
오늘 한 부분은 다행히 술술 넘어갔고, 중간 중간 막혔던 부분은 예제랑 퀴즈부분을 다시 풀고 마쳤다.
내일은 나의 조언자 선배님이 특강이 무료로 생겼다며 알려준 강의를 할 예정이다!