Introduction to jQuery

Introduction to JQuery
Dr Andres Baravalle

Outline
• Functions and variable scope (cont'd)
• Constructors
• Methods
• Using Ajax libraries: jQuery

Functions and variable scope
(cont'd)

Activity #1: using functions
Analyse the following code:
<script type="text/javascript">
var total = 0;
var number = 0;
while(number!=".") {
total += parseInt(number);
number = prompt("Add a list of numbers. Type a number or '.'
to exit.","");
}
alert("The total is: " + total);
</script>

Activity #1: using functions (2)
• After you've understood the mechanics of
the short code, rewrite the code to use a
function
– Normally, you wouldn't need a function in
such a case – this is just to get you started

Activity #2: variable scope
• Analyse the code in the next page
– Try to determine what should happen
– Then run the code and see what actually
happens.

Activity #2: variable scope (2)
var number = 200;
incNumber(number);
alert("The first value of number is: " + number);
function incNumber(number) {
// what is the value of number here?
number++;
}
number++;
alert("The second value of number is: " + number);
incNumber(number);
alert("The third value of number is: " + number);

Creating objects
• You can create (basic) objects directly:
var andres = {"name": "Andres",
"surname": "Baravalle",
"address": "Snaresbrook",
"user_id": "andres2" };
• The problem of such an approach is that it
can be a lengthy process to create a
number of objects with different values.

Constructors
• Constructors are a special type of function
that can be used to create objects in a
more efficient way.

Using constructors
• The problem of the approach we have just
seen is that it can be a lengthy process to
create a number of objects with different
values
• Using constructor functions can make the
process faster.

Using constructors (2)
• The code becomes shorter and neater to maintain:
function Staff(name, surname, address, user_id, year_of_birth) {
this.name = name;
this.surname = surname;
this.address = address;
this.user_id = user_id;
this.year_of_birth = year_of_birth;
}
var andres = new Staff("Andres", "Baravalle", "East London", "andres2");
console.log(andres); // let's use with firebug for debugging!

Activity #3
• Adapt the Staff() constructor to create a
constructor for students
• Record all the information in Staff(), plus year of
registration and list of modules attended (as an
array)
• Create 2 students objects to demonstrate the
use of your constructor

Activity #4
• Building on top of Activity #3, add an extra
property, marks
• Marks will be an object itself
– Please create the marks object without a
constructor
• Demonstrate the new property

Methods
• Methods are functions associated with
objects.
• In the next slide we'll modify again our
class, as an example to illustrate what this
means

Using methods
function staff (name, surname, address, user_id, year_of_birth) {
this.name = name;
this.surname = surname;
this.address = address;
this.user_id = user_id;
this.year_of_birth = year_of_birth;
this.calculateAge = calculateAge; // use the name of the function to link here
this.age = this.calculateAge(); // calling calculateAge *inside* this function context
}
function calculateAge() {
// "this" works as we have linked the constructor with this function
return year - this.year_of_birth;
}
year = 2013;
var andres = new staff("Andres", "Baravalle", "East London", "andres2", 1976);
console.log(andres); // use with firebug for debugging!

Activity #5: Using methods
• Adapt your student class to store the
mean mark using an extra class variable,
mean_mark, and an extra method,
calculateMeanMark()
– Use for … in statement to navigate the mark
(see http://baravalle.it/javascript-
guide/#for_Statement)

Web 2.0
• Web 2.0 is one of neologisms commonly
in use in the Web community. According to
Tim O’Reilly, Web 2.0 refers to:
– "the business revolution in the computer
industry caused by the move to the internet as
platform, and an attempt to understand the
rules for success on that new platform"
(http://radar.oreilly.com/archives/2006/1
2/web_20_compact.html).

Web 2.0 (2)
• The idea of Web 2.0 is as an incremental step from Web
1.0.
– It is based on Web 1.0, but with something more
• The concept of ‘internet as a platform’ implies that Web
2.0 is based on the Web on its own as place where
applications run
– The browser allows applications to run on any host operating
system.
– In the Web 2.0 strategy, we move from writing a version of
software for every operating system that has to be supported, to
writing a Web application that will automatically run on any
operating system where you can run a suitable browser.

Web 2.0 technologies
• Technologies such as Ajax (Asynchronous
JavaScript and XML; we will explore that
further in this study guide), RSS (an XML
dialect used for content syndication), Atom
(another XML dialect used for content
syndication) and SOAP (an XML dialect
used for message exchange) are all
typically associated with Web 2.0.

What is Ajax?
• Ajax is considered to be one of the most
important building blocks for Web 2.0
applications.
• Both JavaScript and XML existed before Web
2.0 – the innovation of Ajax is to combine these
technologies together to create more interactive
Web applications.
• Ajax is typically used to allow interactions
between client and server without having to
reload a Web page.

Ajax libraries
• A number of different libraries have been developed in
the last few years to support a faster and more
integrated development of Ajax applications.
• jQuery (http://jquery.com), Spry
(http://labs.adobe.com/technologies/spry),
Script.aculo.us (http://script.aculo.us) and Dojo
(http://dojotoolkit.org) are some of the more commonly
used Ajax frameworks.
– Spry is included in Dreamweaver – and is an easy option to start
– We are going to use a quite advanced library – jQuery – even
tough we'll do that at a basic level

jQuery
• jQuery is a JavaScript library designed to
simplify the development of multi-platform
client-side scripts
• jQuery's makes it easy(-ish?) to navigate a
document, select DOM elements, create
animations, handle events, and develop
Ajax applications.
– and it's free, open source software!

jQuery – let's start
• As a first step, you'll need to download the
jQuery library from jquery.com
• For development, you should use the
"normal" (non-minified) js file file in the
library
– A minified version also exists – it removes
spaces, newlines, comments and shortens
some variable names to make the file size
smaller (for deployment only)

jQuery CDN
• You can also use jQuery through a CDN (content
delivery network), including the file directly:
http://code.jquery.com/jquery-1.8.1.min.js (normally for
deployment, not development)
• Using the CDN version normally allows a better
experience to users – as they might have already the
library in cache from a visit to another site also using the
same CDN
• You should not use CDN for development – only in
production

jQuery commands
• jQuery commands begin with a call to the
jQuery function or its alias.

jQuery commands (2)
• jQuery comes with a shorthand function -
$().
• You'll normally use $() instead of the
jQuery() function
– $() is not defined in JavaScript – is just a
function having a 1 letter name, defined in
jQuery

jQuery commands (3)
• You normally run your jQuery commands
after your page has been loaded:
$(document).ready(function() {
alert(Hey, this works!);
});

jQuery selectors
• You can "select" elements with the same
syntax that you have been using to travers
the DOM in CSS
• E.g.
– $('tr')
– $('#celebs')
– $('.data')
– $('div.fancy p span')

Reading properties
• You can use jQuery to read properties
• E.g.
$(document).ready(function() {
var fontSize = $('body p').css('font-size');
alert(fontSize);
});

Changing properties
• You can use the same syntax to change
properties:
$('p#first').css('font-color','red');
• You can use arrays too!
$('body p').css(
{'background-color': '#dddddd',
'color': '#666666',
'font-size': '11pt})
});

Dreamweaver will help you!
• As you can see, Dreamweaver
understands jQuery!
• Dreamweaver ships with autocomplete
functions and syntax highlighting for
jQuery
– and Aptana too!

Activity #6: starting with CSS
• Download the jQuery library and include it
in a new HTML file
• Use a "lorem ipsum" text as usual to fill
your page with a few paragraphs
• Try out basic jQuery commands to change
the style of the paragraphs

Sorry – isn't this useless?
• Yes! What you have tried up to now is
useless on its own – you could do the
same with just css
• In the next slides we'll see a better use of
jQuery

Activity #7: hiding and showing
elements
• Analyse the code at
http://baravalle.com/presentations/ske6/ac
tivities/javascript/jquery_hide_paragraph.h
tml
• You have an anonymous (=without a
name) function applied to the onclick
event of the element #a1
• That means that the function will run when
you click on #a1

Activity #7: hiding and showing
elements (2)
• Building on top of the existing code, write
a number of additional anonymous
functions to hide/show the other
paragraphs

Adding HTML: after()
• You can also add child nodes:
$('#second').after("<p>Hey, this is a new paragraph!</p>");
• When clicking on the item with id=a1 (#a1
should be an anchor, as in the previous
example), add some HTML after item #second
• See in action at
http://baravalle.com/presentations/ske6/activities
/javascript/jquery_new_paragraph.html

Adding HTML (insertAfter())
• You can insert HTML after a specific
selector:
$("<p>Hey, this is a new paragraph!
</p>").insertAfter('#second');

Working on more selectors
• You can work on many selectors at the
same time:
$('#second, #third').after("<p>Hey, this
is a new paragraph!</p>");

Activity #8
• Build on top of your previous code to
dynamically add new content to your
page, using after() or insertAfter()

Removing elements
• You can also remove elements:
$('p').remove(':contains("Hey, this is a new
paragraph!")');
• or replace their content:
$('p').html('Replacing all paragraphs!');

Animations: fadeout()
• You can animate any element:
$('#first').fadeOut();

Animations: using the padding
• You can edit properties of your selectors
and animate them:
$('#third').animate({
paddingLeft: '+=15px'
}, 200);
• Please note that animate() requires you to
write the property name in camel case
(paddingLeft rather than the usual
padding-left)

Activity #9: using plugins
• jQuery includes a large number of plugins
• Read the documentation for the color-
animation plugin:
http://www.bitstorm.org/jquery/color-
animation/
– Embed the plugin in your page
– and animate a paragraph!

Chaining
• Remember that you can chain different
jQuery methods:
• $
('p:last').slideDown('slow').delay(200).fade
Out();

And now it's the end
• You should be ready to use HTML, CSS,
JavaScript, jQuery and PHP – at least to
some degree

Introduction to jQuery

Recommended

More Related Content

What's hot (20)

Viewers also liked (18)

Similar to Introduction to jQuery (20)

More from Andres Baravalle (7)

Recently uploaded (20)

Introduction to jQuery