SWE_CWD Web Development Client Side Script1

SWE_CWD : – Web Design /.
Web Development Notes Client Side Scripting - I
Client Side Scripting – I
By now, we have learnt how to develop web pages using HTML. We added style into our
web pages using CSS to make them more attractive and lively.
We noticed that HTML and CSS do not provide any programming capabilities and
therefore, the web pages were kind of static in nature. It is time to go a step further and
explore how we can make our web pages more interactive and responsive to user input.
Javascript is there to help us in this process.
JavaScript is one of the programming languages that provide us to embed our

programming logic into HTML code to make a web page more integrative and responsive.
The javascript code that we embed in HTML document is called a script. This unit and the
next unit will equip you with the basics of javascript. The purpose is to familiarize you with
what you can establish with it and how you can embed javascript in your HTML code.
Unit Outcomes
At the completion of this unit, you will be able to:
1. To describe difference between client side and server side scripting.
2. Discuss limitations of javascript.
3. Writing java script in body and head section in an HTML document.
4. Linking external java script with HTML document.
5. Understand basic javascript concepts such as variables and comments.
Terminologies
Javascript: It is a scripting language that adds interactivity to the websites.
Client side script: It is a script that runs on the user computer using web browser.
Server side script: It is a script that runs on web server.
Internal javascript: It allows to place javascript code within the same HTML document.
External javascript: It allows to place javascript code in a separate file and link with HTML
document.
Variable: It is used to store information.
The program code that we embed in an HTML page is called a script. The phrase ‘script’
generally refers to small programs. The set of instructions are either to the (client-side
scripting) or to the (server server-side scripting). Traditionally, client-side scripting is used for
page navigation, data validation and formatting.
Copyright @ Eugene Tebo December 2024

1
SWE_CWD : – Web Design /.Web Development Notes Client Side Scripting - I
JavaScript is a “platform independent, interpreted, object-oriented scripting language”.
JavaScript code is embedded in HTML pages which can be interpreted by the web
browser.
The client-side script runs in a browser. The code is transferred to the user’s computer from
server over the Internet and runs directly in the browser.
A server side script, on either hand, runs on the server which hosts web pages. Script directly
runs on the web server to generate dynamic HTML web pages to fulfill the requirement of
end user.
These dynamically generated HTML pages are sent to the client browser.
As we mentioned before that a client-side script runs on the user computer and not on the
web server. What really happens is as follows:
• A user requests a Web page from the server by either entering its URL or clicking on a link.
• After receiving the page request, web server sends the requested page to the user on
the Internet.
• The page is displayed in the browser. If the web page has some script in it, the browser
runs it.
On the other hand, if a page has a server-side script, what really happens is as follows
• The user requests a web page from the server by either entering its URL or clicking on a
link.
• If the web page has some script in it, it is interpreted by the server to create or change
the content of the page.
• Finally, the web page in its final form is sent to the end user which is then displayed by a
browser.
Activity 1
Do a web search and prepare a list of languages that are used for client-side and server-
side scripting.
Advantages and limitations of JavaScript

Let us have a quick look at some of advantages and disadvantages of using JavaScript.
Some of the advantages of JavaScript are:
• JavaScript is executed on the client side to save bandwidth and avoid load on the web
server.
• JavaScript is relatively easy to learn and comprises of syntax that is close to C/C++ and
Java.
• It provides plenty of prewritten functionality.
• JavaScript plays nicely with other languages and can be used in a huge variety of

2
applications.
On the negative side, JavaScript

• has some security problem as the code execute on the users' computer, and exploited
for some malicious activities.
• does not have multithreading abilities.
• cannot access web pages hosted on different areas.
• cannot directly write to a file on the server side without sending an AJAX request that runs
a server side script
It is time to see JavaScript in action. Follow the steps given below to write our first JavaScript
code in an HTML document.
Step 1: Open Notepad in Window
Step 2: Type your HTML and JavaScript code (given in the figure below) in Notepad.
<!DOCTYPE html>
<html>
<head>
<title>Unit Content 7.0 - Client Side Scripting</title>
</head>
<body>
<p>My First JavaScript Program</p><hr>
<script type="text/JavaScript">
document.write("JavaScript is a simple language ");
</script>
<h2>IT WORKED! </h2>
</body>
</html>
Step 3: Save your document on your computer by selecting File > Save As (go to the menu
bar and click File and then click on Save As). Select the folder in which you want to save
the file, enter file name (such as new.html) and set the encoding to UTF-8 and click on Save
button.
Note that your file name should have extension .html.
Step 4: View the HTML document. By double clicking on the HTML file or right-click and
choose "Open with" and select browser to see the output of HTML page.
The output of above code is shown below.

