Scribd
Upload
3 views

Chap 6 - JavaScript

Chapter 6 covers the basics of JavaScript, including its integration with HTML, arithmetic operations, and creating forms. It provides examples of JavaScript programs for addition, subtraction, multiplication, and division, as well as exercises for calculating total marks and net pay. Additionally, it explains the components of forms and buttons in web applications, along with how to handle user input.

Uploaded by

Rizwan Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views

Chap 6 - JavaScript

Chapter 6 covers the basics of JavaScript, including its integration with HTML, arithmetic operations, and creating forms. It provides examples of JavaScript programs for addition, subtraction, multiplication, and division, as well as exercises for calculating total marks and net pay. Additionally, it explains the components of forms and buttons in web applications, along with how to handle user input.

Uploaded by

Rizwan Khan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 27

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

You might also like