본문 바로가기

JS

230103 JS 이벤트객체 활용 실습2
JS 2023. 1. 3. 230103 JS 이벤트객체 활용 실습2 이벤트 위임 이용해서 다음을 만들어 보세요. 번호 제목 내용 삭제 1 첫글 hi 삭제 2 첫글 hi 삭제 3 첫글 hi 삭제 4 첫글 hi 삭제
230103 JS 이벤트객체 활용 실습
JS 2023. 1. 3. 230103 JS 이벤트객체 활용 실습 이벤트객체활용 결과: onclick의 e.target은 클릭한 대상임.
230103 JS 이벤트객체
JS 2023. 1. 3. 230103 JS 이벤트객체 이벤트 객체 이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어준다. stopPropagation() : 이벤트 전파를 막는다.(버블링 중단하기) target : 이벤트를 적용한 타겟 속성 currentTarget : 실제 이벤트가 걸려있는 타겟 속성 preventDefault() : 고유특성을 가진 태그의 이벤트를 제거 다중이벤트에서만 사용하는건 아님. this를 대체할수도 있음 event객체가 자동으로 생성되므로 function()안에 변수를 넣지 않아도 event객체 사용 가능 badcase 여러 이벤트를 한번에 걸어주기 1.홍길동 2.홍길자 3.이순신 4.강감찬 5.둘리 선택한 태그의 값: 이 방법은 비효율적임. 태그가 늘어나면 그만큼 for문을 돌려야 한다. good..
230103 JS 클래스 속성제어-toggle실습
JS 2023. 1. 3. 230103 JS 클래스 속성제어-toggle실습 토글형태 활용하기 어둡게보기 이름보기 홍길자 20세 능력단위 Java, Oracle, JSP, CSS, Javascript 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다 위키백과 body태그는 document의 자식이기 때문에 document.body로 가져올 수가 있다. toggle은 있으면 제거, 없으면 추가임.
230102 JS 클래스 속성 제어
JS 2023. 1. 2. 230102 JS 클래스 속성 제어 클래스 속성 제어 className() : 클래스명을 얻음. 가진 클래스를 모두 문자열로. ""가 없다. classList() : 가진 클래스명들을 list형태로 얻음. ->length를 하면 길이를, value를 하면 ""가 포함된 문자열로 얻음. ->개발자도구 콘솔에서 [Prototype]을 누르면 사용가능한 함수들을 확인할 수 있음. 이중 반드시 알아두어야 할 것 add() : 클래스명 추가. contains() : 클래스명이 있는지 확인. 매개변수는 string, 반환은 boolean. remove() : 클래스명 제거. toggle() : 있으면 제거, 없으면 추가. ()안에 값을 넣을 수 있음. ,로 여러 값 넣기 가능 클래스 속성 제어하기 버튼 하나의 버튼으로 두가지 작업을 처리하기(togg..
230102 JS 노드생성,이동,삭제 실습
JS 2023. 1. 2. 230102 JS 노드생성,이동,삭제 실습 input은 지우는게 아니라 display를 제어하세요 할일 목록 만들기 전체삭제 확인 추가 태그를 버튼을 클릭했을 때에 얻어야지 정상적으로 지울 수 있다. 그래야 생성되어있는 태그들을 얻는 것이 가능 추가버튼을 누르면 li를 추가함
230102 JS 노드삭제
JS 2023. 1. 2. 230102 JS 노드삭제 노드 삭제 remove() : 노드 삭제. 자기자신을 지움 removeChild(삭제할 자식 노드) : 자식 노드 삭제. index번째의 자식을 지울 수 있음 confirm('')로 확인창 띄우기 가능. 확인을 누르면 true, 취소를 누르면 false반환 하나씩 삭제 일괄 삭제 번호 이름 내용 날짜 1 홍길자 안녕! 2019-01-01 2 김길자 안녕! 2019-01-01 3 이길자 안녕! 2019-01-01 4 고길자 안녕! 2019-01-01 또한 체크된 tr만 일괄삭제로 삭제하는 것도 가능하다.
230102 JS 부모노드, 자식노드 선택, 노드이동
JS 2023. 1. 2. 230102 JS 부모노드, 자식노드 선택, 노드이동 부모 노드, 자식 노드 선택 childNodes : 모든 자식 노드 선택(단, 노드에 생략된 text도 포함된다) children : 모든 자식 노드 선택. 배열로 나오기에 [index]가 가능 parentElement : 부모노드 선택. parentNode도 똑같음. -단, parentNode는 공백이 있다면 공백을 선택함. parentElement는 순수한 태그의 형태만 선택 nextElementSibling : 다음 형제 노드 선택 previousElementSibling : 이전 형제 노드 선택 firstChild : 첫번째 자식 노드 선택. firstElementChild로 사용 권장. lastChild : 마지막 자식 노드 선택. lastElementChild로 사용 권장. 이외에도 더 있음...
221230 JS 노드생성,추가 실습
JS 2022. 12. 30. 221230 JS 노드생성,추가 실습 5개추가하기 1개추가하기 교시 훈련과목 담당자 훈련내용
221230 JS 노드생성,추가 - appendChild
JS 2022. 12. 30. 221230 JS 노드생성,추가 - appendChild 추가 추가
221230 JS 노드생성,추가
JS 2022. 12. 30. 221230 JS 노드생성,추가 노드 생성, 추가 createElement() : 요소를 생성. ()안에 태그타입을 넣으면 됨 createTextNode() : 텍스트를 생성. createElement가 대체. appendChild() : 요소를 부모 자식 관계로 넣어줌. 어떤 태그에 자식으로. innerHTML= : 요소를 HTML방식으로 생성 insertBefore(삽입노드, 기준노드) : 기준노드 앞에 삽입노드 추가 ex) 추가 태그생성 태그생성
221230 JS css제어 실습2 -onfocus와 onblur
JS 2022. 12. 30. 221230 JS css제어 실습2 -onfocus와 onblur onfocus-인풋에 focus들어갈 때 동작, onblur-인풋에 focus가 떠났을 때 동작 아이디: 아이디는 4글자 이상입니다. 비밀번호: 비밀번호는 9글자 이상입니다. blur사용. focus가 사라졌을 때 길이 검사. java와 다르게 length()가 아니라 length.

티스토리툴바