Programming/JavaScript14 JavaScript 모달 구조와 구현 방법 모달은 사용자와의 상호작용을 위해 화면 위에 나타나는 대화 상자이다. 모달은 특정 작업이나 알림을 제공하거나 추가정보를 표시하기 위해 사용된다. 일반적으로 모달은 배경을 어둡게 만들어 사용자의 시선을 집중시키며, 주요작업을 완료하거나 닫을때까지 상호작용이 제한된다. 1. 모달의 주요 구성 요소오버레이: 모달이 열렸을 때 배경을 어둡게 만들어 사용자 시선을 모달로 집중시킨다.모달 컨테이너: 모달의 내용을 담는 박스로, 텍스트 ,버튼, 이미지 등을 포함할 수 있다닫기: 사용자가 모달을 닫을 수 있다. 2. 기본적인 구조HTML 모달 열기 이것은 모달의 내용입니다. 닫기 CSS/* 전체 화면 오버레이 */#modalOverlay .. 2025. 1. 7. JavaScript Event Listener 종류 JavaScript에서는 웹 페이지의 다양한 작용을 감지하기 위해 여러 이벤트 리스너를 사요할 수 있다. 사용자 입력 이벤트click: 클릭 시 발생dbclick: 더블 클릭 시 발생mousedown: 마우스 버튼을 누를 때 발생mouseup: 마우스 버튼에서 손을 뗄 때 발생mousemove: 마우스가 움직일 때 발생mouseenter: 마우스가 요소 경계 안으로 들어올 때 발생mouseleave: 마우스가 요소 경계 밖으로 나갈 때 발생mouseover: 마우스가 요소 위로 이동할 때 발생mouseout: 마우스가 요소를 벗어날 때 발생contextmenu: 요소에 대해 컨텍스트 메뉴를 열려고 할 때 발생keydown: 키보드 키를 누를 때 발생keyup: 키보드 키에서 손을 뗄 때 발생keypres.. 2024. 11. 14. JavaScript async/await 기능 JavaScript 는 싱글 스레드로 작동하기 때문에, 비동기 처리를 통해 사용자 겨엄을 향상시키는 것이 중요하다. 이전에는 callback 이나 Promise를 사용해서 비동기 처리를 다뤘지만, 이러한 방식은 코드의 가독성을 떨어뜨리는 문제가 있다. async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 하여 코드의 가독성을 높이고, 디버깅을 쉽게 만들어 준다. async/await 의 기본원리async : 키워드를 함수 앞에 붙이면 그 함수는 항상 Promise를 반환한다.await : 키워드는 Promise가 처리될 때까지 기다렸다가 결과 값을 반환한다. async 함수 선언 및 사용법async function fetchData() { const response = await fet.. 2024. 11. 10. JavaScript Promise에 대해서 JavaScript 의 Promise는 비동기 작업의 완료, 실패를 나타내는 객체이다. Promise의 상태대기(pending): 초기 상태, 이행도 거부도 되지 않은 상태이행(fulfilled): 비동기 작업이 성공적으로 완료된 상태거부(rejected): 비동기 작업이 실패한 상태 Promise의 기본 사용법const myPromise = new Promise((resolve, reject) => { // 비동기 작업 수행 let success = true; // 예를 위한 조건 if (success) { resolve("작업 성공"); } else { reject("작업 실패"); }}); Promise의 메서드then() : Promise .. 2024. 11. 9. JAVASCRIPT Element의 상태 확인 메서드 JavaScript 에서 많이 사용되는 Element의 상태 확인 메서드$("#myElement").is(":visible") : 요소가 화면에 보이는지 여부 확인$("#myElement").is(":checked"): 체크박스나 라디오 버튼이 체크 되었는지 확인.$("#myElement").hasClass(className): 특정 클래스가 요소에 있는지 여부 확인$("#myElement").find(selector): 선택한 요소의 자식 요소 중 특정 선택자에 해당하는 요소를 찾음.$("#myElement").closest(selector): 현재 요소에서 가장 가까운 상위 요소를 참음.$("#myElement").filter(selector): 선택된 요소 중 특정 조건에 맞는 요소를 필터링. 2024. 11. 4. JAVASCRIPT 자바스크립트 표준에서 Camel 표기를 선호하는 이유는? 표기법은 Camel, Snake, Pascal 이 있다.그중 JAVASCRIPT 는 Camel 표기법을 사요하는 것을 권장된다.그 이유가 무엇일까? 관습적인 스타일 때문에 Camel을 선호한다.자바스크립트의 표준 라이브러리와 대부분의 오픈 소스 코드는 카멜 표기법을 따른다.(ex: getElementById, querySelector 등) 간혹 상수를 나타낼땐 대문자 스네이크 표기법을 따르기도 한다. (const MAX_VALUE = 100;) 이렇듯 자바스크립트는 Camel 표기로 사용하도록 하자. 2024. 11. 1. 이전 1 2 3 다음 728x90 반응형 LIST