'J-Query'에 해당되는 글 41건

  1. 2015.06.17 [번역] 프론트엔드 개발자는 왜 구하기 어렵나요? [공유] 1
  2. 2015.01.06 jQuey 로 css 변경
  3. 2015.01.06 jQuery 이벤트 적용 관련 정리
  4. 2014.12.26 INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수
  5. 2014.09.01 리플레쉬 없이 Jquey 를 테스트 해보자 .
  6. 2013.05.10 modal popup 창 사용 부모 자식간의 데이터 전송
  7. 2013.05.10 jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경
  8. 2013.03.12 dialog 예제
  9. 2012.11.26 JQUERY!! 사이트
  10. 2012.11.22 extjs 공부해 보자.
  11. 2012.11.22 jquey ready? $(function(){});?
  12. 2012.11.15 jquery 움직이는 스크롤 사이드바
  13. 2012.11.15 jQuery 라이브러리 사용 방법 1
  14. 2012.11.15 sliding
  15. 2012.09.10 컬럼 추가 삭제
  16. 2012.08.24 jQuey 1.8 이 정식 릴리즈 되었습니다.
  17. 2012.07.10 jQuery.slide()
  18. 2012.06.22 body CSS 그라데이션 흰색 - > 블랙
  19. 2012.06.22 jQuey eq form 값 반디 모음 1
  20. 2012.06.15 select 태그에서 선택된 option 값 알아보기 1

[번역] 프론트엔드 개발자는 왜 구하기 어렵나요? [공유]

 | J-Query
2015. 6. 17. 09:41
출처 : http://taegon.kim/archives/4810 

Why can’t we find Front End developers?를 번역한 글입니다. 저 스스로가 프론트엔드 개발자이기도 해서 재밌는 주제라 옮겨봤습니다. ^^

어느날 우연히 Quora에서 프론트엔드 엔지니어링과 스타트업에 관련된 “Why is it that startups have trouble finding front end developers? (왜 스타트업에서 프론트엔드 개발자를 구하기가 어려운가?)”라는 글을 보게 되었다. 발제자는 다음과 같은 내용도 덧붙였다.

(…) 엔지니어링 분야에서 프론트엔드 개발이 다른 분야보다 훨씬 쉽다는 것에는 많은 사람들이 동의할 겁니다. 그런데 왜 스타트업에서는 프론트엔드 개발자를 구하기가 어려운 걸까요?

이에 대한 괜찮은 답변을 몇 개 보았는데 대부분은 핵심을 얘기하고 있었다. 프론트엔드 엔지니어 자리를 구직하거나 프론트엔드 엔지니어를 인터뷰하고 프론트엔드 프로젝트에서 일해본 개인적인 경험에 기반한 내 의견도 덧붙인다.

상대적으로 새로운 분야이다

“왜 프론트엔드 개발자를 구하기 어려운가”에 대한 첫 번째 답변이자 가장 간단한 답변은 프론트엔드 개발이 신생 분야이기 때문이다. 이 명제에 동의하지 않는 사람들이 대부분이겠지만 프론트엔드 엔지니어링은 웹 개발과 비슷하며 웹 개발은 20년 이상된 분야이다. 하지만 인터페이스와 사용자 경험을 기술적으로 구현하는 특정한 “직업”군으로서의 프론트엔드 엔지니어링이라는 개념은 상당히 새로운 분야이다. 다만, 프론트엔드의 “엔지니어링” 부분은 그보다 몇 년 앞서 성장해왔다.

구글 트렌드를 통해 살펴본 지난 몇 년간의 프론트엔드 엔지니어 트렌드의 시각화
구글 트렌드를 통해 살펴본 지난 몇 년간의 프론트엔드 엔지니어 트렌드 시각화

오늘날까지도 웹 개발과 프론트엔드 엔지니어링 개념이 혼재되어 있지만 누구의 탓도 아니다. 웹 산업 바깥의 사람들에게는 웹 개발은 웹 페이지를 시각적으로 디자인하는 것과 이를 구현하는 것 사이의 모호한 경계이기 때문이다. 어쨌든 웹 개발은 프론트엔드 엔지니어들이 하는 것이기도 하다. 다만, 프론트엔드 엔지니어들은 사용자가 포함된 부분에만 집중할 뿐이다.

인터페이스와 사용자 경험을 기술적으로 구현하는 분야가 직업군으로서 명성을 얻기 시작한 것은 상당히 최근이다. 15년쯤 전에는 웹 페이지의 시각 디자인 작업과 이를 기술적으로 구현하는 작업에 리소스가 균등하게 분배됐었다. 웹이 단순한 홈페이지나 홍보용 페이지 이상으로 성장하면서 기술자 리소스가 더 필요해졌다. 사람들이 자바스크립트, 백엔드 기술, UX, 데이터베이스, 심지어 시스템 디자인까지 단지 웹을 위해 배우기 시작했다. 오늘날 AirBnB, Facebook, Quora 같은 웹 애플리케이션은 디자인 리소스보다 엔지니어링 리소스에 더 많이 투자한다. 다시 말해 오늘날에는 웹 페이지의 시각적인 디자인이 이를 구현하는 것보다 더 빨라졌다는 뜻이다. 그렇다고 시각 디자인이 덜 중요하다거나 20년전에 비해 시각 디자인 분야에 할당된 리소스가 줄었다는 뜻은 아니다. 오늘날의 웹 페이지가 요구하는 기술자가 훨씬 많아졌을 뿐이다.

오늘날의 웹 애플리케이션은 시각 디자인 리소스보다는 엔지니어링 리소스를 더 많이 필요로 한다.
오늘날의 웹 애플리케이션은 시각 디자인 리소스보다는 엔지니어링 리소스를 더 많이 필요로 한다.

웹 애플리케이션의 기술적 구현은 여러 분야에 걸쳐 있기 때문에 90년대의 웹 “엔지니어”들은 팔방미인이었어야 했다. DBA(데이터베이스 관리자, Database Administrators), 시스템 관리자부터 백엔드 엔지니어, DevOps, 소프트웨어 엔지니어, UX 엔지니어, 프론트엔드 엔지니어까지 담당했다. 마지막의 프론트엔드 엔지니어는 아마도 사람들이 가장 두려워하는 분야일 것이다. 자바스크립트, HTML, CSS를 사용해 시각적인 목업을 웹 브라우저에서 실제로 작동하게 만드는 일을 하는 분야이다. 프론트엔드 엔지니어링을 즐기려면 시각 디자인에 대한 흥미가 어느 정도 필요하다(그리고 일종의 마조키스트도 되야한다).

이 애니메이션은 처음 시작하는 프론트엔드 엔지니어들이 대부분 겪는 어려움을 나타낸다. CSS는 시각 디자인을 제대로 표현하기 위해 웹 페이지 안에서 사용하는 스타일링 언어이다. 상당히 많은 경우 당신의 기대와는 다르게 동작할 것이다.
이 애니메이션은 처음 시작하는 프론트엔드 엔지니어들이 대부분 겪는 어려움을 나타낸다. CSS는 시각 디자인을 제대로 표현하기 위해 웹 페이지 안에서 사용하는 스타일링 언어이다. 상당히 많은 경우 당신의 기대와는 다르게 동작할 것이다.

웹 애플리케이션이 필요로 하는 작업량을 충족시키려면 시간이 어느 정도 필요해졌고 하나의 웹 애플리케이션에서 여러 사람이 함께 작업할 수 있도록 기술적인 작업을 나누어야 할 필요로 생겼다. 나는 시간이 가장 많이 걸리는 작업이 무엇인지 또는 어떤 작업이 가장 어려운지 모르겠지만[1], 한 사람이 모든 기술적인 세부 사항을 감당할 수 없게 됐다는 사실은 여러 웹 에이전시와 기업에 있어 문제가 되었다. 그 결과 내가 앞서 설명한 직업(백엔드 엔지니어, DBA 등)들이 웹 산업에 등장했다. 눈여겨 볼 점은 이런 직업 중 대부분은 오랜 시간 있어왔지만 웹 산업 내부에서 이들에 대한 적절한 수요는 지난 10년 이내에 시작됐다는 것이다.

