JavaScript and jQuery - Web Technologies (1019888BNR)

2 December 2005
Web Technologies
JavaScript and jQuery
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com

Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2November 4, 2016
JavaScript
 High-level loosely typed
dynamic language
 Introduced by Netscape in
1995
 lightweight interpreted
client-side programming
 Supports imperative, object-oriented
and functional programming styles
 Nowadays also used in non-web-based environments
 PDF, Microsoft Office, …
 JavaScript implements the ECMAScript specification
 current version is ECMAScript 2016
[http://stackoverflow.com/research/developer-survey-2016]

Adding JavaScript to a Webpage
 JavaScript code can be placed in the <head>, in the
<body> or in external files
<!DOCTYPE html>
<html>
<head>
<tile>JavaScript Example</tile>
...
<script>
alert("Message in the header");
</script>
<script src="example.js"></script>
</head>
<body>
<h1>A First Example</h1>
<script>
document.write("<p>Text added by JavaScript</p>");
</script>
<p id="p2">A second paragraph.</p>
</body>
</html>

Adding JavaScript to a Webpage …
 Advantages of external JavaScript files
 separation of HTML and code
 faster page load if JavaScript file is cached
 JavaScript code placed just before the </body> tag
(end of the page) might improve page load
 display of HTML is not blocked by script loading
 alternative: attribute defer="true" in the <script> tag
 JavaScript errors silently ignored by most browsers
 activate browser console for debugging (e.g. F12)

Browser Console
 Error 'aalert' shows up in the console

Output
 There are different possibilities for JavaScript output
 document.write()
 adds content to the page while loading
 deletes page if used after loading
 console.log()
 outputs content to the browser console
 window.alert() or alert()
 outputs data in an alert message box
 innerHTML property
 adds content to an HTML element (via DOM tree)
document.getElementById("p2").innerHTML = "A new second paragraph.";

Variables and Data Types
 Variables have dynamic types
 Good practice to declare a variable before its first use
 variable that is used without declaring it becomes a global
variable (implied global)
 Three primitive data types
 string, number and boolean
 Further there are two special data types
 null and undefined
var x; // x has been declared but the value is 'undefined'
x = "Albert Einstein"; // Now x is a string
x = 3.1415; // Now x is a number
typeof x; // number
x = false; // Now x is a boolean

Strings
 Any text between single (') or double quotes (")
 Strings are immutable
 Special characters have to be escaped with with a
backslash ()
var hello = "Hello World";
var correct = "This is "correct""; // escaped double quotes
var tmp = hello.length; // 11
tmp = hello + ". " + correct; // Hello World. This is "correct"
tmp = hello.charAt(1); // e
tmp = hello.toUpperCase(); // HELLO WORLD
tmp = hello.replace("World", "VUB"); // replace first occurence of 'World' with 'VUB'

Numbers
 Only one type of numbers (64-bit floating point)
 mantissa (52 bits), exponent (11 bits) and sign (1 bit)
 NaN indicates that a value is not a number
 Infinity for values that are too large to be represented
var x = 42.00;
var y = 42;
var z = 42e3; // 42000
var x = 42 / "foo"; // but what about 'x = 42 + "foo"?
isNaN(x); // returns true
// what is the difference between '10 + 10 + "foo"' and '"foo" + 10 + 10'?
var x = 42 / 0; // x becomes Infinity

Numbers …
 Rounding errors
 due to rounding errors we might not always get the expected
result
var x = 0.3 + 0.6; // 0.8999999999999999
var x = (0.3 * 10 + 0.6 * 10) / 10; // possible solution (resulting in 0.9)

Boolean
 Booleans can have the values true or false
var x = true;
var y = false;
var z = 5 > 3; // true

Date and Math Objects
 Date object can be used to work with dates
 Math object can be used for various mathematical
operations and offers some constans (e.g. PI and E)
var now = new Date();
var nextWeek = new Date("2016-11-04T14:00:00"); // ISO 8610 syntax
var milis = now.getTime(); // time in milliseconds since January 1, 1970
var test = nextWeek.getTime() > now; // true
Math.random(); // random number between 0 (inclusive) and 1 (exclusive)
Math.round(3.6); // 4 (rounded to the nearest integer)
Math.max(4,10,3); // 10 (number with the highest value)

Objects
 Container of properties (name/value) where a value can
be any JavaScript value (including other objects)
 Two possibilities to retrieve object values
 second option only works for legal JavaScript names and
non-reserved words
var student = {
firstName: "John",
lastName: "Harper",
height: 182
};
student["firstName"];
student.lastName;

Objects ...
 Existing values can be updated, new properties can be
added and existing properties can be deleted
 Objects are passed by reference and not by value
 Cloning of objects (deep copy) is not trivial in JavaScript
 e.g. jQuery offers a clone() method
student.lastName = "Wayne";
student.address = {
street: "Pleinlaan",
number: 2
};
delete student.lastName;
var x = student; // student object created before
x.firstName = "Peter";
var name = student.firstName; // name is "Peter" since x and student are references
// to the same object

Arrays
 An array is a variable that can hold multiple values which
can be accessed via an integer offest
 values of different types might be mixed
 Other methods to sort arrays, combine arrays etc.
var points = [10, 5, 17, 42];
points.length; // number of elements (4)
points[1]; // accesses the element with the given offset (5)
points[points.length] = 13; // adds 13 to the end of the array [10, 5, 17, 42, 13]
var last = points.pop(); // removes the last element [10, 5 , 17 , 42]
var l = points.push(2); // adds 2 at the end and returns the length (5)
var first = points.shift(); // removes the first element [5, 17, 42, 2]
l = points.unshift(7); // adds 7 to the beginning and returns the length (5)
delete points[2]; // the third element will be undefined
var matrix = [[3, 1, 2], [9, 6, 4], [5, 7, 8]]; // array of arrays ("2D" array)
matrix [1][2]; // 4

Functions
 A function is a block of code to perform a particular task
 enables the reuse of code
 functions are objects and can be used like any other value
- can be stored in variables, objects and arrays
- can be passed as argument to functions or returned from functions
 access to a function without the () operator returns the definition
of a function
function multiply(p1, p2) {
return p1 * p2;
}
var r = multiply(3, 4); // 12

Scope
 Local variables declared within a function can only
be accessed within the function (function scope)
 note that there is no block scope
 A variable declared outside of a function has global
scope
 A value assigned to a non-declared variable
automatically becomes a global variable (implied global)
 Local variables deleted when the function is completed
 Global variables are deleted when the page is closed
 Function arguments (parameters) work as local variables
within functions

Objects Revisited
 Functions can be added to objects (methods)
Multiple objects can be created via an object constructor
function (prototype)
// Let us assume that we have the student object that was created earlier
student.fullName = function() {
return this.firstName + " " + this.lastName;
}
function student(firstName, lastName, height) = {
this.firstName = firstName;
this.lastName = lastName;
this.height = height;
this.fullName = function() {return this.firstName + " " + this.lastName;}
};
var student1 = new student("Audrey", "Sanctorum", 174);
var student2 = new student("Lars", "Van Holsbeeke", 177);

Conditional Statement
 Used to perform different actions based on different
conditions
var mention = "";
if (grade < 10) {
mention = "Fail";
} else if (grade < 14.5) {
mention = "Pass";
} else {
mention = "Distinction";
}

Loops
 For Loop
 For/In Loop
 iterate over object properties
 While Loop
for (i = 0; i < 10; i++) {
text += "Number: " + i + "<br />";
}
for (x in student) {
text += " " + student[x]; // Add all properties of 'student' to text string
}
while (i < 10) {
text += "Number: " + i + "<br />";
i++;
}

Events
 Various events can be triggered when accessing an
HTML document
 document has finished loading
 form field has been changed
 button has been clicked
 mouse is moved over an image
 ...
 JavaScript can be used to trigger some actions when
events are detected
<button onclick="startSlideshow()">Start</button>

JavaScript Best Practices
 Avoid (minimise) global variables
 global variables can lead to name collisions for sub-programs
 possible to define one global variable acting as container for all
the other variables (added as properties)
 Always declare variables (var) before they are used
 otherwise they will become global variables (implied global)
 Always initialise variables when they are declared
 avoids undefined values
 Put all declarations at the top of each script or function
 no block scope and variable visible within the entire function
(function scope)
var MYAPP = {};
MYAPP.title = "Hello World App"; // modules in ECMAScript 2016 solve the problem

JavaScript Best Practices ...
 Always use the === and !== equality operators
 == and != do some automatic type coercion (with complicated
rules) if the types are not equal
 Do not use the typed wrappers new Boolean(),
new Number() and new String()
 also use {} instead of new Object() and [] instead of
new Array()
 Avoid block-less if, while, do or for statements
 Avoid the use of eval()
 runs text as code and leads to performance and security issues
if (x > 10) {
t = true;
}

jQuery
 JavaScript library that simplifies the
use of JavaScript on websites
 HTML/DOM traversal and manipuation
 event handling
 effects and animation
 AJAX
 Most popular and extendable JavaScript framework
 large developer community
 Two ways to add jQuery to a website
 download jQuery library (JavaScript file) from jquery.com
 link to jQuery library on content delivery network (CDN) server
- Microsoft, Google, …

jQuery ...
 jQuery code executed when document loaded (ready)
<!DOCTYPE html>
<html>
<head>
<tile>jQuery Example</tile>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// jQuery code
});
</script>
</head>
<body>
...
</body>
</html>

