18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1

18CSC311J WEB DESIGN AND DEVELOPMENT
2023-24 EVEN SEMESTER
REGULATION 2018
Prepared by
Dr.M.Sivakumar
AP,NWC, SRMIST, KTR
DEPARTMENT OF NETWORKING AND COMMUNICATIONS

Course Outcomes
COURSE OUTCOMES (CO) : At the end of this course, learners will be able to :
CO-1 Apply the HTML,CSS, AJAX and JQUERY into webpage development
CO-2
Develop and demonstrate the dynamic web page with appropriate form validation using JavaScript objects with different
event handling mechanisms
CO-3 Gain the knowledge about web site dynamic behavior and server side Programming
CO-4 Develop the dynamic web pages using databases using JDBC ,ODBC
CO-5 Acquire the knowledge in web development frameworks and webservices

Table of Contents
1. Understanding of internet, Overview of an cloud technology and
infrastructure, website and webserver, web client, Internet
Technology, Understanding cloud-based web hosting Introduction:
Rich Internet Applications.
2. Introduction to HTML - HTML5: Responsive Web Design
3. Introduction about CSS - CSS Types
4. Introduction to Javascript
5. Javascript DOM Model
6. Control Structure
7. Objects and built-in objects
8. Event Handling, form validation
9. Exception handling

Understanding of internet, Overview of an
cloud technology and infrastructure, website
and webserver, web client, Internet Technology,
Understanding cloud-based web hosting
Introduction: Rich Internet Applications.

Introduction to HTML - HTML5:
Responsive Web Design

Structure of HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
//content of the document
</body>
</html>

Basic HTML5 Web Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First HTML5 Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>HTML5 is fun!</p>
</body>
</html>

Tables
• <table>
• <td>
• <tr>
• <th>
• <caption>
• <tbody>
• <thead>
• <tfoot>

Tables
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table border="1">
<caption>Name List</caption>
<tr>
<td>101</td>
<td>Raja</td>
</tr>
<tr>
<td>102</td>
<td>Madhan</td>
</tr>
<tr>
<td>103</td>
<td>Muthu</td>
</tr>
<tr>
<td>104</td>
<td>Naveen</td>
</tr>
</table>
</body>
</html>
Output
101 Raja
102 Madhan
103 Muthu
104 Naveen
Name List

Lists
• <dl> - define List
• <dt> - Define Terms
• <dd> - Definition
• <ol> - Ordered List
• <li> - List Item
• Attribute: type=“1”
• <ul> - Unordered List
• <li> - List Item
• Attribute: style="list-style-type:disc"

L
i
s
t
s
E
x
a
m
p
l
e

Image
<img src="/images/sunset-360.jpg"
alt="Picture of a Ha Long Bay sunset"
srcset="/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w>"
sizes="(min-width: 800px) 720px, 360px“ height=“240” width=“120”>

Forms in HTML5
<form name=“ ” action=“ ” onsubmit=“ ” method=“ ” autocomplete=“ ”>
</form>
• action - Defines which URL the form's information is sent to when submitted.
action=“/contact”
action ="https://htmlreference.io/contact.jsp"
• method - Defines the HTTP method used when submitting the form.
method= “get”
method=“post”
• name - The form's name when sent to the server. Useful when multiple forms are present on the same
web page.
name=“signupform”
• autocomplete - Determines if the browser can autocomplete all the form's controls.
autocomplete=“off”
autocomplete=“on”

Form Elements
• <input>
• <select>
• <textarea>
• <button>
• <datalist>
• <output>

Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time“>

Form Control Elements
• Search field
<input type="search" id="search" name="search">
• Phone nmber field
<input type="tel" id="tel" name="tel">
• URL field
<input type="url" id="url" name="url">
• Numeric field
<input type="number" name="age" id="age" min="1" max="10" step="2">
• Slider controls
<label for="price">Choose a maximum house price: </label>
<input type="range" name="price" id="price" min="50000" max="500000" step="100"
value="250000">
<output class="price-output" for="price"></output>

HTML5 Form Attributes
• placeholder
• autocomplete
• required
Example:
<input type="text" name="empname" placeholder="Enter your
name" required>

HTML5 Semantic elements
Tag Name Purpose
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time

Structure of Simple HTML5 Document

Drag and Drop
• HTML Drag and Drop interfaces enable applications to use drag-and-drop
features in browsers
• The user may select draggable elements with a mouse, drag those
elements to a droppable element, and drop them by releasing the mouse
button

