12/7/2025

Web Systems

Introduction to Client-Side
Scripting and JavaScript

Topic 7

Prepared by: Ms. Maram Baatya

LOGO

Learning Outcomes

By the end of this lecture, students will be able to:

1. Explain the role of client-side scripting and its

importance in building interactive web pages.
2. Describe the basics of JavaScript and
differentiate it from other scripting/programming
languages.
3. Incorporate JavaScript into HTML using inline,
internal, and external scripts.
4. Write basic JavaScript statements, blocks, and
functions.
5. Use JavaScript objects and the DOM to access,
modify, and update HTML elements dynamically.
2

2 6.

1
 12/7/2025

1 Introduction to Client-Side Scripting

 HTML is good for developing static

pages

 Can specify text/image layout, presentation,

links, …

 In order to develop interactive/reactive pages,

must integrate programming in some form or
another.

1 Introduction to Client-Side Scripting

Client-Side Scripting

 Programs are written in a separate programming

(or scripting) language:
e.g., JavaScript, JScript, VBScript
 They are embedded in the HTML of a Web page,
with (HTML) tags to identify the program
component:
e.g., <script type="text/javascript"> … </script>
 The browser executes the program as it loads the
page, integrating the dynamic output of the
program with the static content of HTML
 Could also allow the user (client) to input
information and process it, might be used to
validate input before it’s submitted to a remote
4
server

2
 12/7/2025

1 Introduction to Client-Side Scripting

1 Introduction to Client-Side Scripting

Client-Side Scripting
 a scripting language is a simple, interpreted
programming language
 Scripts are embedded as plain text, interpreted by
application
1. Platform-independence: code interpreted by any
script-enabled browser
2. Simpler execution model: don't need compiler or
development environment
3. Saves bandwidth: source code is downloaded, not
compiled executable
 but: slower than compiled code, not as powerful/full-
featured, JavaScript-heavy web applications can be
complicated to debug and maintain.
6

3
 12/7/2025

1 Introduction to Client-Side Scripting

Client-Side Scripting

 Adding dynamic features to Web pages

 Validation of form data (probably the most
commonly used application)
 Handling cookies

 Defining programs with Web interfaces

 Utilize buttons, text boxes, clickable images,
prompts, etc.

1 Introduction to Client-Side Scripting

4
 12/7/2025

1 Introduction to Client-Side Scripting

1 Introduction to Client-Side Scripting

Limitations of Client-Side Scripting

 Since script code is embedded in the page, it is
viewable to the world
 For security reasons, scripts are limited in what
they can do
e.g., can't access the client's hard drive
 Since they are designed to run on any machine
platform, scripts do not contain platform specific
commands
 Script languages are not full-featured
e.g., JavaScript objects are very crude, not good
for large project development

10

10

5
 12/7/2025

2 Introduction to JavaScript

What is JavaScript?

 JavaScript is a scripting language that runs in a web

browser (client-side)
 A scripting language is a lightweight programming
language
 JavaScript is developed by Netscape
 It was designed to add interactivity to HTML pages
 It is usually embedded directly into HTML pages
 JavaScript is the most popular scripting language on the
internet, and works in all major browsers, such as Internet
Explorer, Firefox, Chrome, Opera, and Safari.
 Everyone can use JavaScript without purchasing a license
 It is used in billions of Web pages to add functionality,
validate forms, communicate with the server, and much
11
more.

11

1 Introduction to Client-Side Scripting

 JavaScript:
 the first Web scripting language,
 developed by Netscape in 1995
 syntax similarities to Java/C++, but simpler, more
flexible in some respects, limited in other

 JScript:
 Microsoft version of JavaScript, introduced in 1996
 same core language, but some browser-specific
differences
 fortunately, IE, Netscape, Firefox, etc. can (mostly)
handle both JavaScript & JScript

 VBScript:
 client-side scripting version of Microsoft Visual Basic

12

12

6
 12/7/2025

2 Introduction to JavaScript

Are Java and JavaScript the same?

 Java and JavaScript are two completely different

languages in both concept and design!
 Java (developed by Sun Microsystems) is a
compiled, object-oriented language, popular for its
ability to run on any platform with a JVM installed
- in the same category as C and C++.
 JavaScript is not a full-featured programming
language.
 JavaScript is one of the world’s most popular
