JavaScript

[javascript] 키보드 관련 이벤트 / 키보드 이벤트 예제 ✔️ 키보드 관련 이벤트 : 키보드 이벤트는 키보드와 사용자가 상호 작용하여 발생하는 이벤트를 나타낸다. 👩‍💻 keydown : 키를 눌렀을 때 발생 👩‍💻 keyup : 키를 눌렀다 떼었을 때 발생한다. 👩‍💻 keypress : 키보드를 눌렀을 때 발생 (이 이벤트는 권장x) : keypress : a키는 97, A키는 65 : keydown, keyup 이벤트는 keyCode 속성으로 대소문자를 구분할 수 없음 : keypress 는 실제 눌러진 키보드를 반환한다. 📓 주요 속성 - altKey : 키 이벤트가 트리거 되었을 때 alt 키 눌렀는지 여부 반환 - ctrlKey : 키 이벤트가 트리거 되었을 때 ctrl 키 눌렀는지 ..

[javascript] 이벤트 전파 - preventDefault / stopPropagation / Bubbling과 Capturing ✔️ preventDefault preventDefault() : 이벤트를 취소할 수 있는 경우 이벤트를 취소하지만 상위로의 이벤트는 전파된다. (위로 쭉쭉) 📓 사용 예시 : a href 속성 : a 태그를 클릭하면 해당 페이지로 이동하는데, a 태그에 click 이벤트가 존재하는 경우(href 와 click 둘다 잇음) = 먼저 click 이벤트를 처리하고 다음에 href 속성 페이지로 이동한다. -- html 영역 div 영역 p영역 a영역 -- 자바스크립트 영역 1) 스크립트에 div 영역에 클릭 이벤트를 설정했다. 2) p 영역 클릭 이벤트도 설정했다. 3) ..

[javascript] form 관련 이벤트 this / currentTarget / target / srcElement ✔️ form 관련 이벤트 this : form 요소에 이벤트 핸들러에서 this.form 는 현재 객체의 부모 form 을 나타낸다. 이름 : 국어 : 영어 : 수학 : 확인 💡 send(this.form) : 부모가 되는 폼을 나타낸다. function send(f) { let s; const inputELS = document.querySelectorAll("form input[type=text]"); for(let obj of inputELS){ if(! obj.value){ obj.focus(); return; } } s = f.name.value + ", "; s += f...

[javascript] 이벤트 EventTarget / 이벤트 등록 제거 방법 ✔️ 이벤트란? : HTML 이벤트는 HTML 요소에서 발생할 수 있는 상황으로, 자바스크립트가 HTML 페이지에서 사용될 때 자바스크립트는 이런 이벤트에 반응한다. : 브라우저는 이벤트를 감지할 수 있으며, 이벤트 발생 시에는 통지해준다. 이 과정에서 사용자와 웹 페이지는 상호작용이 가능해진다. 📓 이벤트 드리븐 방식 (event-driven) 방식 : 웹 페이지에 작용되는 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행한다. : 이때, 비동기식 이벤트 중심의 프로그램 모델이라고 한다. 드리븐 방식이란, 모든 애플리케이션이 이벤트 방식으로 동작하는 것이다. 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 것을 의미..

[javascript] window open 속성 - 팝업창 띄우기 / html 창 띄우기 / 색 변경 ✔️ 윈도우 객체로 팝업창 띄우기 👩‍💻 윈도우 객체 주요 속성이 궁금하면 아래 글로..... https://backshren20.tistory.com/336 [javascript] 브라우저 객체 모델 / window 객체 / document 객체 [javascript] 브라우저 객체 모델 / window 객체 / document 객체 ✔️ 브라우저 객체 모델 BOM : 브라우저와 상호작용하는 메소드와 인터페이스를 제공한다. : 웹 브라우저와 관련된 객체의 집합이다. : BOM backshren20.tistory.com 팝엽열기 닫기 111-서울 222-인천 333-경기 444-부산 555-제주 💡 창..

[javascript] location 객체 / navigator 객체 ✔️ location 객체 : 로케이션 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. : window 객체의 location 프로퍼티와 document 객체의 location 프로퍼티에 같이 연결되어 있다. : location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다. : location 객체는 Location 인터페이스의 구현체이다. function sub() { // location : 브라우저의 주소를 얻거나 다른 주소로 이동할 때 // 뒤로가기 가능 location.href = "https://www.na..

[javascript] 클래스(class) 선언 / 상속 / 프라이빗 ✔️ 클래스 : class는 객체를 생성하기 위한 템플릿이다. : 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화한다. : ES 2015 에서 도입된 클래스는 생성자의 기능을 대체한다. 클래스 표현식을 사용하면, 생성자와 같은 기능을 하는 함수를 훨씬 깔끔하게 문법으로 정의할 수 있다. 📓 선언 클래스는 클래스 표현식과 클래스 선언 두 가지 방법으로 정의할 수 있다. : 함수로 호출할 수는 없다 ❌❌ : let const 처럼 블록 스코프에 선언한다. : 메소드 안에서 super 키워드 사용이 가능하다. : 클래스 선언은 호이스팅이 일어나지 않는다. : 클래스를 사용하기 위해서는 클래스 먼저 선언해야한다. ❌ 클래스는 함수가 아니..

[javascript] 객체 프로토타입에 프로퍼티, 메소드 추가 / 정적메소드 ✔️ 프로토타입에 프로퍼티 및 메소드 추가하기 function User(name) { this.name = name; //prototype

[javascript] 객체 프로퍼티(속성) 메소드 삭제 / 나열 / 추가 ✔️ 객체 프로퍼티 지우기 : delete + 객체. 프로퍼티명 var obj = { name: '이이이', age:20 }; console.log(obj.name); console.log(obj.age); //프로퍼티 제거 delete obj.age; console.log(obj.age); //undefined 💡 결과는 undefined 로 나온다. ✔️ 객체 프로퍼티 접근 및 나열 var obj = { name:'고고고', age:20, result:function(){ return this.age >= 19? '성인':'초딩'; } }; //객체의 프로퍼티 접근 console.log(obj.name); //도트 표기법 co..

[javascript] 객체 - this / 호출 방법에 따른 this / form 요소에서 this ✔️ 객체의 this : 자바스크립트에서 함수를 호출할 때 기존 매개변수로 전달되는 인자 값에 더해 ✨arguments 객체 및 this 인자가 함수 내부로 암시적으로 전달✨된다. : 현재 객체를 참조할 때 this 키워드를 사용하며, 일반적으로 this 는 메소드에서 호출하는 객체를 참조한다. : 객체 프로퍼티는 점(.) 이나 괄호([]) 로 접근가능하다. 📓 정리 - 객체 메소드 호출할 때 this : 해당 메소드를 호출한 객체 - 일반 함수를 호출할 때 this : 전역 객체 - 생성자 함수를 호출할 때 this : 새로 생성되는 객체 1) 객체 메소드 호출할 때 this : 해당 메소드를 호출한 ..