jQuery 동영상 강의 흐미~넘 좋은 강의인데...무료란다. 한 강좌당 시간도 길지 않으니..매일 틈내서 들어야겠다. 강의보기 : 30 Days to Learn jQuery 목차 Basic Hello jQuery Not So Fast, jQuery The Basics of Querying the DOM Events 101 Events 201 Bind...Live...Delegate...Huh? Creating and Appending Content [Day01] Hello jQuery (10m 59s) 환경설정 jQuery 라이브러리 다운로드 : 개발자 버전(jquery.com) 에디터 : sublime text 2 웹 브라우저 + 개발자 도구 : 크롬 jQuery 라이브러리 선언 Body 태그 맨 아..
파폭이 문제야 웹표준 및 웹접근성 작업을 하던중.... 파폭화면에서 셀렉트박스의 엔터키 기능이 먹히지 않는다는 것을 발견 원인은... 키보드가 한글입력일 경우 keypress 이벤트가 먹히지 않는 것이다..헐~ 문제해결 : jQuery 가 갑! 사랑스런 jQuery ~ jQuery 는 모든 브라우저에 적용되는 이벤트를 등록할 수 있다. 해서...jQuery를 이용해서 keypress 이벤트를 등록하니 문제 해결 $j('#keyword').keyup(function(event){ if (event.which == 13) { 블라블라블라 } });
http://api.jquery.com/category/events/event-object/ event 사용쟈가 버튼을 클릭하는 것처럼 페이지에서 어떤 일이 일어날때 코드가 실행될 수 있도록 만드는 메커니즘 event listener Document Object Model(DOM)의 한부분 event listener 는 페이지에서 사람이 하는 일에 주의를 기울여는 브라우저의 방식으로 필요에따라 무엇을 할지 JavaScript interpreter에게 전달한다. cf. handler function : 이벤트가 트리거될 때 실행되는 코드의 블럭 event binding 엘리먼트에 이벤트를 추가할 때 "binding"이라 부른다. 이것을 통해 이벤트 리스터는 자바스크립트 인터프리터에 어떤 함수가 호출되지 말..
Wire up your web page Structure = HTML Stype = CSS Script = jQuery(and JavaScript) 저장공간 만들기 jQuery에서 변수를 사용하길 원한다면 JavaScript의 변수를 사용한다. 사용 예 var pts = 250 ; var 변수를 선언하는 키워드 JavaScript interpreter가 데이타를 저장할 수 있는 브라우저의 메모리 영역에 공간을 만든다. pts 변수의 이름 스크립트가 참조 할 수 있는 레퍼런스가 된다. =250 변수에 값을 담는다. $(this) 사용하기 "현재" 앨리먼트를 선택한다. $(this) 는 context-dependent 이다. 즉 사용하는 시점이나 장소에 따라 의미가 달라진다.
문제 인식 페이지를 변경하려면 매번 서버에 요청해야 하나? HTML과 CSS는 페이지의 구조와 스타일을 만드는 데 충분한다. 브라우저가 서버에 웹 페이지 요청 웹 서버가 요청된 페이지를 찾아서 보내줌 브라우저는 받아온 페이지를 렝더링하여 화면에 보여줌 때때로 리로딩 없이 페이지를 변경하기 위해 웹브라우저와 대화하려면 어떻해야 하나? jQuery function 소개 jQuery() 는 $()로 단축하여 사용한다. $()에 들어가는 내용 CSS Selector : CSS selector를 넣으면 매칭되는 엘리먼트를 리턴한다. 제일 많이 사용하는 경우이다. HTML : HTML을 넣어서 동적으로 브라우저 페이지에 DOM 엘리먼트들을 추가할 수 있다. JavaScript Object CSS selector 와..
드디어 책이 도착했다~~~.^^ 비록 원서이긴 하나 이 책의 가장 큰 특징!! 그림이 많다!! 11개의 챕터로 구성되는데 매일 매일 열심히 탐독해서 완독. 고고고!! 준비물 텍스트 에디터 브라우저 : 3개 이상을 설치하여 비교해 본다. 웹 서버 JQuery library Google Chrome Developer Tools 브라우저 개발 툴 미리 사용법을 숙지한다. 링크 : Google Chrome Developer Tools The Developer Tools are heavily based on the WebKit Web Inspector, a part of the open source WebKit project. jQuery 다운로드 http://jquery.com/ 예제 소스 설치 Head Fir..
배열이나 객체같은 JavaScript type 데이타를 HTML 또는 텍스트로 작성된 템플릿과 함께 간편하게 렌더링 할 수 있는 자바 스크립트이다. http://api.jquery.com/template-tag-tmpl/ version added: 1.4.3{{tmpl( [data], [options] ) template}} content {{/tmpl}}templateThe HTML markup or text to use as a template. dataThe data to render. This can be any JavaScript type, including Array or Object. optionsAn optional map of user-defined key-value pairs. Exte..
ttp://ajaxdump.com/?tqSDBVlK JQuery Mobile의 매력은 디자인에 고민할 필요가 없이 세련된 UI를 가질 수 있다. 물론 안드로이드 앱 개발시 기기별 파편화도 신경쓸 필요가 없다. PC용 웹브라우저에서 테스트해 보니 IE : CSS 가 잘 안먹힌다...한마디로 꽝 크롬 : 음...에러나는 기능이 발견된다... 파폭 : 아주 잘~ 돌아간다. 1. 기본 HTML 작성 타이틀 : jQuery Mobile Test jQueryMobile 시작 About jQueryMobile About jQueryMobile jQuery Mobile를 배워보자~ 얘는 다른 페이지에 보이고 싶다.. 꼬리말은 여기에 2. jQuery Mobile CSS, JavaScript 추가하기 아직까지 아무런 변..
■ Ajax 웹 프로그래밍 기술에서 가장 인기있는 기술 중 하나 HTTP scripting을 사용해서 페이지의 refeshes없이 데이타를 로드한다. jQuery는 강력한 low-level function jQuery.ajax() 으로 하나의 high-level utility method 와 네개의 high-level utility functions 를 정의한다. ■ The load() Method 모든 jQuery utilities의 가장 간단한 메소드 URL을 비동기로 넘겨서 그 내용물을 가져오고, 그것을 선택된 엘리먼트에 넣거나 대체한다. // Load and display a status report every 60 seconds setInterval(function() { $("#stats")...
http://jquery.com/ http://docs.jquery.com/Downloading_jQuery 광범위하게 사용되는 자바스크립트 ajax 이름이 암시하는 것처럼 query 에 초점을 맞춘 라이브러리 jQuery 의 특징 • An expressive syntax (CSS selectors) for referring to elements in the document • An efficient query method for finding the set of document elements that match a CSS selector • A useful set of methods for manipulating selected elements • Powerful functional programmi..