HTML5, CSS, JAVASCRIPT ! !

EXERCISES

HTML5, CSS,
Javascript Exercises
Exercise 1: Basic HTML Page

Objective (E)
Write an HTML5 page showing a push button and an alert popup. Use the code from
P02_HTML_Essentials_Exercise_1.html
1. Copy or Create the HTML page skeleton
2. Add a push button to the body section
3. Add an event handler for button “onclick”
4. Use an alert popup as the event handler

Objective (M)
Add another button as an image and have the image button navigate to the HTML5 logo page
1. Download or link the button as the following image “http://www.w3.org/html/logo/
downloads/HTML5_Logo_256.png”
2. Modify the handler for “onclick” to navigate to “http://www.w3.org/html/logo/”

Objective (H)
Add a third button that will provide a “view source” functionality. That is, when pressed the
button shows the current source code of the webpage.

Hint: A clever programmer will notice that this feature is already supported in Chrome &
Firefox (i.e. editing the content of the page is not necessary)

PAGE 1 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Exercise 2: Basic CSS Selectors and Properties

Objective (E)
Practice the use of basic CSS selectors and properties. Use the code from
P03_CSS_Eseentials_Exercise_1.html
1. Create an HTML document including the <style> section
2. Replace _universal, _type, ... by the appropriate markup

Objective (M)
Modify your original styling to produce “mouseover” affects; i.e. change the color of the text if the
mouse cursor is inside the current <p> element.

Objective (H)
Add a gradient to the background of the webpage. You are free to choose the gradient but it
should work in either Chrome or Firefox.

Hint: There are tools available to generate the CSS styling of gradients as they are different for
each browser (Webkit, Opera, Microsoft ... )

Exercise 3: Define a Blog Using Semantic Markup

Objective (E)
Use the new structural tags and style the resulting page. Use the code in
P04_HTML_Semantic_Markup_Exercise_1.html
1. Create an HTML page
2. Add a header, a footer, and two sections for posts and sidebar
3. Add horizontal navigation areas to both, the header and the footer
4. Add an article with an aside to the posts section
5. Add a vertical sidebar menu
6. Style the page

PAGE 2 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES
Objectiveive (M)
There are other semantic tags not discussed during the slide deck, <time>, <meter> and
<progress>. Using the <meter> tag and Google Chrome duplicate the following:
Objective (H)
Using the <progress> tag and Google Chrome, create a progress meter that increments when a
user clicks on it.
Hint: A little Javascript is useful but jQuery is not necessary.
Exercise 4: Basic CSS Selectors and Properties
Objective (E)
Use the new HTML5 input features to design a registration form. Use the code from
P06_HTML_Forms_Exercise_1.html
1. Create an input form with labels and input fields
2. Add first name, last name (both text)
3. Add age (number), email (email), homepage (url)
4. Add Password (password), submit (submit)
5. Use placeholder text and check input validation
6. Validate the entire page using http://validator.w3.org/
PAGE 3 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
Create a more interesting button for your form. Using CSS modify the styling of the submit
input.
1. Add a classname to the submit input
2. Using CSS selectors, modify the styling of the submit input

e.g.

PAGE 4 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)
Modify the form using CSS to duplicate the following styling:

Hint(s): The default browser styling will need to be overridden. In addition, the following styles
may prove useful (they are in no particular order). . .
• background: #5E768D;
• background: -moz-linear-gradient(top, #546A7F 0%, #5E768D
20%);
• background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#546A7F), color-stop(20%,#5E768D));
• text-shadow: 0px 1px 0px #F2F2F2;
• background: #C9D0DE;

PAGE 5 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

• border: 1px solid #E1E1E1;

• -moz-box-shadow: 0px 0px 8px #444;
• -webkit-box-shadow: 0px 0px 8px #444;

Exercise 5: Custom Data Attributes

Objective (E)
Use custom data attributes to dynamically change a document. Use the code from
P07_HTML_Attributes_Exercise_1.html
1. Create a document, add a paragraph with custom attributes
2. Add button and a div tag
3. Add a button event handler
4. On button click, the custom data shall be written into the div tag

Exercise 6: Style Tables with Pseudo-classes

Objective (E)
Use pseudo-classes as CSS selectors to style a table. Use code from
P08_HTML_Styling_Tables_Exercise_1.html
1. Create an HTML Document with a table
2. Define table header, body, and footer
3. Style the table header
4. Add a zebra pattern to the table body
5. Style the footer and the last table column

Objective (M)
Modify the table to make it more interactive. If a user mouses over a table row its text should
become more readable and its color should change.
1. Use the :hover selector to modify the text color
2. Use the :hover selector to modify the text size

Objective (H)
Using events, enable row deletion. That is, if a user clicks on a row it should be removed from the
screen.

PAGE 6 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Hint: It is not necessary to reload the page, modifying the html dynamically is sufficient.

