실전에 사용하는 Javascript 및 Jquery
JavaScript
JavaScript 문법
- 자바스크립트 기초(1)
- 자바스크립트 기초(2)
- Javascript 내장객체 - String 관련
- Javascript 내장객체 - Browser 관련
- Javascript 내장객체 - Date 관련
- Javascript 내장객체 - Math 관련
- Javascript 객체 vs method vs prototype
- Date(날짜) 관련 예제
- 배열
- 배열을 합치는 3가지 방법
- 오브젝트(object)
- 주석문
- 정렬(sort)
- cjs, amd, umd, esm 에 대한 설명
- Class vs Factory Function
- Arrow function (화살표함수)
- JavaScript Object Table
- javascript 정규 표현식(regexp) 예 모음
- 자주 사용하는 함수 모음
- getElement 을 이용한 element selector
- 쿠키 사용하기
- postMessage를 이용한 데이타 통신
- 스크롤을 따라 움직이는 레이어
- 마우스 오버시 서브메뉴 디스플레이
- Canvas 다루기
- Javascript를 이용한 다양한 수식
JavaScript Event
JavaScript 예제모음
- 소셜 Share
- clipboard
- Scroll Top 버튼에 대한 예제들
- 텍스트 폼에서 글자수 제한하기 및 글자수 첵크하기
- 첵크박스 선택시 갯수 제한 하기
- 트리형 폴더 탐색기
- 자바스크립트 시계
- 자바스크립트 계산기
- 특정 시간부터 초단위 카운트 올리기
- 0초부터 초단위 카운트 올리기
- 풍선도움말
- 클릭시 특정 엘리먼트만 보이게 하기
- 앵커(anchor)스무스하게 움직이게 하기
- 이메일 관련
- 사업자번호 유효성 검사
- 주민등록번호
- 즐겨찾기 추가
- 파일확장자 구하기
- 첨부파일 동적 생성 및 삭제
- 동적 앨리먼트 생성 및 삭제
- 업로드된 이미지 미리보기, 사이즈 보기 구현
- element/window/document/mouseEvent 크기 & 위치
- 웹제작시 자주 사용하는 유효성 체크 및 사용자 정의 자바스크립트 함수
- 페이지 스크롤이 끝났는지 보는 방법(onscrollend)
- 새로고침(F5) 금지 하는 자바 스크립트
버튼, 체크박스, 라디오박스 관련 예제
- radio button 다루기
- checkbox 다루기
- select - 첫번째 선택하면 두번째 select 동적 할당
- select 에 동적 option 추가
- select option 에서 option 으로 값 copy
- select - option의 위치,순서변경하기
- select - 선택시 특정 페이지로 바로 가기
- 다양한 환경에 따른 submit 사용하기
팝업창 관련 예제
Layer(div) 관련 예제
- Layer scroll up
- Layer scroll up and down
- 레이어 좌측으로 움직이는 자바스크립트
- 옆으로 흐르는(스크롤) 자바스크립트 - 좌, 우 제어 가능
- 레이어 좌측 혹은 우측으로 흐르게하기
유용한 javascript 라이브러리
- Animate-On-Scroll 스크롤 애니메이션
- Slick (슬라이드이미지 - carousel)
- Venobox (레이어팝업 이미지 겔러리)
- Filterizr (이미지겔러리용 필터-소팅)
jQuery
- ELEMENT 선택자
- Radio 버튼
- Select 버튼
- 이벤트(click, submit)
- AJAX 다루기
- IFRAME 관련 정리
- index 값 찾기
- 형제요소(siblings(),next(),prev())) 찾기
- jQuery에서 배열요소 다루기
- jQuery에서 reset 활용법
- Class, Css 및 Style 다루기
- Jquery를 이용한 DIV 프린트
- 좌우 클릭시 스크롤 움직이기
- jQuery 관련 유용한 사이트 모음
- jquery를 이용한 페이징
- jQuery animate() 사용하기
- drag and drop file upload
- Jquery 예전 db에 있는 내용 [정리안됨]