Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications...
-
Upload
diane-avice-potter -
Category
Documents
-
view
226 -
download
1
Transcript of Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications...
![Page 1: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/1.jpg)
Libraries and APIs
CMPT 281
![Page 2: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/2.jpg)
Overview
• Basics of libraries and APIs• Rich internet applications• Examples– Scriptaculous– JQuery
![Page 3: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/3.jpg)
What is a library?
• A collection of software modules that provides services to another program
• A way to extend the functionality of a programming language
• A way to modularize software development
Application
Library A
Library B
![Page 4: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/4.jpg)
What is an API?
• “Application Programming Interface”• The set of functions or commands that is
made available by a library
![Page 5: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/5.jpg)
Why libraries for web development?
• To improve the interactive experience• Many tasks are difficult with just HTML/CSS– e.g., poor set of interface widgets– Libraries allow reuse of good solutions– “javascript libraries”
• Many web services exist on the internet– External libraries with a different delivery model– e.g., Google Maps, Flickr, WeatherBug
![Page 6: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/6.jpg)
All libraries have an API
![Page 7: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/7.jpg)
JavaScript Libraries
![Page 8: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/8.jpg)
JavaScript LibrariesPrototype www.prototypejs.org/ script.aculo.us script.aculo.us/ Yahoo! User Interface Library developer.yahoo.com/yui/ Dojo dojotoolkit.org/ jQuery jquery.com/ MooTools mootools.net/ Raphael raphaeljs.net
![Page 9: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/9.jpg)
What do JS libraries do?
• Animation effects• User interface widgets• JS programming shortcuts• Graphics• AJAX– Asynchronous Javascript And XML
• ...and more, depending on the library
![Page 10: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/10.jpg)
But, beware...
• Libraries can make things more complex• They can change the way JS works• They may not be complete or well supported• They can be difficult to learn (examples!)
• So, don’t depend on them!– e.g., only use plain JS on the final exam, unless
asked to use a library
![Page 11: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/11.jpg)
How to use JS libraries
• Same principle as external JS:<script type="text/javascript" src="xyz.js“></script>
• Some libraries are stored on your site:<script src="./prototype.js" type="text/javascript"></script><script src="./scriptaculous.js" type="text/javascript"></script>
• Some libraries are accessed from their home:<script src="http://code.jquery.com/jquery-latest.min.js">
</script>
![Page 12: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/12.jpg)
Example: effects in Scriptaculous
![Page 13: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/13.jpg)
Using Scriptaculous• Docs: http://madrobby.github.com/scriptaculous/
• 1. Download the libraries– http://script.aculo.us/
• 2. Put them where your page can see them– e.g., a libraries/ directory
• 3. Load them into your page– Note that ‘scriptaculous’ depends on ‘prototype’<script src="libraries/prototype.js" type="text/javascript"></script><script src=“libraries/scriptaculous.js" type="text/javascript"></script>
• 4. Use the functions in the API
![Page 14: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/14.jpg)
The Scriptaculous API
![Page 15: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/15.jpg)
Core effects
• new Effect.EffectName(element, params, [options]); • Example:
new Effect.Opacity(‘element_id', { duration: 2.0, from: 1.0,to: 0.5
});
![Page 16: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/16.jpg)
Scriptaculous effects demo
![Page 17: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/17.jpg)
Example: effects in JQuery
![Page 18: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/18.jpg)
Using JQuery
• (see docs.jquery.com/Tutorials:Getting_Started_with_jQuery)
• 1. No download required• 3. Load the library into your page
<script src="http://code.jquery.com/jquery-1.4.3.min.js" type="text/javascript"></script>
• 4. Use the functions in the API
![Page 19: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/19.jpg)
JQuery effects demo
![Page 20: Libraries and APIs CMPT 281. Overview Basics of libraries and APIs Rich internet applications Examples – Scriptaculous – JQuery.](https://reader036.fdocuments.net/reader036/viewer/2022062305/5697bfa71a28abf838c98fec/html5/thumbnails/20.jpg)
Effects without libraries?