본문 바로가기

자바스크립트7

NN Javascript | 사용자 정의 객체와 이벤트 객체 자바스크립트에서 이벤트 객체는 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공합니다. 이벤트가 발생하면 객체는 동적으로 생성되며, 이벤트 핸들러에게 암묵적으로 인자를 전달하게 됩니다. 목차 1. 객체 객체 구성 요소 ▶ 속성 (Property) — 값을 담고 있는 정보 ▶ 메서드 (Method) — 객체 사용 방법 var kim = { firstName : "John"; lastName : "Doe"; info : function() { alert(firstName + lastName); }; }; ▶ 중괄호로 묶는다. ▶ 키와 값은 : (콜론) 을 사용합니다. 2. 사용자 정의 객체 여러 정보를 하나로 묶어 사용할 때 객체생성 ▶ 리터럴 표기법 : var a= 10; ▶ 생성자 함수 사용하여.. 2024. 4. 10.
NN 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.
NN Javascript | 자바스크립트 기초 문법 자바스크립트는 HTML의 부족한 점을 채워주고 웹사이트를 동적으로 만들 수 있습니다. 자바스크립트를 공부하기에 앞서 자바스크립트 특징과 문법 등 기초적인 내용을 정리해 봤습니다. 목차 1. 자바스크립트란 ? ECMA ▶ 기술 및 통신업계 국제적 비영리 표준기관 ▶ ECMAScript6 - ES6. ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 HTML에서 CSS, JavaScript 호출 ▶ HTML — 보통 안에서 CSS 호출, 마지막 자바스크립트 호출 ▶ CSS — ▶ JavaScript — 자바스크립트가 할 수 있는 일 ▶ 웹 사이트를 동적으로 만들 수 있습니다. ▶ 웹 브라우저에서 실행되는 프로그램을 만들 수 있습니다. ▶ 서버를 구성하고 서버용 프로그램을 만들 수 있습니다. 자바.. 2024. 4. 3.
NN 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.
NN 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.
NN 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.
NN JavaScript | 자바스크립트 그래픽 그래픽 코드 재사용 및 최적화 - 자바스크립트는 클래스기반언어가 아닙니다. - DOM + jQuery 를 같이 사용하는 것이 웹페이지에서 최적화지만 성능저하로 빈도를 최소화해야만 합니다. DHTML- 스프라이트- 애니메이션 이동 스크롤링- CSS만 사용한 스크롤링 : 제어가 어렵습니다.- 자바스크립트 스크롤링 : 배경이미지 스크롤링타일기반이미지 스크롤링 고급 UI- HTML5 폼- 자바스크립트 UI 라이브러리 사용jQuery UI를 사용한 웹 인터페이스 개선- ExtJS : 견고한 사용자 인터페이스 시스템 HTML5 캔버스 웹페이지에서 자바스크립트를 사용하면 캔버스 안에 그림을 그릴 수 있습니다. 캔버스 vs SVG (Scalable Vector Graphic) — SVG가 수정이 쉽고 폭넓게사용됩니다... 2020. 9. 3.

티스토리툴바