Events for Drag and Drop feature
Event Description
drag It fires every time when the mouse is moved while the object is being dragged.
dragstart Calls a function, drag(event), that specifies what data to be dragged
dragenter
To determine whether or not the drop target is to accept the drop. If the drop is to be
accepted, then this event has to be canceled
dragover Specifies where the dragged data can be dropped
dragleave
Occurs when the mouse leaves an element before a valid drop target while the drag
is ocurring
drop Specifies where the drop was occurred at the end of the drag operation
dragend Occurs when the user has finished dragging an element

Procedure for Drag and Drop
• Step 1: Make an object draggable
• First set the draggable attribute to true for that element to be draggable <img
draggable = “true”>
• Then, specify what should happen when the element is dragged. The
ondragstart attribute calls a function, drag(event), that specifies what data to
be dragged. The dataTransfer.setData() method sets the data type and the
value of the dragged data
• The event listener ondragstart will set the allowed effects (copy, move, link, or
some combination).
function dragStart(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}

Procedure for Drag and Drop
• Step 2: Dropping the Object
• The ondragover event specifies where the dragged data can be dropped. By default,
data/elements cannot be dropped in other elements. To allow a drop, it must prevent
the default handling of the element. This is done by calling the event.preventDefault()
method
• Finally, the drop event, which allows the actual drop to be performed
function dragDrop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

Drag and Drop Example
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 100px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="dragdrop.jpg" draggable="true" ondragstart="drag(event)"
width="350" height="100">
</body>
</html>
<script>
function allowDrop(ev)
{
}
function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>

Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• Controls - adds audio controls, like play, pause, and volume
• <source> - allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format
• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element

Video controls
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
• controls - adds video controls, like play, pause, and volume
• If height and width are not set, the page might flicker while the video loads
• <source> - allows you to specify alternative video files which the browser may choose from
• The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element

Introduction about CSS - CSS
Types

CSS3 - Introduction
• CSS stands for Cascading Style Sheets
• CSS is a standard style sheet language used for describing the
presentation of the web pages.
• CSS was designed to enable the separation of presentation and content
• CSS3 is the latest version of the CSS specification

CSS Syntax
• CSS rules have two main parts, a selector and one or more declarations:
• Selectors are used to declare which of the markup elements a style applies to
• The declarations that appear in the block that follows the selector may be
applied to all elements of a specific type, or only those elements that match a
certain attribute
• Each declaration consists of a property and a value

Example
/* This is a CSS comment */
h1
{
color: blue;
text-align: center;
}

Uses of CSS
• To apply same style rules on multiple elements.
• To control the presentation of multiple pages of a website with a single style sheet
• To present the same page differently on different devices
• To style dynamic states of elements such as hover, focus, etc. that isn't possible otherwise.
• To change the position of an element on a web page without changing the markup.
• To alter the display of existing HTML elements.
• To transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• To create animations and transitions effects without using any JavaScript.
• To create print friendly version of your web pages.

Advantages of Using CSS
• CSS Save Lots of Time
• Easy Maintenance
• Pages Load Faster
• Superior Styles to HTML
• Multiple Device Compatibility

Including CSS in HTML Documents
or CSS Types
You can include CSS in an HTML document in three ways:
1. Inline styles — Using the style attribute in the HTML start tag.
2. Embedded styles — Using the <style> element in the head section of a
document.
3. External style sheets — Using the <link> element, pointing to an
external CSS file.

Inline Styles
• Inline styles are used to apply the unique style rules to an element by putting the
CSS rules directly into the start tag.
• It can be attached to an element using the style attribute
• The style attribute includes a series of CSS property and value pairs.
• Each "property: value" pair is separated by a semicolon (;)
• Example:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>

Embedded (or) Internal Style Sheets
• Embedded or internal style sheets only affect the document they are
embedded in.
• Embedded style sheets are defined in the <head> section of an HTML
document using the <style> element
• You can define any number of <style> elements in a HTML document but
they must appear between the <head> and </head> tags