오늘날에도 여전히 웹 애플리케이션에 필요한 모든 기술을 다루어야 한다는 가련한 영혼들이 있는데, 우리는 그들을 풀스택 엔지니어라 부른다. 몇 가지 없는 장점 중 하나는 유니콘을 찾는 것보다는 쉽다는 점이다[2]. 디자이너들에게는 둘 다 쉽지 않다(https://insideintercom.io/how-to-hire-designers/). 디자이너를 고용하는 법 참고
오늘날에도 여전히 한 사람이 웹 애플리케이션에 필요한 모든 기술을 다루어야 한다는 가련한 영혼들이 있는데, 우리는 그들을 풀스택 엔지니어라 부른다. 몇 가지 없는 장점 중 하나는 유니콘을 찾는 것보다는 쉽다는 점이다[2]. 디자이너들에게는 둘 다 쉽지 않다. 디자이너를 고용하는 법(https://insideintercom.io/how-to-hire-designers/) 참고

오늘날 스타트업들은 자신들이 성공하려면 프론트엔드, 백엔드, DBA, 운영 등 웹 애플리케이션의 기술 영역 상당 부분을 자신들이 제대로 다루어야 한다고 주장한다. PaaSPlatform as a Service는 스타트업에서 운영 부분을 없애겠다는 하나의 목적으로 만들어진 반면, Parse.com과 같은 여러 BaaSBackend as a Service 서비스들은 데이터베이스 스키마, 애플리케이션의 엔드포인트(그래도 스키마를 디자인할 사람이 필요하긴 하다) 등 가능한 많은 것을 제공한다. 프론트엔드는 아직 “서비스되는” 단계에 이르지 못했지만 로딩 페이지에 필요한 프론트엔드 모듈이나 컴포넌트를 구매할 수 있는 서비스는 조금 있다. 실제 동작하는 웹 애플리케이션을 작성하고 싶은데 주변에서 좋은 프론트엔드 엔지니어를 구할 수 없을 때, 마찬가지로 브랜드를 만들고 싶은데 디자이너를 구할 수 없을 때 이런 서비스를 사용할 수 있다.

[1] 거짓말이다. 시간이 가장 많이 걸리는 작업은 IE에서 웹 사이트를 동작하게 만드는 것이다. 이 작업을 할 때는 수명도 깎여나간다.

[2] 대부분의 풀 스택 엔지니어들은 완전한 웹 애플리케이션을 만들 수 있을만큼의 기술적인 깊이가 부족하다. 프론트엔드, 백엔드, 운영 중 어느 하나는 부족하기 마련이다. 평균적인 수준의 자금이 확보된 스타트업에서 최소한 세 사람이 풀타임으로 해야할 일을 한 사람이 하기를 바라는 것은 비현실적이다. 그렇지만 GUI부터 좀비 프로세스까지 다룰 수 있는 닌자를 몇 명 알고는 있다. 만약 그런 사람이 여러분의 팀에 있다면 착하게 살 것이며 절대로 그들이 떠나지 않게 하라.

오해

프론트엔드 개발자를 찾기 어려운 다른 중요한 이유는(개인적으로는 가장 중요하다고 생각한다) 이 분야에 대해 오해하고 있기 때문이다. 발제자가 처음 질문에서 말했듯이 대부분의 사람들은 프론트엔드를 “상대적으로 쉬운 분야”로 보고 있다. “대부분의 사람들이…”로 시작하는 구닥다리 방식을 사용해 프론트엔드 엔지니어가 하는 일을 상세하게 설명해본다.

대부분의 사람들이 생각하는 프론트엔드 엔지니어링

  1. 포토샵 파일, 이미지, 와이어프레임 등을 가지고 웹 페이지를 만드는 일
  2. 때로는 앞서 나온 포토샵 파일, 이미지, 와이어프레임을 그리는 일
  3. 웹 페이지에 애니메이션을 만들고 트랜지션 효과를 주기 위해 자바스크립트를 작성하는 것
  4. 콘텐츠를 정의하고 이를 꾸미는 HTML과 CSS를 작성하는 것

프론트엔드 개발자가 실제로 하는 일

  1. 디자이너와 엔지니어 간의 시각적 언어 확립
  2. 시각 디자인으로부터 콘텐츠, 브랜드, 기능 등을 표현할 컴포넌트 세트 정의.
  3. 컨벤션, 프레임워크, 요구 사항, 시각적 언어, 스펙 면에서 웹 애플리케이션의 기준 확립
  4. 웹 애플리케이션의 범위를 기기, 브라우저, 화면, 애니메이션의 측면에서 정의
  5. 브랜드 충성도, 코드 품질, 관계자의 상품 리뷰를 위한 품질 보증 가이드라인 개발
  6. 적절한 간격, 타이포그래피, 헤딩, 글꼴, 아이콘, 여백, 그리드 등을 사용해 웹 애플리케이션 꾸미기
  7. 디자인 가이드라인을 따르며 다양한 해상도에 대응하는 이미지, 디바이스별 목업 등을 사용해 웹 애플리케이션 꾸미기
  8. 시맨틱, 접근성, 검색엔진 최적화, 스키마, 마이크로포맷 등을 고려하여 웹 애플리케이션 마크업하기
  9. API에 접근하여 사용하기 편하고 배터리 소모가 없는 디바이스 및 클라이언트가 인지하는 방식으로 정보를 가져오기
  10. 부드러운 애니메이션, 트랜지션, 게으른 로딩lazy loading, 인터랙션, 애플리케이션 워크플로우를 수행하는 클라이언트 사이드 코드 개발. 대부분 점진적 기능 향상 및 하위 표준 호환성까지 고려.
  11. CORSCross Origin Resource Sharing을 고려하는 한편 XSSCross Site Scripting와 CSRFCross Site Request Forgery 공격을 막아낼 수 있도록 백엔드 접속에 대한 안전성 확보
  12. 엄격한 데드라인, 관계자들의 요구, 기기별 제한에도 불구하고 항상 사용자가 최우선이라는 점을 잊지 않는 것

이러한 목표를 달성하기 위해 프론트엔드 엔지니어들은 시각 디자인 도구(포토샵, Adobe, Macaw, Sketch)부터 프로그래밍 도구(IDE, Command Line, Source Version Control, Bash 스크립트, 빌드 태스크)까지 다양한 도구를 사용한다. 심지어 간혹 마케팅(뉴스레터, 캠페인, 분석, 검색엔진최적화, 소셜미디어), UX(애니메이션, 트랜지션, 피드백, 인터페이스, 시각적 언어)부터 콘텐츠 수정(구획점, 단어가 뚝 떨어지지 않게 하는 일, 가독성, 색상)까지 신경써야 한다.

나쁜 프론트엔드 엔지니어

좋은 프론트엔드 개발자를 구하기 어려운 가장 분명한 이유는 나쁜 프론트엔드 개발자가 많기 때문일 것이다.Quora의 글에 있던 답변 중 하나에서 정확히 말했듯이 프론트엔드 엔지니어링은 진입장벽이 정말 낮다. 자바스크립트, CSS, HTML은 이해하기 어려운 프로그래밍 언어가 아니다. 누구라도 CodeAcademy나 Codeschool에 가서 며칠 안에 기초를 배울 수 있다. Erlang(개인적으로 가장 좋아하는 프로그래밍 언어 중 하나), Go, ANSI C 등을 배우기 위해 컴퓨터의 작동 원리를 알아야 하는 것과는 상반된다. 웹 페이지에 있는 색상과 이미지를 바꾸는 것은 정말 쉽다. 웹의 기저까지 이해하는 것과는 완전히 다르다.

결국 프론트엔드 엔지니어 시장은 다음과 같은 사람들 때문에 몸살을 겪을 것이다.

  1. 자바스크립트 라이브러리를 남용하는 사람. 자바스크립트 내부를 제대로 알지 못하기 때문에 라이브러리를 남용한다(예. 모든 작업에 jQuery 가져다 붙이기).
  2. 자바스크립트 플러그인을 남용하는 사람. 다른 사람의 코드를 읽을 능력도 없이 가져다 쓰는 경우(예. jQuery.doParallaxPls.js).
  3. 전체 CSS/JS 기능의 5% 밖에 안 쓰면서 요구사항이나 디자인도 안보고 성능 비교/평가도 안하고 웹 애플리케이션 CSS 프레임워크를 붙이는 사람.
  4. CSS 프레임워크만 가져다 붙이면 “반응형” 웹 사이트가 된다고 생각하는 사람. 또는 이러한 반응성이 웹 애플리케이션에 언제든 뿌리기만 하면 되는 양념으로 생각하는 사람.
  5. “반응형 웹 디자인”에 대해 말하면서 서버측 기법에 대해서는 알지 못하는 사람.
  6. 컨벤션, 전처리 도구preprocessor, 네이밍 표준, 모범 예시없이 CSS 코딩을 하면서 셀렉터, 아이디, 매직 넘버, !important를 과하게 사용하는 사람.
  7. 성능, 메모리 누수(+메모리 누수가 무엇인지 잘 모르는 점)에 대해 무시하고 자신의 코드를 검사하거나 측정하지 못하는 사람.
  8. 아무런 기준없이 제품을 보여주는 사람 또는 “제 컴퓨터/브라우저/디바이스에서는 잘 됩니다” 따위를 기준으로 삼는 사람.
  9. 30년 된 소프트웨어 엔지니어링을 무시하면서 소프트웨어를 작성하는 사람

대체로 여러분은 컴퓨터 과학을 전공자를 뽑으려다가 프론트엔드 엔지니어와 함께 일하기로 했을 것이다. 컴퓨터 과학에 대한 지식이 좋은 프론트엔드 엔지니어의 필수 조건은 아니지만, 컴퓨터와 소프트웨어의 기본적인 매커니즘은 자바스크립트로 코딩을 할 때에도 항상 고려해야 할 내용이다. 좋은 프론트엔드 엔지니어는 현존하는 플랫폼 및 환경 중 아마도 웹이 가장 강력하며 웹에서 실행되는 코드는 반드시 가상 머신이나 가상 런타임에서 실행되는 언어만큼이나(혹은 그보다 더) 신중하게 개발해야 한다는 사실을 알고 있다.

좋은 프론트엔드 엔지니어는 웹의 메커니즘과 사용하는 언어를 고려하는 것은 물론이거니와 웹과 연동하는 다른 컴포넌트, 시스템, 개념에 대한 경험도 있다. 다음은 숙련된 프론트엔드 엔지니어가 알아야 하거나 일반적인 프론트엔드 작업을 할 때 먼저 해야할 것들이다.

숙련된 프론트엔드 엔지니어가 알아야 하거나 작업시 해야할 일 (힌트: 바로 여러분이 고용하고 싶은 사람이다)

  1. DNS Resolution, CDNContent Delivery Networks 사용, 여러 호스트 이름을 통한 리소스 요청 성능 향상
  2. HTTP 헤더 (Expires, Cache-Control, If-Modified-Since)
  3. 스티브 사우더스의 규칙 전부 (고성능 웹사이트)
  4. PageSpeed, YSlow, 크롬 개발자 도구 Audit, 크롬 개발자 도구 Timeline에서 보여주는 문제를 해결하는 법
  5. 작업을 서버에서 해야할 때와 클라이언트에서 해야할 때 구분
  6. 캐시, 프리 페칭pre-fetching 및 지연 로드 기법
  7. 네이티브 자바스크립트. 직접 바닥부터 코드를 작성해야 할 때 혹은 다른 사람의 코드를 가져다 써야 할 때를 아는 것. 그리고 두 작업의 장점과 단점을 평가할 수 있는 능력
  8. 최신 MVC 자바스크립트 라이브러리(예. AngularJS, EmberJS, ReactJS), 그래픽 라이브러리(예. D3, SnapSVG), DOM 관련 라이브러리(예. jQuery, Zepto), 게으른 로딩 또는 패키지 관리 라이브러리(예. RequireJS, CommonJS), 태스크 관리자(예. Grunt, Gulp), 패키지 관리자(예. Bower, Componentjs), 테스팅(예. Protractor, Selenium)에 대한 지식과 사용.
  9. 이미지 포맷과 장점. 언제 무엇을 어떻게 써야 하는가에 대한 지식. 이미지 최적화 기법과 사용 계획 (스프라이트, 게으른 로딩 기법, 캐시 비움, 인터레이스드 PNG)
  10. CSS 표준, 최신 컨벤션과 기법(예. BEM, SMACSS, OOCSS)에 대한 지식과 사용
  11. 자바스크립트의 컴퓨터 과학(메모리 관리, 싱글 스레드 특성, 가비지 컬렉터 알고리듬, 타임아웃, 스코핑, 호이스팅, 패턴)

결론

현재, 그리고 앞으로도 계속 웹에는 프론트엔드 엔지니어가 필요할 것이다. 다양한 디바이스, 브라우저, 웹 표준의 변화로 인해 웹 애플리케이션에서 사용자 부분을 담당해 줄 사람을 급히 찾게 될지도 모른다. 프론트엔드 엔지니어와 개발자들은 우리가 식당의 메뉴를 보거나 영업 시간 따위를 보는 곳으로 생각했던 웹의 한계를 벗어나는 흥미진진한 제품을 만들 수 있었다. 지금은 3D 갤러리, 실시간 영상 통화, 인터넷 라디오, 심지어 완전한 오피스 도구(예. 구글 앱스, 마이크로소프트 오피스 온라인)도 있다. 모든 것은 클라우드 상에 존재하며 우리가 쓰고, 듣고, 메일을 보내고 보는 것들은 어디에나 있게 되었다.
프론트엔드 엔지니어를 찾는 것은 어렵지만 더 많은 사람들이 프론트엔드 부대에 들어오고 있다. 프론트엔드 엔지니어라는 직업이 선사하는 깜짝 놀랄만한 근무 환경과 두둑한 급여뿐만 아니라 웹을 코딩한다는 것이 주는 믿을 수 없는 즐거움 때문일 것이다. 여러분에게는 사용자 수천명의 생활에 영향을 끼칠 수 있는 기회가 있으며 인터넷 접속을 통해 누구에게나 신나는 서비스를 제공할 수 있다. 이 모든 것들이 브라우저 위에서 이루어지고, 때로는 브라우저가 제약이 되기도 하지만 그 위에서 어떤 아이디어라도 분석하고 그리고 보여줄 수 있다. 프론트엔드 엔지니어들이여 건승하시길. 웹이 여러분을 기다리고 있다.


저작자표시

'J-Query' 카테고리의 다른 글

jQuey 로 css 변경  (0) 2015.01.06
jQuery 이벤트 적용 관련 정리  (0) 2015.01.06
INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수  (0) 2014.12.26
리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
Posted by 사라링
트랙백 : 댓글

jQuey 로 css 변경

 | J-Query
2015. 1. 6. 19:00

//나의현황 마우스 오버 아웃 처리

$("#MY_PRSEN_CONDI tr td").mouseenter(function(){

if($(this).text().trim()!='0건'&&$(this).text().trim()!='0원'){

$(this).css('background-color', '#05abe0');

$(this).css( 'cursor', 'pointer' );

}

});

$("#MY_PRSEN_CONDI tr td").mouseleave(function(){

if($(this).text().trim()!='0건'&&$(this).text().trim()!='0원'){

$(this).css('background-color', '#FFFFFF');

$(this).css( 'cursor', 'none' );

}

});

저작자표시

'J-Query' 카테고리의 다른 글

[번역] 프론트엔드 개발자는 왜 구하기 어렵나요? [공유]  (1) 2015.06.17
jQuery 이벤트 적용 관련 정리  (0) 2015.01.06
INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수  (0) 2014.12.26
리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
Posted by 사라링
트랙백 : 댓글

jQuery 이벤트 적용 관련 정리

 | J-Query
2015. 1. 6. 18:39

jQuery에서는 사용자가 발생시키는 이벤트를 쉽고, 간단하게 핸들링 할 수 있는 메소드를 지원하고 있습니다. 마우스의 클릭과 키보드의 입력은 물론이고 심지어 더블클릭과 마우스 휠에 대한 이벤트를 쉽게 처리 할 수 있습니다.


jQuery에서 제공하는 이벤트 관련 메소드의 종류는 정말로 너무나 많습니다. 그 만큼 개발자가 많은 이벤트를 쉽게 이용할 수 있고 좀더 나은 UX를 만들 수 있다는 큰~ 장점이 있습니다. (일만 많아 지는 건가요?) 이번 시간에는 jQuery를 통해 이벤트를 어떻게 이용할 수 있는지에 대해 알아 보도록 하겠습니다.


이벤트 중에서 이번 시간을 통해 알아볼 내용은 사용자의 입력이나 브라우저의 상태가 변경되었을 경우 발생되는 이벤트 메서드 입니다.

 이벤트 종류(형식)

 이벤트 설명

 .blur()

 요소에서 포커스를 잃을 경우에 발생하는 이벤트 입니다.

 .change()

 <input />, <textarea />, <select /> 요소의 값 변경시 발생하는 이벤트 입니다.

 .click()

 마우스 클릭 시 발생하는 이벤트 입니다.

 .dblclick()

 마우스를 더블클릭 했을 경우 발생하는 이벤트 입니다.

 .focus()

 요소에 포커스 되었을 때 발생하는 이벤트 입니다.

 .hover()

 마우스가 요소 위에 위치했을 때 발생하는 이벤트 입니다.

 .keydown()

 키 입력 시 발생되는 이벤트이며, 모든 키에 대해 적용이 됩니다.

 .keypress()

 keydown 이벤트와 동일하게 키 입력 시 발생이 되지만 
 enter, tab등의 특수키에는 이벤트가 발생되지 않습니다.

 .keyup()

 키 입력 후 발생되는 이벤트 입니다.

 .mousedown()

 마우스 클릭 시 발생하는 이벤트입니다.

 .mouseenter()

 선택한 요소의 영역에 마우스가 위치했을 때 발생되는 이벤트 입니다.

 .mouseleave()

 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트 입니다.
 인터넷익스플로러에서만 발생되는 이벤트지만 jQuery는 브라우저 관계없이 
 사용할 수 있도록 시뮬레이터 됩니다.

 .mouseout()

 선택한 요소의 영역에서 마우스가 벗어 났을 때 발생되는 이벤트입니다.

 .mouseup()

 마우스 클릭 후 발생되는 이벤트입니다.

 .ready()

 DOM이 모두 준비 되었을 때 발생하는 이벤트입니다.

 .resize()

 resize 될 경우 발생하는 이벤트입니다.

 .scroll()

 HTML 문서가 스크롤 되었을 때 발생하는 이벤트입니다.

 .select()

 선택한 개체를 마우스를 통해 선택 하였을 때 발생하는 이벤트입니다.

 .submit()

 Submit이 일어날 때 발생하는 이벤트입니다. (Form 메서드 참고)

표 1. [jQuery Event 관련 메서드 종류]

 

우선 jQuery에서 지원하는 이벤트의 목록을 살펴 보면 정말(완전 대박!) 많은 이벤트를 지원하고 있는걸 확인 할 수 있습니다.

목록은 많으나 사용법이 대부분 동일하기 때문에 jQuery에서 지원하고 있는 이벤트가 이런 것이 있구나 하는 정도만 알아 두시면 됩니다.

이벤트 중에서 가장 많이 사용하는 마우스 클릭에 대한 예제를 통해 HTML 요소에 이벤트를 어떻게 할당하고, 처리하는지 알아 보도록 하겠습니다.

 

예제를 진행하기 전에 예전 웹 프로그램 개발 시에는 HTML과 자바스크립트를 혼용(흔히 말하는 스파게티)하여 사용을 하였으나, 웹 표준이 자리를 잡고 코드 분리를 통한 유지보수 반복적인 패턴의 코드중복을 피하기 위해 스크립트를 통해 HTML 요소와 이벤트를 맵핑하는 방식으로 개발을 하고 있습니다.

 

이전방식

<script type="text/javascript">
    function tdClick(obj) {
        alert(obj);
    }        
</script>

<tr>
    <td onclick="tdClick('1');">#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td onclick="tdClick('6');">#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

[필요한 함수를 만들고, 해당 이벤트가 필요한 요소에 일일이 적용]

 

추천방식

<script type="text/javascript">
    $(document).ready(function () {
        $("td").click(function () {
            alert($(this).text());
        });
    });
</script>
<tr>
    <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
</tr>
<tr>
    <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
</tr>

[HTML 요소에는 아무런 작업을 하지 않았다.]

 

처음에는 어색하고 오히려 불편하다고 느낄 수 있으나, HTML에서 사용하는 이벤트가 많아지고 동적으로 이벤트와 HTML의 요소를 맵핑하는 기능 구현 시에는 정말 없어서는 안돼는 흔히 말하는 막노동을 깔끔하게 해결하는 최고의 방법입니다.

 

 

 

.click()

event_01_001.jpg

 

마우스 클릭 시 동작하는 이벤트로 선택한 객체에 마우스 클릭 이벤트가 발생할 경우 해당 정의한 메서드가 실행 되며,  인자 값으로는 eventData로 이벤트에 대한 데이터 값이 전달이 됩니다.


$(“div”).click(function() { alert(‘click’); } 이라고 정의 할 경우 HTML 문서에 존재하는 모든 DIV 요소에 “click” 이벤트를 할당하고, 정의한 메서드의 결과인 alert(‘click’);을 실행하게 됩니다.


다음 예제를 통해 자세히 알아 보도록 하겠습니다.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").click(function () {
                alert($(this).text());
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>        
    </table>
    </div>
</body>
</html>

 

event_01_002.jpg

 

클릭 이벤트가 필요한 요소를 셀렉터를 통해 선택하고, 선택된 모든 개체에 일괄적으로 이벤트를 할당합니다.

이런 패턴의 개발은 코드의 양을 줄이고, 관련 메서드를 수정할 때 번거로움이 확~ 줄어 든다는 이점이 있습니다. 또한 클라이언트로 전송되는 데이터도 적어지기 때문에 트래픽에 대한 부담도 많이 줄일 수 있습니다.(한국과 같은 인터넷 환경은 크게 문제가 되지 않지만 3G를 이용하는 모바일 기기, 인터넷 여건이 좋지 않은 지역에서는 큰 효과를 얻을 수 있습니다.)

 

웹에서 흔히 사용이 되지는 않지만 jQuery를 통해서 쉽게 구현이 가능한 마우스 더블클릭을 이용하고 싶다면, 위의 예제에서 .click() 메서드를 .dblclick()으로 변경만 하면 아무런 문제없이 사용이 가능합니다.

 

<script type="text/javascript">
    $(document).ready(function () {
        $("td").dblclick(function () {
            alert($(this).text());
        });
    });
</script>

 

대부분의 이벤트 관련 메서드는 이처럼 관련 메서드 이름만 다를 뿐 사용하는 방법에 대한 차이가 거의 존재 하지 않습니다.
마지막으로 키보드 입력 시 키보드의 값을 알아내는 예제를 통해 eventData의 간단한 사용법을 알아 보도록 하겠습니다.

 

event_01_003.jpg

 

.keydown() 이벤트를 사용하는 이유는 엔터키와 같은 특수 입력키에 대한 내용도 체크하기 위함이며, 특수키에 대한 값이 필요 없을 경우에는 .keypress() 를 사용하시면 됩니다.

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />    
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}        
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#txtInput").keydown(function (e) {
                $("#txtKeyCode").val(e.keyCode);
            });
        });
    </script>
