COS10011/60004 Creating Web Applications Lab 1

Lab 1 Web Page Analysis and Intro to Scripting

Tutorials/Lab:
Every Tutorial/Lab from next week will have some assessment activities.
Assessment activities can consist of:
1. Completion of a closed-book on-line Blackboard quiz on previous
lecture(s) and Lab(s). (Remember: This will usually be the first thing to do in a lab
session)
2. Assessment of Lab Exercises. Exercises marked with an asterisk * are
assessable and contribute to your final grade. These should be completed in the
scheduled Lab, or if you are unable to complete the tasks in the Lab, then you
may arrange to have them checked off by your tutor in the following Lab. For
example, the assessable tasks in this weeks labs should be checked off in this
tute.
3. Demonstration of your Assignment work as scheduled for your Tutorials
Note: in this unit we use the terms tutorial and lab interchangeably. Lab
work is the practical exercises you do during the tutorial session.

Aims:
To analyse different views of the same HTML page through Firefox
Introduce programming concepts using JavaScript

Lab 1 - Version: July 2015 Page 1 of 8

COS10011/60004 Creating Web Applications Lab 1

Task 1: Web Page Analysis Paired Task

Pair up with the person next to you in the Lab to do this task. Both open Firefox.
Team Member 1: Open http://www.bom.gov.au/
Team Member 2: Open http://www.swinburne.edu.au/
Examine the components of a web page - Tools / Web Developer / Web
Console.
Select Tools/Web Developer/Web Console from the menubar. (Show the menubar if it is not
showing )
Select the Network tab. When this panel opens, click on the Reload button.
You should now see a list of the:
resources that make up the web page (html files, css files, javascript files, images files, media files,
etc.);
domain of each resource;
size of each of these files; and
time taken to get each of these resources (connecting, sending, waiting, and receiving).
Action | Rendering Response bom.gov.au swinburne.edu.au
How many requests?
Total size of all these resources (KB)?
Total time to load the webpage?
Size of largest image? (use the tabs at the bottom to see just the images)
Does the webpage periodically continue to ask for more resources?
Close the Web Console. [We will look at HTTP headers using this tool later]
Page Viewport - change the window / viewport size, examine page flow
In the Browser window, reduce the window size, then drag the bottom right corner of the window, to
see how the webpage content behaves, as you dynamically resize the window.
Action | Rendering Response bom.gov.au swinburne.edu.au
Does the content dynamically change, as you resize the window?
Does the content flow/wrap?
Is the content fluid in the window or fixed?
Does a horizontal scroll bar appear?
Is the page design responsive? Does the layout change to suit the window
size?
[Note: You may find it useful to use Tools/Web Developer/Responsive Design View to see how a
page will look, at different screen sizes, like on other devices.]
View / Zoom - change the page scale, examine page flow
Select View / Zoom from the menubar then increase/decrease the displayed font size (Zoom In |
Zoom Out)
[Note: You may find it easier to use the short-cut keys: Ctrl++ and Ctrl+- and Reset using Ctrl+0,
or use Ctrl+mousewheel. These short-cuts are now common zoom controls within many desktop
programs.]

Lab 1 - Version: July 2015 Page 2 of 8

COS10011/60004 Creating Web Applications Lab 1

Action | Rendering Response bom.gov.au swinburne.edu.au

Does the page layout dynamically wrap/flow, or is it fixed?
Does the page layout become unusable, with overlapping text?
Select the Zoom Text Only toggle and again Zoom In | Zoom Out. Any
problems?

View / Page Style / No style , examine page flow

Select View / Page Style / No style from the menubar.
Any style that is used for presentation of the webpage is now turned off. Resize the window again.
Action | Rendering Response bom.gov.au swinburne.edu.au
Does the content dynamically wrap/flow? Is the content usable?
Now style is removed, do elements that looked like headings still look
like / behave like headings?
Restore Style: View / Page Style / [style name].

View / Page Source

Team Member 1: Open http://www.apple.com/

Select View / Page Source from the menubar, or right click on an empty space on the webpage and
select View Page Source.
The source of the HTML used in this page should now be visible in another window or Tab.
The page source shows the HTML mark-up used for structuring and presenting this webpage.
Source www.apple.com swinburne.edu.au
What version of HTML is the page coded in? Can you tell?
What language, if any, has been set for the page?
What character encoding (charset) is being used?

Tools / Page Info