DOM Revisited
 cross-browser issues when accessing DOM via JavaScript
News
html
head body
document
title
Vrije Univer ...
h1 p p …
…
aInternation ...
Vrije Uni ...
href
http:// ...
root node
document.getElementsByTagName("h1");
document.getElementById("main");
JavaScript

jQuery Syntax
 jQuery syntax makes it easy to select HTML elements
(based on CSS-style selectors) and perform some
actions on these elements
 $ sign to access jQuery followed by a selector and the action to
be performed on the selected elements
 Examples
$(selector).action();
$("h1").hide(); // hide all h1 elements (implicit iteration)
$("h1").hide().delay(500).fadeIn(1500); // multiple methods can be chained
$("h1:first").hide(); // hides the first h1 element
$("#main").hide(); // hides the element with id=main
$(".note").toggle(); // toggles all elements of class note
$("p:even").toggle(); // toggles all even paragraph elements
$("h1").html(); // get content from first h1 element
$("h1").each(function() {...}); // loop over each h1 element
$("p").html("New"); // updates the content of all p elements to "New"

Caching jQuery Selections
 A jQuery object (result of a selection) has references to
the elements in the DOM tree
 if the same selection is used multiple times, the jQuery object can
be reused (cached) by storing it in a variable
var $paragraphs = $("p"); // often prefix $ used for variables with a jQuery object