</head>
<body style="padding:10px;">
    <h2>jQuery 시작 Selector</h2>
    <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p>
    <div>
        <input type="text" id="txtInput" /> </br />
        <input type="text" id="txtKeyCode" />
    </div>
</body>
</html>

 

event_01_005.jpg

 

 

입력되는 키에 따른 해당 “keyCode”값이 노출되는걸 확인 할 수 있으며, “Enter”, “Ctrl”, “Shift”등의 특수 키보드의 값도 확인 할 수 있습니다. 앞서 말씀 드린 봐와 같이 jQuery에서 지원하고 있는 이벤트 관련 메서드의 종류는 상당히 많은 편이나, 이번 강좌에서 예제로 보여드린 부분만 이해를 하신다면 다른 이벤트 관련 메서드를 사용하시는데 큰 문제가 없을 것으로 생각이 됩니다.

 

 

참고자료 및 참고링크
jQuery Events

http://api.jquery.com/category/events/


출처 : http://www.sqler.com/390796



저작자표시

'J-Query' 카테고리의 다른 글

[번역] 프론트엔드 개발자는 왜 구하기 어렵나요? [공유]  (1) 2015.06.17
jQuey 로 css 변경  (0) 2015.01.06
INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수  (0) 2014.12.26
리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
Posted by 사라링
트랙백 : 댓글

INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수

 | J-Query
2014. 12. 26. 13:31

$(window).load(function(){


$.fn.selectRange = function(start, end) {

   return this.each(function() {

        if(this.setSelectionRange) {

            this.focus();

            this.setSelectionRange(start, end);

        } else if(this.createTextRange) {

            var range = this.createTextRange();

            range.collapse(true);

            range.moveEnd('character', end);

            range.moveStart('character', start);

            range.select();

        }

    });

}; 

 $('#keyword').selectRange(1,50);

}) ;

// use like this   



일반적으로 선택만 할 경우 start 와 end 값을 동일 하게 셋팅 하면됨 . 


반드시 input 박스만 되는것은 아니며 id 나 네임값을 유동적으로 셋팅 하여 최초 화면 호출시 focus 를 유동적으로 셋팅 할수 있음으로 활용도가 높음. 








저작자표시

'J-Query' 카테고리의 다른 글

jQuey 로 css 변경  (0) 2015.01.06
jQuery 이벤트 적용 관련 정리  (0) 2015.01.06
리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경  (0) 2013.05.10
Posted by 사라링
트랙백 : 댓글

리플레쉬 없이 Jquey 를 테스트 해보자 .

 | J-Query
2014. 9. 1. 17:57


사이트 주소는 

w3schools




Script 선언및 $ 작성후 Submit 을 하면 오른쪽 화면에 일반 브라우져 에서 나오는 결과를 즉시 확인 가능 하다.



저작자표시

'J-Query' 카테고리의 다른 글

jQuery 이벤트 적용 관련 정리  (0) 2015.01.06
INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수  (0) 2014.12.26
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경  (0) 2013.05.10
dialog 예제  (0) 2013.03.12
Posted by 사라링
트랙백 : 댓글

modal popup 창 사용 부모 자식간의 데이터 전송

 | J-Query
2013. 5. 10. 17:36


$("#connectContract tbody .hovertr").on("click",function(){


var objectName = new Object(); // object 선언 modal의 이름이 된다.

objectName.message = "이건 테스트"; // modal에 넘겨줄 값을 선언할 수 있다.


var site = "./modalPopup.html";

var style ="dialogWidth:255px;dialogHeight:250px"; // 사이즈등 style을 선언

window.showModalDialog(site, objectName ,style ); // modal 실행 window.showModalDialog 포인트!!


// modal 에 넘겨줬던 값을 다시 부모창에 받아 들임   

document.getElementById("test1").value = objectName.message;

});



//자식창(팝업창) 에서 초기화 function 팝업 창에서 부모창이 보내준 값을 받고 돌려 주는 부분

function init(){


// 부모페이지의 값을 불러들이기 위함 window.dialogArguments 포인트!

var opener = window.dialogArguments ;

var message = opener.message; // 부모창에서 object에 넣었던 값

alert(message);

opener.message="test OK!!!"; // object 값을 변경

//window.close();

}

저작자표시

'J-Query' 카테고리의 다른 글

INPUT 박스 일정 범위를 선택 하도록 처리 하는 함수  (0) 2014.12.26
리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경  (0) 2013.05.10
dialog 예제  (0) 2013.03.12
JQUERY!! 사이트  (0) 2012.11.26
Posted by 사라링
트랙백 : 댓글

jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경

 | J-Query
2013. 5. 10. 17:32

$('.hovertr').bind("mouseover", function(){

var color  = $(this).css("background-color");

$(this).css("background", "#F5F5F5");

$(this).bind("mouseout", function(){

$(this).css("background", color);

})

});

저작자표시

'J-Query' 카테고리의 다른 글

리플레쉬 없이 Jquey 를 테스트 해보자 .  (0) 2014.09.01
modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
dialog 예제  (0) 2013.03.12
JQUERY!! 사이트  (0) 2012.11.26
extjs 공부해 보자.  (0) 2012.11.22
Posted by 사라링
트랙백 : 댓글

dialog 예제

 | J-Query
2013. 3. 12. 13:11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <link rel="stylesheet" href="css/base/jquery.ui.all.css">
  <script type="text/xxjavascript" src="js/jquery-1.4.4.js"></script>
  <script type="text/xxjavascript" src="js/jquery-ui-1.8.9.custom.js"></script>
  <script type="text/xxjavascript">
 $(document).ready(function(){
  // default가 true인것은 굳이 설정하지 않아도 적용됨.
  $("#dialog1").dialog({
   disabled: false,  // ????????????????????????
   autoOpen: false,     // 다이얼로그 창이 자동으로 보이게 하는지의 여부 설정.
   //buttons: {"ok" : function() { alert(‍"ok 하셨습니다!!"); }, "cancel" : function() { $(this).dialog("close"); } }   // 버튼 설정1.
   buttons: [         // 버튼 설정2. 배열로 이벤트까지 직접 설정할 수 있다.
     {
      text: "ok",
      click:  function() { alert(‍"ok 하셨습니다!!"); }
     },
     {
      text: "cancel",
      click:  function() { $(this).dialog("close");  }
     }
      ],
   closeOnEscape: false,    // ESC키를 눌렀을때 다이얼로그 박스를 닫을것인지의 설정. 설정하지않으면 기본 true로써 닫히게된다.
   closeText: "창닫기",       // 창을 닫는 텍스트를 추가할 수 있다.
   dialogClass: "alert",   // ??????????????????????????????
   draggable: false,   //  드래그를 가능하게할지 여부. 기본 true로써 드래그가 가능하다.
   height: 400,    // 창의 높이 설정. 기본 auto.
   width: 800,    // 창의 넓이 설정. 기본 auto.
   hide: "slide",     // 다이얼로그가 닫길때의 효과 설정.
   maxHeight: 600,    // 리사이징 될때의 최대 높이를 설정.
   maxWidth: 500,    // 리사이징 될때의 최대 넓이를 설정.
   minHeight: 600,    // 리사이징 될때의 최소 높이를 설정.
   minWidth: 500,     // 리사이징 될때의 최소 넓이를 설정.
   modal: true,     // 모달창으로서 사용할지의 여부 설정. 마스크레이어가 자동 설정된다.
   //position: "left"     // 창의 위치 설정. top, right, bottom, left.
   //position: ["right","top"]   // 창의 위치 설정.
   //position: [350,400]             // 창의 위치 설정. 픽셀로 설정할 수 있다.
   resizable: false,    // 리사이징 가능 여부.
   show: "slide",     // 창을 오픈할때의 효과 지정. 여러가지 효과를 지정할 수 있다.
   //stack: false     // 여러개의 창을 띄울때 마지막에 띄운 창이 다른 창위에 쌓여서 보이게 할지의 여부 설정.
   title: "첫번째 다이얼로그" // 다이얼로그의 타이틀 지정. html 코드도 올 수 있다. 다이얼로그로 지정된 html태그에 타이틀 속성으로도 지정할수있다.
   //zIndex: 3999     // 다이얼로그의 zindex를 지정. 기본값은 1000이다.
  });

 


  $("#dialog2").dialog({
   autoOpen: false,    // 다이얼로그 창이 자동으로 보이게 하는지의 여부 설정.
   height: 600,
   width: 700,
   title: "<h2>두번째 다이얼로그</h2>"
  });


  $("#dialog3").dialog({
   autoOpen: false,    // 다이얼로그 창이 자동으로 보이게 하는지의 여부 설정.
   height: 600,
   width: 700,
   create: function(event,ui){          // 창이 생성될때 호출되는 콜백함수.
    alert(‍"창이 생성될때의 이벤트");
   },
   beforeClose: function(event,ui){   // 창이 닫히기 직전에 호출되는 콜백함수.
    alert(‍"창이 닫히기 직전때의 이벤트");
   },
   open: function(event,ui){  // 창이 열릴때 호출되는 콜백함수.
    alert(‍"창이 열릴때의 이벤트");
   },
   //focus: function(event,ui){  // 창에 포커스가 왔을때 호출되는 콜백함수.
    //alert(‍"창에 포커스가 왔을때의 이벤트");
   //},
   //dragStart: function(event,ui){  // 드래그가 시작될때 호출되는 콜백함수.
    //alert(‍"드래그가 시작될때의 이벤트");
   //},
   //drag: function(event,ui){  // 드래그 될때 호출되는 콜백함수.
    //alert(‍"드래그 될때의 이벤트");
   //},
   dragStop: function(event,ui){  // 드래그가 끝날때 호출되는 콜백함수.
    alert(‍"드래그가 끝날때의 이벤트");
   },
   resizeStart: function(event,ui){  // 리사이징이 시작될때 호출되는 콜백함수.
    alert(‍"리사이징이 시작될때의 이벤트");
   },
   resize: function(event,ui){  // 리사이징 될때 호출되는 콜백함수.
    alert(‍"리사이징 될때의 이벤트");
   },
   resizeStop: function(event,ui){  //  리사이징이 끝날때 호출되는 콜백함수.
    alert(‍"리사이징이 끝날때의 이벤트");
   },
   close: function(event,ui){  //  창이 닫힐때 호출되는 콜백함수.
    alert(‍"창이 닫힐때의 이벤트");
   }

  });

  // 버튼을 클릭하여 창을 열기.
  $("#btn_dialog1_open").click(function(){
   $("#dialog1").dialog("open");  // 첫번째 다이얼로그 박스를 오픈한다. 닫는것은 $("#dialog1").dialog("close");
  });

  $("#btn_dialog2_open").click(function(){
   $("#dialog2").dialog("open"); // 두번째 다이얼로그 박스를 오픈한다.
  });

  $("#btn_dialog3_open").click(function(){
   $("#dialog3").dialog("open"); // 두번째 다이얼로그 박스를 오픈한다.
  });
 });

 /*
  Methods
destroy
Signature: 
.dialog( "destroy" ) 
Remove the dialog functionality completely. This will return the element back to its pre-init state.

disable
Signature: 
.dialog( "disable" ) 
Disable the dialog.

enable
Signature: 
.dialog( "enable" ) 
Enable the dialog.

option
Signature: 
.dialog( "option" , optionName , [value] ) 
Get or set any dialog option. If no value is specified, will act as a getter.

option
Signature: 
.dialog( "option" , options ) 
Set multiple dialog options at once by providing an options object.

widget
Signature: 
.dialog( "widget" ) 
Returns the .ui-dialog element.

close
Signature: 
.dialog( "close" ) 
Close the dialog.

isOpen
Signature: 
.dialog( "isOpen" ) 
Returns true if the dialog is currently open.

moveTo‍Top
Signature: 
.dialog( "moveTo‍Top" ) 
Move the dialog to the top of the dialogs stack.

open
Signature: 
.dialog( "open" ) 
Open the dialog.


 */
  </script>
 </HEAD>

 <BODY style="font-size:70.5%;">
 <div id="dialog1" title="Dialog Title" style="border:1px solid">첫번째 다이얼로그 박스에용!!</div>
 <div id="dialog2" title="Dialog Title" style="border:1px solid">두번째 다이얼로그 박스에용!!</div>
 <div id="dialog3" title="세번째 다이얼로그" style="border:1px solid">세번째 다이얼로그 박스에용!!</div>
 <input type="button" id="btn_dialog1_open" value="첫번째 팝업 열기"/>
 <input type="button" id="btn_dialog2_open" value="두번째 팝업 열기"/>
 <input type="button" id="btn_dialog3_open" value=" 세번째 팝업 열기"/>
 </BODY>
