MobiScroll 을 사용하던 중...안드로이폰에서 반응속도 너무 떨어져서 다른 모듀을 찾다가 발견한 Dojo ..이름은 많이 들어봤는데..막상 사용하려하니..이거 무지 어렵게 보인다..도무지 문서도 찾을 수 없고 jQuery “jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” source: http://jquery.com/ 장점 가장 인기있다 ..
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..
[data-role="listview"] 리스트 만들기 & 리스트에 동적으로 데이타 추가하기
리스트 만들기 리스트에 동적으로 데이타 추가하기 HTML 작성하기 자바스크립트 작성하기 자바스크립트 호출하기 속성값 변경 및 추가 테스트 HTML 작성하기 data-role="listview" 를 사용한다. list old data old data 자바스크립트 작성하기 동적으로 추가한 뒤에 .listview('refresh') 를 해줘야 화면 디자인이 제대로 나온다. 자바스크립트 호출하기 data-icon="plus" 를 태그 안에 추가하면 버튼 앞 쪽에 아이콘이 보인다. 새 데이타 추가 속성값 변경 및 추가 테스트 list old data [delete icon]old data [star icon]old data [info icon]old data 참고 http://jquerymobile.com/dem..
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..
Google unveils super-fast Crankshaft Javascript engine for Chrome browser If you thought Google Chrome was the fastest browser out there, well, it just got a whole lot faster again. Google realizes Chrome is known for its speed and users appreciate that, so its engineers have been hard at work trying to turn the Javascript engine up to 11 on the speed scale. The result is a new engine called Cra..