Embedded Style Sheets
<!DOCTYPE html>
<html>
<head>
<title>Embedded Style Sheet</title>
<style>
body
{
background-color: YellowGreen;
}
p
{
color: #fff;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html> 18CSC311J WEB DESIGN AND DEVELOPMENT

External Style Sheets
• An external style sheet is ideal when the style is applied to many pages of
the website.
• An external style sheet holds all the style rules in a separate document
that you can link from any HTML file on your site
• External style sheets are the most flexible because with an external style
sheet, you can change the look of an entire website by changing just one
file

External Style Sheets
style1.css
body
{
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1
{
color: orange;
}
extcss.html
<!DOCTYPE html>
<html>
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Importing External Style Sheets
• The @import rule is another way of loading an external style sheet
• The @import statement instructs the browser to load an external style sheet
and use its styles.
• You can use it in two ways:
1. Within header
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
2. within another style sheet
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}

CSS Text Properties
Property Description Values
color Sets the color of text Red,blue
direction Specifies the text direction/writing direction rtl, ltr
letter-spacing Increases or decreases the space between characters in a text 3px,5px
line-height Sets the line height 10px
text-align Specifies the horizontal alignment of text left,right,center,jusify
text-decoration Specifies the decoration added to text none, underline, overline, line-through
text-indent Specifies the indentation of the first line in a text-block 50px
text-shadow Specifies the shadow effect added to text 2px 2px red
text-transform Controls the capitalization of text uppercase, lowercase, capitalize
text-overflow
Specifies how overflowed content that is not displayed should be signaled to the
user
clip, ellipsis
vertical-align Sets the vertical alignment of an element
Baseline, text-top, text-
bottom,sub,super
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

CSS Units
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
em Relative to the font-size of the element (2em means 2 times the size of the current font)
* Pixels (px) are relative to the viewing device

CSS Selectors
• Selectors are one of the most important aspects of CSS as they are used to
select elements on a web page so that they can be styled.
• You can define selectors in various ways.
• Element Type Selector
• Id Selectors
• Class Selectors
• Descendant Selectors
• Grouping Selectors

Element Type Selector - Id Selectors - Class Selectors
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS selector</title>
<style>
h1 {
color: Yellow;
}
p {
color: green;
}
#error {
color: #ff0000;
}
.blue {
color: #0000ff;
}
</style>
</head>
<body>