</HTML>

저작자표시

'J-Query' 카테고리의 다른 글

modal popup 창 사용 부모 자식간의 데이터 전송  (0) 2013.05.10
jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경  (0) 2013.05.10
JQUERY!! 사이트  (0) 2012.11.26
extjs 공부해 보자.  (0) 2012.11.22
jquey ready? $(function(){});?  (0) 2012.11.22
Posted by 사라링
트랙백 : 댓글

JQUERY!! 사이트

 | J-Query
2012. 11. 26. 10:58

AJAX 가 웹 기술의 대세로 떠오르면서, Javascript 언어에 대해 새로운 접근들이 시도되고
다양한 AJAX 및 자바스크립트 라이브러리들이 출시되었습니다. 
많이 쓰이니까 쉽게 쓸 수 있도록 하는 방법들이 나오는 건 당연하겠죠.

Script.aculo.us, Prototype.js , MooTools , jQuery, YUI ( Yahoo UI Library ) 등등.. 

수 많은 Javascript 라이브러리중 최근의 대세는 jQuery – http://jquery.com/ 입니다.

Google Trends를 통해서 위의 Script 라이브러리들을 비교해보면 이렇습니다.

http://google.com/trends?q=jquery+%2C+script.aculo.us+%2C+prototype.js+%2C+yui+%2C+mootools&ctab=0&geo=all&date=all&sort=0 

자바스크립트 비교
그래프만 봐도 딱 보이시죠. 이렇게 jQuery 가 인기를 끌어가는데.. Microsoft 가 강펀치를 하나 날려줍니다.
위에 E 부분에 보면.. Microsoft 가 jQuery 를 Visual Studio 에 내장하겠다고 발표한게 보이실겁니다.
이제 ASP.NET 의 AJAX 프레임워크에서 jQuery 를 기본으로 내장하고 활용하게 되었습니다. – Microsoft to ship jQuery with Visual Studio 

또한 Nokia 역시, 그들이 만들고 있는 Web Kit 기반의 Web-Runtime에서 jQuery를 사용할 것이라고 발표하였습니다.
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/

Javascript 와 jQuery 공부하기


이제 Javascript 를 이용한 AJAX개발은 모든 웹 기반 개발의 기본기술이 되었습니다. 모바일 환경에서도 사용되는건 물론이구요.
한번 Javascript, AJAX와 jQuery 를 익혀보지 않으시겠습니까 ? 
공부하시는데 도움이 될만한 강의 문서들을 링크해 드립니다.

다소 좀 때늦은 포스팅이긴 하지만, 사내 메일링리스트에 보내느라 정리해둔게 있어서 늦게나마 기록차원에서 올려둡니다.

저작자표시

'J-Query' 카테고리의 다른 글

jquery 를 이용한 마우스를 올릴시에 백그라운드를 변경  (0) 2013.05.10
dialog 예제  (0) 2013.03.12
extjs 공부해 보자.  (0) 2012.11.22
jquey ready? $(function(){});?  (0) 2012.11.22
jquery 움직이는 스크롤 사이드바  (0) 2012.11.15
Posted by 사라링
트랙백 : 댓글

extjs 공부해 보자.

 | J-Query
2012. 11. 22. 18:48

버전 - 3.x 기준

 

EXT JS 예제 사이트  http://dev.sencha.com/deploy/ext-4.0.0/examples/

 

EXT JS 다운로드 사이트 http://www.sencha.com/products/extjs/download?page=a

 

Ext JS 디자이너 다운 http://www.sencha.com/forum/showthread.php?152941-Sencha-Designer-2-Beta-Download-links

 

위 사이트에세 책 저자가 가장 좋다고 생각하는 예제

 

  1. 'Feed Viewer'  - EXT JS의 가장 많은 장점을 보여주는 예제, 복잡함

 

   2.   'Simple Tasks' - Google Gears 데이터베이스를 이용하는 업무 관리 PG

 

 

 

■ EXT JS 란?

하나의 자바스크립트 라이브러리만이 아닌, 구조화된 서버 데이터에 기반을 둔 동적이고 배치가 자유로운 사용자 인터페이스를 만들어내는 클라이언트 라이브러리이다. 그렇지만 EXT JS는adapter를 사용하여 다른 자바스크립트 라이브러리와 같이 사용할 수 있다.

 

■ EXT JS 사용 용도

풍부한 사용자 상호작용을 제공하기 위한 웹 사이트를 제작할 때 사용

어떤 일을 처리하거나 어떤 흐름대로 처리해야 하는 웹 사이트가 가장 적합

 

■ EXT JS 제공하는 기능

-각 웹 브라우저의 환경에 맞게 미세 조정이 선행되어 있는 window, grid, form 과 같은 사용하기편리한 크로스-브라우저 위젯 제공

-윈도우 크기 변경이나 글씨 크기 변경 등에 발생하는 사용자 키눌림, 마우스 클릭, 모니터링 이벤트를 관리하는 EventManager를 통한 사용자 상호작용

-AJAX(비동기적인 데이터 요청 및 결과 처리를 가능하게 함)를 이용한 페이지 새로고침 없는 백그라운드에서의 서버와 통신

 

 

■ 어댑터

Ext JS는 두 개의 프레임워크, 즉 jQuery와 Protaculous를 두고 선택할 수 있게 하였다. 이는 다른라이브러리를 사용 중이었거나 다른 라이브러리가 더 적합하다고 판단된다면, 적절한 어댑터를 이용하여 Ext JS와 함게 사용할 수 있음을 말한다. 어느 쪽이든 Ext JS는 같은 기능을 제고하며, 어떤어댑터를 선택하든지 같은 커포넌트로 작업하게 될 것이다.

Ext JS는 환경변수(조건)와의 직접적인 인터페이싱을 위한 어댑터도 가지고 있다. 다른 라이브러리나 프레임워크를 선호하지 않는다면, Ext JS에 내장되어 잇는 어댑터만 사용해도 될 것이다.

[출처] Ext JS 란?|작성자 denees

저작자표시

'J-Query' 카테고리의 다른 글

dialog 예제  (0) 2013.03.12
JQUERY!! 사이트  (0) 2012.11.26
jquey ready? $(function(){});?  (0) 2012.11.22
jquery 움직이는 스크롤 사이드바  (0) 2012.11.15
jQuery 라이브러리 사용 방법  (1) 2012.11.15
Posted by 사라링
트랙백 : 댓글

jquey ready? $(function(){});?

 | J-Query
2012. 11. 22. 11:13

최근 자바스크립트 어플리케이션은 일반적으로  DOM이 완전히 로드된 후 코드를 수행한다.


이유는 코드에서 DOM탐색을 이용하는 경우가 자주 있으니까^^

따라서 웹 브라우저가 DOM은 완전히 로드했으나 이미지나 SWF파일 같은 자원들을 아직 로드하지 못한

시점을 알아내기 위한 방법이 필요합니다.


이를 위해서 window.onload를 이용한다면 자원을 포함한 전체문서 로드를 기다려야 하므로

기다리는 시간이 길어질 수 있습니다.


따라서 지금 필요한 건 DOM그 자체가 탐색과 조작을 위한 준비가 끝났다는 이벤트이고 

그 역할을 해주는 것이 ready메서드 입니다.


<script>

jQuery( document ).ready( function(){


   alert( jQuery( 'p' ).text() ); 


} );


</script>


<body>

<p>jQuery.ready실험</p>

</body>


ready()메서드는 window.onload이벤트를 대신하여 jQuery에서 제공해 주는  메서드입니다.

ready()메서드는 style선언을 한 이후에 사용하는 것이 좋습니다.

이유는 스타일시트가 다 로드된 후에 코드가 시작하는 것을 보장할 수 있으니까^^



ready()메서드에 대한 단축표현도 존재하는데 아래와 같습니다.


jQuery( function() { 

       // 실행 코드

 } );


이런 ready()메서드는 사실 자바스크립트가 페이지의 <head>요소 안에 놓여 있을 경우만 필요합니다.

대신 자바스크립트 코드와 인라인코드를 <body>를 닫기 바로 전에 두면 됩니다.


