DOCSLIB.ORG

Developing Ajax Applications V1.0 Course Summary

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Developing Ajax Applications V1.0 Course Summary "Charting the Course ... ... to Your Success!" Developing Ajax Applications v1.0 Course Summary Description This course introduces the Ajax programming model for web applications. We start with a tour of basic browser programming, using JavaScript, the HTML DOM, and CSS. Then, students learn how to establish communication between their on-page JavaScripts and server-side application components, and thus to develop richer, more user-friendly and responsive web applications. We pursue Ajax connectivity entirely from the client side in this course, and at several levels. From an initial study of the bare-bones approach using the XMLHttpRequest browser object, we move on to consider programming techniques for thread safety, and use of higher-level script libraries such as Prototype and Dojo. Objectives At the end of this course, students will be able to: Use JavaScript in web pages to respond to user events. Manipulate an HTML page dynamically using the DOM. Make HTTP requests to the server side of an application from JavaScript, without causing the browser to reload the page. Use script libraries such as Prototype and Dojo to simplify coding tasks and improve UI functionality. Topics Overview of Ajax JavaScript The Document Object Model Cascading Style Sheets Making Remote Requests Prototype & Co. Dojo Audience This course is intended for software developers, and some programming experience is assumed. Familiarity with basic HTML constructs is required Prerequisites Prior knowledge of JavaScript, CSS, or the HTML DOM will be helpful, but no such knowledge is required. Duration Three days Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT8075_DEVELOPINGAJAXAPPLICATIONSV10.DOC "Charting the Course ... ... to Your Success!" Developing Ajax Applications v1.0 Course Outline I. Overview of Ajax V. Making Remote Requests A. What is Ajax? A. iFrames vs. XMLHttpRequest B. Desktop vs. Browser-Based Applications B. Getting an XHR Instance C. Page Request/Response Issues C. XHR Methods and Properties D. The XMLHttpRequest Object D. Synchronous vs. Asynchronous E. Ajax Processing E. Data Formats F. Client-Side Frameworks F. Extensible Markup Language (XML) G. Server-Side Frameworks G. Receiving XML H. Criticism of Ajax H. Building and Sending XML I. JavaScript Object Notation (JSON) II. JavaScript A. Syntax VI. Prototype & Co. B. Variables A. Client-Side Frameworks C. Data Types B. Script Libraries D. Arithmetic and String Operators C. Ajax Issues E. Conditionals and Loops D. Prototype F. Logical and Comparison Operators E. A Review of prototype.js G. Functions F. Ajax.Request H. Variables Scope G. The Options Object I. Objects and Encapsulation H. The $ Function J. Constructors I. Other Convenience Functions K. Prototypes J. String Functions L. Closures K. Algorithmic Programming M. Arrays VII. Dojo III. The Document Object Model A. The Dojo Toolkit A. The Document Object Model B. Architecture B. The DOM Node Tree C. Dojo Namespaces C. The Document and Window Objects D. Simplified DOM Manipulation D. Elements E. dojo.xhrGet and dojo.xhrPost E. Attributes F. Response Content Types F. Text Nodes G. The Dojo Event System G. Walking the Tree H. Event Registration H. DOM Events I. Disconnecting Event Handlers I. Modifying the DOM J. Chaining Event Handlers J. Using innerHTML K. The Dojo Widget System L. Built-In Widgets IV. Cascading Style Sheets M. Custom Widgets A. Styling an Element N. Drag-and-Drop Support B. Cascading Styles C. Elements, Classes, and IDs VIII. Appendix A. Learning Resources D. The Box Model E. CSS2 Positioning F. Controlling Visibility Due to the nature of this material, this document refers to numerous hardware and software products by their trade names. References to other companies and their products are for informational purposes only, and all trademarks are the properties of their respective companies. It is not the intent of ProTech Professional Technical Services, Inc. to use any of these names generically PT8075_DEVELOPINGAJAXAPPLICATIONSV10.DOC .
Load more

