개발자 성장일지

1. 사이드 메뉴 영역에 사용자가 직접 너비를 조절할 수 있도록 jQuery를 활용한 스플리터바(Splitter Bar) 작동 스크립트 구조설명이 스크립트는 화면 구성 요소들을 반응형 비율 기반으로 조정할 수 있도록 설계되어 있습니다. 주요 구조는 다음과 같습니다.#menubar는 왼쪽 사이드 메뉴바 영역으로, 사용자가 마우스로 드래그하여 너비를 조절할 수 있도록 되어 있습니다.#content는 메인 콘텐츠 영역이며, 메뉴바의 너비가 변경되면 자동으로 나머지 영역을 차지하도록 너비가 동적으로 조정됩니다.#maintable은 콘텐츠 영역 내부의 테이블로, toolbox 영역을 제외한 실질적인 콘텐츠 표시 공간을 의미하며, 그에 맞춰 너비가 설정됩니다.resizable은 jQuery UI에서 제공하는 기능으..

1. AJAX 통신 AJAX(Asynchronous Javascript And XML)는 비동기식으로 JSON 또는 XML 데이터를 교환하기 위한 통신 기술 동기(Synchronous)는 순서대로 처리하는 방식, 비동기(Asynchronous)는 순서 없이 동시에 처리하는 방식 AJAX 통신은 클라이언트에게 처리를 전가해 웹 페이지 속도가 향상되고 서버의 부담을 줄여 줌 2. jQuery Ajax 함수 일반적으로 AJAX 통신은 제이쿼리 ajax 함수를 이용 $.ajax({옵션}) 3. jQuery Ajax 관련 함수 jQuery 다양하게 AJAX 관련 함수를 제공 코드 더보기 Ajax 데이터 요청 Ajax 데이터 요청 데이터 요청 아이디 : 이름 : 휴대폰 : 나이 : Ajax 데이터 처리 Ajax 데..

1. jQuery 애니메이션 jQuery는 웹 페이지에 애니메이션을 구현하기 위해 animate 함수 제공 코드 더보기 jQuery 애니메이션 기본 효과 애니메이션 show hide fadeIn fadeOut slideUp slideDown 이동 애니메이션 1 2 3 2. jQuery 효과 함수 복잡한 animate 대신 효과 함수로 간단한 애니메이션 구현 코드 더보기 jQuery 효과함수 jQuery 효과함수 show hide fadeIn fadeOut slideUp slideDown jQuery 슬라이드 애니메이션 슬라이드 애니메이션

1. jQuery 이벤트 이벤트(Event)는 컴포넌트와 사용자 간의 수 많은 상호작용 이벤트 핸들러(Handler) 또는 리스너(Listener)는 사용자의 상호작용으로 실행되는 이벤트 함수 코드 더보기 jQuery 이벤트 버튼1 버튼2 버튼3 버튼4 버튼5 2. jQuery 이벤트 종류 jQuery에서 많이 사용하는 이벤트 종류 코드 더보기 jQuery 이벤트 함수 마우스 이벤트 click mouedown mouseup mouseover mouseout hover mousemove 브라우저 이벤트 가로 : 0 세로 : 0 스크롤바 위치 : 0 상단이동 3. jQuery 이벤트 객체 이벤트 핸들러 함수는 jQuery에서 콜백 될 때 이벤트 객체(event object)를 함수의 인자로 전달 전달받은 이..

1. jQuery 함수 제이쿼리는 HTML 문서 객체(DOM) 를 제어하기 위해 라이브러리 함수 제공 선택자로 웹 문서에서 특정 요소를 찾아 그 요소를 참조하는 jQuery 객체를 생성 후 라이브러리 함수 호출 2. jQuery 문서 탐색 함수 웹 문서에서 특정 요소를 탐색할 때 사용 코드 더보기 jQuery 탐색함수 jQuery 탐색함수 서울 대전 대구 부산 서면 경성대 해운대 남포동 광주 3. jQuery 문서 조작 함수 웹 문서에서 특정 요소를 조작할 때 사용 코드 더보기 jQuery 조작함수 jQuery 조작함수 attr 함수 css 함수 box1 box2 text, html 함수 서울 대전 대구 부산 광주 추가, 이동 함수 경기도 충청도 강원도 경상도 창원 수원 목포 부여 원주 파주 전라도 cl..

1. jQuery 개요 제이쿼리(jQuery)는 자바스크립트를 쉽게 사용할 수 있도록 도와주는 오픈소스 라이브러리 자바스크립트 코드를 좀 더 직관적으로 이해할 수 있도록 짧고 단순한 코드 형태로 코딩 최신 자바스크립트 발전과 프레임워크의 등장으로 과거에 비해 그 영향이 줄어들고 있음 2. jQuery 라이브러리 설정 웹에서 제공하는 jQuery 라이브러리 최신버전 다운로드 방법 링크 접속 : https://jquery.com/download/ Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best use..

1. 객체 객체는 현실세계의 대상을 추상화 시킨 구조체 이며, 클래스로 객체를 생성 자바스크립트 객체 종류에는 사용자 정의 객체, 내장객체, 문서 객체 모델(DOM), 브라우저 객체 모델(BOM)이 존재 2. 사용자 정의 객체 자바스크립트에서는 사용자가 직접 객체의 속성과 메소드를 정의하여 사용 코드 더보기 객체_html 객체 클래스 만드는 법 class Account { constructor(bank, id, name, balance){ this.bank = bank; this.id = id; this.name = name; this.balance = balance; } deposit(money){ this.balance += money; } withdraw(money){ this.balance -= ..

1. 배열 배열(Array)은 같은 타입의 데이터로 이루어진 가장 기본적인 자료구조 배열을 구성하는 데이터를 원소(element)라고 하며, 각 원소의 번호는 인덱스(index) 배열은 foreach 문으로 반복 처리 코드 더보기 배열 2. 함수 함수(function)는 일련의 코드 로직을 모듈화한 구조체 객체지향 프로그래밍에서 메서드(Method) 로 부르고 함수는 정의(Define)하고 호출(Call) 자바스크립트는 선언함수, 익명함수, 화살표함수(ES6), 내장함수 형태가 존재 3. 선언함수 함수에 이름을 붙여 정의한 함수 코드 더보기 함수 4. 익명함수 함수에 이름 없이 정의한 함수 코드 더보기 함수 5. 화살표함수 화살표 기호를 사용해 정의한 함수 코드 더보기 함수 6. 라이브러리함수 외부 JS..