jQuery.ready실험





이것은 선택의 문제로 볼 수 있지만 자바스크립트를 </body> 태그 바로 전에 넣는

이유를 간단히 요약하면 아래와 같습니다.


최근 최적화 기술은 자바스크립트가 페이지 끝부분에서 로드되는 경우 페이지의 로드가 더 빨라진다고 한다.

즉 앞에서 로드하는 것보다 뒤에서 하는 것을 브라우저가 더 좋아라 한다.

대분분의 브라우저는 자바스크립트 엔진이 웹페이지에 있는 자바스크립트를 컴파일 할때까지 중단하기 

때문에 이런 처리가 더욱 효과적이라고 합니다.

물론 특정 상황에 따라 head에 넣을 수도 있겠죠^^


적은 량의 코드로 최적의 효과를 볼 수 있으니까

굳이 사용하지 않아도될 jQuery( document ).ready~ 등의 타이핑도 줄이고 

일반적인 실행시간도 적게 드니 당연안 결론이겠죠.


저작자표시

'J-Query' 카테고리의 다른 글

JQUERY!! 사이트  (0) 2012.11.26
extjs 공부해 보자.  (0) 2012.11.22
jquery 움직이는 스크롤 사이드바  (0) 2012.11.15
jQuery 라이브러리 사용 방법  (1) 2012.11.15
sliding  (0) 2012.11.15
Posted by 사라링
트랙백 : 댓글

jquery 움직이는 스크롤 사이드바

 | J-Query
2012. 11. 15. 21:06

jQuery로 웹사이트에서 마우스 스크롤을 했을때 봉봉 같이 따라 뎅기는 배너를 맨들려고 했는데 계산하기 귀찮아서 


어떤 머리좋은 사람이 분명히 훌러그인을 만들어 놨을것이라 확신하고 구글에게 물어보았다.


검색능력이 시원찮아서 그런가 많이 검색될 줄 알았더만 내가 원하는 훌러그인을 겨우 하나 발견했다.




"jquery.scrollfollow.js" 라는 훌러그인이었다.


사이트 주소 : http://kitchen.net-perspective.com/open-source/scroll-follow/



그런데 요 훌러그인을 옛날에 맨들어서 그런지 최신버전 jQuery 에서는 오류가 나서 정상적으로 작동하지 않았다.

(※ 요 훌러그인은 jQuery 1.2.6 에서 테스트 했다고 함. 참 옛날에 맹근것인가 보다)



꼴랑 요 훌러그인 하나 때문에 jQuery 버전을 후진걸로 바꿀수 없지 아니한가. 다른 훌러그인을 검색해 봐도 잘 검색도 안되고 해서 그냥 최신 버전 jQuery 에서 돌아가도록 소스를 살짝 수정하기로 했다.


현재 jQuery 1.7.1 을 쓰고 있는데 잘 작동한다.


수정버전 다운로드 ↓

 jquery.scrollfollow.js




◎ 사용법

사용법은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기에 나와있는 대로 하면 된다. 단, container 옵션은 잘 안될것 같다.

아래 코드로 테스트한 결과는 <== 요 옆에 꾸리하게 따라뎅기는 배너창이다.


※ 꿈지럭 거릴 div css 속성에서 position 은 absolute 나 relative 로 해야 한다.

※ 내가 이상하게 수정해서 그런지 몰라도 top 속성도 줘야 쪽바로 잘 움직이는듯 하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jquery.scrollfollow.js"></script>
     
    <script>
        $(document).ready(function(){
            $("#testbanner").scrollFollow({
                speed : 800,    // 꿈지럭 거리는 속도
                offset : 200     // 웹페이지 상단에서 부터의 거리(바꿔보면 뭔지 안다)
            });
        });
    </script>
     
    <style>
        #testbanner{
            position: absolute;
            border: 3px solid #f00;
 
            left : 100px;
            top : 30px;
            width: 150px;
            height: 300px;
        }
    </style>
</head>
 
<body>
    <div id="testbanner">
        봉봉 배너 테스트<br/>
        <a href="/">홈으로</a>
    </div>
</body>
</html>



기본옵션으로만 쓰고 싶으면 딸랑 요렇게만 해도 된다.

1
$("#testbanner").scrollFollow();



움직일때 easing 효과를 주고 싶으면 jQuery UI 훌러그인(jquery-ui-x.x.x.custom.min.js)을 뽓 추가시켜 easing 옵션을 주면 된다.

※ easing 옵션으로 가능한 문자열은 http://jqueryui.com/demos/effect/easing.html 요기에 있는 문자열 중에 하나로~

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.scrollfollow.js"></script>
     
<script>
    $(document).ready(function(){
        $("#testbanner").scrollFollow({
            easing : "easeInOutBack"
        });
    });
</script>


그 밖에 다른 옵션은 http://kitchen.net-perspective.com/open-source/scroll-follow/ 요기 참고~

저작자표시

'J-Query' 카테고리의 다른 글

extjs 공부해 보자.  (0) 2012.11.22
jquey ready? $(function(){});?  (0) 2012.11.22
jQuery 라이브러리 사용 방법  (1) 2012.11.15
sliding  (0) 2012.11.15
컬럼 추가 삭제  (0) 2012.09.10
Posted by 사라링
트랙백 : 댓글

jQuery 라이브러리 사용 방법

 | J-Query
2012. 11. 15. 21:02

jquery 를 사용하려면 문서내에 jquery 라이브러리를 정의해줘야 하는데, jQuery 라이브러리를 직접 다운로드 해서 정의해주는 방법과, CDN 서비스를 이용해서 정의하는 방법이 있다.

위의 링크로 접속한뒤, DOWNLOAD JQUERY 라는 타이틀의 섹션에서 최신(현재의) 버전을 다운로드 받은뒤 head 영역에서 <script> 태그로 불러와주면 된다. (당연히 다운로드받은 파일의 위치대로 지정해줘야 한다)
 

<head>

<script type="text/JavaScript" src="jquery-1.4.2.js"></script>

</head> 

 


CDN(content delivery network) 서비스 이용하기 
CDN 서비스는 분산 처리를 통해 빠른 컨텐츠를 제공한다. 구글, 마이크로소프트 에서 CDN 서비스를 무료로 제공하고 있으므로 링크 형식으로 불러와 사용하면 된다.
위와같은 링크로 접속한뒤, CDN HOSTED JQUERY 라는 타이틀의 섹션에서 Google Ajax API CDN, Microsoft CDN,jQuery CDN (via Media Temple) 중 원하는 것을 골라 적용시키면 된다.

google CDN 서비스에 대해서는 아래의 링크를 참고해도 된다.
http://code.google.com/intl/ko-KR/apis/libraries/devguide.html#jqueryUI

아래와 같은 형태로 jquery 라이브러리를 적용할 문서에 적용시킨다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> 



 
jquery 'CSS themes' CDN 서비스로 이용하기 
jquery themes CSS 또한 CDN 서비스로 제공되고 있다. 아래링크로 접속한뒤 여러가지 테마를 클릭해보면 즉석에서 적용되며 미리보기가 가능하다. 원하는 테마를 link 태그를 통해 문서내에 링크해주면 된다.
http://the-xavi.com/articles/jquery-ui-css-themes-hosted-on-cdn

하지만 직접 수정이 가능한걸 원한다면 아래링크로 들어가서 우측 'Theme' 에서 원하는 테마를 선택한뒤 다운로드해서 다운로드한 파일을 링크시켜줘야한다. 다운로드 받은 css파일을 직접수정 가능하기 때문에 간편하게 사용자 정의 테마를 만들어볼수도 있다.
http://jqueryui.com/download 

저작자표시

'J-Query' 카테고리의 다른 글

jquey ready? $(function(){});?  (0) 2012.11.22
jquery 움직이는 스크롤 사이드바  (0) 2012.11.15
sliding  (0) 2012.11.15
컬럼 추가 삭제  (0) 2012.09.10
jQuey 1.8 이 정식 릴리즈 되었습니다.  (0) 2012.08.24
Posted by 사라링
트랙백 : 댓글

sliding

 | J-Query
2012. 11. 15. 20:31

How does it work?

링크:  
http://www.smoothdivscroll.com/#quickdemo

The basic principle behind Smooth Div Scroll is simple: let one div (scrollableArea) scroll inside another div (scrollWrapper). Two hotspots are used to trigger the actual scrolling (scrollingHotSpotLeft andscrollingHotSpotRight). You can also let the user scroll using touch, the mouse wheel or just let the scroller auto scroll. The scrollWrapper determines how much of the scrollableArea that should be visible - everything outside the scrollWrapper is hidden from view.

Illustration showing the different elements of Smooth Div Scroll

Quick demo

Here's a quick demo of Smooth Div Scroll in action. I've set the options so the user can scroll using the hotspots or the mouse wheel . I've also told the scroller to start auto scrolling as soon as the page loads and stop auto scrolling as soon as the user interacts with the scoller. Touch scrolling is not enabled for this particular demo - check out the touch demo if you want to try touch scrolling.

RiverTrainLeafDogFieldGnomePencilsGolf

The jQuery code for this particular demo looks like this:


<script type="text/javascript">
	$(document).ready(function () {
		$("#makeMeScrollable").smoothDivScroll({
			mousewheelScrolling: "allDirections",
			manualContinuousScrolling: true,
			autoScrollingMode: "onStart"
		});
	});
</script>

In this particular demo I've set some options that override the default options:

  • mousewheelScrolling: "allDirections" - The user can scroll using the mouse wheel, both horizontally and vertically (not all mice have a vertical scrolling function though)
  • manualContinuousScrolling: true - The scroller becomes endless in both directions when the user scrolls manually (using the hotspots or the mousewheel).
  • autoScrollingMode: "onStart" - The scroller will start auto scrolling as soon as the page has loaded and stop auto scrolling as soon as the user interacts with the scoller.

I've used only a few of all the available options. You'll find all the options described here.) In the demo above the HTML-code looks like this:


	<div id="makeMeScrollable">
		<img src="images/demo/field.jpg" alt="Field" id="field" />
		<img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
		<img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
		<img src="images/demo/golf.jpg" alt="Golf" id="golf" />
		<img src="images/demo/river.jpg" alt="River" id="river" />
		<img src="images/demo/train.jpg" alt="Train" id="train" />
		<img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
		<img src="images/demo/dog.jpg" alt="Dog" id="dog" />
	</div>

As you can see there is a surrounding div with the id makeMeScrollable. This is the element that I turn into a Smooth Div Scroll. Inside this div you can put any content - not just images.