Recommended publications
  • THE FUTURE of SCREENS from James Stanton a Little Bit About Me
    THE FUTURE OF SCREENS From james stanton A little bit about me. Hi I am James (Mckenzie) Stanton Thinker / Designer / Engineer / Director / Executive / Artist / Human / Practitioner / Gardner / Builder / and much more... Born in Essex, United Kingdom and survived a few hair raising moments and learnt digital from the ground up. Ok enough of the pleasantries I have been working in the design field since 1999 from the Falmouth School of Art and onwards to the RCA, and many companies. Ok. less about me and more about what I have seen… Today we are going to cover - SCREENS CONCEPTS - DIGITAL TRANSFORMATION - WHY ASSETS LIBRARIES - CODE LIBRARIES - COST EFFECTIVE SOLUTION FOR IMPLEMENTATION I know, I know, I know. That's all good and well, but what does this all mean to a company like mine? We are about to see a massive change in consumer behavior so let's get ready. DIGITAL TRANSFORMATION AS A USP Getting this correct will change your company forever. DIGITAL TRANSFORMATION USP-01 Digital transformation (DT) – the use of technology to radically improve performance or reach of enterprises – is becoming a hot topic for companies across the globe. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-02 Companies face common pressures from customers, employees and competitors to begin or speed up their digital transformation. However they are transforming at different paces with different results. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-03 Successful digital transformation comes not from implementing new technologies but from transforming your organisation to take advantage of the possibilities that new technologies provide.
    [Show full text]
  • Using the Dojo Toolkit in a Webworks Application Michelle Mendoza RIM Developer Relations Dylan Schiemann Co-Founder of Dojo Toolkit & CEO of Sitepen Inc
    Using the Dojo Toolkit in a WebWorks application Michelle Mendoza RIM Developer Relations Dylan Schiemann Co-founder of Dojo Toolkit & CEO of SitePen Inc. Agenda What is Dojo? Using the Dojo Mobile package Dojo Mobile Application Demos Basic Code Walkthrough Q&A 2 Dojo Toolkit Build sophisticated Web apps http://dojotoolkit.org/ Supports multiple browsers Enables rapid development Philosophy: Push the limits (SVG, WebGL, HTML5) Define & adopt defacto standards Developer productivity & tools Open, free & liberally licensed Toolkit Components Dojo – also known as “core”, AJAX, DOM manipulation, class-like programming, events Dijit – extensive set of UI components known as widgets DojoX – collection of packages and modules built upon Dojo core and Dijit dojox/mobile dojox/gfx dojox/charting and many more Util – utility scripts Create optimized builds DOH: Dojo Objective Harness 4 Dojo 1.8 Dojo 1.8 Improvements Performance optimizations New widgets added 175 sub-packages and 1400 modules Much improved documentation 5 AMD - Asynchronous Module Definition Mechanism allows modules and dependencies to be loaded asynchronously Asynchronous format reduces app loading time Better performance, easier code handling Only load the modules you require Dojo has a lightweight AMD loader of < 4kb Reduce page load time by up to 10x 6 Interactive Experience Grid displays Dynamic charts Various Form Controls and Form Validators Cross Platform graphics Mapping using OpenLayers Animated effects Gauges 7 Interactive Experience
    [Show full text]
  • Paweł Rajba [email protected]
    Paweł Rajba [email protected] http://itcourses.eu/ Wprowadzenie Zalety Wady XMLHttpRequest AJAX w praktyce AJAX + jQuery SOP, CORS i JSONP Literatura Z czego się składa? . JavaScript + DOM . Obiekt XMLHttpRequest . Jakakolwiek technologia po stronie serwera AJAX to nic nowego (w pewnym sensie) . Technoogie w roku 1998 . Artykuł Jesse James Garreta w roku 2005 Jak to działa? . Nagłówek X-Requested-With: XMLHttpRequest Aplikacje są bardziej interaktywne . Szybsza aktualizacja treści na stronie . Mniejsze zużycie pasma Daje możliwość tworzenia bardziej rozbudowanych interfejsów użytkownika Wykorzystuje istniejące technologie Domyślnie aplikacja widoczna pod tylko jednym adresem: . Nie działa przycisk wstecz, który wg raportu Jacoba Nielsena jest pod drugą pod względem użyteczności funkcją nawigacyjną . Stan aplikacji jest reprezentowany przez adres URL ▪ przez co nie można go zapisać np. do zakładek ▪ uniemożliwia to reklamę ,,pantoflową’’ jak też zwykłe przesyłanie linków znajomym . Można to obejść, ale wymaga dodatkowej pracy Silniki wyszukiwarek mogą mieć problemy z poprawnym indeksowaniem stron Trudniej debugować Trudniej testować Metody obiektu XMLHttpRequest . abort() – przerywa żądanie . getResponseHeader( klucz ) – pobiera wartość pola nagłówka http . open( metoda, Uri, [async, [nazwa_użytkownika, [hasło]]]) – określa parametry żądania: ▪ metoda – GET lub POST ▪ Uri – adres żądania ▪ async – czy asynchronicznie (domyślnie true) ▪ użytkownik, hasło – możemy podać, jeśli dostęp do zasobu wymaga uwierzytelnienia
    [Show full text]
  • The Effect of Ajax on Performance and Usability in Web Environments
    The effect of Ajax on performance and usability in web environments Y.D.C.N. op ’t Roodt, BICT Date of acceptance: August 31st, 2006 One Year Master Course Software Engineering Thesis Supervisor: Dr. Jurgen Vinju Internship Supervisor: Ir. Koen Kam Company or Institute: Hyves (Startphone Limited) Availability: public domain Universiteit van Amsterdam, Hogeschool van Amsterdam, Vrije Universiteit 2 This page intentionally left blank 3 Table of contents 1 Foreword ................................................................................................... 6 2 Motivation ................................................................................................. 7 2.1 Tasks and sources................................................................................ 7 2.2 Research question ............................................................................... 9 3 Research method ..................................................................................... 10 3.1 On implementation........................................................................... 11 4 Background and context of Ajax .............................................................. 12 4.1 Background....................................................................................... 12 4.2 Rich Internet Applications ................................................................ 12 4.3 JavaScript.......................................................................................... 13 4.4 The XMLHttpRequest object..........................................................
    [Show full text]
  • Download Ebook ^ Javascript: Ajax, Cross-Site Scripting, Couchdb
    W5CAMG0U1NWQ < PDF ^ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JavaScript: A jax, Cross-Site Scripting, Couch DB, W ebKit, JQuery, Dojo Toolkit, Bookmarklet, A ctionScript, V 8, SpiderMonkey, Qooxdoo, Ext JS Filesize: 7.09 MB Reviews It becomes an amazing book which i actually have at any time study. It is actually loaded with wisdom and knowledge You wont sense monotony at at any time of your respective time (that's what catalogues are for regarding should you request me). (Rosina Schowalter V) DISCLAIMER | DMCA EUQW6UIGSWMD > Kindle « JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... JAVASCRIPT: AJAX, CROSS-SITE SCRIPTING, COUCHDB, WEBKIT, JQUERY, DOJO TOOLKIT, BOOKMARKLET, ACTIONSCRIPT, V8, SPIDERMONKEY, QOOXDOO, EXT JS Books LLC, Wiki Series, 2011. Condition: New. This item is printed on demand for shipment within 3 working days. Read JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS Online Download PDF JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8, SpiderMonkey, Qooxdoo, Ext JS R6UOTKQRMAXT « PDF \ JavaScript: Ajax, Cross-Site Scripting, CouchDB, WebKit, JQuery, Dojo Toolkit, Bookmarklet, ActionScript, V8,... See Also A Smarter Way to Learn JavaScript: The New Approach That Uses Technology to Cut Your Effort in Half Createspace, United States, 2014. Paperback. Book Condition: New. 251 x 178 mm. Language: English . Brand New Book ***** Print on Demand *****.The ultimate learn-by-doing approachWritten for beginners, useful for experienced developers who want to... Read PDF » Why We Hate Us: American Discontent in the New Millennium Random House USA Inc, United States, 2009.
    [Show full text]
  • Santana Vagnerfigueredode M.Pdf
    i ii iii Instituto de Computa¸c˜ao Universidade Estadual de Campinas Identifica¸c˜ao de Padr˜oes de Utiliza¸c˜ao da Web Mediada por Tecnologias Assistivas Vagner Figuerˆedo de Santana1 Abril de 2009 Banca Examinadora: • Profa. Dra. Maria Cec´ılia Calani Baranauskas Instituto de Computa¸c˜ao - UNICAMP (Orientadora) • Profa. Dra. Renata Pontin de Mattos Fortes Instituto de Ciˆencias Matem´aticas e de Computa¸c˜ao - Universidade de S˜ao Paulo • Prof. Dr. Hans Kurt Edmund Liesenberg Instituto de Computa¸c˜ao - UNICAMP • Prof. Dr. Ismar Frango Silveira (Suplente) Faculdade de Computa¸c˜ao e Inform´atica - Universidade Presbiteriana Mackenzie • Prof. Dr. Rog´erio Drummond Burnier Pessoa de Mello Filho (Suplente) Instituto de Computa¸c˜ao - UNICAMP 1Suporte financeiro do projeto PROESP/CAPES v Resumo A Web conta com dezenas de milh˜oes de websites, mas poucos deles est˜ao em conformidade com requisitos simples de acessibilidade, como utilizar tamanhos relativos ou descrever elementos gr´aficos, o que pode indicar problemas de design de Interface de Usu´ario (IU). Para se identificar este tipo de problema utiliza-se avalia¸c˜ao do c´odigo de websites. No entanto, outros problemas surgem apenas durante a intera¸c˜ao do usu´ario com a IU. Sem considerar dados resultantes do uso, problemas de usabilidade e/ou barreiras de acessibi- lidade podem permanecer desconhecidos. Portanto, identificar como usu´arios interagem com IUs ´euma forma de detectar problemas de design e descobrir maneiras de utiliza¸c˜ao diferentes das previstas durante o projeto de IU. Entre as maneiras de capturar a intera¸c˜ao do usu´ario com IUs est˜ao a utiliza¸c˜ao de v´ıdeos, captura dos movimentos dos olhos do usu´ario, etc.
    [Show full text]
  • Meridium V3.6X Open Source Licenses (PDF Format)
    Open Source Components Component Version License License Link Usage Home Page .NET Zip Library Unspecified SharpZipLib GPL License (GPL w/exception) http://www.icsharpcode.net/opensource/sharpziplib/ Dynamic Library http://dotnetziplib.codeplex.com/ 32feet.NET Unspecified Microsoft Public License http://opensource.org/licenses/MS-PL File + Dynamic Library http://32feet.codeplex.com AjaxControlToolkit Unspecified Microsoft Public License http://opensource.org/licenses/MS-PL Dynamic Library http://ajaxcontroltoolkit.codeplex.com/ Android - platform - external - okhttp 4.3_r1 Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0.html File http://developer.android.com/index.html angleproject Unspecified BSD 3-clause "New" or "Revised" License http://opensource.org/licenses/BSD-3-Clause Dynamic Library http://code.google.com/p/angleproject/ Apache Lucene - Lucene.Net 3.0.3-RC2 Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0.html Dynamic Library http://lucenenet.apache.org/ AttributeRouting (ASP.NET Web API) 3.5.6 MIT License http://www.opensource.org/licenses/mit-license.php File http://www.nuget.org/packages/AttributeRouting.WebApi AttributeRouting (Self-hosted Web API) 3.5.6 MIT License http://www.opensource.org/licenses/mit-license.php File http://www.nuget.org/packages/AttributeRouting.WebApi.Hosted AttributeRouting.Core 3.5.6 MIT License http://www.opensource.org/licenses/mit-license.php Component http://www.nuget.org/packages/AttributeRouting.Core AttributeRouting.Core.Http 3.5.6 MIT License http://www.opensource.org/licenses/mit-license.php
    [Show full text]
  • Ajax, State of The
    AjAjaax,x, ststaattee ooff tthhee aarrtt Tarek Ziadé, Nuxeo [email protected] WWhhoo aamm ii ● I am engineer at Nuxeo ● I work on CPS, the famous ECM Plateform ;) ● I©ve been lately in charge of Ajax stuff in CPS ● I read Ajax related feeds before I go to bed WWhhaatt iiss AAjjaaxx ?? A dutch football club (a good one) A cleanser (really works) AA WWeebb 22..00 tteechchnnoollooggyy Asynchronous Javascript And XML WWhhaatt©©ss WWeebb 22..00 ?? TTiimm OO©©RReeiillllyy©©ss ©©ccoommppaacctt©© ddeeffiinniittiioonn:: Web 2.0 is the network as platform, spanning all connected devices; Web 2.0 applications are those that make the most of the intrinsic advantages of that platform: delivering software as a continually-updated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an "architecture of participation," and going beyond the page metaphor of Web 1.0 to deliver rich user experiences. MMaarrkkuuss AAnnggeerrmmeeiieerr©©ss vviieeww ooff WWeebb 22..00:: (courtesy of Markus Angermeier) WWeebb 22..00 AAppppss ✔ del.icio.us ✔ flickr ✔ Voo2do ✔ Digg ✔ Google Mail (Gmail) ✔ Writely ✔ Basecamp ✔ ... AjAjaaxx bbiigg ppiictctuurere 11//22 (courtesy of J. J. Garett) AjAjaaxx bbiigg ppiictctuurere 22//22 (courtesy of J. J. Garett) TThhee LLiistst ooff tthhiinnggss AjAjaaxx rereaallllyy bbririnnggss ✔ Increases interactivity ✔ Save bandwidth ✔ Helps avoiding some interactive
    [Show full text]
  • Asynchronous Javascript and XML
    Ajax Asynchronous JavaScript and XML By Rolland Brunec XMLHttpRequest is an API for transferring XML and other text Introductiondata between Client and server Introduced by Microsoft as a non standard feature for Outlook • Netscape’s JavaScript and their problems • Why Asynchronous JavaScript ...? What is XMLHttpRequest? DOM=Document Object Model • JSON=JavaScript Object Notation • Use cases for Ajax • DOM manipulation/CSS/JavaScript • {XML/JSON/HTML} as exchange format Advantages • Bandwidth usage • Interactive Web Applications • Rich User Interfaces Disadvantages • Browser integration • “back button” problem • Network latency “loading...” label • Search engine optimisation + web analytics • JS and DOM implementation is not always correct • Accessibility Frameworks • Why use frameworks? • Faster development time • Readable source code • Disadvantages of JS resolved Frameworks • Prototype / script.aculo.us • GWT (Google Web Toolkit) • Dojo Toolkit • YUI (Yahoo! UI Library) • Sajax • .Net Ajax Script.aculo.us • Extends Prototype by adding • Visual effects (Appear/Fade/Shake/etc) • Controls (drag&drop, autocompletion, in- place editor) • Utilities (Builder, Unit testing) Appear/Fade <div id="clickme" onclick=" Effect.Appear('hidden_element', { duration: 3.0 }); Effect.Shake('hidden_element'); Effect.Fade('hidden_element', { duration: 3.0 })"> click me pleeeeeease!</div> <div id="hidden_element" style="display:none">magic!</div> Drag & Drop <div id="dragable_element">I'm dragable</div> <script type="text/javascript"> new Draggable('dragable_element');
    [Show full text]
  • Appendix a Setting up a Local Web Server
    Appendix A Setting Up a Local Web Server It’ll be much easier for you to run the examples in this book if you run them on a local web server. One reason for this is because of a security sandboxing feature that Internet Explorer has for running HTML files that contain JavaScript in them; the other is to replicate the manner in which you will be using Dojo for a real website or web application. Although the Mac OS X operating system includes a built-in web server as do some versions of Windows, I will be going through, step-by-step, how to install a local web server that will serve HTML, JavaScript, and PHP files. You won’t be using the included web servers built into your operating system because of the complex configurations. Instead, you will be using a turnkey solution, one for the Mac called MAMP (which stands for Macintosh, Apache, MySQL, and PHP) or one for Windows known as XAMPP (the X is for the four operating systems it supports; the other letters stand for Apache, MySQL, PHP, and Perl). These two products are great because they give you an extremely easy and straightforward method for quickly setting up a local web server that not only supports serving static files such as HTML and JavaScript files but also supports PHP and database connectivity. The best thing about both of these tools is that they are completely free to download and use. If you are on Windows, you’ll want to skip the next section and jump to “XAMPP on Windows.” MAMP on Mac OS X The latest version of MAMP supports Snow Leopard (OS X 10.6) and older.
    [Show full text]
  • Alex Russell Project Lead, the Dojo Toolkit Maslow’S Hierarchy of Needs
    Dojo 1.0: Great Experiences... For Everyone Alex Russell Project Lead, The Dojo Toolkit Maslow’s Hierarchy of Needs • Deficiency needs - Physiological - Saftety - Love/Belonging - Esteem • Growth needs - Exploration, asthetics - Self-actualization http://en.wikipedia.org/wiki/Maslow's_hierarchy_of_needs The Application Hierachy Of Needs • Deficiency needs - Platform - Security - Social Capacity - Competition • Growth Needs - Integration - Platform capacity If The Platform Isn’t Ubiquitous And Capable, Another Will Emerge Changes In Cost Are Changes In Capacity Complexity Is The New Dominating Factor In Cost Where Are We Fighting Complexity? • HTML • CSS • JavaScript • Server integration http://flickr.com/photos/kidisland/502242023/ The Wall Of Complexity Implements Of War • Grouping + Encapsulation • Shared Context • Patterns of Practice • Separation of Concerns • Forgiveness So How Are We Doing? Implements Of Failure • Grouping + Encapsulation - Server-side includes essentially state of the art • Shared Context - HTML/CSS/JS stack wickedly hard to learn • Patterns of Practice - Microformats, CSS as emergent semantics • Separation of Concerns • Forgiveness - XML pipe dreams persist, Semantic Web faffery Semantic Differences • HTML gives us: - Platform - Some security - Social capacity - Patterns of practice - Shared context (common vocabulary) • The failure to provide sustainable platform competition leaves us arguing over the scraps Good Semantics Let You Say What You Mean And Get What You Want For Applications, HTML/CSS Are Liabilities Ajax:
    [Show full text]
  • View Component of Web-Based IDE in Cakephp
    View Component of Web-based IDE in CakePHP A Writing Project Presented to The Faculty of the Department of Computer Science San José State University In Partial Fulfillment of the Requirements for the Degree Master of Science By Swathi Vegesna Spring 2010 Abstract The aim of the project is to build the view component of a Web-based IDE that enables users to create XHTML pages and link up the tags with the Controller files by only using drag and drop mechanism in cakePHP. This is the view component of the MVC based Web-based IDE, which will connect the Controllers and View components. This project will enhance these elements by making them dynamic which is achieved by connecting to the Controller components. This IDE helps the users to create the dynamic web pages even without good knowledge of XHTML and server side scripting languages. The user will be able to include all kinds of elements only with drag and drop mechanism and develop the whole web page. Table of Contents 1. Introduction ...................................................................................................................................4 2. Experiments with cakePHP ..............................................................................................................5 2.1 Motivation ................................................................................................................................5 2.2 Goal .........................................................................................................................................5
    [Show full text]