Exercise 7: CSS Floats

Objective (E)
Get comfortable with CCS float layouts by writing a page with header, footer, left (floated)
column, and right (floated) column. Use code from P10_HTML_CSS_Floats_Exercise_1.html
1. Create the page, refer to the screen shot on the next page
2. Add styles for header, footer, content, and navigation column

Objective (M)
Create a float layout for a thumbnail gallery and style it appropriately.
e.g.:

PAGE 7 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)
Create a ‘drop cap’ at the beginning of a paragraph of text. Note: the drop cap should be scaled
regardless of the current browsers font size.
Hint:

Exercise 8: Embed JavaScript into an HTML Page

Objective (E)
Learn how to process JavaScript within an HTML page. Use the code from
P21_JS_Language_Basics_Exercise_1.html
1. Create an HTML document
2. Insert the <script> tag at the end o the body
3. Send an alert popup and write some text to the console
4. Display the document in a browser and open the console (F12)
5. Open the script debugger and set a breakpoint
6. Load the page again and see the script stopping

Objective (M)
Detect and print some useful information about the current browser using Javascript.
1. Gather information from the browser using the navigator object (i.e.
navigator.appCodeName)
2. Once the information has been gathered place it between a set of <p> tags
3. Replace the innerHTML of a div tag with the <p> tags

PAGE 8 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)
Modify your page so that it prints each character of the information on a time delay as to create a
“typewriter” effect.

Hint: You may find the setInterval() method useful...

Exercise 9: String Processing

Objective (E)
Implement Caesar’s cipher (the shift cipher). Use the code from
P22_JS_Primitive_Data_Types_Exercise_1.html
1. In Caesar’s cipher, each character is shifted by a certain offset
2. Consider charCodeAt(), fromCharCode(), and %
3. Use a for loop, e.g. for (var i = 0; i < n; i++) {...}
4. Test the cipher for the alphabet with different offsets

Objective (M)
Write an algorithm, reverse(string), to reverse the letters in a string. For example, “Telephone”
would become “enohpeleT”. Output the result inside a <p> tag.

Objective (H)
Write an algorithm to reverse words inside a paragraph. For example, “The quick brown fox”
becomes “fox brown quick The”. Output the result inside a <p> tag.
Hint: One solution reuses reverse(string), another is much more trivial but not as clever!

Exercise 10: Reference Types

Objective (E)
Get familiar with array operations. Use the code from
P23_JS_Reference_Types_Exercise_1.html
1. Write the function insertAfter
2. It takes an array, an element, and a list of new elements
3. The new elements are inserted after the given element
4. If the given element does not occur, the array does not change

PAGE 9 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
Implement a shuffle(array) function that shuffles a deck of cards. For simplicity, use the following
array:
var deck = [“AceOfSpades”, “JackOfHearts”, “QueenOfDiamonds”,
“10ofHearts”, “7OfSpades”, “3ofHearts”, “SixOfDiamonds”];

Objective (H)
Write an algorithm, median(array), that computes the median value of an array of integers.
Hint: Javascript provides built in sorting for arrays, see the sort() function.

Exercise 11: Statements

Objective (E)
Use a for .. in .. loop to copy the properties of an object. Use code from
P25_JS_Statements_Exercise_1.html
1. Create an object literal
2. Add some properties (object as a “map”)
3. Use a for .. in .. loop to copy the properties into an array
4. Output the array

PAGE 10 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
In Javascript it is important to make the distinction between the ===, !== and ==, != operators
respectively. The operator ==, != will do comparisons only after type conversions, and therefore
are unreliable. Alternatively, the === and !== operators compare with no type conversions.

Knowing this, complete the following table.

Variables Evaluation True or False

`` == 0

``=== 0

0 == ``

true == `36`

36 == true

36 === ‘true’

“abc’”=== new
String(“abc”)

“abc’”== new
String(“abc”)

“2” !== 2

var a = [1,2,3], a == b
var b = [1,2,3]

var a = [1,2,3], a === b

var b = [1,2,3]

PAGE 11 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)
Rewrite the following function, foo(a, b, c) as bar(a, b, c) using only the conditional operation ? :.
Test your two functions using the Console.
function foo(a, b, c) {
if ( a ) {
if (!a && b) {
return 0;
} else {
return 1;
}
} else if ( b || c) {
return 2;
} else {
return 3;
}
}

Exercise 12: Variables and Scope - Closure

Objective (E)
Get familiar with the concept of a “closure”. Use the code from
P26_JS_Variables_Scope_Exercise_1.html
1. Write a (outer) function that returns a (inner) function
2. The outer function takes one argument, say n
3. The returned inner function also takes on argument, say x
4. The inner function returns x+n
5. Define several of those “adders” and test them

