Web Systems and
Services
CHAPTER TWO
HTML, CSS, AND JAVASCRIPT
BITS College
Addis Ababa, Ethiopia, 2025
Lecturer Name:
4/13/2025 1
JavaScript
3
4
DHTML
Dynamic Behavior at the Client Side
What is DHTML?
• Dynamic HTML (DHTML)
• Makes possible a Web page to react and change in response to
the user’s actions
• DHTML = HTML + CSS + JavaScript
DHTML
XHTML CSS JavaScript DOM
6
DTHML = HTML + CSS + JavaScript
• HTML defines Web sites content through semantic tags
(headings, paragraphs, lists, …)
• CSS defines 'rules' or 'styles' for presenting every aspect
of an HTML document
• Font (family, size, color, weight, etc.)
• Background (color, image, position, repeat)
• Position and layout (of any object on the page)
• JavaScript defines dynamic behavior
• Programming logic for interaction with the user, to handle
events, etc.
7
JavaScript
Dynamic Behavior in a Web Page
JavaScript
• JavaScript is a front-end scripting language developed by
Netscape for dynamic content
• Lightweight, but with limited capabilities
• Can be used as object-oriented language
• Client-side technology, nowadays both side
• Embedded in your HTML page
• Interpreted by the Web browser
• Simple and flexible
• Powerful to manipulate the DOM
9
What Can JavaScript Do?
• Can handle events
• Can read and write HTML elements and modify the DOM
tree
• Can validate form data
• Can access / modify browser cookies
• Can detect the user’s browser and OS
• Can be used as object-oriented language
• Can handle exceptions
• Can perform asynchronous server calls (AJAX)
10
The First Script
first-script.html small-example.html
<html> <html>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
alert('Hello JavaScript!'); document.write('JavaScript rulez!');
</script> </script>
</body> </body>
</html> </html>
11
Using JavaScript Code
• The JavaScript code can be placed in:
• <script> tag in the head
• <script> tag in the body – not recommended
• External files, linked via <script> tag the head
• Files usually have .js extension
• Highly recommended
• The .js files get cached by the browser
<script src="scripts.js" type="text/javscript">
<!– code placed here will not be executed! -->
</script>
12
JavaScript – When is Executed?
• JavaScript code is executed during the page loading or
when the browser fires an event
• All statements are executed at page loading
• Some statements just define functions that can be called later
• Function calls or code can be attached as "event
handlers" via tag attributes
• Executed when the event is fired by the browser
<img src="logo.gif" onclick="alert('clicked!')" />
13
Calling a JavaScript Function from Event Handler – Example
<html> image-onclick.html
<head>
<script type="text/javascript">
function test (message) {
alert(message);
}
</script>
</head>
<body>
<img src="logo.gif"
onclick="test('clicked!')" />
</body>
</html>
14
Using External Script Files
• Using external script files:
<html>
<head> external-JavaScript.html
<script src="sample.js" type="text/javascript">
</script>
</head>
<body>
The <script> tag is always empty.
<button onclick="sample()" value="Call JavaScript
function from sample.js" />
</body>
</html>
• External JavaScript file:
function sample() {
alert('Hello from sample.js!')
} sample.js
15
The JavaScript
Syntax
JavaScript Syntax
• The JavaScript syntax is similar to C# and Java
• Operators (+, *, =, !=, &&, ++, …)
• Variables (typeless)
• Conditional statements (if, else)
• Loops (for, while)
• Arrays (my_array[]) and associative arrays (my_array['abc'])
• Functions (can return value)
• Function variables (like the C# delegates)
17
Data Types
• JavaScript data types:
• Numbers (integer, floating-point)
• Boolean (true / false)
• String type – string of characters
var myName = "You can use both single or double
quotes for strings";
• Arrays
var my_array = [1, 5.3, "aaa"];
• Associative arrays (hash tables)
var my_hash = {a:2, b:3, c:"text"};
18
Everything is Object
• Every variable can be considered as object
• For example strings and arrays have member functions:
objects.html
var test = "some string";
alert(test[7]); // shows letter 'r'
alert(test.charAt(5)); // shows letter 's'
alert("test".charAt(1)); //shows letter 'e'
alert("test".substring(1,3)); //shows 'es'
var arr = [1,3,4];
alert (arr.length); // shows 3
arr.push(7); // appends 7 to end of array
alert (arr[3]); // shows 7
19
String Operations
• The + operator joins strings
string1 = "fat ";
string2 = "cats";
alert(string1 + string2); // fat cats
alert("9" + 9); // 99
• What is "9" + 9?
alert(parseInt("9") + 9); // 18
• Converting string to number:
20
Arrays Operations and Properties
• Declaring new empty array:
var arr = new Array();
• Declaring an array holding few elements:
var arr = [1, 2, 3, 4, 5];
• Appending an element / getting the last element:
arr.push(3);
var element = arr.pop();
• Reading the number of elements (array length):
arr.length;
• Finding element's index in the array:
arr.indexOf(1);
21
Standard Popup Boxes
• Alert box with text and [OK] button
• Just a message shown in a dialog box:
alert("Some text here");
• Confirmation box
• Contains text, [OK] button and [Cancel] button:
confirm("Are you sure?");
• Prompt box
• Contains text, input field with default value:
prompt ("enter amount", 10);
22
Sum of Numbers – Example
sum-of-numbers.html
<html>
<head>
<title>JavaScript Demo</title>
<script type="text/javascript">
function calcSum() {
value1 =
parseInt(document.mainForm.textBox1.value);
value2 =
parseInt(document.mainForm.textBox2.value);
sum = value1 + value2;
document.mainForm.textBoxSum.value = sum;
}
</script>
</head>
23
Sum of Numbers – Example (2)
sum-of-numbers.html (cont.)
<body>
<form name="mainForm">
<input type="text" name="textBox1" /> <br/>
<input type="text" name="textBox2" /> <br/>
<input type="button" value="Process"
onclick="javascript: calcSum()" />
<input type="text" name="textBoxSum"
readonly="readonly"/>
</form>
</body>
</html>
24
JavaScript Prompt – Example
prompt.html
price = prompt("Enter the price", "10.00");
alert('Price + VAT = ' + price * 1.2);
25
Conditional Statement (if)
unitPrice = 1.30;
if (quantity > 100) {
unitPrice = 1.20;
}
Symbol Meaning
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
== Equal
!= Not equal
26
Conditional Statement (if) (2)
• The condition may be of Boolean or integer type:
conditional-statements.html
var a = 0;
var b = true;
if (typeof(a)=="undefined" || typeof(b)=="undefined") {
document.write("Variable a or b is undefined.");
}
else if (!a && b) {
document.write("a==0; b==true;");
} else {
document.write("a==" + a + "; b==" + b + ";");
}
27
Switch Statement
• The switch statement works like in C#:
switch-statements.html
switch (variable) {
case 1:
// do something
break;
case 'a':
// do something else
break;
case 3.14:
// another code
break;
default:
// something completely different
}
28
Loops
• Like in C#
• for loop
• while loop
• do … while loop
var counter;
for (counter=0; counter<4; counter++) {
alert(counter);
}
while (counter < 5) {
alert(++counter);
}
loops.html
29
Functions
• Code structure – splitting code into parts
• Data comes in, processed, result returned
Parameters come in
function average(a, b, c) here.
{
var total; Declaring variables
total = a+b+c; is optional. Type is
return total/3; never declared.
}
Value returned
here.
30
Function Arguments and Return Value
• Functions are not required to return a value
• When calling function it is not obligatory to specify all of
its arguments
• The function has access to all the arguments passed
via arguments array
function sum() {
var sum = 0;
for (var i = 0; i < arguments.length; i ++)
sum += parseInt(arguments[i]);
return sum;
} functions-demo.html
alert(sum(1, 2, 4));
31
Document Object Model (DOM)
Document Object Model (DOM)
• Every HTML element is accessible via the JavaScript
DOM API
• Most DOM objects can be manipulated by the
programmer
• The event model lets a document to react when
the user does something on the page
• Advantages
• Create interactive pages
• Updates the objects of a page without reloading it
33
Accessing Elements
• Access elements via their ID attribute
var elem = document.getElementById("some_id")
• Via the name attribute
var arr = document.getElementsByName("some_name")
• Via tag name
var imgTags = el.getElementsByTagName("img")
• Returns array of descendant <img> elements of the element "el"
34
DOM Manipulation
• Once we access an element, we can read and write
its attributes
DOM-manipulation.html
function change(state) {
var lampImg = document.getElementById("lamp");
lampImg.src = "lamp_" + state + ".png";
var statusDiv =
document.getElementById("statusDiv");
statusDiv.innerHTML = "The lamp is " + state";
}
…
<img src="test_on.gif" onmouseover="change('off')"
onmouseout="change('on')" />
35
Common Element Properties
• Most of the properties are derived from the HTML
attributes of the tag
• E.g. id, name, href, alt, title, src, etc…
• style property – allows modifying the CSS styles of the
element
• Corresponds to the inline style of the element
• Not the properties derived from embedded or external CSS rules
• Example: style.width, style.marginTop,
style.backgroundImage
36
Common Element Properties (2)
• className – the class attribute of the tag
• innerHTML – holds all the entire HTML code inside the
element
• Read-only properties with information for the current
element and its state
• tagName, offsetWidth, offsetHeight, scrollHeight,
scrollTop, nodeType, etc…
37
Accessing Elements through the DOM Tree Structure
• We can access elements in the DOM through some tree
manipulation properties:
• element.childNodes
• element.parentNode
• element.nextSibling
• element.previousSibling
• element.firstChild
• element.lastChild
38
Accessing Elements through the DOM Tree
var el = document.getElementById('div_tag');
alert (el.childNodes[0].value);
alert (el.childNodes[1].
getElementsByTagName('span').id);
…
<div id="div_tag">
<input type="text" value="test text" />
<div>
<span id="test">test span</span>
</div>
</div>
accessing-elements-demo.html
Warning: may not return what you expected due to Browser differences
39
The HTML DOM
Event Model
The HTML DOM Event Model
• JavaScript can register event handlers
• Events are fired by the Browser and are sent to the specified
JavaScript event handler function
• Can be set with HTML attributes:
<img src="test.gif" onclick="imageClicked()" />
• Can be accessed through the DOM:
var img = document.getElementById("myImage");
img.onclick = imageClicked;
41
The HTML DOM Event Model (2)
• All event handlers receive one parameter
• It brings information about the event
• Contains the type of the event (mouse click, key press, etc.)
• Data about the location where the event has been fired (e.g. mouse
coordinates)
• Holds a reference to the event sender
• E.g. the button that was clicked
42
The HTML DOM Event Model (3)
• Holds information about the state of [Alt], [Ctrl] and [Shift] keys
• Some browsers do not send this object, but place it in the document.event
• Some of the names of the event’s object properties are browser-specific
43
Common DOM Events
• Mouse events:
• onclick, onmousedown, onmouseup
• onmouseover, onmouseout, onmousemove
• Key events:
• onkeypress, onkeydown, onkeyup
• Only for input fields
• Interface events:
• onblur, onfocus
• onscroll
44
Common DOM Events (2)
• Form events
• onchange – for input fields
• onsubmit
• Allows you to cancel a form submission
• Useful for form validation
• Miscellaneous events
• onload, onunload
• Allowed only for the <body> element
• Fires when all content on the page was loaded / unloaded
45
onload Event – Example
• onload event onload.html
<html>
<head>
<script type="text/javascript">
function greet() {
alert("Loaded.");
}
</script>
</head>
<body onload="greet()" >
</body>
</html>
46
The Built-In
Browser Objects
Built-in Browser Objects
• The browser provides some read-only data via:
• window
• The top node of the DOM tree
• Represents the browser's window
• document
• holds information the current loaded document
• screen
• Holds the user’s display properties
• browser
• Holds information about the browser
48
DOM Hierarchy – Example
window
navigator screen document history location
form form
button form
49
Opening New Window – Example
• window.open()
window-open.html
var newWindow = window.open("", "sampleWindow",
"width=300, height=100, menubar=yes,
status=yes, resizable=yes");
newWindow.document.write(
"<html><head><title>
Sample Title</title>
</head><body><h1>Sample
Text</h1></body>");
newWindow.status =
"Hello folks";
50
The Navigator Object
alert(window.navigator.userAgent);
The browser The navigator in the The userAgent
window browser window (browser ID)
51
The Screen Object
• The screen object contains information about the display
window.moveTo(0, 0);
x = screen.availWidth;
y = screen.availHeight;
window.resizeTo(x, y);
52
Document and Location
• document object
• Provides some built-in arrays of specific
objects on the currently loaded Web page
document.links[0].href = "yahoo.com";
document.write(
"This is some <b>bold text</b>");
• document.location
• Used to access the currently open URL or redirect the
browser
document.location = "http://www.yahoo.com/";
53
Form Validation – Example
form-validation.html
function checkForm()
{
var valid = true;
if (document.mainForm.firstName.value == "") {
alert("Please type in your first name!");
document.getElementById("firstNameError").
style.display = "inline";
valid = false;
}
return valid;
}
…
<form name="mainForm" onsubmit="return checkForm()">
<input type="text" name="firstName" />
…
</form>
54
The Math Object
• The Math object provides some mathematical functions
math.html
for (i=1; i<=20; i++) {
var x = Math.random();
x = 10*x + 1;
x = Math.floor(x);
document.write(
"Random number (" +
i + ") in range " +
"1..10 --> " + x +
"<br/>");
}
55
The Date Object
• The Date object provides date / calendar functions
dates.html
var now = new Date();
var result = "It is now " + now;
document.getElementById("timeField")
.innerText = result;
...
<p id="timeField"></p>
56
Timers: setTimeout()
• Make something happen (once) after a fixed delay
var timer = setTimeout('bang()', 5000);
5 seconds after this statement
executes, this function is called
clearTimeout(timer);
Cancels the timer
57
Timers: setInterval()
• Make something happen repeatedly at fixed intervals
var timer = setInterval('clock()', 1000);
This function is called continuously per 1
second.
clearInterval(timer);
Stop the timer.
58
Timer – Example
timer-demo.html
<script type="text/javascript">
function timerFunc() {
var now = new Date();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
document.getElementById("clock").value =
"" + hour + ":" + min + ":" + sec;
}
setInterval('timerFunc()', 1000);
</script>
<input type="text" id="clock" />
59
Thank You !!!
4/13/2025 60
