javascript8일차

학습한내용
javascript 기초/실습(실습) 유용한 JS기능 구현하기2-DOM,FORM,BOM

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

form/nameList에 목록을 생성한다.

//이벤트 함수 정의
fuction newRegister(){//새로운 p요소 만들기
var newP= document.createElement(

//텍스트 노드 만들기
var userName= document.querySelecor("#namelist);
var newText = document.createTextNODEerName.value);
//텍스트 노드를 p요소에 append newP.(naapendchild(newText);
//nameList에 자식 요소로 P요소를 append 
var nameList=appendChild(newP);
//최근 이름이 위로 오도록 변경(15라인 대신)
NAMELIST.insertBefore(NewP,NAMELIST.Childnodes[0]);
userNAME.Value="";
//삭제를 위해서 x 표시 만들기
var removeBttns=document.querySelectorALL(".del");
for (var i=0; i<removeBttnsl 1++){
removeBttns[i].addEventlistener("click,function(){
//현재 노드(this)의 부모노드의 부모노드가 있을 경우
if(this ParentNode.parentNODE){
this.parentNODE.ParentNode.Removechilde(this.parentNode);

삭제하기-자기자신을 삭제할수는 없어서, 부모 노드를 찾아서 삭제해야함
한 번만 부모노드로 올라가서 삭제하면 span태그만 삭제되어서 한번 더 올라가야 P태그 전체를 삭제 할 수있다.
2.폼과 자바스크립트
CSS선택자 사용
name 속성 사용
css선택자도 없고 name 속성도 없을때 form배열 사용
실습4. 배송정보 자동 입력하기
체크박스에 체크하면 입력한 주문정보를 배송정보에 자동 입력하기
토글 이용
//체크 상자의 id 불러 오기

var check=document.querySelector("#shippingInfo");
//체크가 클릭되었다면 실행 이벤트 - 토글
check.addEventListener("click",function(){
//체크 표시가 나온다면 정보 복사하기
if(check.checked == true){
document.querySelecor("#shippingNAME").value=document.querySelector("#billingName").value;
document.	querySelector("#shippingTel").value=document.querySelector("#billingTel").value;
querySelector("#shippingTel").value=document.querySelector("#billingAddr").value;

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

var my Text= document.querySelector("#myText");
myText.addEventListener("click", function(){
    myText.addEventListener("click", function(){
    myText.style.fontSize="20px";
    myText.Style.color="blue";
    myText.style.backgroundColor="#ccc";
    }

폼과 자바스크립트
css선택자 사용
name 속성 사용
css선택자도 없고,name속성도 없을 때 form배열 사용
실습4. 배송정보 자동 입력하기
체크박스에 체크하면 입력한 주문정보를 배송정보에 자동 입력하기
토글 이용
//체크 상자의 id 불러 오기

var check=document.querySelector("#shippingInfo");
//체크가 클릭되었다면 실행 이벤트 - 토글
check.addEventListener("click",function(){
//체크 표시가 나온다면 정보 복사하기
if(check.checked == true){
document.querySelecor("#shippingNAME").value=document.querySelector("#billingName").value;
document.	querySelector("#shippingTel").value=document.querySelector("#billingTel").value;
querySelector("#shippingTel").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;

//정규식으로 나중에 보강하면 좋다 실습에서는 길이만 체크
실습 6.학과 선택하면 alert창 오게 하기
//학과 선택 시 알림창 띄워 알려주기
var SelectmMenu = document.testForm. 셀렉트 메뉴 가져오기
fuction displaySelect(){
var selectedText=selectMenu.options[select,Menu.selected].innerText;
aler("["+selectedText+"]를 선택
1)DOCUMENT-BODY 태그를 만나면 만들어지는 객체, HTML문서 정보를 가지고 있다.
2)HISTORY-현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
3)LOCATION-현재 페이지에 대한 URL정보를 가짐
4)NAVIGATOR-현재 웹 브라우저 정보를 가지고 있는 객체
5)SCREEN-현재 사용 중인 화면 정보를 다루는 객체

학습소감

아직 Javascript구현을 하는게 어렵고 객체모델 만드는것이 어려워 많이 연습해야겠다.