Chapter 6
JavaScript
.
Introduction
• JavaScript
It is a programming language used for web
applications.
• Its code is written within an HTML program, hence
saved with extension .html
• <script> tag
is used for JavaScript programs.
• document.write
This is a function used to display results of JavaScript
in an HTML program.
E.g.
document.write(“This is my first JavaScript
program”);
Introduction cont.
• To display output (result) in text form
type = “text/javascript”
Program: firstJSprogram.html
<DOCTYPE html>
<html>
<body>
<script
type="text/javascript">
document.write(“This is my first JavaScript
program");
</script>
</body>
</html>
Output
This is my first JavaScript program
Exercise 1
Write a JavaScript program which displays:
I am a student of Sir Syed University
Arithmetic Operations
Arithmetic Operators
+ (plus): for addition
- (minus): for subtraction
* (asterisk): for multiplication
/ (slash): for division
Declaration of variables
we use the word var
e.g. var A = 10;
reserves an area for variable A and puts a value
10 in it.
Note: There is a semi-colon after JavaScript statement.
Example - Addition
Write a program which adds 2 numbers A and B having values
10 and 15 respectively and get the sum in C.
<!DOCTYPE html>
<html>
<body>
<script>
var A=10;
var B=15;
var C=A+B;
document.write("The Total = "+C);
</script>
</body>
</html>
Example - Subtraction
<! DOCTYPE html>
<html>
<body>
<script>
var J=17;
var K=9;
var L=J-K;
document.write("The result of Subtraction = "+L);
</script>
</body>
</html>
Example - Multiplication
<! DOCTYPE html>
<html>
<body>
<script>
var X=9;
var Y=3;
var Z=X*Y;
document.write("The Product = "+Z);
</script>
</body>
</html>
Example - Division
<! DOCTYPE html>
<html>
<body>
<script>
var D=14;
var E=7;
var F=D/E;
document.write("The Quotient = "+F);
</script>
</body>
</html>
Exercise 2
In a university, a student has the following data:
Roll No: 200
Name of student: Shahid
English: 55
Math: 70
Computer: 60
Calculate: Total marks by adding above given marks and display result as
follows:
ABC UNIVERSITY
Mark Sheet
Roll No: 200
Name of student: Shahid
Marks English: 55
Marks Math: 70
Marks Computer: 60
Total marks: 185
Exercise 3
In JKL Company, an employee has the following data:
Emp No: 184
Name: Zubair
Basic Pay: 12000
Allowance: 4000
Tax: 2000
Calculate: Net Pay by adding Basic Pay and Allowance and subtracting Tax.
Display results as follows:
JKL Company
Payroll
Emp No: 184
Name of Employee: Zubair
Basic Pay: 12000
Allowance: 4000
Tax: 2000
Net Pay: 14000
Creating Forms
• A "form" on a website is a section of a
webpage that allows users to input
information, typically by filling in fields like
their name, email address, or other details
• Form is then submitted to the website owner
to collect data or process a request
• Examples: Forms for jobs, admissions,
contacting customer service etc.
• It is essentially an interactive tool for
gathering user information directly on the
website
Creating Forms – Example Program
<!DOCTYPE html>
<html>
<body>
<h2>Application Form for job of Web Engineer</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="">
</form>
</body>
</html>
Output
Application Form for the job of Web Engineer
First name:
Last name:
Submit Update Home
Discussed later
Components of the Form
• To create a form, we use <form> element and
where form is complete, it is closed </form>
• <label> element is the title (heading) of a field
e.g. First name, Last name
• <br> (break) element: to go to next line
• input type="text“: input statement used when
we have to enter text (alpha-numeric) data
• id="fname" name="fname“: reserves an area
“fname” for first name in memory
Components of the Form cont…
• value=“”: sets a null value
• id="lname" name="lname“: reserves an area
“lname” for last name in memory
• Submit button: used to save data in a
database
• Update button: used to edit the data entered
in the form
• Home button: takes us to the home page of
the website
• (Note: We will see how to create these buttons later on)
JavaScript Comments
• We can use any comments for our
understanding by using //
• Comments are not executable i.e. they do not
display output
• E.g.
// My first JavaScript program
Creating Button “Submit”
<!DOCTYPE html>
<html>
<body>
<button
type="button" id=“sbmtBtn" onclick=“sbmtFunction()">Submit
</button>
<script>
function sbmtFunction()
{
var x = document.getElementById(“sbmtBtn");
// Store data in a database on server – will be discussed later
}
</script>
</body>
</html>
Output
Submit
Components of the Button
type="button" id=“sbmtBtn" onclick=“sbmtFunction()">Submit
•“button” element is defined by type="button“, which
will create a button
•A variable sbmtBtn is used to create a button in
computer’s memory by id=“sbmtBtn“
•onclick=“sbmtFunction()>Submit: calls a function
sbmtFunction() to take an action and also labels the
button as Submit
Components of the Button cont…
function sbmtFunction()
•This is a JavaScript function which helps us to
create the button
•This function is called in the above HTML program
•In this function
• var x = document.getElementById(“sbmtBtn");
- reserves an area x in memory for the function
- sbmtBtn must be the same as given in the id of
HTML program
Combining Form with Button
<!DOCTYPE html>
<html>
<body>
<h2>Application Form for job of Web Engineer</h2>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="">
// continued on next page
Combining Form with Button cont…
<button
type="button" id=“sbmtBtn" onclick=“sbmtFunction()">Submit
</button>
<script>
function sbmtFunction()
{
var x = document.getElementById(“sbmtBtn");
// Store data in a database on server – will be discussed later
}
</script>
</form>
</body>
</html>
Output
First name:
Last name:
Submit
.
End of Chap 6