Descendant Selectors and Grouping Selector
<!DOCTYPE html>
<html>
<head>
<title>Descendant Selectors</title>
<style>
h1 em { color: green; }
ul.menu
{
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
<body>
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>

Rule cascading
The cascading rules define which elements take precedence
over others.
1. Sort by Importance
2. Sort by weight
3. Sort by Specificity
4. Sort by Order

Rules of Cascading
1. Sort by Importance
• an ID will win out over a class
• a class will win out over a tag
2. Sort by weight
• Author: Style Sheet - Inline within the body of the web page
• Author: Style Sheet - Embedded in the head of the web page
• Author: Style Sheet – Linked
• User: Style Sheet
• Default: Browser

Rules of Cascading
3. Sort by Specificity
• #content p em{ color: #foo;}
• #content p{color: #f00;}
• #content{color: #333;}
4. Sort by Order
• If two rules have the same properties, specificy and values the one
that appears later in the css will be the one that the browser uses

Inheritance
• Some CSS properties by default inherit values set on the current element's
parent element
• For example, if you set a color and font-family on an element, every
element inside it will also be styled with that color and font, unless you've
applied different color and font values directly to them.

Inheritance Example
<!DOCTYPE html>
<html>
<head>
<style>
body
{
color: blue;
font-family: Arial;
}
h1
{
color: Yellow;
}
p
{
text-align:justify;
font-size:20px;
}
b
{
color:red;
}
</style>
</head>
<body>
<h1>Inheritance Example</h1>
<p>Some CSS properties by default <b>inherit</b> values set on the current element's parent element. For example, if you set a color and font-family on an element,
every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them. </p>
</body>
</html>

Text - Transformations
• 2D Transformation
• 3D Transformation

CSS3 2D Transforms
• 2D Transforms give us the ability to perform basic manipulations on elements
in space
• A transformation modify an element by its shape, size and position. It
transforms the elements along the X-axis and Y-axis.
There are several types of transformation which are listed below:
• translate(), translateX(), traslateY()
• rotate()
• scale(), scaleX(), scaleY()
• skew(), skewX(), skewY()
• matrix()

CSS3 2D Transforms
• translate(), translateX(), traslateY()
• moves an element from its current position
• rotate()
• rotates an element clockwise or counter-clockwise according to a given
degree
• scale(), scaleX(), scaleY()
• increases or decreases the size of an element
• skew(), skewX(), skewY()
• skews an element along the X and Y-axis by the given angles
• matrix()
• combines all the 2D transform methods into one

2D Transform Methods
Function Description
translate(tx,ty) Moves the element by the given amount along the X and Y-axis.
translateX(tx) Moves the the element by the given amount along the X-axis.
translateY(ty) Moves the the element by the given amount along the Y-axis.
rotate(a)
Rotates the element by the specified angle around the origin of the element, as defined by the transform-
origin property.
scale(sx,sy) Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect.
scaleX(sx) Scale the width of the element up or down by the given amount.
scaleY(sy) Scale the height of the element up or down by the given amount.
skew(ax,ay) Skews the element by the given angle along the X and Y-axis.
skewX(ax) Skews the element by the given angle along the X-axis.
skewY(ay) Skews the element by the given angle along the Y-axis.
matrix(n,n,n,n,n,n) Specifies a 2D transformation in the form of a transformation matrix comprised of the six values.

2D Transforms Example
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<div>
2d Transforms Example
</div>
<div id = "myDiv">
OUTPUT:

3D Transform Functions
Function Description
translate3d(tx,ty,tz) Moves the element by the given amount along the X, Y & Z-axis.
translateX(tx) Moves the element by the given amount along the X-axis.
translateY(ty) Moves the element by the given amount along the Y-axis.
translateZ(tz) Moves the element by the given amount along the Z-axis.
rotate3d(x,y,z, a) Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector.
rotateX(a) Rotates the element by the given angle around the X-axis.
rotateY(a) Rotates the element by the given angle around the Y-axis.
rotateZ(a) Rotates the element by the given angle around the Z-axis.
scale3d(sx,sy,sz) Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect.
scaleX(sx) Scales the element along the X-axis.
scaleY(sy) Scales the element along the Y-axis.
scaleZ(sz) Scales the element along the Z-axis.
matrix(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values.
perspective(length)
Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the
element will appear further away from the viewer.

Text Transitions
Property Description
transition
A shorthand property for setting all the four individual transition
properties in a single declaration.
transition-delay Specifies when the transition will start.
transition-duration
Specifies the number of seconds or milliseconds a transition animation
should take to complete.
transition-property
Specifies the names of the CSS properties to which a transition effect
should be applied.
transition-timing-function
Specifies how the intermediate values of the CSS properties being
affected by a transition will be calculated.

CSS3 Animation
• An animation lets an element gradually change from one style to another.
• You can change as many CSS properties you want, as many times you
want.
• To use CSS animation, you must first specify some keyframes for the
animation.
• Keyframes hold what styles the element will have at certain times.

CSS3 Animation
• @keyframe animation-name
When you specify CSS styles inside the @keyframes rule,
the animation will gradually change from the current style to
the new style at certain times.
• animation-name
• Defines the name of the animation specified in the @keyframe
• animation-duration
• defines how long time an animation should take to complete
• If the animation-duration property is not specified, no animation will occur, because
the default value is 0s

CSS3 Animation Example
<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<style>
h1,h2
{
text-align:center;
}
@keyframes example
{
from {font-size: 20px;}
to {font-size:40px;}
}
h1
{
animation-name:example;
animation-duration: 4s;
}
</style>
</head>
<body>
<h1>KRT Institute of Science and Technology</h1>
<h2>Chennai</h2>
<hr>
</body>
</html>

CSS3 Animation Properties
animation A shorthand property for setting all the animation properties in single declaration.
animation-name Specifies the name of @keyframes defined animations that should be applied to the selected element.
animation-duration
Specifies how many seconds or milliseconds that an animation takes to complete one cycle of the
animation.
animation-timing-function Specifies how the animation will progress over the duration of each cycle i.e. the easing functions.
animation-delay Specifies when the animation will start.
animation-iteration-count Specifies the number of times an animation cycle should be played before stopping.
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles.
animation-fill-mode Specifies how a CSS animation should apply styles to its target before and after it is executing.
animation-play-state Specifies whether the animation is running or paused.
@keyframes Specifies the values for the animating properties at various points during the animation.

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width: 200px;
height: 100px;
background-color: red;
color: yellow;
position: relative;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;} 18CSC311J WEB DESIGN AND DEVELOPMENT

90
Introduction to JavaScript
• JavaScript is an interpreted programming or script language
• Invented in 1995 at Netscape Corporation
• JavaScript programs are run by an interpreter built into the user's web
browser (not on the server)
• Client side scripting

What is JavaScript?
• JavaScript was designed to add interactivity to HTML pages
• JavaScript is a scripting language
• A JavaScript consists of lines of executable computer code
• A JavaScript is usually embedded directly into HTML pages
• JavaScript is an interpreted language
• Everyone can use JavaScript without purchasing a license

What can a JavaScript Do?
• JavaScript gives HTML designers a programming tool
• JavaScript can put dynamic text into an HTML page
• JavaScript can react to event
• JavaScript can read and write HTML elements
• JavaScript can be used to validate data
• JavaScript can be used to detect the visitor's browser
• JavaScript can be used to create cookies

93
Java vs. JavaScript
• Requires the JDK to create the applet
• Requires a Java virtual machine to run the
applet
• Applet files are distinct from the XHTML
code
• Source code is hidden from the user
• Programs must be saved as separate files
and compiled before they can be run
• Programs run on the server side
• Requires a text editor
• Required a browser that can interpret
JavaScript code
• JavaScript can be placed within HTML and
XHTML
• Source code is made accessible to the user
• Programs cannot write content to the hard
disk
• Programs run on the client side

Event-driven programming
94
 split breaks apart a string into an array using a delimiter
 can also be used with regular expressions (seen later)
 join merges an array into a single string, placing a delimiter between
them

Event-driven Programming
95
 JavaScript programs wait for user actions called events
and respond to them
 Event-driven Programming: writing programs driven by
user events

96
Javascript Syntax
• To embed a client-side script in a Web page, use the element:
<script>
script commands and comments
</script>
• To access an external script, use:
<script src=“url”>
script commands and comments
</script>

Javascript Syntax
<script>
statement-1;
statement-2;
….
statement-n;
</script>

Where to Put the JavaScript
• <head> section
• Save file with extension .html
• <body> section
• Save file with extension .html
• External scripts
• Save file with extension .js

JavaScript in the <head> section
<html>
<head>
<title>Java Script Example</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
</body>
</html>

Scripts in the <body> section
<html>
<head>
<title>Java Script Example</title>
</head>
<body>
<script>
alert("Hello World1");
</script>
</body>
</html>

Using External JavaScript
<html>
<head>
<script src=“extfile.js">
</script>
</head>
<body>
</body>
</html>
extfile.js
alert("Hello");
alert (“Welcome to Javascript”);
alert (“Have a nice day!”);

102
Comments
• The syntax for a single-line comment is:
// comment text
• The syntax of a multi-line comment is:
/*
comment text covering several lines
*/

103
Writing Output to a Web Page
• JavaScript displays data in the following ways:
document.write() or document.writeln()
window.alert() or alert()
innerHTML

104
Types of Variables
JavaScript supports Four different types of variables:
• Numeric variables can be a number
13, 22.5, or -3.14159
• String variables is any group of characters
“Hello” or “Happy Holidays!”
• Boolean variables are variables that accept one of two values
true or false
• null variables is a variable that has no value at all

105
Declaring a Variable
• Declare a variable using the var keyword or by assigning the variable a
value
• Any of the following commands is a legitimate way of creating a variable
named “Month”:
var Month;
var Month = “December”;
Month = “December”;
var age=20;

Javascript Functions
• Syntax
function name()
{
statement ;
statement ;
...
statement ;
}
• Example
<script>
function MyFunction()
{
alert("Hello!");
alert("How are you?");
}
</script>

JavaScript DOM Model
• What is DOM?
• The Document Object Model (DOM) is a programming API for HTML and
XML documents.
• It defines the logical structure of documents and the way a document is
accessed and manipulated.
• With the Document Object Model, programmers can create and build
documents, navigate their structure, and add, modify, or delete elements
and content
108

109
Nodes Organise the Page
<html>
<head>
<title>My page</title>
</head>
<body>
<p>This text is on my page</p>
</body>
</html>
html
head
title
text
“my page”
body
p
text
“This text is on
my page”

110
What is a Node?
• Element Node – contains an HTML tag
• Text Node – contains text
• Text Nodes are contained in Element Nodes

111
Adding Some Text to a Page
There are five steps:
1. Create a new Element
2. Create new Text
3. Append the new Text to the new Element
4. Find an existing Element
5. Append the new Element to the existing Element

112
1. Create New Element Node
• Create a new <p> tag (element) so that we can attach some text to it
• Put the new object into a variable
var newNode;
newNode = document.createElement(“p”);

113
2. Create a Text Node
• Create a text node
• Put the new text node into a variable
var newText;
newText = document.createTextNode(“Some text”);

114
3. Attach the New Text Node to the New
Element
• To put the text into the page, we have to attach the text node to the new
HTML element:
newNode.appendChild(newText);

115
4.Find an Existing Element
• The new element with our text node attached to it is still floating around in
a Javascript world.
• Assign this existing element to a variable
var docElement;
docElement = document.getElementById(“thisLocation”);

116
5. Append the New Element to the Existing
Element
• To insert our text into the page, we now have to append the new element
to the existing element
docElement.appendChild(newNode);

117
Putting the 5 Steps Together
<html>
<head>
<script>
var myText;
myText = "This is new text to be added to the page dynamically.";
function addText(location)
{
var newNode;
var newText;
var docElement;
newNode = document.createElement("p");
newText = document.createTextNode(myText);
newNode.appendChild(newText);
docElement = document.getElementById(location);
docElement.appendChild(newNode);
}
</script>
</head>
<body>
<p>
<a href="#" onclick="addText('thisLocation');">Click to add new text to the page</a></p>
<p id="thisLocation">New text will appear below here</p>
<p>Some further text in the page</p>
</body>
</html>

118
Remove a Node
• To remove a node, we use the element method removeChild(name of
node to be removed)
• For example:
function remText(location)
{
var docElement;
docElement = document.getElementById(location);
docElement.removeChild(docElement.lastChild);
}

122
Date Object
• There are two ways to create a date object
• Method-1
var-name = new Date(“month day, year, hours:minutes:seconds”) ;
• Method-2
var-name = new Date(year, month, day, hours, minutes, seconds);
• var-name is the name of the variable that contains the date information
• month, day, year, hours, minutes, and seconds indicate the date and time
• Example:
var Today=new Date(“October 15, 2006”);
var Today=new Date(2006, 9, 15);

Date Object and Methods
• Date object can be used to access the date and time, and to perform "date arithmetic"
• To get and set current Date and Time
today = new Date();
new Year = new Date(2002,0,1);
• Methods of Date object
• Date() - Returns today's date and time
• getDate() - Returns the day of the month for the specified date
• getDay() - Returns the day of the week for the specified date
• getFullYear() - Returns the year of the specified date
• getHours() - Returns the hour in the specified date according to local time.
• getMilliseconds() - Returns the milliseconds in the specified date according to local time.
123

<!DOCTYPE html>
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<pre>
<script>
d=new Date();
document.writeln(d);
document.writeln("getDate() return:"+d.getDate());
document.writeln("getDay() returns:"+d.getDay());
document.writeln("getFullYear() returns:"+d.getFullYear());
document.writeln("getHours() returns:"+d.getHours());
document.writeln("getMinutes() returns:"+d.getMinutes());
document.writeln("getSeconds() returns:"+d.getSeconds());
document.writeln("getMilliseconds() returns:"+d.getMilliseconds());
</script>
</pre>
</body>
</html>

Array Object
• Multiple values are stored in a single variable using the Array object.
• In JavaScript, an array can hold different types of data types in a single
slot, which implies that an array can have a string, a number or an object
in a single slot.
• An Array object can be created by using following ways:
• Using the Array Constructor
• Using the Array Literal Notation

Array Object
• Using the Array Constructor:
• To create empty array when don’t know the exact number of elements to be inserted in an array
var arrayname = new Array();
• To create an array of given size
var arrayname = new Array(size);
• To create an array with given elements
var arrayname = new Array(“element 1”,”element 2”,……..,”element n”);

Array Object
• Using the Array Literal Notation:
• To create empty array
var arrayname =[ ];
• To create an array when elements are given
var arrayname =[“element 1”,”element 2”,……..,”element n”];

Array Object
• Properties of the Array object
• length - Returns the number of elements in the array
• Constructor - Returns the function that created the Array object
• Prototype - Add properties and methods to an object
• Methods of the Array object
• reverse() - Reverses the array elements
• concat() - Joins two or more arrays
• sort() - Sort the elements of an array
• push() - Appends one or more elements at the end of an array
• pop() - Removes and returns the last element
• shift() - Removes and returns the first element

Array Object Example-1
<!DOCTYPE html>
<html>
<head>
<title>Array Object Example</title>
</head>
<body>
<pre>
<script>
a=new Array(3);
a.push(10);
a.push(20);
a.push(30);
document.writeln(a.pop());
</script>
</pre>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Array Object Example</title>
</head>
<body>
<pre>
<script>
a=new Array(3);
b=['aaa','bbb','ccc']
a[0]=10;
a[1]=20;
a[2]=30;
document.writeln(a[0]);
document.writeln(b[2]);
</script>
</pre>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Array Example-2</title>
<script>
function book(title, author)
{
this.title = title;
this.author = author;
}
</script>
</head>
<body>
<script>
var myBook = new book("Perl", “Ramesh");
book.prototype.price = null;
myBook.price = 100;
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

Math Object
• The JavaScript Math object is used to perform mathematical tasks.
• The Math object is a static built-in object, so no need to instantiate it, all its
properties and methods can be accessed directly.

Math Object Example
<!DOCTYPE html>
<html>
<head>
<title>Math Object Example</title>
</head>
<body>
<pre>
<script>
document.writeln("PI="+Math.PI);
document.writeln("3 to the Power of 2="+Math.pow(3,2));
</script>
</pre>
</body>
</html>

Math Properties
E Returns Euler's number, the base of natural logarithms, e, approximately 2.718
LN2 Returns the natural logarithm of 2, approximately 0.693
LN10 Returns the natural logarithm of 10, approximately 2.302
LOG2E Returns the base 2 logarithm of e, approximately 1.442
LOG10E Returns the base 10 logarithm of e, approximately 0.434
PI
Returns the ratio of the circumference of a circle to its diameter (i.e. π). The approximate value of PI is
3.14159
SQRT1_2 Returns the square root of 1/2, approximately 0.707
SQRT2 Returns the square root of 2, approximately 1.414

Math Methods
Method Description
abs() Returns the absolute value of a number.
acos() Returns the arccosine of a number, in radians.
acosh() Returns the hyperbolic arccosine of a number.
asin() Returns the arcsine of a number, in radians
asinh() Returns the hyperbolic arcsine of a number.
atan() Returns the arctangent of a number, in radians.
atan2(y, x) Returns the arctangent of the quotient of its arguments.
atanh() Returns the hyperbolic arctangent of a number.
cbrt() Returns the cube root of a number.
ceil() Returns the next integer greater than or equal to a given number (rounding up).

Math Methods(cont..)
Method Description
cos() Returns the cosine of the specified angle. The angle must be specified in radians.
cosh() Returns the hyperbolic cosine of a number.
exp(x)
Returns e
x
, where x is the argument, and e is Euler's number (also known as Napier's
constant), the base of the natural logarithms.
floor() Returns the next integer less than or equal to a given number (rounding down).
log() Returns the natural logarithm (base e) of a number.
max(x, y, ...) Returns the highest-valued number in a list of numbers.
min(x, y, ...) Returns the lowest-valued number in a list of numbers.
pow(x, y) Returns the base to the exponent power, that is, x
y
.

Math Methods(cont..)
Method Description
random() Returns a random number between 0 and 1 (including 0, but not 1).
round() Returns the value of a number rounded to the nearest integer.
sin() Returns the sign of a number (given in radians).
sinh() Returns the hyperbolic sine of a number.
sqrt() Returns the square root of a number.
tan() Returns the tangent of a number.
tanh() Returns the hyperbolic tangent of a number.
trunc(x) Returns the integer part of a number by removing any fractional digits.

JS String Object
• String Properties
constructor Returns the string's constructor function
length Returns the length of a string
prototype Allows you to add properties and methods to an object

JS String Object
• String Methods
Method Description
charAt() Returns the character at the specified index (position)
charCodeAt() Returns the Unicode of the character at the specified index
concat() Joins two or more strings, and returns a new joined strings
endsWith() Checks whether a string ends with specified string/characters
fromCharCode() Converts Unicode values to characters
includes() Checks whether a string contains the specified string/characters
indexOf() Returns the position of the first found occurrence of a specified value in a string
lastIndexOf() Returns the position of the last found occurrence of a specified value in a string
localeCompare() Compares two strings in the current locale
match() Searches a string for a match against a regular expression, and returns the matches
repeat() Returns a new string with a specified number of copies of an existing string
replace() Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are
replaced

JS String Object
• String Methods
Method Description
search() Searches a string for a specified value, or regular expression, and returns the position of the match
slice() Extracts a part of a string and returns a new string
split() Splits a string into an array of substrings
startsWith() Checks whether a string begins with specified characters
substr()
Extracts the characters from a string, beginning at a specified start position, and through the specified
number of character
substring() Extracts the characters from a string, between two specified indices
toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale
toLowerCase() Converts a string to lowercase letters
toUpperCase() Converts a string to uppercase letters
trim() Removes whitespace from both ends of a string
valueOf() Returns the primitive value of a String object

JS String Object
<!DOCTYPE html>
<html>
<head>
<title>String Object Example</title>
</head>
<body>
<script>
msg="Welcome to Javascript";
document.writeln("String Length:"+msg.length);
document.writeln("<br>Position of script:"+msg.search("script"));
document.writeln("<br>String Before Replace:"+msg);
document.writeln("<br>String After Replace:"+msg.replace("Java","Perl"));
</script>
</body>
</html>

JS Objects
• JavaScript objects are containers for named values called
properties or methods
• Objects are variables too
• But objects can contain many values

JS Objects
• Creating Object
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue“,
fullName:function()
{
return this.firstName+ “ “ + this.lastName;}
};
• Accessing Object Methods and Properties
var name=person.fullName();
var myAge=person.age;