Please note that you may have to give the elements that you put inside the scrollable area some styling to make sure that they are positioned like you want them. Here's a good template to start with:


#makeMeScrollable div.scrollableArea *
{
	position: relative;
	display: block
	float: left;
	margin: 0;
	padding: 0;
	/* If you don't want the images in the scroller to be selectable, try the following
		block of code. It's just a nice feature that prevent the images from
		accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

In this example there's no space between the elements inside the scrollable area. If you want a space between them, use padding and not margin since margin tends to generate errors in Internet Explorer.


저작자표시

'J-Query' 카테고리의 다른 글

jquery 움직이는 스크롤 사이드바  (0) 2012.11.15
jQuery 라이브러리 사용 방법  (1) 2012.11.15
컬럼 추가 삭제  (0) 2012.09.10
jQuey 1.8 이 정식 릴리즈 되었습니다.  (0) 2012.08.24
jQuery.slide()  (0) 2012.07.10
Posted by 사라링
트랙백 : 댓글

컬럼 추가 삭제

 | J-Query
2012. 9. 10. 18:49

CREATE TABLE

col_name DataType DataSize NOT NULL PK
  Constraint FOREIGN KEY
REFERENCES ( )
||




<style>



#bodyBG {

 background: #8c92ac;

 background: -moz-linear-gradient(bottom, #8c92ac, #fff) no-repeat;

 background: -o-linear-gradient(bottom, rgb(140,146,172), rgb(255,255,255)) no-repeat;

 background: -webkit-gradient(linear, center bottom, center top, from(#8c92ac), to(#fff)) no-repeat;

}

</style>



<script type="text/javascript">

$(function(){

var strCr = "";

var strRef = "";

var strRefCol = "";

$("#helperOK").live("click",function(){

var result="";

var primarySQL="";

var sqlInfo=$("#dialog-createTable tr");

//$("#dialog-createTable tr").each()

result +="CREATE TABLE "+sqlInfo.eq(0).find("#table_name").val()+"\n(\n";

for(var i=2;i<(sqlInfo.size()-3);i++){

if(sqlInfo.eq(i).find(".col_Name").val()!=""){

result +=sqlInfo.eq(i).find(".col_Name").val()+" ";

result +=sqlInfo.eq(i).find("#col_Type option:selected").text();

result +=" ("+sqlInfo.eq(i).find(".col_Size").val()+") ";

/* alert(sqlInfo.eq(i).find("#col_check").attr('checked'));

return; */

if(sqlInfo.eq(i).find("#col_check").attr('checked')){

result += " NOT NULL ,\n";

}else {

result += " ,\n";

}

if(sqlInfo.eq(i).find(".col_Primary").attr('checked')){

primarySQL ="PRIMARY KEY ("+sqlInfo.eq(i).find(".col_Name").val()+")";

}

}else {

alert("모두 채우셔야 합니다.");

return;

}

}

result +=primarySQL;

if($(".create_constraint").val()!="####_PK"){

result +=",\n CONSTRAINT "+$(".create_constraint").val();

result +=" "+$("#create_foreign option:selected").text();

result +=" REFERENCES "+$("#create_reference option:selected").text()+" ("+$("#create_reference_table option:selected").text()+")";

}else{

result +="\n"

}

result+=")";

// 이런식으로 저장 해보자. 부모장에 돌려 주기. 

window.opener.document.getElementById("sqlInput").value=result;


window.open("about:blank","_self").close();

});

$("#helperCancel").live("click",function(){

// self.closed();   <-- 일부 브라우저 에서 작동 안한다 . crom x

                        alert("닫기는 브라우저 를 전체로 닫기 때문에 막아 놓았습니다. ");

                        return;

window.open("about:blank","_self").close();

});

$("#create_foreign").live("click", function() {

var str="";

var sqlInfo=$("#dialog-createTable tr");

for(var i=2;i<(sqlInfo.size()-4);i++){

str +="<option>"+sqlInfo.eq(i).find(".col_Name").val()+"</option>";

}

if(str!=strCr){

strCr=str;

$("#create_foreign").html(str);

}

});


$("#btncolAdd").live("click",function(){

var innerTR_Col="";

innerTR_Col+="<tr>                                                                      ";

innerTR_Col+=" <td align='center'><input type='text' size='15'                       ";

innerTR_Col+=" class='col_Name' title='컬럽 이름' /></td>                           ";

innerTR_Col+=" <td align='center'><select title='데이터 타입' id='col_Type'>              ";

innerTR_Col+=" <option>VARCHAR2</option>                                     ";

innerTR_Col+=" <option>NUMBER</option>                                       ";

innerTR_Col+=" <option>CHAR</option>                                         ";

innerTR_Col+=" <option>DATE</option>                                     ";

innerTR_Col+=" <option>TIMESTAMP</option>                                    ";

innerTR_Col+=" <option>DEC</option>                                          ";

innerTR_Col+=" <option>BOLB</option>                                         ";

innerTR_Col+=" <option></option>                                             ";

innerTR_Col+=" </select></td>                                                        ";

innerTR_Col+=" <td align='center'><input type='text' size='3'                       ";

innerTR_Col+=" class='col_Size' value='10' title='데이터 사이즈' maxlength='3' />     ";

innerTR_Col+=" </td>                                                                 ";

innerTR_Col+=" <TD align='center'><input type='checkbox' id='col_check'            ";

innerTR_Col+=" title='NULL 허용 여부'  /></TD>                      ";

innerTR_Col+=" <td align='center'><input name='primary' type='radio'                 ";

innerTR_Col+=" class='col_Primary' title='기본키'/></td>         ";

innerTR_Col+="</tr>                                                                     ";

$("#btncolAddSpan").append(innerTR_Col);

});


$("#create_reference").live("click", function() {

//

$.ajax({

"url" : "tableData.do",

"type" : "post",

"dataType" : "json",

"data" : {

"dataType" : "init"

},

"success" : function(data) {

var str ="";

$.each(

data,

function(i, v) {

str +="<option>"+v.TableName+"</option>";

});

if (str != strRef) {

strRef = str;

$("#create_reference").html(str);

}


// 테이블 가져 왔는지 확인

//alert(tableListArray.toString());

},

"error" : function(info, xhr) {

if (info.readyState == '4') {

alert('문제가 발생했습니다.\n상태코드 : ' + info.status + '\n\n'

+ info.responseText);

} else {

alert('문제가 발생했습니다.\n잠시후 다시 시도해 주세요.\n 상태코드 : '

+ info.status);

}

}

});

});

$("#btncolMinus").live("click",function(){

var sqlInfo=$("#dialog-createTable tr");

var maxSize=sqlInfo.size();

if(maxSize<=6){

return;

}

$("#dialog-createTable tr").eq(maxSize-4).remove();

});

$("#create_reference_table")

.live(

"click",

function() {

var x = document

.getElementById("create_reference");

//alert(x.options[x.selectedIndex].value);

var ref_selected = x.options[x.selectedIndex].value;

var str = "";

$

.ajax({

"url" : "tableData.do",

"type" : "post",

"dataType" : "json",

"data" : {

"dataType" : "Reference_col",

"selectedItem" : ref_selected

},

"success" : function(data) {

//alert("가져온 데이터 입니다 . " + data);

$.each(data, function(i, v) {

str += "<option>"

+ v.column

+ "</option>";

});

if (str != strRefCol) {

strRefCol = str;

$("#create_reference_table")

.html(str);

}


},

"error" : function(info, xhr) {

if (info.readyState == '4') {

alert('문제가 발생했습니다.\n상태코드 : '

+ info.status

+ '\n\n'

+ info.responseText);

} else {

alert('문제가 발생했습니다.\n잠시후 다시 시도해 주세요.\n 상태코드 : '

+ info.status);

}

}

});


});

});

</script>

<div id="bodyBG">

<div id="dialog-createTable" style="width: 500px; height: 370px; ">

<form name="createForm">

<table style="width: 500px; height: 250px; overflow: auto;">

<tbody><tr>

<td colspan="3">

<h3>

CREATE TABLE <input id="table_name" name="table_name" type="text" size="15" class="create_Name" title="테이블 이름">

</h3>

</td>

<td>

</td>

<td colspan="2">

<input id="btncolAdd" type="button" value="+" title="컬럼추가">

<input id="btncolMinus" type="button" value="-" title="컬럼 삭제">

</td>

</tr>

<tr>

<td width="162" align="center">col_name</td>

<td width="153" align="center">DataType</td>

<td width="69" align="center">DataSize</td>

<td width="72" align="center">NOT NULL</td>

<td width="69" align="center">PK</td>

</tr>

<tr>

<td align="center"><input type="text" size="15" class="col_Name" title="컬럽 이름"></td>

<td align="center"><select title="데이터 타입" id="col_Type">

<option>NUMBER</option>

<option>VARCHAR2</option>

<option>CHAR</option>

<option>DATE</option>

<option>TIMESTAMP</option>

<option>DEC</option>

<option>BOLB</option>

<option></option>

</select></td>

<td align="center"><input type="text" size="3" class="col_Size" value="10" title="데이터 사이즈" maxlength="3">

</td>

<td align="center"><input type="checkbox" id="col_check" title="NULL 허용 여부" checked="checked"></td>

<td align="center"><input name="primary" type="radio" class="col_Primary" title="기본키" checked="checked"></td>

</tr>

</tbody><tbody id="btncolAddSpan" style="overflow: auto;">

</tbody>

<tbody><tr>

<td colspan="5"></td>

</tr>

<tr>

<td colspan="5">

&nbsp;&nbsp;Constraint <input type="text" size="6" class="create_constraint" title="제약명을 입력해주세요." value="####_PK">FOREIGN KEY <select id="create_foreign">

<option>클 릭</option>

</select> 

</td>

</tr>

<tr>

<td>

</td>

<td colspan="5" style="text-align: left;">

REFERENCES <select id="create_reference">

<option>클 릭</option>

</select> ( <select id="create_reference_table">

<option>클 릭</option>

</select> )

</td>

</tr>


<tr style="height: 80px">

<td colspan="3">

</td>

<td colspan="2">

<input id="helperOK" type="button" value="O K">||<input id="helperCancel" type="button" value="Cancel">

</td>

</tr>

</tbody></table>

</form>


</div>

</div>

저작자표시

'J-Query' 카테고리의 다른 글