PAGE 12 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
One of the easiest methods of teaching how a programming language deals with function
parameters is by writing the swap(a,b) function. Given the following two objects, write a
function that swaps the objects.
var batman = { name: "Bruce Wayne"};
var robin = { name: "Dick Grayson"};
function swap(.....) {
}
swap(....);
Console.log(batman.name); // Dick Grayson!
Console.log(robin.name); // Bruce Wayne!

Hint: The normal approach of using a temp variable does not work (or the more clever XOR
approach), Why?

PAGE 13 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)

The following code is full of errors. The original programmer only

wishes to display Thursday after clicking on the question but he is
having a bad day. Help the programmer by fixing the buggy code.

<div id=content>What day is it?</div>

<script>
var obj = {
domElement :
document.getElementById("content"),
currentDay: "Thursday",
foo : function () {
this.domElement.addEventListener("click", function ()
{
console.log(this.currentDay);
this.domElement.innerHTML = this.currentDay;
});
}
};
obj.foo();
</script>
Hint: A little bit of this, a little bit of that!

Exercise 13: JavaScript Error Handling

Objective (E)
Get familiar with common error situations. Use the code from
P27_JS_Error_Handling_Exercise_1.html

1. Replace ‘___’ by proper code to handle the error situations

2. Replace ‘e.name’ by more descriptive member of the error object
3. Write equivalent code using instanceof

PAGE 14 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (VH)
Exceptions are a great way of failing or succeeding gracefully when an error has occurred.
However, during development, exceptions may hide unforeseen problems and you may wish to
halt execution whenever an exception is thrown.
One solution to this problem (C style language programmers will be familiar with this approach)
is to surround a flag with a if statement before every try/catch block:
function foo() {
if (debug) {
doSomething(); // throws
// execution is stopped
} else {
try {
doSomething(); // throws
} catch (...) {
// continue
}
}
}
This approach has some drawbacks: extra code, more control paths, potential performance
issues (especially inside loops). Another approach is to remove or insert the try/catch blocks
dynamically at runtime.
Write a function that, given any object, will replace its member functions that have no try/catch
blocks with ones that do. That is, the newly created function will “wrap” the current function
inside a try/catch block.
Hint: The Javascript apply() function will come in handy.

Exercise 14: JavaScript Event Handling

Objective (E)
Get familiar with adding event handlers to push buttons. Use the code from
P29_JS_Events_Exercise_1.html
1. Add an HTML event handler to the first button
2. Add a DOM Level 0 event handler to the second button
3. Add a DOM level 2 event listeners to the third button
4. Easy reaction is to send an alert popup or to change “innerHTML”

PAGE 15 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
The following table depicts the current status of the Formula 1 Drivers Championship.
Duplicate the table then add event handlers to change the colors of the background and text for
each driver. If a user clicks on a table row the colors should mimic that drivers team colors.
However, if the user clicks between the padding (not in a row), the entire table should change to
a different color - such as gray. Examples are shown:

”User clicked padding”:

PAGE 16 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

”User has clicked every row”:

Note: The background color of the table does not turn when a user selects a row!

Objective (H)
Modify your solution to the previous exercise - add event handling so that the table can be
“dragged” across the screen to a new location. The original functionality should stay the same.

Exercise 15: Inheritance

Objective (E)
Build an inheritance hierarchy for shapes, circles, and squares. Use the code from
P30_JS_OOP_Exercise_1
1. Create constructor functions for shapes, circles, and squares
2. Every shape has center coordinates
3. In addition, a circle has a radius, and a square has a side length
4. Chain the prototypes
5. Add a function to output information about each shape
6. Add further functions to output the area for circles and squares

PAGE 17 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (M)
The Factory Pattern is a popular design pattern that provides the user a generic interface for
creating ‘like’ objects. Below is an example of the Factory Pattern with the main body missing.
Complete the main body and ensure the test code works.
function Car(options) {
this.doors = options.doors || 4;
this.motor = options.motor || "4 cylinder";
this.color = options.color || "brown";
}

function Truck(options) {
this.bed = options.bed || "8ft";
this.motor = options.motor || "v8";
this.drive = options.drive || "4x4";
}

function VehicleFactory {}
VehicleFactory.prototype.... // implement

var carFactory = new VehicleFactory();

var car = carFactory.createVehicle({
vehicleType: "car",
color: "red",
motor: "v8"
});

console.log(car instanceof Car); // true

console.log(car);
var movingTruck = carFactory.createVehicle({
vehicleType: "Truck",
motor: "v12"
});
console.log(movingTruck instanceof truck); // true

PAGE 18 OF 19! !
 HTML5, CSS, JAVASCRIPT ! ! EXERCISES

Objective (H)
Modify your solution to the previous exercise. Rather than a pure factory pattern, modify the
VehicleFactory() as a singleton pattern. In other words, restrict the instantiation of the
VehicleFactory() to a single object.

PAGE 19 OF 19! !