Event Handling, form validation

Event Handling
• Events are actions or occurrences that happen in the system, which the
system tells you about so you can respond to them in some way if desired
• Javascript has events to provide a dynamic interface to a webpage
• These events are hooked to elements in the Document Object Model(DOM)
• For example, if the user clicks a button on a webpage, you might want to
respond to that action by displaying an information box

Event Handling
• Example Events:
• The user clicking the mouse over a certain element or hovering the cursor over a
certain element
• The user pressing a key on the keyboard
• The user resizing or closing the browser window
• A web page finishing loading
• A form being submitted
• A video being played, or paused, or finishing play
• An error occurring

HTML Events
Event When it occurs
onsubmit It is triggered when the user clicks a button after the submission of a form.
onclick It occurs or triggers when any user clicks on an HTML element.
onmouseover It occurs when a user moves the cursor over an HTML object.
onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML element.
onmousedown It occurs when a user presses the button of a mouse over an HTML element.
onmousemove It occurs when a user moves the cursor on an HTML object.
onmouseup It occurs or triggers when the mouse button is released over an HTML element.
onload It occurs when an object is completely loaded.
onblur It occurs when the user leaves an HTML object.
onfocus It occurs when the user focuses on an HTML element. This event handler works opposite to onblur.

HTML Events
Event When it occurs
ondblclick It occurs when the user clicks on an HTML element two times together.
onchange It occurs when the user changes or updates the value of an object.
onkeydown It triggers when a user is pressing a key on a keyboard device. This event handler works for all the keys.
onkeypress It triggers when the users press a key on a keyboard. This event handler is not triggered for all the keys.
onkeyup It occurs when a user released a key from a keyboard after pressing on an object or element.
onload It occurs when an object is completely loaded.
onreset It is used by the user to reset the form.
onselect It occurs after selecting the content or text on a web page.
onunload It is triggered when the user closes a web page.
onabort It occurs when the user aborts the page or media file loading.

