웹 개발/JavaScript14 Javascript | 사용자 정의 객체와 이벤트 객체 자바스크립트에서 이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공합니다. 이벤트가 발생하면 객체는 동적으로 생성되며, 이벤트 핸들러에게 암묵적으로 인자를 전달하게 됩니다. 목차 1. 객체 객체 구성 요소 ▶ 속성 (Property) — 값을 담고 있는 정보 ▶ 메서드 (Method) — 객체 사용 방법 var kim = { firstName : "John"; lastName : "Doe"; info : function() { alert(firstName + lastName); }; }; ▶ 중괄호로 묶는다. ▶ 키와 값은 : (콜론) 을 사용합니다. 2. 사용자 정의 객체 여러 정보를 하나로 묶어 사용할 때 객체생성 ▶ 리터럴 표기법 : var a= 10; ▶ 생성자 함수 사용하여.. 2024. 4. 10. Javascript | 자바스크립트 객체 (내장, DOM, BOM) 자바스크립트 객체 중 내장객체와 문서객체모델(DOM), 그리고 브라우저 객체 모델(BOM)에 대해 살펴보고 하위 객체들의 사용법을 간단하게 정리해 보겠습니다. 목차 1. 내장객체 생성 var 참조변수 = new Object(); 날짜정보객체 var 참조변수 = new Date(); toLacaleString() : 현재날짜와 시간정보 로컬형식으로 반환 수학객체 Math객체는 따로 new키워드로 인스턴스를 생성하지 않고 사용합니다. Math.random() : 무작위수 생성 배열객체 var 참조변수 = new Array(); 문자열객체 var 참조변수 = new String(); indexOf() : String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 없으면 -1을 반환 match().. 2024. 4. 5. Javascript | 자바스크립트 기초 문법 자바스크립트는 HTML의 부족한 점을 채워주고 웹사이트를 동적으로 만들 수 있습니다. 자바스크립트를 공부하기에 앞서 자바스크립트 특징과 문법 등 기초적인 내용을 정리해 봤습니다. 목차 1. 자바스크립트란 ? ECMA ▶ 기술 및 통신업계 국제적 비영리 표준기관 ▶ ECMAScript6 - ES6. ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 HTML에서 CSS, JavaScript 호출 ▶ HTML — 보통 안에서 CSS 호출, 마지막 자바스크립트 호출 ▶ CSS — ▶ JavaScript — 자바스크립트가 할 수 있는 일 ▶ 웹 사이트를 동적으로 만들 수 있습니다. ▶ 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다. ▶ 서버를 구성하고 서버용 프로그램을 만들 수 있습니다. 자바.. 2024. 4. 3. Javascript | 비동기 처리 (콜백, 프로미스, await) 각 함수와 코드가 순차적으로 실행되는 것을 동기(Synchronous)라고 합니다. 처리가 늦어지는 경우 성능에 문제가 될 수 있기 때문에 여러 작업을 동시에 처리하는 비동기(Asynchronous) 방식이 필요합니다. 비동기 방식은 실행 순서를 장담할 수 없기 때문에 비동기 방식에서 순서를 제어하는 방법이 콜백함수, Promise, async/await 입니다. 목차 Web API 자바스크립트의 비동기 실행이 아닌 웹 브라우저 단에서 비동기적 실행을 가능하게 만든 것입니다. Web API는 타이머, 네트워크, 파일입출력, 이벤트 처리 등 브라우저에서 제공하는 API를 말합니다. 종류 - DOM / XMLHttpRequest, setTimeout() 등 콜백함수 소개 ▶ 방식 - 함수의 매개변수 자체에 .. 2024. 4. 1. Javascript | jQuery 유용한 플러그인과 라이브러리 소개 사용자 인터페이스 개발을 위한 jQuery UI 플러그인 이외에도 유용한 플러그인과 라이브러리가 많습니다. 이미지 관련, 텍스트 관련, 모달 창 관련, 날짜 / 차트 관련 등 분류해서 정리해 봤습니다. 목차 이미지 / 동영상 슬라이더 ▶ Slick Carousel - 이미지 슬라이더로 반응형이며 터치 기능을 지원하는 플러그인입니다. 캐러셀이란 '회전목마'란 뜻으로 돌아가며 슬라이드가 보여지는 방식입니다. ▶ Owl Carousel - 반응형 이미지 슬라이더와 캐러셀 구현 ▶ jQRangeSlider - 날짜, 시간, 숫자 등 사용자가 범위를 선택할 수 있는 슬라이더 ▶ Swiper.js - 모바일 터치 슬라이더 플러그인으로 이미지 갤러리, 배너 슬라이드쇼 등의 기능 애니메이션 ▶ Animate.css -.. 2024. 3. 25. Javascript | jQuery UI 소개와 사용방법 jQuery UI는 jQuery를 기반으로 다양한 컴포넌트와 위젯을 모아놓은 사용자 인터페이스 개발을 위한 라이브러리입니다. jQuery UI를 사용하면 버튼, 다이얼로그, 탭, 슬라이더, 프로그레스바 등 다양한 UI요소를 손쉽게 구현할 수 있습니다. jQuery UI는 어떤 컴포넌트들이 있는지 살펴볼게요. 목차 jQuery UI 기능 ▶ 위젯, 효과, 상호작용 사용방법 ▶ jQuery추가, jQuery UI 추가 jQuery UI 위젯 ▶ jQuery UI 아코디언 - 클릭한 대상이 확대되고 나머지 메뉴는 축소 시키는 효과입니다. ▶ jQuery UI 폼 ▶ jQuery UI 탭 - 웹 페이지에서 탭 기능을 구현하는 사용되는 플러그인입니다. jQuery UI Demos | jQuery UI jQuery.. 2024. 3. 22. JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) clipboard.js 자바스크립트를 사용해 클릭 시 내용이 복사되는 버튼을 만들어 보겠습니다. 티스토리에도 적용되도록 쉽게 설명드릴게요. 목차 clipboard.js clipboard.js는 요소를 클릭했을 때 클립보드를 복사해주는 자바스크립트입니다. 아래 관련 페이지로 가시면 자세한 내용을 확인하실 수 있어요. 홈페이지 - https://clipboardjs.com/ GitHub - https://github.com/zenorocha/clipboard.js/ 자바스크립트 파일을 다운로드해서 사용하는 방법과 CDN으로 연결하는 방법 둘 중 하나로 사용하시면 됩니다. 다운로드 자바스크립트 파일을 다운로드해서 티스토리 html/파일업로드에 올려서 사용할 수 있습니다. 1) 다운로드 - https://cli.. 2023. 9. 30. JavaScript | Swiper 슬라이드 메뉴 스와이퍼 플러그인 스와이퍼 플러그인은 터치 슬라이드 플러그인입니다. 아래에서 다운로드 받을 수 있습니다. http://www.idangero.us/swiper http://www.idangero.us/swiper/demos/ 구조 swiper-container — swiper-wrapper— swiper-slide— 소스 javascript 1 2 3 new Swiper( '.swiper-container', { // 옵션 }); Colored by Color Scripter cs 옵션 autoHeight : true — 자동높이조절 autoplay — 자동 슬라이드 설정 breakpoints — 반응형 설정 centeredSlide : true — 슬라이드가 가운데로 배치 freeMode : false.. 2021. 2. 7. JavaScript | Ajax 와 Ajaxform 파일업로드 AJAX XMLHttpRequest에 파일을 실어서 보내는 방식입니다. formData를 이용한 파일업로드 옵션 async : false 를 추가하여 동기식으로 변경해 리턴값을 받을 수 있습니다. 비동기방식인 경우 Undefined 값이 리턴됩니다. AJAXFORM IE10 이하에서는 ajaxForm을 통해 전송해야 합니다. beforeSend : 전송 전 complete : 전송이 끝났을 때. 성공 실패 구분 없습니다. success : 전송 성공 시. complete와 같이 쓰면 둘 다 호출되므로 주의 error : 전송 오류 1 2 3 4 error:function(data, status, opt) { alert("code:"+data.status+"\n"+"error:"+opt+"\n"+"mess.. 2020. 12. 4. 이전 1 2 다음
