반응형 Part 1. 4장. HTML과 DOM 조작하기 (3) / 제로초의 자바스크립트 입문 이벤트 버블링: 이벤트 발생 시 부모 태그에도 동일 이벤트가 발생하는 형상 td의 부모 태그는 trtr의 부모 태그는 tabletd 태그 클릭해서 click 이벤트 발생 시 td 태그에서 발생한 click 이벤트가 table 태그까지 전달 event.currentTarget: 이벤트 발생 태그가 아닌이벤트를 연결한 태그에 접근하고 싶을 때 사용 이벤트 캡처링: 이벤트가 자식 태그로 전파되어 내려가는 현상 addEventListener()의 세 번째 인수로 true 넣으면이벤트가 부모 태그에서 자식 태그로 전파 버튼 클릭 시 hi event bubbling을 대화상자에 표시하는 코 4.4 다양한 DOM 속성 자바스크립트에서는 속성명에 하이픈 못씀따라서 하이픈 제거하고 하이픈 바로 뒤 글자 대문자로 바.. 2024. 5. 4. Part 1. 4장. HTML과 DOM 조작하기 (2) / 제로초의 자바스크립트 입문 글자 입력할 때마다input 이벤트 실행 화면 클릭하면 this가 document로 출력됨-> click 이벤트 발생 시 addEventListener() 메서드가콜백 함수의 this를 event.target으로 바꿔서 호출하기 때문 함수 선언문을 화살표 함수로 바꾸면window 출력 입력 버튼 눌러도 무반응 키보드와 마우스 이벤트 키 눌렀다(keydown) 뗐을(keyup) 때 이벤트 발생하게 하기 마우스 움직이고 클릭했다 뗄 때이벤트 발생하게 하기 Math.abs(): 인수로 넣은 값의 절댓값 반환마우스 클릭한 상태로 움직였다가 뗐을 때 마우스 방향 출력하기 click: 좌클릭 이벤트contextmenu: 우클릭 이벤트. 웹브라우저에 기본 메뉴 띄움,이를 막으려면 event.preve.. 2024. 5. 1. Part 1. 4장. HTML과 DOM 조작하기 / 제로초의 자바스크립트 입문 HTML 태그 아래 script 위치→ 화면을 그리는 태그들이 먼저 실행되어웹 브라우저에 화면이 그려져야script 태그에서 자바스크립트로 화면 조작 가능 document.querySelector: HTML 태그를 1개만 가져오는것=선택한다" All(): 여러 개의 태그 한꺼번에 선택 DOM(Document Object Model): document 객체를 통해 접근 및 조작 가능(HTML 태그 선택 가능) 특정 1개 태그만 선택할 때id 속성의 값은 태그에 달 수 있는 고유 값ex) order라는 id 속성 값이 있으면 앞에 # 붙여서 #order란 선택자로 사용 2개를 동시에 선택할 때class 속성 사용선택할 때 class 속성 값 앞에 .붙임 태그 안 태그 선택하기Selector('선택자.. 2024. 4. 30. Part 1. 자바스크립트 기초 (3) / 제로초의 자바스크립트 입문 1분 퀴즈 10번 배열 요소 전부 나열 반복문으로 5행 4열 배열 만들기배열 안에 배열을 또 정의j for 한 번 끝나면 행에 열 push flat(): n차원 배열 n-1차원 배열로 낯춤 Array(n): 길이 n인 배열 만듦fill(): 배열 채움Set(): 배열에서 중복 제거.size: 요소 개수 구함Array.from([배열]): Set을 배열로 바꿀 때, 문자열을 배열로 함수 선언 화살표 함수 함수가 함수 반환?화살표 함수 이해가 덜 됐나 마지막 속성에 쉼표 붙이기 → 기존 속성 뒤에 속성 추가하려면 쉼표 필요, git에서 속성 1개 추가했지만 쉼표 때문에 두 줄 수정으로 표시 delete 변수.속성: 속성 삭제 console 객체의 log() 매서드 객체 비교 객체 리터럴에 접근 ?. : 속.. 2024. 4. 28. Part 1. 자바스크립트 기초 (2) / 제로초의 자바스크립트 입문 2.3 변수 변수 선언: let 변수명=식 letconstvar변수 선언상수(불변) 선언변수 선언중복 2.4 조건문 switch 2.5 반복문 while왼쪽에 출력 횟수 표시 for (시작; 조건식; 종료식) 구구단 3단까지 홀수만 출력 2.6 객체 .unshift: 배열 맨 앞에 요소 추가push: 배열 마지막 요소 추가pop: 배열 마지막 요소 삭제.shift(): 배열 첫 번째 요소 삭제 splice(인덱스, 삭제 개수): 지정 위치 요소 삭제 includes(요소): 배열에 요소 있는지 검색 indexOf(요소): 요소의 인덱스 값 검색 배열.concat(배열): 배열끼리 합치기 split(): 문자열 → 배열 ~p132 2024. 4. 28. 이전 1 2 다음 반응형