3
Understanding the code is quite easy as far as the HTML tags are concerned. Let us go
through the code that is new for us.
1. <script type="text/javascript"> tag is used to specify that we are going to write
JavaScript. It has an ending tag </script>. In HTML5, Type attribute is not necessary for
javascript, default value is "text/javascript".
2. The function document.write() is used to display dynamic content.
Activity 2
Write a web page that displays your name and address (use JavaScript method
document.write).
Where to put JavaScript Code?

In our first example of JavaScript, the script was in the body section of the HTML document.
It is however not necessary to always put JavaScript code in the body of HTML document.
HTML allows us to put our script in head section or even in a separate file (having extension
.js).
Before, we see how we can add script in the body and head section, we need to know a
bit about events.
Events basically happen as a result of a user action (e.g. clicking a button, pressing a key
etc.) or an external action such as loading a page. HTML provides a way to bind a script to
an event.
That is, the script will execute in response to that event. Binding of script to an event is done
through an event handler attributes. It is the name of the event which is prefixed by "on", for
example onclick.
Now let us see how to add JavaScript in an HTML document.

4
JavaScript in Body Section
We can write JavaScript code anywhere in the body section. A document can have one
or more scripts depending on what and when we want to do something through
JavaScript.
If a JavaScript is not bound to any event, it will always execute when we load the page.
The script that is bound to an event executes only when the specified event happens.
Let us say we first want to display “Script demo” when a page is loaded. This can be done
by writing the following code
<scripttype="text/javascript">
document.write ("Script demo");
</script>
Then we want to display a button (a form element). When the user clicks on the button, we
want to display the message ‘You clicked on the button’ as an alert (an alert is displayed in
a pop-up window).
To do this, we have to bind our script with the event ‘onclick’. We can use the following
code to do it
<form>
<input type="button" value="click" onclick="alert ('You clicked
on the button');">
</form>
Let us now put the things together and write our complete code.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Example: Our first JavaScript</p>
<hr>
<script type="text/javascript">
document.write("Script demo");
</script>
<form>
<input type="button" value="click" onclick="alert('You
clicked on the button');">
</form>
</body>
</html>

5
The output of above code is shown below:
Upon clicking on the button ‘click’ an alert will be popup as shown in the figure below
Activity 3
Change the alert message to "Hello User" in the code above
JavaScript in Head Section

A special place for the <script> element is within the head section of a document. Because
of the sequential nature of the web documents, the <head> is always executed first.
However, we want to execute the script somewhere in the body of the document.
Therefore, script written in the head section is generally used to declare variable or
functions that may be used later on in the document.
Let us now write the same HTML document that we wrote in our previous example, but this
time putting our script in the head section that will execute when the users click on the
button.
We will write the code as a function (more about function later)

6
function msg ()
{
alert ('You clicked on the button');
}
</script>
The function has been given the name msg. Now we can call this function in the body of
the document when needed.
In our case, we want this code to execute when the user clicks on the button. This can be
specified using the following code;
<form>
<input type="button" value ="click" onclick="msg();">
</form>
Putting the pieces together gives us the following code. Note that we still have some
JavaScript in the body as well and it will execute as usual. Try it and see how it works.
<!DOCTYPE html>
<html>
<head>
function msg()
{
alert('You clicked on the button');
}
</script>
</head>
<body>
<hr>
</script>
<form>
<br><input type="button" value="click" onclick="msg();">
</form>
</body>
</html>

7
Upon clicking on the above button ‘click’ an alert will be popup as shown in the following
figure.
Activity 4
Repeat the activity 3 but write the event handler in the head section of the document.
In external javascript, the code is saved in a separate file which is then linked to an HTML
document using src attribute of <script> tag.
Let us see how we develop our web page using this approach.
• First of all, we should write the JavaScript code using a text editor, save it in a file that has
the extension .js. We type and save the following code in message.js file
function msg()
{
alert ('You clicked on the button');
}
• Now add a link to this code in the HTML document using the following code
<script src="message.js"></script>

