Frontend136 [Javascript] 폼 프로퍼티와 메서드 폼과 요소 탐색하기 ✔️ document.forms 로 접근할 수 있는 기명 컬렉션이다. document.forms.my //이름이 'my'인 폼 document.forms[0] //문서 내의 첫 번째 폼 ✔️ 폼을 조작하는데 쓰이는 요소들은 모두 form.elements 로 접근할 수 있다. element.form으로 역참조 하기 ✔️ element.form으로 역으로 폼에 접근돈 가능하다. 폼 요소 ✔️ input 과 textarea ✔️ select 와 option select.options : 하위 요소를 담고 있음 select.value : 현재 선택된 값 select.selectedIndex : 현새 선택된 의 번호 //select 기본 값 설정하기 Apple Pear Banana //첫번째 .. 2022. 1. 17. [Javascript] 원시값의 메서드 원시값이란? ✔️ 문자(string), 숫자(number), 불린(boolean), 심볼(symbol), null, undefiend, bigint 총 7가지 ✔️ 원시값은 객체가 아니다. 📌 객체와 차이 원시값과 달리 프로퍼티에 다양한 종류의 값을 저장할 수 있다. 함수를 프로퍼티로도 저장할 수 있다는 것. let john = { name:"John", sayHi:"function(){ alert("친구야 반갑다"); } } john.sayHi(); //친구야 반갑다 요약 null과 undefined를 제외한 원시값에는 다양한 메서드를 호출할 수 있다. 원시값은 객체가 아니라 추가 데이터는 저장할 수 없다. Reference https://ko.javascript.info/primitives-methods 2022. 1. 17. [Javascript] 마우스 이벤트 마우스 이벤트 종류 ✔️ mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누를때, 뗄 때 발생 ✔️ mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직였을 때/ 밖으로 움직일 때 발생 ✔️ mousemove : 마우스를 움직일 떄 ✔️ click : 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown,mouseup 이벤트를 연달아 발생시킬 때 실행 마우스 이벤트 순서 ✔️ 마우스 이벤트는 사용자가 단 하나의 동작을 했어도 실행되는 이벤트가 여러개일 수 있음. ✔️ 예를 들어 한번 클릭했을 때 mousedown -> mouseup -> click 이렇게 발생함. Reference https://ko.javascript.info/mouse.. 2022. 1. 16. [Javascript] 브라우저 기본 동작 브라우저 기본 동작 막기 ✔️ event.preventDefault() 메서드 이용하기 ✔️ on를 사용해 할당했을 때 false 반환 각 이벤트에 대응하는 브라우저 기본 동작 ✔️ mousedown : 마우스가 움직인 곳에서 선택을 시작 ✔️ : click - input을 선택/선택해제 함 ✔️ submit : 폼 안에서 을 클릭하거나 Enter를 누르면 이 이벤트가 발생하고, 브라우저는 폼을 서버로 전송함 ✔️ keydown : 키를 누르면 텍스트 박스에 글자를 추가하거나 그 외의 다른 동작을 수행함. ✔️ contextmenu : 마우스 오른쪽 버튼을 클릭하면 발생하는 이벤트 Reference ✔️ https://ko.javascript.info/default-browser-action 2022. 1. 16. [Javascript] 브라우저 이벤트 소개 유용한 DOM 이벤트 ✔️ 마우스 이벤트 click : 마우스 왼쪽 버튼, 터치스크린에서는 탭했을 때 발생 contextmenu : 요소 위에서 마우스 오른쪽 버튼 눌렀을 때 발생 mouseover / mouseout : 마우스 커서가 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 mousedown / mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 떄 / 뗄 때 발생 mousemove : 마우스를 움직일 때 발생 ✔️ 폼 요소 이벤트 submit : 사용자가 을 제출했을 때 발생 focus : 사용자가 과 같은 요소에 포커스 했을 때 발생 ✔️ 키보드 이벤트 keydown / keyup : 사용자가 키보드 버튼을 누르거나 뗄 때 발생 ✔️ 문서 이벤트 DOMContentLoad.. 2022. 1. 14. [Javascript] 좌표 getBoundingClientRect 로 요소 좌표 얻기 ✔️ x와 y : 요소를 감싸는 네모의 창 기준 x, y 좌표 ✔️ width/height : 요소의 너비/높이 ✔️ top/bottom : 요소릘 감싸는 네모의 위쪽 모서리/아래쪽 모서리의 y 좌표 ✔️ left/right : 요소를 감싸는 네모의 왼쪽 모서리/오른쪽 모서리의 x 좌표 elementFromPoint(x,y) ✔️ 창 기준 좌표(x,y) 에서 가장 가까운 중첩 요소를 반환 ✔️ 문법 let elem = document.elementFromPoint(x, y); 요소를 창 내 특정 좌표에 고정하기 ✔️ getBoundingClientRect idididi Reference https://ko.javascript.info/coordi.. 2022. 1. 13. 이전 1 2 3 4 5 ··· 23 다음 반응형