Select Tools / Page Info from the menubar, or right click in the webpage and select View Page Info
A small window with a series of tab options is displayed. Like the Web Developer / Web Console, this
enables you to see a simple analysis of some of the web page content.
Explore these items: General, Media, Permissions, Security, noting the different meta information,
the different media types, Cookies, and so on, used in the webpage.
Page Info www.apple.com swinburne.edu.au
What is the size of the largest image being loaded? (Hint: click the icon
above the vertical scroll bar to show the column of image sizes)
Are cookies being set by the page?
What is the purpose of Swinburnes cookies?
(Hint: search on the cookie name)

What is some of the information Apple is storing in your browser about

you?

Lab 1 - Version: July 2015 Page 3 of 8

COS10011/60004 Creating Web Applications Lab 1

Task 2: A very brief introduction to programming using

JavaScript

This task is particularly designed for students who have not had previous experience with a
programming / scripting language. While the scripts you write in Creating Web Applications will not be
complex, you do need to understand some basic programming concepts and techniques. These include:
Data types and their operators
Variables
Sequences of program statements.
Conditional selection of statements
Repetition of statements
Functions
Arrays.

While these concepts are common to most programming languages, we will use JavaScript syntax in
these notes. We will be working through an online tutorial (if possible do this before the tutorial session)
and practicing creating some JavaScript programs and executing them with a JavaScript interpreter.

Working through an online tutorial

There are many JavaScript tutorials on the Web. We will use an interactive tutorial from Codecademy to
cover some scripting basics.

1. Go to the following URL

http://www.codecademy.com/en/tracks/javascript-combined

If you want the Web site to remember your progress you should register and login.

2. Click Getting Started with Programming.

3. Follow the instructions on the left of the screen and enter the script on the right-hand pane as shown
in the figure below.

Lab 1 - Version: July 2015 Page 4 of 8

COS10011/60004 Creating Web Applications Lab 1

NOTE
When we get to Week 5 in this unit you will be using JavaScript to interact with Web pages. However the
Codecademy tutorial you are using in this lab has an interpreter that executes the statements you have
written when you click the Save and Submit Code button. The output from the executed code will be
shown in a little window in the top right of your window (or else in a pop-up window).

The interpreter operates in 2 modes:

1. You can just write a single expression, e.g. 2+5 which is then evaluated as 7, and output to the
screen.

2. Alternatively you can write a sequence of JavaScript statements which are executed one after the
other as a program. The output from the program can then be displayed in the output window using
the console.log function. e.g.

console.log("This sentence will show on the console in the right hand pane");

4. In the Getting Started with Programming section, work through the exercises 1 to 28. There are
helpful on-screen hints if you get stuck but you if you are unsure about anything your tutor loves
answering questions!

5. The next section in the Codecademy tutorial is on Functions in JS. We will skip this section as the way
functions are declared in the tutorial is slightly different from how we will use them. (In JavaScript
functions can be treated as variables which is a very powerful technique but beyond the scope of this

Lab 1 - Version: July 2015 Page 5 of 8

COS10011/60004 Creating Web Applications Lab 1

unit.) At this stage this might be confusing so an alternative is to look at the brief description of
functions at the W3Schools site.
http://www.w3schools.com/js/js_functions.asp

You may find the W3Schools site a useful resource HOWEVER be careful. A lot of the material is out of
date and they do not separate HTML and JavaScript as we insist on in this unit.

6. The next section is an Introduction to 'FOR' loops in JS. FOR loops are a type of counted loop and
are most useful when we know upfront how many times we want to repeat the statements in the loop.
This section also includes an introduction to Array data structures which will be useful when we are
using set of controls on Web forms. Work through exercises 1 to 12.

7. A loop that you will be more commonly using in this unit is used for the repeated reading records
from a database for searching or display on a Web page. This is covered in Introduction to 'While' loops
in JS . Work through exercises 1 to 9 of this section.

8. The section More on Control Flow in JS has some revision and introduces the SELECT control
structure which allows a selection between multiple paths rather than just 2 as in the IF control
structure. It also introduces logical operators for evaluating more complex expressions that can be
either TRUE or FALSE. Work though all the exercises in this section. Note that some of the exercises in
the tutorial use the alternative method of declaring a function.

Thats it! You should now have a basic understanding of programming constructs that will give you the
prerequisite knowledge to complete the JavaScript and PHP coding sections of this unit. We will not be
covering more advanced data structures like OBJECTS in this unit so there is no need to do those
sections in the Codecademy tutorial.

Lab 1 - Version: July 2015 Page 6 of 8