Tishk International University

Faculty of Engineering
Computer Engineering Department

Loops, Additional Controls,

Manipulating CSS with JavaScript

Musa M. Ameen
Web Programming I (CMPE 341)
10
Week 10
Fall 2024/25
Outline
✓ while Loop
✓ External JavaScript Files
✓ JavaScript Debugging
✓ Using JavaScript to Retrieve Radio Button Objects
✓ Using JavaScript to Retrieve Checkbox Objects
✓ fieldset and legend Elements
✓ for Loop
✓ Manipulating CSS with JavaScript
✓ Global Variables

2
Objectives
✓ Use a while loop to solve problems that require repetition.
✓ For web pages with a significant amount of JavaScript code, move that code to an
external file.
✓ Use a radio button group when the user is supposed to select one value from
among a list of values.
✓ Use a checkbox when the user is supposed to check or not check an item for
selection.
✓ Implement a compact solution for a repetitive task using a for loop if you know in
advance how many times the loop will execute.
✓ Learn techniques for dynamically updating the appearance of a web page using
JavaScript and CSS.
✓ Use absolute positioning and the z-index property to position elements on top of
each other.
3
Main Textbook Source
Web Programming with HTML5, CSS, and JavaScript, John Dean

✓ Chapter 10 Loops, Additional Controls, Manipulating

CSS with JavaScript

The topics of this slide is not covered in detail here.

It's recommended to read from the book to get

more information and details about all the topics.

4
while Loop
For many programming tasks, you’ll need to perform the same operation repeatedly (e.g.,
adding a group of numbers to find their sum).
To perform operations repeatedly, you’ll need to use a loop statement.
JavaScript provides three types of loop statements:
while loop
do..while loop
for loop

5
External JavaScript Files
All the JavaScript function definitions you’ve seen so far have been positioned within web
page head containers. In the real world, web programmers will often use external files to hold
their JavaScript function definitions and then have their web pages link to those external
JavaScript file(s).
There are several advantages of positioning a web page’s JavaScript function definitions in an
external file:
➢ If another web page needs the functionality provided by one of the functions, the second
web page can link to the external file and share the function. By using the already-written
function, the second web page doesn’t have to “reinvent the wheel.”
➢ If an external JavaScript file and its functions are shared by multiple web pages,
maintenance (i.e., fixing bugs and making improvements) becomes easier and storage
requirements are reduced.
To link a web page to an external JavaScript file, include an empty script container with a src
attribute that specifies the location of the file. For example:
<script src="myscripts.js"></script>
6
Example – Part 1

7
Example – Part 2

8
Example – Part 3

9
Using JavaScript to Retrieve Radio Button Objects
Now it’s time to get acquainted with the other side of the coin—the JavaScript used to access
and manipulate the radio button object’s properties.
The first step in your journey toward manipulation mastery is knowing how to retrieve a radio
button object. Before retrieving an individual radio button, you need to retrieve the collection of
radio buttons that the radio button is part of.
In the past, to retrieve an individual control, we used form.elements with []’s around the
control’s id value. To retrieve a collection of radio buttons, we once again use form.elements,
but this time the []’s go around the name value for the radio buttons that are grouped
together. For example, here’s how you can retrieve the radio button collection for a group of
radio buttons where “color” is the name of the radio button group:
tshirtRBs = form.elements["color"];
Then, to retrieve an individual radio button within the collection, you use the notation
collection[index], where an index value of 0 refers to the collection’s first object, an index
value of 1 refers to the collection’s second object, and so on.
For example, you could use the following code to retrieve the second radio button in the
tshirtRBs collection:
pistachioRB = tshirtRBs[1]; 10
Using JavaScript to Retrieve Radio Button Objects
In figure below, note how several of the properties’ descriptions start with “Returns” and the
others start with “Returns/assigns.”

11
Using JavaScript to Retrieve Checkbox Objects
To retrieve a standalone checkbox, you use form.elements with []’s around the checkbox’s id
value.
For example, to retrieve the checkbox presented earlier where the user accepted a form’s
terms and conditions, you could use the following code, where “accept-terms” is the
checkbox’s id value:
acceptTermsCB = form.elements["accept-terms"];
To retrieve a checkbox that’s part of a group of checkboxes, you first retrieve the checkbox’s
collection by using form.elements with []’s around the checkbox group’s name value.
Then, to retrieve an individual checkbox within the collection, you use the notation
collection[index] notation, where an index value of 0 refers to the first object in the collection.
For example, you could use the following code to retrieve the third checkbox in the
jobSkillsCBs collection:
coffeeCB = jobSkillsCBs[2];

12
Using JavaScript to Retrieve Checkbox Objects
Figure below shows the more popular JavaScript properties for checkbox collections and
individual checkbox objects.
List of properties is pretty much the same as for radio buttons, except there’s no value
property for the collection.

13
Example – Part 1

14
Example – Part 2

15
for Loop
Using a while loop works OK, but in
this section, we use a for loop to
access the checkboxes, which
leads to a more compact
implementation.
Note that we declare the i index
variable with let in the for loop
heading.
When you declare a for loop index
variable with let, that limits the
scope of the index variable to just
the loop.
In other words, whenever a variable
is declared in the for loop heading,
it exists and can be recognized and
used only by code that is within the
heading or body of that for loop.
16
fieldset and legend Elements
In the past several lectures, we’ve used radio button groups and checkbox groups. To make
the groupings more obvious to someone viewing the web page, you can add a border around
each group and embed a caption within the border.
Note the following example, which provides a border and caption for a group of three color-
selection radio buttons:

To make a border, surround the radio button elements with a fieldset container. To make a
caption, include a legend element within the fieldset container.
Here’s the relevant code that was used to create the preceding radio button group:

17
Manipulating CSS with JS – Part 1

18
Example – Part 2

19
Example – Part 3

20
Global Variables
A variable declared outside a function, becomes GLOBAL. Global variables can be accessed
from anywhere in a JavaScript program.
Variables declared with var or let is quite similar when declared outside a block, they both
have Global scope.
To use var when declaring variables within a function, and if you omit the var, the JavaScript
engine creates a global variable.
With a global variable, the variable is shared by all of the web page’s functions. Formally, we
say that the global variable’s scope is the entire web page.
The other feature of a global variable relates to its persistence. Persistence refers to how long
a variable’s value survives before it’s wiped out.
Global variables persist for as long as the variable’s web page is loaded on the browser. That’s
in contrast to local variables, which are declared using var within a function.

21
JavaScript Debugging
All of the major browsers have debugging tools built in. Chrome’s debugging tool is called
“Developer Tools.”
To load it while viewing a web page with Chrome, you press ctrl+shift+i for Windows
computers or cmd+opt+i for Mac computers.
As you execute JavaScript on a web page, if there’s a syntax error, the console frame displays
a message that describes the error and provides a link to the errant line in the source code.
Also, to help with debugging, you can call console.log with a message as an argument and
the message gets displayed in the debugger’s console frame. Very helpful again!
For example, suppose you’ve got an event handler that calculates the total cost of a user’s
purchase, and you want to display the cost variable’s value.
The following console.log method call displays the cost variable’s value in the console
frame:
console.log("cost = " + cost);

22
References
✓ Dean, J. (2018). Web programming with HTML5, CSS, and JavaScript. Jones &
Bartlett Learning.
✓ JavaScript Tutorial. (2023). https://www.w3schools.com/js/
✓ MDN web docs from Mozilla Developer Group. (2023). JavaScript.
https://developer.mozilla.org/en-US/docs/Web/JavaScript

23