개발 일기

call, apply, bind? ✔️ 함수 호출 방식과 관계없이 this를 지정할 수 있음. call ✔️ 모든 함수에 서 사용할 수 있으며, this를 특정값으로 지정할 수 있다.' const mike = { name:"mike", }; const tom = { name:"tom", }; function showThisName(){ console.log(this.name); } function update(birthYear, occupation){ this.birthYear = birthYear; this.occupation = occupation; } //call의 첫번째 매개변수는 this에 들어갈 객체 //call의 두번째 매개변수부터는 해당 함수의 매개변수 자리에 들어갈 인수들을 넣어준다. u..

이벤트 : change ✔️ 요소 변경이 끝났을 때 발생 //텍스트 필드에 글자를 입력하는 동안엔 이벤트가 발생하지 않고, 포커스를 다른 곳으로 옮기는 순간 발생. 이벤트 : input ✔️ 사용자가 값을 수정할 때마다 발생 oninput : input.oninput = function(){ result.innerHTML = input.value; }

focus / blur 이벤트 ✔️ focus 사용자가 클릭하거나 tab 키를 눌러 요소로 이동해 해당 요소에 포커스가 되었을 때 발생 이벤트 핸들러에서 주로 focus 되었을 때 에러 메시지를 숨김. ✔️ blur 포커스를 잃을 때 발생 이벤트 핸들러에서 이메일이 잘 입력되었는지 확인하고 잘 입력되지 않은 경우엔 에러를 보여줌. 이메일에 @가 들어가지 않으면 invalid 클래스를 추가해 에러를 알림 focus 되었을때는 에러를 사라지게 만듬. 이메일 : focus, blur 메서드 ✔️ elem.focus()와 elem.blur() 메서드를 사용하면 요소에 포커스를 주거나 제거할 수 있다. ✔️ 이벤트 핸들러에서 방문자가 유효하지 않은 것을 입력하면 해당 요소에서 focus를 빠져나가지 못하게 할 수..

문자형으로 변환 ✔️ String(value) 함수를 호출해 전달받은 값을 문자열로 변환 할 수 있다. let value = true; alert(typeof value); //boolean value = String(value); alert(typeof value); //string 숫자형으로 변환 ✔️ 숫자형이 아닌 값에 +,-,/,* 등의 수식을 더해주면 숫자형으로 자동 변환함 ✔️ Number(value) 함수로 변환 // 부등호로 숫자형 자동변환하기 let value = +"5"; console.log(typeof value); //number //Numver() 함수로 숫자형 변환하기 let str = "123"; console.log(typeof str); //string let num = ..

폼과 요소 탐색하기 ✔️ 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 //첫번째 ..

원시값이란? ✔️ 문자(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

마우스 이벤트 종류 ✔️ mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누를때, 뗄 때 발생 ✔️ mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직였을 때/ 밖으로 움직일 때 발생 ✔️ mousemove : 마우스를 움직일 떄 ✔️ click : 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown,mouseup 이벤트를 연달아 발생시킬 때 실행 마우스 이벤트 순서 ✔️ 마우스 이벤트는 사용자가 단 하나의 동작을 했어도 실행되는 이벤트가 여러개일 수 있음. ✔️ 예를 들어 한번 클릭했을 때 mousedown -> mouseup -> click 이렇게 발생함. Reference https://ko.javascript.info/mouse..

브라우저 기본 동작 막기 ✔️ event.preventDefault() 메서드 이용하기 ✔️ on를 사용해 할당했을 때 false 반환 각 이벤트에 대응하는 브라우저 기본 동작 ✔️ mousedown : 마우스가 움직인 곳에서 선택을 시작 ✔️ : click - input을 선택/선택해제 함 ✔️ submit : 폼 안에서 을 클릭하거나 Enter를 누르면 이 이벤트가 발생하고, 브라우저는 폼을 서버로 전송함 ✔️ keydown : 키를 누르면 텍스트 박스에 글자를 추가하거나 그 외의 다른 동작을 수행함. ✔️ contextmenu : 마우스 오른쪽 버튼을 클릭하면 발생하는 이벤트 Reference ✔️ https://ko.javascript.info/default-browser-action

유용한 DOM 이벤트 ✔️ 마우스 이벤트 click : 마우스 왼쪽 버튼, 터치스크린에서는 탭했을 때 발생 contextmenu : 요소 위에서 마우스 오른쪽 버튼 눌렀을 때 발생 mouseover / mouseout : 마우스 커서가 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 mousedown / mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 떄 / 뗄 때 발생 mousemove : 마우스를 움직일 때 발생 ✔️ 폼 요소 이벤트 submit : 사용자가 을 제출했을 때 발생 focus : 사용자가 과 같은 요소에 포커스 했을 때 발생 ✔️ 키보드 이벤트 keydown / keyup : 사용자가 키보드 버튼을 누르거나 뗄 때 발생 ✔️ 문서 이벤트 DOMContentLoad..

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..