분류 전체보기 251

e.originalEvent.dataTransfer.setData()

e.originalEvent jQuery 에서 어떤 이벤트 처리할때 W3C 표준에 맞게 정규화 한 새로운 객체를 생성해 전달한다. 이 정규화 된 jQuer.Event 객체 덕분에, 브라우저 별로 차이가 있는 이벤트에 대해 동일한 방법으로 사용이 가능하다. 이것을 우리는 크로싱 브라우저 지원 이라고 한다. 실제 브라우저에서 발생한 이벤트 객체인 순수한 DOM 이벤트 객체는 '네이티브 객체', 혹은 '브라우저 내장 객체' 라고 한다. 이 가공되지 않은 '브라우저 내장 객체'는 표준화 된 객체보다 더 많은 정보를 가지고 있다. 그리고 e.originalEvent 속성을 이용해서 '브라우저 내장 객체' 에 접근 할 수 있다. .dataTransfer.setData('이름', 저장하려는 데이터) 드래그 앤 드롭 ..

JS (Java Script) 2023.08.31

.find() .findIndex( ) .filter()

.find( ) 콜백함수의 return 값을 true로 만드는 단 하나의 요소 찾아서 내줌 예시) let result = arr.find(function(item, index, array) { // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다. // 조건에 해당하는 요소가 없으면 undefined를 반환합니다. }); (item => item.id == 1). 이런 패턴이 가장 많이 사용되는 편입니다. 다른 인자들(index, array)은 잘 사용되지 않습니다. .findIndex( ) 조건을 만족하는 첫번째 요소의 index 반환한다. 없으면 -1 반환. .filter() 조건을 만족하는 모든 요소를 담을 새로운 배열 반환. let results = arr.filter(function(i..

JS (Java Script) 2023.08.31

.includes( ) .indexOf()

.indexOf(찾을 요소, 어디서부터 찾을건지) 이거 몇번째에 위치하고 있는지 알고싶을때 사용 요소를 발견하면 해당 요소의 첫번째 인덱스를 반환하고, 발견하지 못했으면 -1을 반환합니다. 문자열 찾을때 대소문자 구분함. .includes(찾을 요소, 어디서부터 찾을건지) 이거 포함하고 있냐고 물어보고 싶을때 사용 해당하는 요소를 발견하면 true를 반환합니다. 값을 boolean으로 반환한다는 점. 기억.

JS (Java Script) 2023.08.31

.replace() _ 검색기능_검색한 문자에 해당하는거 background-color 입히기.

replace( ) 1. 특정 문자를 찾아 원하는 문자로 치환할 수 있다. 2. replace()는 조건에 해당하는 첫번째 문자 하나만 치환. 3. 전달받은 문자를 수정하는게 아니라, 새로운 값을 만들어 반환한다 >> 새로운 변수에 그 값을 할당해야 한다. 4. 3번의 특성을 가지고 있어서, 모든 문자를 치환하려면 정규식, 즉 RegExp를 사용해서 만들어야 한다. 간단하게 사용하려면 변수에 내가 바꾸려는 문자열 넣어두고, 바꾸려는 문자가 포함된 문자열. replace(변수명, 바꾸려는 html내용) 이렇게 하면 됨. 나는 검색어만 색을 입힐거라, let search = $('#search).val() $('.product h3').each(function(i, e){ let title = e.inner..

JS (Java Script) 2023.08.31

.text() 와 .innerText 에 대하여

.text() jQuery 사용할때 씀. jQuery 객체에 .text() 메소드가 내장 되어 있음. .innerText JavaScript의 DOM 요소일때 씀. JavaScript의 DOM 요소에는 .innerText 속성이 내장 내가 쓴 코드를 보면 이게 jQuery객체인지, DOM객체인지 헷갈릴 수 있다. 아래 코드를 보면 분명 앞에 jQuery 가 달려있는데, innerText를 사용했다.. $(".buy").siblings('h5')[i].innerText; jQuery객체인지, DOM객체인지 확인하기. ___ typeof 연산자. 그럴때에는 typeof 연산자를 이용해 어떤 객체에 해당하는지 확인 할 수 있다. innerText 혹은 .text() 를 하려고 하는 대상을 변수에 담고, typ..

JS (Java Script) 2023.08.31

ajax 에서 succesee 와 .done 의 차이

succesee 와 .done의 차이는? succesee Ajax 기반. succesee가 실패할 경우 뒤에 error: 사용 succesee는 ajax 요청이 성공했을 때만 실행. 많은 양의 코드 다루게 되면 좀더 다루기 어렵다. .done jQuery 기반. .done()을 사용할 때 실패할 경우에는 뒤에 .fail() 사용 .done은 Deffered 객체를 반환. 비동기 작업이 성공했을때만 실행. 보다 유연하게 비동기 작업 처리 가능함. 눼? Deferred 객체 란? jQuery 라이브러리에서 비동기 작업을 처리하는 기능을 제공하는 객체. jQuery 1.5 버전 이후 추가됨. 비동기 작업의 상태, 결과를 추적함. 해당 작업이 완료되거나 실패했을때 등록한 콜백함수를 호출해서 결과를 처리함. --..

JS (Java Script) 2023.08.31

provide an autocomplete attribute 에러

에러메세지 A form field has an id or name attribute that the browser's autofill recognizes. However, it doesn't have an autocomplete attribute assigned. This might prevent the browser from correctly autofilling the form. To fix this issue, provide an autocomplete attribute. MDN 문서에 따르면 브라우저 판단 하에 자동완성 기능을 제공하는 속성임. input에 뜬 경우 input태그의 속성값으로 autocomplete="off" 를 넣어주면 해결. 나는 자동완성 안쓸거라 off로 해줌.

JS (Java Script) 2023.08.31

input 태그 안에 변화를 감지하는 이벤트리스너 (change 하거나 input 하거나.)

change 입력하고 마우스 커서를 다른곳으로 옮겨 클릭했을때. 즉 포인트를 잃을때 change 이벤트 발생함. 예외적으로 radio, select, checkbox 는 변경된 직후 바로 발생 input 입력값을 조작 할때마다 발생 마우스를 사용하여 글자를 붙여 넣거나 음성인식 기능을 사용해 글자를 입력할 때처럼 키보드가 아닌 다른 수단을 사용하여 값을 변경시킬 때도 input 이벤트가 발생 $('').on('input', function(){}) 이런식으로 사용. , , 같은 입력요소에 값을 입력 혹은 수정할 때 발생하는 이벤트

JS (Java Script) 2023.08.31