8
Below is complete HTML code that we should now type.
<!DOCTYPE html>
<html>
<head>
<script src="message.js"></script>
</head>
<body>
<hr>
</script>
<form>
<input type="button" value="click" onclick="msg();">
</form>
</body>
</html>
The output of above code is given below
When a user clicks on the button, the javascript executes and displays the alert as shown in
the following figure.

9
Activity 5
Repeat activity 4 by writing a code in a separate file and linking it to HTML document.
The core features of JavaScript are the syntax rules to which our script should adhere to
and the basic constructs to store, process and manipulate flow control.
We will discuss only the very basics features leaving the advanced features and constructs
for an advanced course on JavaScript.
Before we start with writing JavaScript code, keep the following important points about
JavaScript in your mind.
• Java script is case-sensitive. This means that capital letters are distinct from their
lowercase counterparts. For JavaScript, this, This and THIS are three distinct identifiers.
• JavaScript code found in HTML document is interpreted line by line and it is read from top
to bottom.
• Any use of excessive whitespace characters (e.g. spaces, tabs, line breaks) are ignored
by JavaScript. For example,
. JavaScript is written as a sequence of statements. A statement is an instruction to the

interpreter to carry out a specific action.
• A semicolon (;) indicates end of a statement. This allows us to write on or more statement
on the same line separated by ‘;’.
A variable is used to store data. Every variable has a name, called its identifier. Variables
are containers that hold information and then refer to the data simply by using the name of
the container.
Their sole purpose is to label and store data in memory that can be used throughout your
program.
The general rules for constructing names for variables (unique identifiers) are:
1. Names can contain letters, digits, underscores, and dollar signs.
2. Names must begin with a letter

10
3. Reserved words (like JavaScript keywords) cannot be used as names.

For example, the following are valid variable names
area, go2there all_done
The following variable names are not valid
9abc p&tp hello-there
Declaring variables
We must declare a variable in a JavaScript program before its use. Variables are declared
with the var keyword as follows.
var x;
We can assign a value to a variable when declaring it as
var x=5;
In addition, multiple variables can be declared with one var statement but we have to
separate each variable by a comma as shown below.
var x, y, z=15;
Try the following code and see what it does.

<!DOCTYPE html>
<html>
<head>
<title>Unit Content 7.0 - JavaScript Detail</title>
</head>
<body>
<p>Example: JavaScript Variables</p>
var math, eng = 200;
var computer = 100;
var math = 300;
var total = math + eng + computer;
document.write(total);
</script>
</body>
</html>
The output of above code is shown in figure below:

11
Activity 6
Change the javascript code above to display average of all the variables.
Writing comments is an important way to document a program. Its purpose is to add

information about the code so that the user can easily know the functionality and can
easily interpret the code.
Types of comments used in JavaScript are:
• Single line comment
• Multi line comment
Single line Comment

