Name of the School: School of Computer Science and
Engineering
Course Code: E2UC304C Course Name:Java & Java Script
DEPARTMENT OF COMPUTER SCIENCE
& ENGINEERING
Subject Name: Java Programming
Day: 13
Topics Covered: Form Creation & Validation
1
Faculty Name: Dr. Avinash Dwivedi Programe Name: B.Tech (CSE,AI &ML)
Prerequisites, Objectives and Outcomes
Prerequisite of topic: Basic concepts related to programming
Objective: To make students to apply JavaScript in web programming.
Outcome : 1. Student will be able to know to use different ways to add
JavaScript in HTML.
2. Students will be able to apply DOM model in developing web pages.
3. Students will be able to implement in practical applications.
2
Javascript
JavaScript was developed by Brendan Eich in 1995,
which appeared in Netscape, a popular browser of that
time.
JavaScript is a programming language for use in
HTML pages
Invented in 1995 at Netscape Corporation
(LiveScript)
JavaScript has nothing to do with Java
JavaScript programs are run by an interpreter built
into the user's web browser (not on the server)
Javascript in web designing
1. client opens connection to server
2. client sends request to server
3. server sends response to client
4. client and server close connection
What about Step 5?
5. Client renders (displays) the response received
from server
• Step 5 involves displaying HTML
And running any JavaScript code within the HTML
What can JavaScript Do?
JavaScript can dynamically modify an HTML page
JavaScript can react to user input
JavaScript can validate user input
JavaScript can be used to create cookies (yum!)
JavaScript is a full-featured programming language
JavaScript user interaction does not require any
communication with the server
Pros and Cons of JavaScript
Pros:
– Allows more dynamic HTML pages, even complete web
applications
Cons:
– Requires a JavaScript-enabled browser
– Requires a client who trusts the server enough to run the
code the server provides
JavaScript has some protection in place but can still cause security
problems for clients
– Remember JavaScript was invented in 1995 and web
browsers have changed a lot since then
A script or scripting language is a computer language with a
series of commands within a file that is capable of being
executed without being compiled.
All scripting languages are programming languages.
The theoretical difference between the language and script
language is that scripting languages do not require the
compilation step and are rather interpreted.
For example, normally, a C program needs to be compiled
before running whereas normally, a scripting language like
JavaScript or PHP need not be compiled.
Some popular facts about JavaScript.
Javascript is the only client side programming language for web browser.
JavaScript can build interactivity Websites.
Javascript is Object Based with prototype inheritance model for OOPS.
Javascript is Case Sensitive.
Javascript can put dynamic content into a webpage. .
Javascript can react to events like Mouse Click, mouse hover, mouse out, form
submit etc known as JavaScript Events.
Javascript can validate form data.
Javascript can detect user's browser and operating system using navigator Object.
Javascript can be used to create cookies.
Javascript can add cool animation to a webpage JS timing functions.
Javascript can detect user physical location using HTML5 Geolocation API.
Some popular facts about JavaScript.
Javascript can also be used to draw shapes, graphs, create animations and games
development using HTML5 Canvas.
At present, Javascript has lot of libraries and framework, exp JQuery, Angular JS,
React JS, Backbone JS etc, thus making Javascript more popular.
Javascript can also be used in developing server side application using Node JS.
Popular Editors like, VS Code, Atom and Brackets are written in Javascript (Electron
Framework of Node JS).
Advantages of scripts
Open source, allowing users to view and edit
the script if needed.
Does not require the file to be compiled, but may be
when necessary.
Easy to learn and write.
Easy to port between different operating systems.
Much faster to develop than an actual program - some
individuals and companies write scripts as a prototype
for actual programs.
JavaScript is an open source & most popular client side
scripting language supported by all browsers.
JavaScript is used mainly for enhancing the interaction of a
user with the webpage
Hello World
<!DOCTYPE HTML>
<html>
<body>
<p>Before the script...</p>
<script> alert( 'Hello, world!' );
</script>
<p>...After the script.</p>
</body>
</html>
How do JavaScript engines work?
JavaScript Engines are complicated. But it works on some simple
basics:
The engine reads ("parses:) the script.
Then it converts or compiles the script to the machine language.
After that machine code runs.
Here, JavaScript engine applies optimizations at each step of the
process. It reads a compiled script and analyzes the data that
passes in JavaScript engine. After that, it applies optimizations to
the machine code from that acquired knowledge. When this process
is completed, scripts run quite fast.
Javascript advantages
Show dynamic content based on the user profile.
React to user's operations, like mouse clicks events, key presses
or pointer movements.
Support features like auto-validated form entries and interactive
drop-down menus.
Send requests to remote servers, Upload and download files.
JavaScript code can also create movement and sound
Ask questions to the users, Get and set cookies, show
messages, switch browser tabs.
Allows the data on to be stored in the local storage.
Javascript limitations are
JavaScript on a webpage may not allow you to copy, execute or read/write
arbitrary files on the hard disk.
It doesn't offer any access to Operating system functions.
Many browsers allow it to work with files, but the access is very limited and
only provided if the user is performing a specific action like, dropping a file
into a browser window or selecting using <input> tag.
JavaScript allows you to communicate over the net to the server where the
current page came from. Although, it does not allow you to receive data from
other sites/domains.
Three most important features of JS
Here, are the three most important features which
make JavaScript unique
It offers full integration with HTML/CSS.
Simple things are done quickly without any complication or
following strict rules.
Supported by all major browsers and JavaScript is enabled by
default.
JS : Client Side Script
JavaScript is a very powerful client-side scripting language.
JavaScript is used mainly for enhancing the interaction of a user
with the webpage. In other words, you can make your webpage
more lively and interactive, with the help of JavaScript.
JavaScript is also being used widely in game development
and Mobile application development.
Different ways to add JS
1. In head tag
2. In body tag
3. External java script inclusion
4. Through HTML tag like innerHTML
JS in Head / Body tags
You can have any number of scripts
Scripts can be placed in the HEAD or in the BODY
– In the HEAD, scripts run before the page is
displayed
– In the BODY, scripts run as the page is displayed
In the HEAD is the right place to define functions
and variables that are used by scripts within the
BODY
Using JavaScript in head tag
<html>
<head>
<title>Hello World in JavaScript</title>
<script type="text/javascript">
function helloWorld() {
document.write("Hello World!");
}
</script>
</head>
<body>
<script type= "text/javascript">
helloWorld();
</script>
</body>
</html>
Using JavaScript in body tag
<!DOCTYPE html>
<html><head><title>JavaScript prompt() method</title>
</head>
<body style = "text-align: center;">
<h1 style = "color: red;">Hello World</h1>
<script>
var num1 = parseInt(window.prompt("Enter the first number"));
var num2 = parseInt(window.prompt("Enter the second number "));
document.write(num1+num2);
</script>
</body></html>
External Scripts
Scripts can also be loaded from an external file
This is useful if you have a complicated script or set of
subroutines that are used in several different documents
<script src= "myscript.js"></script>
External JS
<html>
<head>
<script type="text/javascript" src=“abc.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick=“show()"/>
</form>
</body>
// In the file abc.js
</html> function show(){
alert("Hello Students");
}
JS with innerHTML
<HTML>
<HEAD> <script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('pdata').innerHTML = userInput;
}
</script></HEAD>
<BODY>
<p>Welcome to the site <b id='pdata'>India</b> </p>
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>
</BODY>
</HTML>
Demo
Program to add numbers using Text Boxes
<!doctype html> <body>
<p>Enter the First Number: <input id="first"></p>
<html> <p>Enter the Second Number: <input id="second"></p>
<button onclick="add()">Add</button>
<head>
<p>Sum = <input id="answer"></p>
<script>
</body>
</html>
function add()
{
var numOne, numTwo, sum;
numOne = parseInt(document.getElementById("first").value);
numTwo = parseInt(document.getElementById("second").value);
sum = numOne + numTwo;
document.getElementById("answer").value = sum;
}
</script></head>
Stop
Blank submission
<html> <head><script language="javascript">
function check(){
var x = document.getElementById('comment_box').value
if (x == null || x == "") {
document.getElementById('comment_error').innerHTML = "*The box cant be left blank!";
return false
}
}
</script>
<body>
<form action="", name="", method="">
<p style="color: red;" id="comment_error"></p>
<textarea rows="3" id="comment_box" name=""></textarea>
<input type="submit" name="commit" value="Post Comment"
onclick="return check()">
</form> </body></html>
Email Validation
<html>
<head><script language="javascript">
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
</script></head>
<body>
<form name="myform" method="post" action="#" onsubmit="return validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
</body></html>
JavaScript Variables
JavaScript has variables that you can declare with
the optional var keyword
Variables declared within a function are local to
that function
Variables declared outside of any function are
global variables
var myname = “Raju dhar"
JavaScript Operators and Constructs
• JavaScript has most of the operators we're used to
from C/Java
– Arithmetic (+, - ,* , /, %)
– Assignment (=, += , -= , *= /= , %= , ++, --)
– Logical (&&, ||, !)
– Comparison (<, >, <= , >= , ==. ===)
• Note: + also does string concatentation
• Constructs:
– if, else, while, for, switch, case
Simple User Interaction
• There are three built-in methods of doing simple
user interaction
– alert(msg) alerts the user that something has happened
– confirm(msg) asks the user to confirm (or cancel)
something
– prompt(msg, default) asks the user to enter some text
alert(“Beware of Dogs");
confirm("Are you sure you want to do that?");
prompt("Enter you name”, "Adil");
JavaScript Functions
JavaScript lets you define functions using the
function keyword
Functions can return values using the return
keyword
function showConfirm() {
confirm("Are you sure you want to do that?");
}
JavaScript Arrays
• JavaScript has arrays that are indexed starting at 0
• Special version of for works with arrays
<script type="text/javascript">
var colors = new Array();
colors[0] ="red"; colors[1] ="green";
colors[2] ="blue"; colors[3] ="orange";
colors[4] ="magenta"; colors[5] ="cyan";
for (var i in colors) {
document.write("<div style=\"background-color:“ + colors[i] +
";\">“ + colors[i] + "</div>\n");
}
</script>
Java Script to fetch data from Text box
<form><br>
Enter your First Name: <input type="text" id="firstname"/><br><br>
Enter your Last Name: <input type="text" id="lastname"/><br><br>
<input type="submit" value="Submit" onclick="formdata()"/><br>
</form>
<script>
function formdata()
{
var firstname1= document.getElementById("firstname").value;
var lastname1= document.getElementById("lastname").value;
document.writeln("<h1>Confirmation Page</h1><br>");
document.writeln("Thank you for completing this form.<br><br>");
document.writeln("The first name you entered is " + firstname + "<br>");
document.writeln("The last name you entered is " + lastname);
}
</script>
Value from Radio Button
<!--Check selected Radio Button value using JavaScript.-->
<html><head> <title>Check selected Radio Button value using JavaScript.</title>
<script type="text/javascript">
function checkGender(){
if(document.getElementById('radioMale').checked)
alert("You have selected Male.");
else
alert("You have selected Female.");
}
</script> </head>
<body style="text-align: center;">
<h1>Check selected Radio Button value using JavaScript.</h1>
<b>Choose gender: </b><br><br>
<input type="radio" id="radioMale" value="Male">Male</input>
<input type="radio" id="radioFemale" value="Female">Female</input> <br>
<input type="button" value="Check Gender" onClick="checkGender()"/>
</body> </html>
Value from Check Box
<!DOCTYPE html><html lang="en">
<body>
<input type="checkbox" name="laptop" value="HP">HP laptop<br>
<input type="checkbox" name="laptop" value="DELL">DELL laptop<br>
<input type="checkbox" name="laptop" value="MAC">MAC laptop<br>
<input type="checkbox" name="laptop" value="ASUS">ASUS laptop<br>
<input type=“button” value= “Get Value onClick="getValue()">
<script>
function getValue() {
let checkboxes = document.getElementsByName('laptop');
let result = "";
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
result += checkboxes[i].value + " " + " Laptop, ";
}
}
document.write("<p> You have selected : " + result + "</p>"); }
</script> </body> </html>
Value from Drop Down
<!DOCTYPE html> <html> <body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to return the value of the selected fruit.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p> <script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = x;
}
</script> </body></html> </html>
JavaScript Object
Object is a non-primitive data type in JavaScript. It is like any other variable,
the only difference is that an object holds multiple values in terms of
properties and methods.
Properties can hold values of primitive data types and methods are
functions.
JavaScript, an object can be created in two ways:
Object literal
Object constructor
Object Literal
The object literal is a simple way of creating an object using { }
brackets. You can include key-value pair in { }, where key would
be property or method name and value will be value of property
of any data type or a function. Use comma (,) to separate
multiple key-value pairs.
var <object-name> = { key1: value1, key2: value2,... keyN:
valueN};
Example: Create Object using Object Literal Syntax
var emptyObject = {}; // object with no properties or methods
var person = { firstName: "John" }; // object with single property
// object with single method
var message = { showMessage: function (val) {
alert(val);
}
};
// object with properties & method
var person = { firstName: "James", lastName: "Bond", age: 15,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
Access JavaScript Object Properties & Methods
var person = {
firstName: "James", lastName: "Bond", age: 25,
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
};
person.firstName; // returns James
person.lastName; // returns Bond
person["firstName"];// returns James
person["lastName"];// returns Bond
person.getFullName();
Object Constructor
var person = new Object();
// Attach properties and methods to person object
person.firstName = "James";
person["lastName"] = "Bond";
person.age = 25;
person.getFullName = function () {
return this.firstName + ' ' + this.lastName;
};
// access properties & methods
person.firstName; // James
person.lastName; // Bond
person.getFullName(); // James Bond
Pop up boxes
JavaScript dialog box are of following three types:
JavaScript dialog box for getting confirmation on any user
input
JavaScript dialog box for raising an alert box
JavaScript dialog box for a kind of input from the user
Alert Box
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript alert Box</title>
</head>
<body>
<h3>JavaScript alert Box Example</h3>
<script type="text/javascript">
alert("Welcome to JIMS! This is an alert box.");
</script>
</body>
</html>
Confirm Box
<!DOCTYPE html>
<html><body>
<h2>JavaScript Confirm Box</h2>
<input type= “button” value= “Confirm Demo” onClick="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
var txt;
if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = txt;
}
Prompt Box
A prompt box is often used if you want the user to input a value
before entering a page.
When a prompt box pops up, the user will have to click either
"OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user
clicks "Cancel" the box returns null.
Syntax
window.prompt("sometext","defaultText");
Program: Prompt Box
<!DOCTYPE html>
<html><head><title>JavaScript prompt() method</title>
<script>
function fun() {
var a = prompt("Enter some text", “Deafaul value GU");
if (a != null) {
document.getElementById("para").innerHTML = "Welcome to " + a;
}
}
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color: red;">Hello World</h1><h2>
<button onclick = "fun()">Click me</button>
<p id = "para"></p>
</body></html>
Adding 2 Numbers using Prompt Box
<!DOCTYPE html>
<html><head><title>JavaScript prompt() method</title>
<script>
function fun() {
var num1 = parseInt(window.prompt("Enter the first number"));
var num2 = parseInt(window.prompt("Enter the second number "));
alert(num1+num2)
}
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color: red;">Hello World</h1>
<button onclick = "fun()">Click me</button>
</body></html>
window object
The window object represents a window in browser. An object of window is
created automatically by the browser.
Window is the object of browser, it is not the object of javascript. The
javascript objects are string, array, date etc.
Methods of Window object
Method Description
alert() displays the alert box containing message with ok button.
confirm() displays the confirm dialog box containing message with ok and
cancel button.
prompt() displays a dialog box to get input from the user.
open() opens the new window.
close() closes the current window.
setTimeout() performs action after specified time like calling function, evaluating
expressions etc.
Method Description
alert() displays an alert box with a message and an OK button
blur() removes the focus from the current window
clearInterval() clears the timer, which is set by using the setInterval() method
clearTimeout() clears the timer, which is set by using the setTimeout() method
close() closes the current window
confirm() displays a dialog box with a message and two buttons, OK and Cancel
createPopup() creates a pop-up window
focus() sets focus on the current window
moveBy() moves a window relative to its current position
moveTo() moves a window to an specified position
open() opens a new browser window
Window Methods
sends a print command to print the content of the current
print()
window
prompt() prompts for input
resizeBy() resizes a window with the specified pixels
resizeTo() resizes a window with the specified width and height
scrolls the content of a window by the specified number of
scrollBy()
pixels
scrolls the content of a window up to the specified
scrollTo()
coordinates
evaluates an expression at specified time intervals in
setInterval()
milliseconds
evaluates an expression after a specified number of
setTimeout()
milliseconds
JavaScript History Object
The JavaScript history object represents an array of URLs visited by the user. By
using this object, you can load previous, forward or any particular page.
The history object is the window property, so it can be accessed by:
window.history
Property of JavaScript history object
There are only 1 property of history object.
No. Property Description
1 length returns the length of the history URLs.
Methods of JavaScript history object
There are only 3 methods of history object.
No. Method Description
1 forward() loads the next page.
2 back() loads the previous page.
3 go() loads the given page number.
Example
history.back();//for previous page
history.forward();//for next page
history.go(2);//for next 2nd page
history.go(-2);//for previous 2nd page
Math object
Method Description
abs(x) gives the absolute value of x
acos(x) gives arccosine of x (in radian)
asin(x) gives arcsine of x (in radian)
atan(x) gives the arctangent of x
gives the arctangent of the quotient on dividing y
atan2(y,x)
and x
ceil(x) rounds up x to the nearest bigger integer
cos(x) gives cosine value of x
exp(x) gives the value of ex
floor(x) rounds up x to the nearest smaller integer
log(x) gives the natural logarithmic value of x
max(x,y,z,...,n) gives the highest number from the given list
min(x,y,z,...,n gives the lowest number from the given list
pow(x,y) returns x to the power of y
random() returns a random number between 0 and 1
round(x) rounds up x to the nearest integer
sin(x) gives the sine value of x
sqrt(x) gives the square root of x
tan(x) gives the tangent value of x
JavaScript navigator object
The JavaScript navigator object is used for browser detection. It can be used
to get browser information such as appName, appCodeName, userAgent etc.
The navigator object is the window property, so it can be accessed by:
window.navigator
Property of JavaScript navigator object
No. Property Description
1 appName returns the name
2 appVersion returns the version
3 appCodeName returns the code name
4 cookieEnabled returns true if cookie is enabled otherwise false
5 userAgent returns the user agent
6 language returns the language. It is supported in Netscape and Firefox only.
7 userLanguage returns the user language. It is supported in IE only.
8 plugins returns the plugins. It is supported in Netscape and Firefox only.
9 systemLanguage returns the system language. It is supported in IE only.
10 mimeTypes[] returns the array of mime type. It is supported in Netscape and Firefox only.
11 platform returns the platform e.g. Win32.
12 online returns true if browser is online otherwise false.
<script>
document.writeln("<br/
>navigator.appCodeName: "+navigator.appCodeName);
document.writeln("<br/>navigator.appName: "+navigator.appName);
document.writeln("<br/>navigator.appVersion: "+navigator.appVersion);
document.writeln("<br/
>navigator.cookieEnabled: "+navigator.cookieEnabled);
document.writeln("<br/>navigator.language: "+navigator.language);
document.writeln("<br/>navigator.userAgent: "+navigator.userAgent);
document.writeln("<br/>navigator.platform: "+navigator.platform);
document.writeln("<br/>navigator.onLine: "+navigator.onLine);
</script>
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
navigator.cookieEnabled: true
navigator.language: en-US
navigator.userAgent: Mozilla/5.0 (Windows NT 6.2; WOW64)
AppleWebKit/537.36
(KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36
navigator.platform: Win32
navigator.onLine: true
Arrays
There are two syntaxes for creating an empty array:
let arr = new Array();
let arr = [];
We can supply initial elements in the brackets:
let fruits = ["Apple", "Orange", "Plum"];
Array elements are numbered, starting with zero.
We can get an element by its number in square brackets:
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits[0] ); // Apple
alert( fruits[1] ); // Orange
alert( fruits[2] ); // Plum
We can replace an element:
fruits[2] = 'Pear'; // now ["Apple", "Orange", "Pear"]
…Or add a new one to the array:
fruits[3] = 'Lemon'; // now ["Apple", "Orange", "Pear",
"Lemon"]
The total count of the elements in the array is
its length:
let fruits = ["Apple", "Orange", "Plum"];
alert( fruits.length ); // 3
JavaScript Events
• JavaScript can be made to respond to user events
• Common Events:
– onload and onunload : when a page is first visited or
left
– onfocus, onblur, onchange : events pertaining to
form
elements
– onsubmit : when a form is submitted
– onmouseover, onmouseout : for "menu effects"
Exception Handling
• JavaScript also has try, catch, and throw
keywords for handling JavaScript errors
try {
runSomeCode();
} catch(err) {
var txt= "There was an error on this page.\n\n"
+ "Error description: “ + err.description + "\n\n"
alert(txt)
}
Comments in JavaScript
• Comments in JavaScript are delimited with // and /*
*/ as in Java and C++
JavaScript Objects
• JavaScript is object-oriented and uses the same
method-calling syntax as Java
• We have already seen this with the document
object
document.write("Hello World!");
Built-In JavaScript Objects
• Some basic objects are built-in to JavaScript
– String
– Date
– Array
– Boolean
– Math
JavaScript Strings
A String object is created every time you use a
string literal (just like in Java)
• Have many of the same methods as in Java
– charAt, concat, indexOf, lastIndexOf, match, replace, search,
slice, split, substr, substring, toLowerCase, toUpperCase,
valueOf
• There are also some HTML specific methods
– big, blink, bold, fixed, fontcolor, fontsize, italics, link, small,
strike, sub, sup
• Don't use the HTML methods (use CSS instead)
– This is the worst kind of visual formatting
JavaScript Dates
• The Date class makes working with dates easier
• A new date is initialized with the current date
• Dates can be compared and incremented
var myDate = new Date();
myDate.setFullYear(2007,2,14);
var today = new Date();
var nextWeek = today + 7;
if (nextWeek > today) {
alert("You have less than one week left");
}
The JavaScript Math Class
• The Math class encapsulates many commonlyused
mathematical entities and formulas
• These are all class methods
– abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max,
min, pow, random, round, sin, sqrt, tan
• These are all class methods
– E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2
if (Math.cos(Math.PI) != 0) {
alert("Something is wrong with Math.cos");
}
JavaScript and the DOM
• The Document Object Model (DOM) is a
specification that determines a mapping between
programming language objects and the elements
of an HTML document
• Not specific to JavaScript
HTML DOM Objects
• Environment objects
– Window, Navigator, Screen, History, Location, Document
• HTML objects
– Anchor, Area, Base, Body, Button, Event, Form, Frame,
Frameset, Iframe, Image, Checkbox, FileUpload, Hidden,
Password, Radio, Reset, Submit, Text, Link, Meta, Object,
Option, Select, Style, Table, TableCell, TableRow, TextArea
HTML DOM: Document
• The Document object represents an HTML
document and can be used to access all
documents in a page
• A Document contains several collections
– anchors, forms, images, links
• Has several properties
– body, cookie, domain, lastModified, referrer, title, URL
• Has several useful methods
– getElementById, getElementsByName,
getElementsByTagName, write, writeln, open, close
• An instance of Document is already created for you, called document
function changeF() {
var cText = document.getElementById("c");
var fText = document.getElementById("f");
...
}
…<input type= "text" id= "c" onchange=
"changeC()">C
<input type=
"text" id=
"f" onchange=
"changeF()">F
HTML DOM: Form Elements
• One of the most common uses of JavaScript is for
form validation
• Several HTML DOM classes encapsulate form
elements
– Form, Button, Checkbox, Hidden, Password, Text,
Radio,
Reset, Submit, Textarea
• Warning: Using JavaScript is not a substitute for
validating form data in CGI scripts
HTML DOM: Text
• A text entry field (input type=
"text") is
encapsulated by a Text object
• Variables
– value, maxLength, id, size, name, tabindex, readOnly
• Changing these variables has an immediate effect
on the displayed data
HTML DOM: The Document Tree
• Accessing elements and changing their properties
lets us do simple things like form validation, data
transfer etc
• HTML DOM lets us do much more
• We can create, delete, and modify parts of the
HTML document
• For this we need to understand the Document Tree
Navigating the Document Tree
HTML DOM: The Document Tree
References:
https://www.geeksforgeeks.org/
https://www.javatpoint.com/exception-handling-in-java
https://www.tutorialspoint.com/java/java_exceptions.htm
The complete reference, eleventh edition, available at:
https://gfgc.kar.nic.in/sirmv-science/GenericDocHandler/1
38-a2973dc6-c024-4d81-be6d-5c3344f232ce.pdf
79
Thank you
80
