복습하는 블로그

#join.html 단계가 있는 회원가입 최초에 전역변수에 배열을 선언하고 중복체크용 아이디 5개 push하고 시작 약관확인 필수정보입력 상세정보입력 가입완료 이용약관 확인 및 동의 이용약관 전체체크 개인정보 수집 및 이용에 동의 (필수) 수집항목 : 이름, 휴대전화번호, 생년월일, 비밀번호 수집·이용목적 : 회원제 서비스 제공 보유 및 이용기간 : 회원탈퇴 시 까지 개인정보 수집 및 이용에 동의 (선택) 수집항목 : 이름, 휴대전화번호, 생년월일, 비밀번호 수집·이용목적 : 회원제 서비스 제공 보유 및 이용기간 : 회원탈퇴 시 까지 다음 필수정보입력 아이디 비밀번호 비밀번호 확인 이름 다음 추가정보입력 이메일 @ 직접입력 naver.com nate.com gmail.com hanmail.net 성별 남..

드롭다운 메뉴 중 선택한 항목 보여주기 #select.html test1 test2 test3 test4

클릭한 탭에 따라 속성 변경, div 보이고 숨기기 #tab.html 11 22 33 44 11111 22222 33333 44444

간단한 연결 이벤트 구분 내용 click 클릭했을 때 dblclick 더블클릭했을 때 mouseenter 마우스가 요소에 들어올 때 mouseleave 마우스가 요소에서 나갈 때 이벤트테스트 이벤트테스트 글씨 더블클릭 이벤트테스트 글씨 위에 마우스 올렸을 때 이벤트테스트 글씨 위에 마우스 내렸을 때 구분 내용 focus 요소가 focus 받을 때 blur 요소에서 focus 해제 시 change 요소의 값이 변경되었을 때 keyup 눌렸던 키가 올라올때 입력창에 focus했을 때 입력창에 focus 해제 했을 때 위의 입력창과 아래 입력창에 입력한 값이 일치하지 않을 때 위의 입력창과 아래 입력창에 입력한 값이 일치할 때

기본 이벤트 제거 기본이벤트 : 태그 중 이벤트핸들러를 기본적으로 가지고 있는 것 , 등 입력양식에서 많이 사용 예) 이벤트 제거 1) 페이지 이동 제거 2) submit 이벤트 제거 해당 form 태그에 onsubmit 이벤트 속성에 핸들러 연결 시 false를 리턴 #event.html 네이버 취소 버튼 클릭 시 페이지를 이동하지 않음 아래처럼 id를 test01을 입력하고 로그인 버튼을 클릭하면 submit되지 않음 아래처럼 id에 user01을 입력했을 때만 로그인 버튼을 눌렀을 때 submit됨

이벤트 전달 - 이벤트 버블링 : 자식에서 부모노드로 올라가면서 이벤트가 실행 예) 이벤트 차단 window.event.stopPropagation();을 이용하여 버블링 제거 #event.html 해당 코드로 작성하면 자식에서 부모노드로 올라가면서 이벤트가 실행되는 이벤트 버블링으로 초록색 div를 클릭했을 때, 모든 경고창이 띄워진다. 코드수정 - event.stopPropagation(); 추가 window.event.stopPropagation();을 이용하여 버블링 제거 초록색 div만 클릭했을 때, 초록색 div 경고창만 띄워지도록 함

이벤트 • 웹 페이지에서 어떠한 행위(사용자의 행동)가 발생한 것이 이벤트 이벤트 활용 • 이벤트 속성과 이벤트핸들러(함수)를 연동하여 이벤트 발생 시 특정 기능을 하도록 하는 것 이벤트 설정 방법 • 인라인 이벤트 모델 • 고전이벤트 모델 • 표준 이벤트 모델 • 마이크로소프트 인터넷 익스플로러 이벤트 모델 인라인이벤트 모델 • 요소 내부에 이벤트를 작성하는 방법 • 인라인 방식은 를 상단에 작성 111 222 333 44 55 66

문제1. 추가 버튼을 클릭하면 이름,나이,주소를 입력 받은 후 테이블에 추가하도록 하여라. 상태 칸에는 삭제버튼을 생성하고, 삭제버튼 클릭 시 해당 행이 삭제되도록 하여라. 이름나이주소상태 추가 내부 코드 작성하기 #dom_ex2.html [추가]버튼 onclick="add();" [삭제]버튼 onclick="del(숫자매개변수);" 학생2 [삭제]버튼 클릭

문제1. 추가 버튼을 클릭하면 이름,나이,주소를 입력 받은 후 테이블에 추가하도록 하여라. 상태칸에는 삭제버튼을 생성하고, 삭제버튼 클릭 시 해당행이 삭제되도록 하여라. 이름나이주소상태 추가 내부 코드 작성하기 #dom_ex1.html [추가]버튼 onclick="add();"

DOM • Document Object Model - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 • 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공 ※ 노드 : HTML에 있는 태그를 구조화 하였을 때 각각의 태그 요소노드(elements node)와 텍스트노드(textnode) • 요소노드 : 태그 그 자체를 의미 • 텍스트노드 : 태그에 기록되어 있는 문자 • 텍스트 노드를 가지는 태그와 가지지 않는 태그가 있음 → 텍스트노드를 가지는 태그 : h?, p … 등등 → 텍스트노드를 가지지 않는 태그 : img, input … 등등 #dom.html 클릭1 클릭2 삭제 할 요소 추가 삭제버튼(부모에서 삭제) 삭제버튼(해당객체 삭제) 텍스트 노드가 있는 문서객체 생성 요소..