728x90 반응형 전체 글267 [jQuery] JQuery를 이용한 AJAX통신 AJAX란 무엇인가?자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신기능클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.비동기 방식이란?웹페이지를 리로드 하지 않고 데이터를 불러오는 방식웹페이지에서 기타 코드들을 요청할 경우, 웹 페이지를 리로드 하면서 불필요한 리소스가 낭비 되는데, 비동기 방식을 이용하면 필요한 데이터만 불러오면서 리소스 낭비를 줄일 수 있다.AJAX는 XMLHttpRequest 객체를 통해 서버에 request 한다.JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다. AJAX의 장점웹페이지 속도향상서버의 처리가 완료될 때까지 기다리지 않고 처리 가능기존 웹에서 불가능했던 UI를 가능하게 해줌.. 2023. 3. 10. [HTML] 폼(form)의 이해 1. 폼 태그 동작방법1. 폼이 있는 웹페이지를 방문합니다.2. 폼 내용을 입력합니다.3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.5. 웹 프로그램은 폼 데이터를 처리합니다.6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.8. 브라우저는 받은 html 페이지를 보여줍니다. 2. 폼 태그 속성폼 태그 속성에는 name, action, method, target 등이 있습니다.폼 속성을 이용하여 전송할 때 어디로 보내야 하는지, 어떤 방법으로 보낼지 정합니다.폼 태그 속성은 다음과 같습니다.action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니.. 2023. 3. 10. [JavaScript] 문서와 리소스 로딩 (DOMContentLoaded, load, beforeunload, unload) 참고자료 : https://ko.javascript.info/onload-ondomcontentloaded DOMContentLoaded, load, beforeunload, unload 이벤트 ko.javascript.info HTML 문서의 생명주기에 3가지 주요 이벤트 관여● DOMContentLoaded브라우저가 HTML을 전부 읽고 DOM트리를 완성하는 즉시 발생이미지 파일 / 스타일시트 등의 기타 자원은 기다리지 않는다.● loadHTML로 DOM트리를 만드는게 완성되었을 뿐만 아니라이미지, 스타일시트 같은 외부자웝도 모두 불러오는 것이 끝났을 때 발생● beforeunload / unload사용자가 페이지를 떠날 때 발생 3가지 이벤트는 다음과 같은 상황에서 활용이 가능 ● DOMConte.. 2023. 3. 10. [JavaScript] 자바스크립트 window 객체 WindowWindow 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. 반대로, 주어진 문서의 창은 document.defaultView를 사용해 접근할 수 있습니다.JavaScript 코드에 노출된 전역 변수 window는 현재 스크립트가 작동 중인 창을 나타냅니다.Window 인터페이스는 다양한 함수, 이름공간, 객체, 생성자가 머무는 장소입니다. 그 중엔 사용자 인터페이스로서의 창 개념과는 직접 관련되지 않은 것도 존재하며, 대신 전역적으로 접근할 수 있어야 하는 항목에 적합합니다. 많은 수의 항목이 JavaScript 참고서와 DOM 참고서에 문서화되어 있습니다.탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 Window 객체로 나.. 2023. 3. 10. [JQuery] 이벤트 처리 방법(event binding) jQuery를 사용할 때 이벤트 처리는 아주 빈번하게 사용하는 기능 가운데 하나입니다. 이 글에서는 jQuery 내부에서 이벤트를 어떻게 처리하는지 설명합니다.먼저 jQuery에서 사용할 수 있는 다양한 이벤트 처리 방법을 살펴보고, jQuery의 이벤트 객체와 구조를 살펴보겠습니다. 마지막으로 이벤트를 처리하는 각 단계에서 실제 어떤 흐름을 거쳐 이벤트를 처리하는지 확인하겠습니다.이 글에서 설명하는 내용은 jQuery 2.2.0을 기준으로 작성했습니다.jQuery의 다양한 이벤트 처리 방법일반적으로 이벤트 하나에 이벤트 핸들러 하나를 등록해 이벤트를 처리한다. 그러나 jQuery에서는 같은 이벤트를 여러 번 처리하거나 같은 이벤트 핸들러를 여러 이벤트에 등록해 이벤트를 처리할 수 있다.네임스페이스의 사.. 2023. 3. 10. [JavaScript] DOM 객체와 이벤트 처리 예제를 통해 DOM event 시스템 알아보기 Explore DOM EventsA visualizer to help you learn how the DOM Event system works through explorationdomevents.dev 이벤트 전달과 DOM 이벤트 처리정의특정 DOM 에서 이벤트가 발생하면 해당 DOM의 dispatchEvent() 라는 함수를 통해서 이벤트를 전달한다.이벤트 전달은 propagation path라는 전파 경로에 따라서 수행된다.이벤트 전달에 관한 이미지이벤트 전달 순서1) 이벤트 캡처단계이벤트 객체가 window 객체로부터 대상의 부모까지 순서대로 전달되는 단계2) 이벤트 대상단계이벤트 객체가 이벤트 대상에 도달하는 단계3) 이벤트 버블단계이벤트 객체가 대상.. 2023. 3. 10. [JavaScript] 브라우저 이벤트, 이벤트 프로퍼티, 이벤트 핸들링 참고자료 : https://ko.javascript.info/events 이벤트 기초 ko.javascript.info 2023. 3. 10. [Javascript] 자바스크립트 이벤트 종류 및 실행순서 1. JS 이벤트 실행순서_브라우저 실행번호실행과정객체명이벤트명실행비고1웹브라우저 시작 2DOM 생성 시작documentreadyStateChangedocument.addEventListener('readystatechange', function(){});상태 : loading > interative3DOMContentLoadeddocumentDOMContentLoaded//JQuery$(document).ready(function(){ });//vanilla jsdocument.addEventListener('DOMContentLoaded', function(){});중복 사용시,선언 순서에 따라 순차 진행4windowDOMContentLoadedwindow.addEventListener('D.. 2023. 3. 10. [JavaScript] 자바스크립트 콜백 지옥(동기, 비동기) 1. 동기와 비동기javascript를 사용하면서 데이터를 처리할 때 사용하는 방식인 동기와 비동기 처리에 대해 설명해볼려고 한다 비동기 함수를 사용해 본 적은 있지만 이것의 개념을 정확하게 알지 못하고 넘어간 거 같아 이번 기회에 한 번 동기와 비동기의 차이점과 비동기 함수의 콜백함수 개념을 간단한 예제를 통해 설명하겠습니다.동기(Synchronous)동기는 반드시 작성된 순서대로 실행된다 먼저 불러온 순서대로 차례대로 나오는 방식입니다 이전의 함수가 무조건 끝나야 다음이 실행됩니다비동기(Asynchronous)자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행할 수 있습니다 이를 해결하기 위해 비동기 처리가 생겼습니다 비동기는 작성된 순서대로 실행하지 않고 내가 원하는 함수를 먼저 호출하.. 2023. 3. 10. 이전 1 ··· 24 25 26 27 28 29 30 다음 728x90 반응형
