공부/JavaScript
-
[Javascript] Class & Prototype 문법공부/JavaScript 2024. 3. 21. 01:27
Prototype 문법이란? 원래 자바스크립트에는 기존의 객체를 복사해서 새로운 객체로 생성하는 프로토 타입 기반 언어로 Class란 개념이 없었다. 그래서 ES6 버전 이전까지는 기존의 객체를 복사, 새로운 객체로 생성하는 prototype 문법을 이용해왔다. 객체를 만들면 객체에는 Prototype이라는 공간이 존재하게 된다. 이 prototype을 "유전자" 라고 생각하면 이해가 간단하다. (자식은 부모의 유전자를 이어받는다.) function Skill(q,w){ //this = class에서 생성되는 object(instance) this.q = q; this.w = w; } //이렇게 자료를 수정하는것도 가능하다. //이렇게 자료를 수정하면 Skill을 사용한 자식 전부 해당 데이터 사용이 가..
-
[Java Script] preventDefault공부/JavaScript 2023. 12. 29. 16:50
이벤트가 발생할 때 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 브라우저의 동작을 실행하지 않도록 하는 메서드이다. 즉, 원하지 않은 이벤트가 동작하지 않도록 사전에 지정하여 실행되지 않도록 하는 메서드이다. event.preventDefault(); 다음 형태로 사용하며 예시로 설명하면 드롭이벤트에서 나는 드롭이벤트를 구현하고 싶은데 그렇다면 dragover라는 이벤트도 같이 구현해야한다. 하지만 dragover 라는 이벤트가 일어나지 않게 하고싶은데 이런 경우 사용하게된다. $('.Product').on('dragstart',function(e){ //dragstart : 드래그를 시작하면 발생하는 이벤트 console.log("드래그가 시작됐습니다."); }); $('.cart_..
-
[Java Script] find, findIndex 함수공부/JavaScript 2023. 12. 28. 01:01
JS 숙제를 하던 중에 자꾸 개념이 헷갈려서 정리해야겠다 생각이 들었다.. 언뜻보면 find가 붙어서 비슷한거 같지만 서로 다른 기능을 한다. ㅋㅋㅋ... 일단 두 함수 모두 조건을 만족하는 배열 요소의 값 또는 인덱스를 찾기 위해 사용하는 함수이다. 차이점은 요소의 값을 반환하냐, 요소의 인덱스를 반환하냐 이다. find : 배열의 요소를 순차적으로 순환해서 조건에 일치하는 요소의 값을 반환한다. => 조건과 일치하는 경우가 없으면 undefined를 반환한다. findIndex : 배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 인덱스를 반환한다. => 조건을 일치하는 경우가 없으면 -1을 반환한다. //find 함수 arr.find(callback(element, index, array)..
-
[Java Script] Event target공부/JavaScript 2023. 12. 28. 00:10
웹 개발 기능 숙제를 하면서 event.target를 사용하는데 대충 이벤트가 발생한 요소의 정보를 가져온다는 정도로 이해하고 있었는데 이벤트를 이용하면서 원하는 결과 값이 안 나올 때가 있어서 한번 제대로 정리해야겠다 생각이 들었다. Event target : 이벤트가 발생한 요소의 데이터 값을 반환해준다. event.target(=e.target) 근데 그냥 기본형태로 사용하면 해당 요소 (HTML)을 가져오게되는데 특정 데이터의 속성값을 가져오고 싶다면 e.target.dataset.속성; 처럼 사용하면 e.target이 이벤트가 발생한 요소의 정보를 가져오고 지정된 속성 값을 통해 그 요소의 속성 정보를 가져오게 된다.