interpreted languages, with fewer of the object-
oriented features of Java, and runs directly inside
the browser, without the need for the JVM.

13

13

2 Introduction to JavaScript

What Can JavaScript do?

 JavaScript gives HTML designers a programming tool - HTML

authors are normally not programmers, but JavaScript is a scripting
language with a very simple syntax! Almost anyone can put small
"snippets" of code into their HTML pages
 JavaScript can react to events - A JavaScript can be set to execute
when something happens, like when a page has finished loading or when a
user clicks on an HTML element
 JavaScript can read and write HTML elements - A JavaScript can read
and change the content of an HTML element
 JavaScript can be used to validate data - A JavaScript can be used to
validate form data before it is submitted to a server. This saves the server
from extra processing
 JavaScript can be used to detect the visitor's browser , and -
depending on the browser - load another page specifically designed for
that browser.
 JavaScript can be used to create cookies - A JavaScript can be used
to store and retrieve information on the visitor's computer
14

14

7
 12/7/2025

2 Introduction to JavaScript
Incorporating JavaScript into HTML

 JavaScript programs require the <SCRIPT> tag in .html files

<script >
ACTUAL JavaScript code here
</script>
 These can appear in either the <HEAD> or <BODY> section
of an html document
• Functions and code that may execute multiple times is
typically placed in the <HEAD>
• Code that needs to be executed only once, when the
document is first loaded is placed in the <BODY>
 JavaScript can be linked to an HTML page in a number of
ways.
 Inline
 Embedded
15
 External

15

2 Introduction to JavaScript

Using an Inline JavaScript

 Inline JavaScript refers to the practice of including

JavaScript code directly within certain HTML attributes

 Example:

<a href="JavaScript:OpenWindow();">more info</a> <br>

<button you sure?');"> Hit Me!
</button>

16

16

8
 12/7/2025

2 Introduction to JavaScript

Using an Internal JavaScript

 Embedded JavaScript refers to the practice of

placing JavaScript code within a <script>
element
 Example:
<html>
<head>
</head>
<body>
<script type="text/javascript">
/* A JavaScript Comment */
alert("Hello World!");
</script>
</body>
</html>
17

17

2 Introduction to JavaScript

Using an External JavaScript

 JavaScript can also be placed in external files.
 External JavaScript files often contain code to be used on
several different web pages.
 External JavaScript files have the file extension .js.
 External script cannot contain the <script></script> tags!
 To use an external script, point to the .js file in the "src"
attribute of the <script> tag:
Example: <html>
<head>
<script type="text/javascript" src="[Link]"></script>
</head>
<body>
</body>
</html>

18

18

9
 12/7/2025

3 JavaScript Statements

 JavaScript code is a sequence of statements to be

executed by the browser.
 A JavaScript statement is a command to a browser
to tell the browser what to do.
 This JavaScript statement tells the browser to
write "Hello World" to the web page:
[Link]("Hello World");
 It is normal to add a semicolon at the end of each
executable statement.
 The semicolon is optional (according to the
JavaScript standard), but using semicolons makes
it possible to write multiple statements on one line.
19

19

3 JavaScript Statements

JavaScript Code

 Each statement is executed by the browser in the

sequence they are written.
 This example will write a heading and two paragraphs
to a web page:
Example:
<script type="text/javascript">
[Link]("<h1>This is a heading</h1>");
[Link]("<p>This is a paragraph.</p>");
[Link]("<p>This is another paragraph.</p>");
</script>

20

20

10
 12/7/2025

3 JavaScript Statements

JavaScript Blocks
 JavaScript statements can be grouped together in blocks.
 Blocks start with a left curly bracket {, and end with a
right curly bracket }.
 The purpose of a block is to make the sequence of
statements execute together.
Example

<script type="text/javascript">
{
[Link]("<h1>This is a heading</h1>");
[Link]("<p>This is a paragraph.</p>");
[Link]("<p>This is another paragraph.</p>");
}
</script>

21

21

4 JavaScript Objects

 JavaScript is not a full-fledged object-oriented

programming language.
 It does not have classes, and it does not
support many of the patterns you’d expect
from an object-oriented language like
inheritance.
 The language does, however, support objects.
 JavaScript is object oriented in that almost
everything in the language is an object:
 the objects in JavaScript are prototype-based rather than
class-based, which means that while JavaScript shares
some syntactic features of PHP, Java or C#, it is also
quite different from those languages.
22