jQuery 라이브러리 사용 방법  (1) 2012.11.15
sliding  (0) 2012.11.15
jQuey 1.8 이 정식 릴리즈 되었습니다.  (0) 2012.08.24
jQuery.slide()  (0) 2012.07.10
body CSS 그라데이션 흰색 - > 블랙  (0) 2012.06.22
Posted by 사라링
트랙백 : 댓글

jQuey 1.8 이 정식 릴리즈 되었습니다.

 | J-Query
2012. 8. 24. 10:10

http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/


입니다. 



jquery-1.8.0.js


jquery-1.8.0.min.js



필요 하신분은 다운 받아 가세요. 




저작자표시

'J-Query' 카테고리의 다른 글

sliding  (0) 2012.11.15
컬럼 추가 삭제  (0) 2012.09.10
jQuery.slide()  (0) 2012.07.10
body CSS 그라데이션 흰색 - > 블랙  (0) 2012.06.22
jQuey eq form 값 반디 모음 1  (0) 2012.06.22
Posted by 사라링
트랙백 : 댓글

jQuery.slide()

 | J-Query
2012. 7. 10. 14:10

.slideUp( [duration] [, callback] )Returns : jQuery

개요 : 슬라이드를 이용해 요소를 숨깁니다.

  • .slideUp( duration [, callback] )
  • duration 시간 값
  • callback 콜백 함수
  • .slideUp( [duration] [, easing] [, callback] )
  • duration 시간 값
  • easing 특수한 효과 함수
  • callback 콜백 함수

.slideUp() 함수는 요소의 height 값을 조작해서 움직임을 만들어 냅니다. 보이게 처리할 때 display 속성값을 jQuery 의 데이터 캐쉬에 저장 해두었다가 나중에 display 를 초기값으로 복원해줍니다. 만일 요소의 display 스타일 속성값이 inline 이었다면, display 속성값이 inline 으로 복원된다는 의미입니다.

시간값(Duration)의 기본값은 밀리세컨드이고, 값이 크면 느린 효과가 나타납니다. 물론 반대는 빨라지겠죠. 'fast' 와'slow' 문자열을 지원하는데, 각각은 200 과 600 밀리세컨드를 의미합니다.

이미지를 예로 보겠습니다.

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').click(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.
  });
});

   

시작과 끝 효과 ( Easing )

.animate() 인자 중에 남은 하나는 속도 늦추는 함수(easing function)에 대한 내용입니다. 이 easing 함수는 속도에 대한 내용입니다. 움직임이 한쪽 끝에 닿았을때 처리되는 행동패턴에 대한 내용입니다. jQuery에서 easing 은 기본으로 swing 을 사용합니다. swing은 끝점에 가서 속도가 살짝 느려집니다. 또 하나는 속도를 그대로 유지하는 linear입니다. easing 함수들을 정상적으로 사용하려면 plug-ins 들이 필요합니다. 대부분 jQuery UI suite 쪽에 정의되어 있습니다.

콜백 함수 ( Callback Function )

애니메이션이 완료된 후 사용될 콜백함수입니다. 이 콜백함수는 인자를 전달할 수 없지만, this 를 이용하여 애니메이션이 일어난 요소 자체를 전달할 수는 있습니다. 만일 여러개의 요소에 움직임 효과를 주었다면 각각의 애니메이션 효과가 일어난 뒤에 개별적으로 콜백함수가 실행이 됩니다.

jQuery 1.6 버전부터는, deferred.done() 와 함께 .promise() 함수를 사용하여 모든 움직임이 끝난 후 한번만 콜백함수를 실행할 수 있게 되었습니다. ( .promise() 함수 예제 링크 ).

.slideUp() 을 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.

예 제  
모든 div 태그를 슬라이드 업 합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#3d9a44; margin:3px; width:80px; 
    height:40px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
<script>
  $(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
      $("div").show("slow");
    } else {
      $("div").slideUp();
    }
  });

  </script>

</body>
</html>

미리보기

슬라이드 업 되면서 사라집니다.

 

예 제  
부모 p 태그를 슬라이드 업하고 완료되면 메시지 처리를 합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
 div { margin:2px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <button>Hide One</button>
  <input type="text" value="One" />

</div>
<div>
  <button>Hide Two</button>
  <input type="text" value="Two" />

</div>
<div>
  <button>Hide Three</button>
  <input type="text" value="Three" />

</div>
<div id="msg"></div>
<script>
  $("button").click(function () {
    $(this).parent().slideUp("slow", function () {
      $("#msg").text($("button", this).text() + " has completed.");
    });
  });

</script>

</body>
</html>

미리보기

콜백 함수 사용이 핵심이네요.

 

슬라이드 업은 뭔가를 숨길때 hide 와 자웅(?)을 다툴수 있겠네요. ^^

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자표시

'J-Query' 카테고리의 다른 글

컬럼 추가 삭제  (0) 2012.09.10
jQuey 1.8 이 정식 릴리즈 되었습니다.  (0) 2012.08.24
body CSS 그라데이션 흰색 - > 블랙  (0) 2012.06.22
jQuey eq form 값 반디 모음 1  (0) 2012.06.22
select 태그에서 선택된 option 값 알아보기  (1) 2012.06.15
Posted by 사라링
트랙백 : 댓글

body CSS 그라데이션 흰색 - > 블랙

 | J-Query
2012. 6. 22. 18:17

<style>


body {

 background: #8c92ac;

 background: -moz-linear-gradient(bottom, #8c92ac, #fff) no-repeat;

 background: -o-linear-gradient(bottom, rgb(140,146,172), rgb(255,255,255)) no-repeat;

 background: -webkit-gradient(linear, center bottom, center top, from(#8c92ac), to(#fff)) no-repeat;

}

</style>





저작자표시

'J-Query' 카테고리의 다른 글

jQuey 1.8 이 정식 릴리즈 되었습니다.  (0) 2012.08.24
jQuery.slide()  (0) 2012.07.10
jQuey eq form 값 반디 모음 1  (0) 2012.06.22
select 태그에서 선택된 option 값 알아보기  (1) 2012.06.15
Build CRUD Application with jQuery EasyUI  (0) 2012.06.14
Posted by 사라링
트랙백 : 댓글

jQuey eq form 값 반디 모음 1

 | J-Query
2012. 6. 22. 14:08


jquery selectbox(중요)  JQuery 

2012/05/04 11:29

복사http://blog.naver.com/crazymania/10138015840

jQuery로 선택된 값 읽기

$("#select_box option:selected").val();
$("select[name=selectbox]").val();

jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected")); 



// 셀렉트 박스 옵션에 추가(기존 옵션 뒤쪽으로 추가)

$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// 옵션 시작 부분(맨 앞에) 추가
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// 옵션값을 새롭게 정의
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// 옵션값의 인덱스 번호를 변경
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// 2번 인덱스의 값을 선택된 상태로 변경
$("#myselect option:eq(2)").attr("selected", "selected");

// 텍스트 내용으로 선택된 상태로 변경
$("#myselect").val("Some oranges").attr("selected", "selected");

// 선택된 옵션의 값을 변경
$("#myselect").val("2");

// index번호가 0인것을 제거
$("#myselect option:eq(0)").remove();

// 첫번째 옵션 엘리먼트를 제거
$("#myselect option:first").remove();

// 마지막 옵션 엘리먼트를 제거
$("#myselect option:last").remove();

// 선택된 텍스트 알림으로 보이기
alert($("#myselect option:selected").text());

// 선택된 값 알림으로 보이기
alert($("#myselect option:selected").val());

// 선택된 옵션의 인덱스 번호 보이기
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// 0번 인덱스 다음으로 옵션을 추가
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번 인덱스 이전에 옵션을 추가
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// select 박스의 값이 변경되었을 때 알링으로 값과 텍스트 보이기
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

[출처] jquery selectbox(중요)|작성자 미친곰

저작자표시

'J-Query' 카테고리의 다른 글

jQuery.slide()  (0) 2012.07.10
body CSS 그라데이션 흰색 - > 블랙  (0) 2012.06.22
select 태그에서 선택된 option 값 알아보기  (1) 2012.06.15
Build CRUD Application with jQuery EasyUI  (0) 2012.06.14
슬라이드 시계  (0) 2012.06.13
Posted by 사라링
트랙백 : 댓글

select 태그에서 선택된 option 값 알아보기

 | J-Query
2012. 6. 15. 13:25

select 태그에서 선택된 option 값 알아보기

코드는 아래와 같습니다.

<html>
<head>
<script type="text/javascript">
function getIndex()
  {
  var x=document.getElementById("mySelect");
  alert(x.options[x.selectedIndex].value);
  }
</script>
</head>
<body>
Select your favorite fruit:
<select id="mySelect">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</body>
</html>

이 소스는 인터넷에 있는 소스를 약간 수정하여서 써보았다.
원본소스는 아래의 링크로 가보면 있다.
http://www.w3schools.com/htmldom/prop_select_selectedindex.asp

EditPlus 혹은 기타 편집기 (Notepad도 좋다.) 에 소스를 복사하여 넣은뒤에
적당한 이름을 붙이고 html 파일로 저장해보자.

그리고 html 파일을 실행하여보면

사용자 삽입 이미지


저작자표시

'J-Query' 카테고리의 다른 글

body CSS 그라데이션 흰색 - > 블랙  (0) 2012.06.22
jQuey eq form 값 반디 모음 1  (0) 2012.06.22
Build CRUD Application with jQuery EasyUI  (0) 2012.06.14
슬라이드 시계  (0) 2012.06.13
JQuery 시계  (0) 2012.06.13
Posted by 사라링
트랙백 : 댓글
<< PREV : [1] : [2] : [3] : NEXT >>
BLOG main image
.. by 사라링

카테고리

사라링님의 노트 (301)
JSP (31)
J-Query (41)
JAVA (24)
VM-WARE (0)
디자인패턴 (1)
스크랩 (0)
스트러츠 (3)
안드로이드 (11)
오라클 (45)
우분투-오라클 (1)
이클립스메뉴얼 (6)
스프링3.0 (23)
자바스크립트 (10)
HTML5.0 (17)
정보처리기사 (1)
기타(컴퓨터 관련) (1)
문제점 해결 (3)
프로젝트 (2)
AJAX (4)
하이버네이트 (3)
트러스트폼 (11)
Jeus (2)
재무관리(회계) (5)
정규식 (5)
아이바티스 (8)
취미 (2)
소프트웨어 보안 관련모음 (0)
정보보안기사 (6)
C언어 베이직 및 프로그램 (3)
보안 관련 용어 정리 (2)
넥사크로 (6)
Total :
Today : Yesterday :
rss