Event Handling
• Event Handler
• It is a function that’s called when an event occurs to respond to any
event
• multiple handlers for the same event can be registered, and they will all
be called when that event happens.
• JavaScript offer three ways to register an event handler:
• Inline event handlers
• DOM on-event handlers
• Using addEventListener()

JS Events
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

Inline Event Handler
<!DOCTYPE html>
<html>
<head>
<title>JS Inline Event Example</title>
</head>
<body>
<button onclick="alert('Hello, this is inline event handler!');">
Press me
</button>
</body>
</html>

DOM on-event handlers
<!DOCTYPE html>
<html>
<head>
<title>JS DOM on-event Example</title>
</head>
<body>
<button onclick="sayHello();">
Press me
</button>
<p id="event"></p>
<script>
function sayHello()
{
document.getElementById("event").innerHTML="Hello";
}
</script>

Using addEventListener()
<!DOCTYPE html>
<html>
<head>
<title>JS DOM-online Event Example</title>
</head>
<body>
<button>Press me</button>
<p id="event"></p>
<script>
const btn = document.querySelector('button');
function sayHello()
{
document.getElementById("event").innerHTML="Hello";
}
btn.addEventListener('click', sayHello);
</script>
</body>

Form Validation
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function myFunction()
{
x = document.getElementById("age").value;
if (isNaN(x) || x < 1 || x > 120)
{
text = "Invalid Age";
}
else
{
text = "Input OK";
}
document.getElementById("status").innerHTML = text;
}
</script>
</head>
<body>
<p>Please Enter Your Age:
<input id="age">
<button type="button" onclick="myFunction1()">Submit</button></p>
<p id="status"></p>
</body>
</html>

Form Validation
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
{
//var x, text;
x = document.getElementById("aadhar").value;
if (isNaN(x) || x.length!= 12)
{
text = "Invalid Number";
}
else
{
text = "Input OK";
}
document.getElementById("status").innerHTML = text;
}
</script>
</head>
<body>
<p>Please Enter Your Aadhar Number:
<input id="aadhar">
<button type="button" onclick="myFunction()">Submit</button></p>
<p id="status"></p>
</body>
</html>

Exception Handling
• Run time errors are exceptions and this exception is correct by the help of the try
and catch method
• Syntax:
<script>
try
{
// Here the main Code run
}
catch ( exception e )
{
// The code will run when there is an exception
}
</script>

<!DOCTYPE html>
<html>
<head>
<title>JS Exception Handling Example</title>
</head>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button”onclick="myFunction()">
Test Input</button>
<p id="p01"></p>
<script>
{
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
try
{
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err)
{
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
Exception Handling Example

18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1

More Related Content

Similar to 18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1 (20)

More from Sivakumar M (12)

Recently uploaded (20)

18CSC311J WEB DESIGN AND DEVELPMENT UNIT-1