22

11
 12/7/2025

4 JavaScript Objects

 Objects are variables. But objects can contain many

values.
 Objects can have constructors, properties, and
methods associated with them.
 There are objects that are included in the JavaScript
language; we can also define our own kind of objects.
 Normally to create a new object we use the new keyword,
the object name, and ( ) brackets with n optional
parameters inside, comma delimited as follows:
Syntax: var someObject = new ObjectName(p1,p2,..., pn);

 For some objects, shortcut constructors are defined:

vargreeting = "Good Morning";
/* informal*/
vargreeting = new String("Good Morning");
23

23

4 JavaScript Objects

 Each object might have properties that can be

accessed, depending on its definition.
 When a property exists, it can be accessed using
dot notation where a dot between the instance
name and the property references that property.

//show [Link] to the user

alert([Link]);

24

24

12
 12/7/2025

4 JavaScript Objects

 Objects can also have methods, which are

functions associated with an instance of an
object.
 These methods are called using the same dot
notation as for properties, but instead of
accessing a variable, we are calling a method.
[Link](); [Link]()

 Methods may produce different output

depending on the object they are associated
with because they can utilize the internal
properties of the object.

25

25

4 JavaScript Objects

A number of useful objects are included

with JavaScript including:

 Array
 Boolean
 Date
 Math
 String
 DOM objects

26

26

13
 12/7/2025

5 The Document Object Model (Dom)

 JavaScript is almost always used to interact with

the HTML document in which it is contained.
 This is accomplished through a programming
interface (API) called the Document Object
Model.
 According to the W3C, the DOM is a:
“Platform-and language-neutral interface that will
allow programs and scripts to dynamically access
and update the content, structure and style of
documents.”

27

27

5 The Document Object Model (Dom)

 The tree structure from (HTML) tags is formally

called the DOM Tree with the root, or topmost
object called the Document Root.
 With the HTML DOM, JavaScript can access and
change all the elements of an HTML document.
 The DOM document object is the root JavaScript
object representing the entire HTML document.
 The document object represents a web page.
 It contains some properties and methods that
used extensively in development and is globally
accessible as document.

28

28

14
 12/7/2025

5 The Document Object Model (Dom)

29

29

5 The Document Object Model (Dom)

 In the DOM, each element within the HTML document is

called a node.
 If the DOM is a tree, then each node is an individual
branch.
 There are:
 element nodes,
 text nodes,
 attribute nodes,

 All nodes in the DOM share a common set of properties

and methods.

30

30

15
 12/7/2025

5 DOM Methods & Properties

 HTML DOM methods are actions we can perform

(on HTML Elements).
 HTML DOM properties are values (of HTML
Elements) that we can set or change.
 A property is a value that we can get or set (like
changing the content of an HTML element).
 A method is an action we can do (like add,
deleting or changing an HTML element).

31

31

5 DOM Methods & Properties

 The [Link]() method is used to create

output to the HTML page from JavaScript.
 Below are some examples of how we can use the
document object to access and manipulate HTML.
Finding HTML Elements

32

32

16
 12/7/2025

5 DOM Methods & Properties

Changing HTML Elements

33

33

5 DOM Methods & Properties

Adding & Deleteing HTML Elements

Adding Events Handlers

34

34

17
 12/7/2025

5 DOM Methods

35

35

5 DOM Methods & Properties

 The modern JavaScript programmer will want to

write to the HTML page, but in a particular
location.
 Using the DOM document and HTML DOM
element objects, we can do exactly that using
the innerHTML property.
 The most common way to access an HTML
element is to use the id of the element.
 The easiest way to get the content of an
element is by using the innerHTML property.
 The innerHTML property is useful for getting or
replacing the content of HTML elements.
36

36

18
 12/7/2025

5 DOM Methods & Properties

 The following example changes the content (the

innerHTML) of the <p> element with id=“p1":

37

37

5 DOM Methods & Properties

 If we want to find all HTML elements with the

same class name, use
getElementsByClassName( ).
 This example returns a list of all elements
with class="intro".

38

38

19
 12/7/2025

5 JavaScript HTML DOM - Changing HTML

 To change the value of an HTML attribute, use this

syntax:
[Link](id).attribute = new value

39

39

5 JavaScript HTML DOM - Changing HTML

 JavaScript can create dynamic HTML content:

40

40

20