A single line comment starts with double slash like (//). It can either be used before or after
a statement or statements as the following code demonstrates.
<!DOCTYPE html>
<html>
<head>
<title>Unit Content 7.0 - JavaScript </title>
</head>
<body>
<p>Example: JavaScript Comments</p>
// Declaring variables
var math = 300;
var eng = 400;
var total = math + eng; // it adds up two numbers
</script>
</body>
</html>

12
Multi-line Comment
If we have to put a comment on more than one line, we can use multi-line comments. A
multi-line comment starts with a forward slash and an asterisk and ends with an asterisk
forwarded by a forward slash as shown below
/* it is a multi line comment and
it will not be displayed */
Here is a sample code with multi-line comment.

<!DOCTYPE html>
<html>
<head>
<title>Unit Content 7.0 - JavaScript </title>
</head>
<body>
<p>Example: JavaScript Comments</p>
var math = 300;
var eng = 400;
var total = math + eng;
/* it is a multi-line comment and
It will not be displayed */
</script>
</body>
</html>
The output of above code is
Activity 7
Add some suitable single and multiline comments in the code above
Unit Summary
In this unit, we learned about the concept of client side and server side scripting and basics
of javascript as client side scripting language. We also learned how to write basic code of
javascript in body and head section in an HTML document. We have also discussed the
syntax of variables and comments in javascript.

13
Select the correct answer.

1. ______ tag is an extension to HTML that can enclose any number of JavaScript sta
A. <SCRIPT>
B. <BODY>
C. <HEAD>
D. <TITLE>
2. Select the correct way of writing comments in javascript

A. // , /* ...... **/
B. / , /** ......./ , /*
C. /*......*/ , //
D. \*......*\ , //
3. What is the correct javascript code to display "Hello World"?

A. system.out.println("Hello World")
B. println ("Hello World")
C. document.write("Hello World")
D. response.write("Hello World")
4. ___________ is the correct code for referring to an external script called " abc.js"
A. <script href=" abc.js">
B. <script name=" abc.js">
C. <script src=" abc.js">
D. None of the above
5. What are variables used for in javascript programs?

A. Storing numbers, dates, or other values
B. Varying randomly
C. Causing high-school algebra flashbacks
6. Which of the following tag is used to indicate the end of javascript code?
A. </script>
B. <script>
C. <END>
7. A client side javascript code is interpreted by _________

A. Client
B. Server
C. Object

14
8. Each javascript variable must be declared in a separate line?
A. True
B. False
9. What will be the output of following javascript code

<script language="javascript"> document.write (2+5+"8"); </script>
A. 258
B. Error
C. 7
D. 78
10. Javascript is _________

A. compiled language
B. Interpreted language
C. compiled and interpreted language
D. none
Write short answers of the following.

1. What is a script?
2. Differentiate between client-side and server-side scripting?
3. Inlist the advantages and disadvantages of using javascript in your web pages?
4. How is javascript case sensitive?
5. Name some of the javascript features.
6. What are the valid scopes of a variable in javascript?
7. What data types are available in javascript?
8. How do we write single line and multi-line comments?
9. How do you link a JavaScript to a HTML document?
10. In which parts of HTML document can a javascript code be written?
</> Coding Exercise

1. Write an HTML code with required javascript that displays sum, product and average of
two numbers.
2. Write an HTML code with required javascript with three buttons: Sum, Product and Avg.
Your code should display sum, product or average depending on which button is pressed
by the user.
3. Repeat the above exercise by writing all your javascript code in a separate file and
linking it to the HTML document.
……. To continue with Client Side Scripting - II

15

SWE_CWD Web Development Client Side Script1

Uploaded by

Copyright:

Available Formats

SWE_CWD Web Development Client Side Script1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SWE_CWD Web Development Client Side Script1

Uploaded by

Copyright:

Available Formats

SWE_CWD : – Web Design /.

Web Development Notes Client Side Scripting - I

Client Side Scripting – I

JavaScript is one of the programming languages that provide us to embed our

Copyright @ Eugene Tebo December 2024

Advantages and limitations of JavaScript

Copyright @ Eugene Tebo December 2024

On the negative side, JavaScript

The output of above code is shown below.

Copyright @ Eugene Tebo December 2024

Where to put JavaScript Code?

Now let us see how to add JavaScript in an HTML document.

Copyright @ Eugene Tebo December 2024

Copyright @ Eugene Tebo December 2024

The output of above code is shown below:

JavaScript in Head Section

We will write the code as a function (more about function later)

Copyright @ Eugene Tebo December 2024

The output of above code is shown below:

Copyright @ Eugene Tebo December 2024

Copyright @ Eugene Tebo December 2024

The output of above code is given below

Copyright @ Eugene Tebo December 2024

. JavaScript is written as a sequence of statements. A statement is an instruction to the

Copyright @ Eugene Tebo December 2024

3. Reserved words (like JavaScript keywords) cannot be used as names.

Try the following code and see what it does.

The output of above code is shown in figure below:

Copyright @ Eugene Tebo December 2024

Writing comments is an important way to document a program. Its purpose is to add

Single line Comment

The output of above code is shown below:

Copyright @ Eugene Tebo December 2024

Here is a sample code with multi-line comment.

The output of above code is

Copyright @ Eugene Tebo December 2024

Select the correct answer.

2. Select the correct way of writing comments in javascript

3. What is the correct javascript code to display "Hello World"?

5. What are variables used for in javascript programs?

7. A client side javascript code is interpreted by _________

Copyright @ Eugene Tebo December 2024

9. What will be the output of following javascript code

10. Javascript is _________

Write short answers of the following.

</> Coding Exercise

……. To continue with Client Side Scripting - II

Copyright @ Eugene Tebo December 2024

You might also like