10 – Structured Programming
Mark Dixon
1
Questions: Functions
• Consider the following code:
function Smallest(num1, num2){
if (num1 < num2){
return num1;
}else{
return num2;
}
}
• name a function.
Smallest
• what is left in small after the following is
executed?
var small;
small = Smallest(23, 15);
Mark Dixon
15
2
Session Aims & Objectives
• Aims
– To introduce the fundamental aspects of the
structured programming paradigm
• Objectives,
by end of this week’s sessions, you should be able to:
– split a program into routines (procedures and
functions)
– identify whether a routine is self-contained
– recognise and create an abstract data type,
which includes data, and routines
Mark Dixon
3
Example: Ball Bounce v1
<html>
<head><title>Ball Bounce</title></head>
<body style="margin: 0;" onload="window_onLoad()">
<img id="imgBall" src="Ball.gif" style="position: absolute;" />
</body>
</html>
<script language="javascript">
var x;
var y;
var xInc;
var yInc;
function window_onLoad(){
window.setInterval("Main()", 20);
xInc = 5;
yInc = 3;
}
Mark Dixon
function Main(){
x = imgBall.style.posLeft + xInc;
if (x <= 0 || x >= document.body.clientWidth - imgBall.width){
xInc = -xInc;
}else{
imgBall.style.posLeft = x;
}
y = imgBall.style.posTop + yInc;
if (y <= 0 || y >= document.body.clientHeight - imgBall.height){
yInc = -yInc;
}else{
imgBall.style.posTop = y;
}
}
</script>
4
Structured Paradigm
• Program made up of
– data structures (variables & arrays), and
– routines (procedures & functions)
that process the data within those structures.
• Each routine should perform a single,
clearly identifiable operation.
• Each routine should be self-contained
• Abstract data type = structures + routines
Mark Dixon
5
Self-Contained Routines: What?
• Self-contained:
– no references to external objects & variables
var p;
function a1(h, f){
return (h + f) * f;
}
function a2(){
imgBall.style.posLeft = p;
}
Mark Dixon
yes
no
6
Self-Contained Routines: Why?
• Good design principle:
– because easier to re-use in other programs
Mark Dixon
var u;
var a;
a = 4;
u = Twice();
var u
function Twice(){
return a * 2;
}
function Twice(a){
return = a * 2;
}
u = Twice(4);
7
Question: Self-Contained Routines
• Are the following routines self contained?
var num1;
var num2;
var diff;
function Compare(){
diff = num1 - num2;
}
function Half(num){
return num / 2;
}
Mark Dixon
8
Making a routine self-contained
• identify why it isn't self-contained:
var m;
function MoveMiddle(){
m = document.body.clientWidth / 2;
picDog.style.posLeft = m;
}
• the call:
MoveMiddle()
Mark Dixon
9
Making a routine self-contained
• if variables are only used by this routine,
then make them local:
function MoveMiddle(){
var m;
m = document.body.clientWidth / 2;
picDog.style.posLeft = m;
}
• the call:
MoveMiddle()
Mark Dixon
10
Making a routine self-contained
• if variables / identifiers are used elsewhere,
then use a parameter:
function MoveMiddle(picAny){
var m;
m = document.body.clientWidth / 2;
picAny.style.posLeft = m;
}
• the call now needs an actual parameter:
MoveMiddle(picDog)
Mark Dixon
11
Making a routine self-contained
• some items are difficult to fix (e.g.
document – built in object):
function MoveMiddle(picAny){
var m;
m = document.body.clientWidth / 2;
picAny.style.posLeft = m;
}
• the call:
Either:
- use parameter
- leave it
MoveMiddle(picDog)
Mark Dixon
12
Question: Self-contained
• Which of the following routines are self-contained?
var s;
function goo(h, f){
return (h + f) * s;
}
function poo(j, k, vi){
if(j > 45){
return k + vi;
}else{
return k - vi;
}
}
Mark Dixon
13
Question: Self-contained
• Change the following so that it is self-contained?
var co;
function calcRate(am){
co = 0.1;
return am * co;
}
Mark Dixon
14
Example: Ball Bounce v1
<html>
<head><title>Ball Bounce</title></head>
<body style="margin: 0;" onload="window_onLoad()">
<img id="imgBall" src="Ball.gif" style="position: absolute;" />
</body>
</html>
<script language="javascript">
var x;
var y;
var xInc;
var yInc;
function window_onLoad(){
window.setInterval("Main()", 20);
xInc = 5;
yInc = 3;
}
Mark Dixon
function Main(){
x = imgBall.style.posLeft + xInc;
if (x <= 0 || x >= document.body.clientWidth - imgBall.width){
xInc = -xInc;
}else{
imgBall.style.posLeft = x;
}
y = imgBall.style.posTop + yInc;
if (y <= 0 || y >= document.body.clientHeight - imgBall.height){
yInc = -yInc;
}else{
imgBall.style.posTop = y;
}
}
</script>
15
Example: Ball Bounce v2
Sprite.js
BallBounce.htm
<html>
<head><title>Ball Bounce</title></head>
<body style="margin: 0;" onload="window_onLoad()">
<img id="imgBall" src="Ball.gif" style="position: absolute;" />
</body>
</html>
<script language="javascript" src="Sprite.js"></script>
<script language="javascript">
function window_onLoad(){
window.setInterval("Main()", 20);
Init(5, 3);
}
function Main(){
Move(imgBall);
}
</script>
Mark Dixon
var x
var y
var xInc
var yInc
function Init(tmpXInc, tmpYInc){
xInc = tmpXInc
yInc = tmpYInc
}
function Move(img){
x = img.style.posLeft + xInc
if (x <= 0 || x >= document.body.clientWidth - img.width){
xInc = -xInc
}else{
img.style.posLeft = x
}
y = img.style.posTop + yInc
if (y <= 0 || y >= document.body.clientHeight - img.height){
yInc = -yInc
}else{
img.style.posTop = y
}
}
16
Example: Balloon Shoot
• Question:
– what objects?
– what variables?
– what procedures /
functions?
Mark Dixon
17
Tutorial Exercise: Ball Bounce
• Learning Objective: To create and use your own class.
• Task 1: Get the Ball Bounce examples (1, and 2) from the
lecture working.
• Task 2: Add another sprite.
Hint: Use Arrays.
• Task 3: Add another 5 sprites.
• Task 4: Add a hit method to the sprite class, which detects
the collision with another sprite.
• Task 5: Modify your page to count the number of hits
between the two sprites.
• Task 6: Modify your page to make sprites bounce off each
other.
Mark Dixon
18
Tutorial Exercise: Balloon Shoot
• Learning Objective: To create and use your own classes.
• Task 1: Create the Balloon Shoot example (from the
lecture) using object oriented concepts (classes,
properties, methods, and instances)
hint: use some of the code from your Interceptor example
(from last week)
Mark Dixon
19
© Copyright 2026 Paperzz