학습한 내용
DOM 트리에 노드 추가하기
<p class=”accent"〉주문이 완료되었습니다.</p>console 창에서 순서대로 다음과 같이 작성하기
요소 노드 만들기
var newP = document.createElement("p")텍스트 노드 만들기
var newText = document.createTextNode("주문이 완료되었습니다.")자식노드로 추가하기
newP.appendChild(newText)자식노드로 추가하기
document.body.appendChild(newP)속성 노드 만들기
var attr = document.createAttribute("class")
attr.value = "accent"속성 노드 연결하기
newP.setAttributeNode(attr)또는
5, 6 단계 대신: 텍스트 노드를 만들어 웹 문서에 추가해 놓은 경우 setAttribute()함수 사용하면 더 간단.
newP.setAttribute("class", "accent")
참가 신청 명단 표시하기
버튼에 이벤트 처리 함수 연결
<button onclick="newRegister();return false;">신청</button>function newRegister(){
// 1. 새로운 P요소 만들기
var newP = document.createElement("P");
//2. 텍스트 노드 만들기
var userName = document.querySelector("#userName");
var newText = document.createTextNode(userName.value);
//3. 텍스트 노드를 P요소에 append
newP.appendChild(newText);
//4. nameList에 자식요소로 P요소를 append
var nameList = document.querySelector("#nameList");
// nameList.appendChild(newP);
nameList.insertBefore(newP, nameList.childNodes[0]); //최근이름이 위로 오도록 변경(14라인 대신)
userName.value = ""; //텍스트 필드 지우기
//5. 삭제를 위해서 X 를 만든다 .
var delBttn = document.createElement("span");
var delText = document.createTextNode("X");
delBttn.setAttribute("class", "del");
delBttn.appendChild(delText);
newP.appendChild(delBttn);
//6. 실제로 삭제를 한다.
var removeBttns = document.querySelectorAll(".del");
for (var i=0; i < removeBttns.length; i++){
removeBttns[i].addEventListener("click", function(){
if(this.parentNode.parentNode){//현재 노드(this)의 부모노드의 부모노드가 있을 경우 실행
this.parentNode.parentNode.removeChild(this.parentNode);
//현재노드(this)의 부모 노드의 부모 노드를 찾아서 '현재 노드(this)의 부모 노드(p)를 삭제
}
});
}
}<script>
//퀴즈1 - 텍스트 영역 선택이 되면 스타일을 바꿔주게 함
var myText = document.querySelector("#myText");
myText.addEventListener("click", function(){
myText.style.fontSize = "20px";
myText.style.color = "blue";
myText.style.backgroundColor = "#ccc";
});
</script><script>
//퀴즈2 - 각 항목 앞에 있는 체크 표시를 누르면 항목 텍스트의 글자색이 바뀌도록
var buttons = document.querySelectorAll(".check");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function () {
this.parentNode.style.color = "#ccc";
});
}
</script>폼과 자바스크립트
폼 요소에 접근하는 방법
- CSS 선택자 사용 > id 값을 사용해 접근해서 값 가져오기
- name 속성 사용 >
<form>태그와 폼 요소에 모두 name 속성이 있어야 함. - 배열 사용 > css 선택자도 없고, name 속성도 없을 때 form 배열 사용
배송 정보 자동 입력하기
체크박스에 체크하면 입력한 주문 정보를 배송 정보에 자동 입력하기
console에서 실행해보기
document.querySelector("#billingName").value
document.order.billingName
document.forms['order'].elements['billingName']
document.order.billingName.value
document.forms
document.forms[0].elements[1].value
<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>수강신청-선택 목록 및 옵션 항목에 접근하기
<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>브라우저 객체 모델(BOM)
브라우저 객체 모델이란 - 자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것
- 팝업 창 표시하기
Window 객체를 사용해서 웹 문서를 불러오자마자 팝업 창 표시하기
open() 함수 - 다양한 형태로 새 창 열기
window.open("주소")
window.open("주소", "")
window.open("주소", "_self")
window.open("주소", "", "left=0, top=0, width=300, height=300")- 창 크기 조절하기
resizeBy() 함수 - 현재 브라우저 창의 크기를 기준으로 괄호 안의 값을 더합니다.
resizeTo() 함수 - 브라우저 창의 최종 크기 - 창 위치 조절
moveBy() 함수 - 현재 브라우저 창의 위치를 기준으로 괄호 안의 값을 더합니다.
resizeTo() 함수 - 브라우저 창의 최종 크기
- Navigator 객체
웹 브라우저 버전, 렌더링 엔진, 사용자 에이전트 문자열 등을 비롯해 웹 브라우저 정보가 담긴 객체
-
렌더링 엔진 & 자바스크립트 엔진
- 렌더링 엔진 : 브라우저에서 웹 문서의 태그와 스타일을 해석하는 프로그램
- 자바스크립트 엔진 : 브라우저에서 자바스크립트를 해석하는 프로그램
- 웹 브라우저마다 내장된 렌더링 엔진과 자바스크립트 엔진이 다름 -> 웹 브라우저를 구별하는데 사용
-
사용자 에이전트 문자열
- 클라이언트에서 서버로 정보를 보낼 때 클라이언트에서 함께 보내는 정보
- 서버에서는 이 정보를 보고 브라우저 종류를 확인한 후 그 브라우저에 맞게 웹 페이지 표시
- navigator.useragent에 포함되어 있음
-
History 객체
- 브라우저에서 '뒤로''앞으로' 또는 주소 표시줄에 입력해서 돌아다녔던 사이트 주소 저장
- 읽기 전용
-
Location 객체
- 현재 문서의 url 주소 정보
- 이 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있음
-
Screen 객체
- 화면 정보(TV 모니터나 모바일기기 화면）
학습소감
평소에 폼에서 많이 보던건데 자바스크립트로 입력 받는 것도 신기하고, 간단해 보였는데 생각보다 안에는 많은 코드로 이루어졌구나 하는 생각이 들었다.
Today I Learned