Attributes
 Attributes can be accessed and updated
 Similar functionality exists for classes
$("a:first").attr("href"); // get the href attribute of the first anchor tag
$("a:first").attr("href", "http://wise.vub.ac.be"); // update attribute
$("a:first").removeAttr("href"); // remove href attribute of the first anchor tag
$("p").addClass("main"); // adds an additional class
$("p").removeClass("main"); // removes the class main

Event Handling
 Deals with cross-browser issues behind the scenes
 There are various jQuery events from different sources
 keyboard
- input, keydown, keyup, keypress
 mouse
- click, dblclick, mouseup, mousedown, mouseover, mousemove, mouseout,
hover
 UI
- focus, blur, change
 form
- submit, select, change
 document
- ready, load, unload

Event Handling ...
 We can handle events via the on() method
 the first paramter is the event to respond to and the second
parameter is named or anonymous function
$("#start").on("click", startSlideshow();); // calls a named function
$("p").on("mouseover", function(e) { // anonymous function
$(this).hide();
});

DOM Navigation
 Various methods can be used to start navigating the
DOM tree from a given selection
 parent()
- direct parent of current selection
 parents()
- all parents of current selection
 children()
- all children of current selection
 next ()
- next sibling of current selection
 siblings()
- all siblings of current selection
 ...

Other JavaScript Libraries
 jQuery UI
 various widgets and effects
 jQuery Mobile
 touch optimised interaction for mobile devices
 Modernizr.js
 check availability of certain features in a browser
 D3.js
 interactive data visualisations

JavaScript Object Notation (JSON)
 Developed as an XML alternative to represent JavaScript
objects as strings (language independent)
 Easy to produce and faster to parse than XML
 supports different data types
 JSON is based on a subset of JavaScript
 JSON document can be read via the JavaScript eval() function
- security issues: note that this approach can be dangerous if the source is not
trusted since any JavaScript code might be executed
 most recent browsers offer a JSON parser
- recognises only JSON data types and rejects any scripts
 Many Web 2.0 Applications offer a JSON interface
 Flickr, YouTube, Delicious, ...

JSON Data Types
 The values themselves can be simple values (number,
boolean or string), arrays or objects
 nesting is supported
Type Description
Number integer, real or float
Boolean true or false
String double-quoted Unicode (use backslash for escaping)
Array comma-separated ordered sequence of values enclosed in
square brackets
Object comma-separated collection of key:value pairs enclosed in
curly brackets
null null value

JSON Syntax Diagrams
http://www.json.org

JSON Example
{
"surname": "Signer",
"forename": "Beat",
"address": {
"street": "Pleinlaan 2",
"city": "Brussels",
"postalCode": 1050,
"country": "Belgium"
},
"phoneNumbers": [
{ "type": "office", "number": "123 456 789" },
{ "type": "fax", "number": "987 654 321" }
]
}

Exercise 5
 CSS3
 get some hands-on experience with CSS3

References
 JavaScript: The Good Parts, Douglas
Crockford, O'Reilly Media (1st edition), May 2008,
 ISBN-13: 978-0596517748
JavaScript and JQuery: Interactive Front-End Web
Development, Jon Duckett, Wiley (1st edition),
June 2014, ISBN-13: 978-1118531648
 JavaScript Tutorial
 http://www.w3schools.com/js/
 jQuery Tutorial
 http://www.w3schools.com/jquery/

References ...
 JSLint: The JavaScript Code Quality Tool
 http://www.jslint.com/

2 December 2005
Next Lecture
XML and Related Technologies

JavaScript and jQuery - Web Technologies (1019888BNR)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a JavaScript and jQuery - Web Technologies (1019888BNR)

Similar a JavaScript and jQuery - Web Technologies (1019888BNR) (20)

Más de Beat Signer

Más de Beat Signer (20)

Último

Último (20)

JavaScript and jQuery - Web Technologies (1019888BNR)