자바스크립트

[ JS ] Event 정리

Mouse Event 1. MouseEvent.button 마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤트인지를 정확하게 알아낼 수 있다! 값 내용 0 마우스 왼쪽 버튼 1 마우스 휠 2 마우스 오른쪽 버튼 3 X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 X2 (일반적으로 브라우저 앞으로 가기 버튼) 이때, mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트에서는 이 값이 null이나 undefined가 아니라 0 입니다! 2. MouseEvent.type 이벤트 타입 내용 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 ..

[ JS ] DOM에 대한 총 정리!

📙Window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있기 때문에 전역 객체 [ Global Object] 라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것 이기 때문에 window.을 생략하고 사용이 가능합니다! 🤷‍♂️DOM 이란? DOM 은 Document Object Model 의 약자로서 '문서 객체 모델' 이라고 부릅니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것 으로 생각하면 됩니다. 이때, 각 객체를 노트 [ Node ] 라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. 🏕️ DOM 트리 HTML의 계층 구조는 D..

[JS] value, textContent, innerHTML, innerText 는 어떻게 다를까?

❔DOMstring 안에 있는 Text 값을 바꾸려면 어떻게 해야할까? input처럼 form 요소의 값을 가져오거나 변경하려면 value를 사용하고, form요소가 아닌 다른 div, span, h1 등의 다른 요소의 Text를 가져오거나 변경하려면 textContent, innerHTML, innerText를 사용한다. ❔그럼 textContent, innerHTML, innerText는 뭐고 어떤걸 사용하는게 제일 좋을까? ✔textContent 는 마크업 태그 ex)div, span 등 를 제외한 모든 문자열을 읽고, 변경할 수 있다. This is some text! ✔innerText는 style 같이 마크업 언어가 적용된 최종 형태를 읽어온다. 즉 HTML 요소는 제거된 채 render 된 ..

[JavaScript] JS와 jQuery를 사용하여 Flask에서 데이터를 json으로 받아 사용하기

2021.12.24 - [Study/JavaScript] - [JavaScript] Ajax에 대하여 [JavaScript] Ajax에 대하여 현재 프로젝트를 진행하며 데이터를 받아올 때 새로고침이 되는 부분을 새로고침이 안되게 바꾸고 싶어 찾아보니 Ajax라는 것을 사용하면 된다고 하여 학습한 후 정리해보겠습니다. Ajax란? Ajax란 programmers-sosin.tistory.com 저번 게시글에서 말했듯이 새로고침을 하지 않고 리스트를 출력하게 하고 싶어 jQuery와 JS를 사용하여 Json 데이터를 활용해보겠습니다. JS와 jQuery를 사용하여 Flask에서 데이터를 json으로 받아 사용하기 일단 Flask에서 현재 Mongodb에 있는 데이터를 가져오고, 그것을 json으로 변환해보겠..