웹 개발/JavaScript14 JavaScript | Ajax 기초 기초 개요 AJAX (Asynchronous JavaScript And XML) — 비동기 자바스크립트와 XML 페이지 전체를 리프레쉬 하지 않고도 수행되는 '비동기성' : 필요한 데이터만 처리 서버와 통신하기 위해 XMLHttpRequest 객체를 사용 비동기적인 웹 애플리케이션 제작을 위해 html, css, DOM, javascript, xml, xslt,, XMLHttpRequest 등과 조합을 이용하는 웹 개발 기법을 Ajax라고 합니다. Ajax 프레임워크 Prototype script.aculo.us dojo jQuery Ajax 구성 요소 Html과 CSS : 웹 페이지의 표현 DOM 모델 : 데이터에 접근 하거나 화면 구성을 동적으로 조작 JSON 이나 XML : 데이터의 교환 XMLHt.. 2020. 9. 29. JavaScript | html2canvas 캡쳐 사용방법 html2canvas html2canvas는 웹페이지를 캡쳐할 때 유용한 자바스크립트 라이브러리입니다. 캡쳐 바디 안 모든 요소 1 2 3 4 5 6 html2canvas(document.body, { backgroundColor: "#000000" }), then(function(canvas) { var base64image = canvas.toDataURL window.open(base64image, "_blank") }); Colored by Color Scripter cs 특정 요소 1 2 3 html2canvas(document.getElementById("capture")).then(function(canvas) { }); Colored by Color Scripter cs 특정 요소 제외 (.. 2020. 9. 29. JavaScript | jQuery 셀렉터와 동작 셀렉터 (어떤 것을 가져와) 기본 흐름 - $(선택자).동작함수() - 어떤 것(요소)를 가져와서 무엇을 하는 것입니다. 1$('ex').hide();cs $() 함수- 선택된 HTML요소를 제이쿼리에서 이용할 수 있는 형태로 생성- $() 함수를 통해 생성된 요소는 제이쿼리 객체 - 다시 말해 괄호 안에 셀렉터에 해당하는 요소를 가져와서 jQuery오브젝트를 만듭니다. $(function() { }) - $(function() { }) : 페이지읽가 완료되고 나서 작성된 코드를 실행합니다. 원형은 아래코드입니다.123$(document).ready(function() { });cs 셀렉터id 셀렉터 — $('#id')id는 문서 안에 하나만 있어야 합니다. 그래서 많은 수를 바꾸려 한다면 모두 하나하나.. 2020. 9. 4. JavaScript | 자바스크립트 개발도구 개발도구 걸프 (Gulp)반복적인 개발작업을 자동화 시켜주는 자바스크립트 빌더. 라이브러리 jQuery 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리로 html의 ClientSide 조작을 단순화JQuery UI : CSS, HTML로 구성된 GUI위젯, 애니메이션 시각 효과, 테마 묶음JQuery Mobile : 터치에 최적화된 웹 프레임워크 Paper.js자바스크립트 벡터 그래픽 프레임워크. 오픈 소스 React JS 단일 웹 페이지나 모바일 앱에서 UI 화면에 표시되는 뷰 개발에 사용 React Native모바일 네이티브 애플리케이션 RequireJS자바스크립트 파일/모듈 로더로 브라우저, Rhino, Node 같은 환경에서도 사용할 수 있습니다. 모듈 방식의 스크립트 로더를 사용하며.. 2020. 9. 4. JavaScript | 자바스크립트 그래픽 그래픽 코드 재사용 및 최적화 - 자바스크립트는 클래스기반언어가 아닙니다. - DOM + jQuery 를 같이 사용하는 것이 웹페이지에서 최적화지만 성능저하로 빈도를 최소화해야만 합니다. DHTML- 스프라이트- 애니메이션 이동 스크롤링- CSS만 사용한 스크롤링 : 제어가 어렵습니다.- 자바스크립트 스크롤링 : 배경이미지 스크롤링타일기반이미지 스크롤링 고급 UI- HTML5 폼- 자바스크립트 UI 라이브러리 사용jQuery UI를 사용한 웹 인터페이스 개선- ExtJS : 견고한 사용자 인터페이스 시스템 HTML5 캔버스 웹페이지에서 자바스크립트를 사용하면 캔버스 안에 그림을 그릴 수 있습니다. 캔버스 vs SVG (Scalable Vector Graphic) — SVG가 수정이 쉽고 폭넓게사용됩니다... 2020. 9. 3. 이전 1 2 다음
