Module 1 –

Web Programming Fundamentals

 Agenda -

⚫ Working of web browser

⚫ HTTP Protocol
⚫ HTTPS
⚫ DNS
⚫ TLS
⚫ XML
⚫ JSON
⚫ DOM, URL, URI, RESTAPI.
1. Working of web browser

⚫ Client - A client is an user program that request to

server .
⚫ Server – A server is an program that response to the
client .
⚫ Web Server – Software that delivers sites and other
documents to browsers using HTTP protocol .
⚫ Web Page – A web page could be a document or
resource of knowledge that suitable for the globe wide
web and may be accessed through an internet browser.
⚫ Website – A collection of pages on the globe wide
web that are accessible from the identical URL and
typically residing on the identical server.
⚫ URL – Uniform Resource Locator , the unique
address which identifies a resource on the internet for
routing purposes .
⚫ The Internet – Medium for communication and
interaction in inter connected network .
⚫ Web Browser – User agents for web is termed a
browser :
- Google Chrome
- Firefox
1.1 Client Server Communication
2. HTTP Protocol
⚫ Protocols are agrees formats for transmitting data
between devices .
⚫ The protocol determines :
1. The error checking required
2. Data compression method used .
3. The way the tip of a message is signaled .
4. The way the device indicates that its received the
message .
4. Internet Protocol
⚫ Internet Protocols are a set of rules that governs the
communication and exchange of data over the
internet.
⚫ There are many protocols utilized by internet .
1. TCP/IP
2. HTTP
3. FTP
4. IMAP
5. POP
1. TCP/IP

⚫ TCP/IP stands for Transmission Control Protocol/

Internet Protocol .
 TCP - Transmission Control Protocol -
⚫ TCP is responsible for breaking data down into small
packets before they can be sent over a network, and
for assembling the packets again when they arrive.
 IP - Internet Protocol -
⚫ IP takes care of the communication between
computers. It is responsible for addressing, sending
and receiving the data packets over the Internet.
 2. HTTP

⚫ HTTP stands for HyperText Transfer Protocol.

⚫ The below figure shows the HTTP transaction
between client and server.
3. FTP
⚫ FTP stands for File transfer protocol.
⚫ FTP is a standard internet protocol provided by
TCP/IP used for transmitting the files from one
host to another.
⚫ It works on Application Layer .
⚫ It is mainly used for transferring the web page files
from their creator to the computer that acts as a
server for other computers on the internet.
4. IMAP

⚫ IMAP is Internet Message Access Protocol .

⚫ It allows to access email from anywhere .
⚫ It is used to fetch emails ( messages ) from email
server over TCP/IP connection.
5. POP
⚫ The POP protocol stands for Post Office Protocol.
⚫ POP uses the TCP/IP protocol stack for network
connection and works with Simple Mail Transfer
Protocol (SMTP) for end-to-end email
communication .
2.1 WWW
⚫ The World Wide Web is abbreviated as WWW
and is commonly known as the web.
⚫ The WWW was initiated by CERN (European
library for Nuclear Research) in 1989.
 Internet Protocol ( IP ) Address :
- Every node has completely unique numeric
address .
- Form : 32 bit binary number .
- New standard IPv6 has 128 bits (1998) .
- Domain names .
2.2 HTTP
⚫ HyperText Transfer Protocol ( HTTP ) is a
communication protocol used by the internet to
transfer hypertext documents .
⚫ HTTP specifies how clients request data and how
servers respond to these requests .
⚫ It makes a request for a specific page and the server is
responsible for finding it and returning it to the client .
⚫ The browser connects and request a page from the
server .
⚫ The server reads the page from the file system and
sends it to the client and then terminates the
connection .
2.3 HTTP Messages

⚫ HTTP messages are of two types: request and

response. Both the message types follow the same
message format.
2.4 HTTP Methods
⚫ GET and POST method
⚫ These method names are case sensitive and they must be
used in uppercase.

A. GET-
⚫ The GET method is used to retrieve information from the
given server using a given URI. Requests using GET should
only retrieve data and should have no other effect on the
data.

B. POST –
⚫ A POST request is used to send data to the server, for
example, customer information, file upload, etc. using
HTML forms.
3. HTTPS
⚫ HTTPS stands for Hypertext Transfer Protocol
Secure .
⚫ It is the protocol where encrypted HTTP data is
transferred over a secure connection .
⚫ HTTPS ensures data security over the network –
mainly public networks like Wi-Fi .
⚫ For example
⚫ Consider going to a bank website , say hdfc.com
⚫ Hypertext Transfer Protocol Secure (HTTPS ) is
the secure version of HTTP .
3.1 Working with HTTPS

⚫ The protocol is called Transport Layer Security( TLS)

⚫ Although it was known as Secure Socket Layer (SSL).
⚫ This protocol secures the communication by using
what is known as an asymmetric public key
infrastructure .
⚫ The type of communication between two parties :
1. The Private Key –Controlled by owner of the
website
2. The Public Key – This key is available to everyone
who wants to interact with the server .
4. Domain Name System ( DNS )
⚫ Internet uses Domain Name System (DNS) as its
phonebook.
⚫ Domain Name System (DNS) converts domain
names to logical IP address .
⚫ Unique IP address is assigned to each device in the
world wide web.
⚫ DNS se4rver helps people to remember IP
address such as 192.168.100.102 (in case of IPV4)
or more complex alphanumeric logical IP
addresses such as 2500:cd00:2149:c649:h4f2 (
same as IPv6 address ) .
4.1 Steps in a DNS Lookup
1. At the first time user enters URL as
www.example.com into the address bar of web
browser . Immediately the internal query flows
over the internet & it is then received by DNS
recursive resolver .
2. After receiving the URL , the DNS recursive
resolver sends a query to a DNS root name server
.
3. The root name server gets responded by the
resolver with the new address which is Top-
Level Domain (TLD) DNS server ( for example
.org or .com )
4. The request to the .org or .com Top – Level Domain is being
made by the resolver .
5. Top – Level Domain server then response using the logical IP
address of the domain’s name server for example
example.com .
6. Finally the recursive resolver fires a query to the respective
domain’s name server.
7. The logical IP address (eg. 198.168.100.201)
for example.com is the returned back to the resolver which is
from the name server.
8. The Domain Name Sytem resolver which then sends respond
to the web browser with the help of IP address from which
the request received from the domain .
9. The browser sends proper HTTP request to the internal IP
address .
10. The server which is located at that IP address then
returns the webpage ( only content not a file ) .
 5. Transport Layer Security (TLS)
⚫ Transport Layer Security (TLS) is used to encrypt the
data which is sent over the internet .
⚫ Applications like e-mail, file transfers , converting
different formats of the file , audio / video
conferencing internet services such as DNS ,
Transport Layer Security (TLS) is always used .
⚫ On the top of the TCP (Transport Protocol ) TLS is
implemented at which it can encrypt Application layer
protocol
⚫ For eg. FTP , HTTP, SMTP as well as IMAP
⚫Need of TLS
⚫ The main purpose of TLS is providing security while
transferring the data such a password or payment
details .
⚫ They require payment gateways to transfer the
amount or data .
⚫ Therefore in November 2014 , encrypt norms for
Internet Traffic released for protocol designers ,
developers and operators .
⚫ All web browser now supports TLS.
⚫ It is recommended that TLS must be utilized by all
clients and servers while communication and the most
recent version of TLS 1.2 is preferred to install
• Working of TLS
⚫ As TLS provides a very good performance as well
as security while transmitting the data securely .
⚫ It uses symmetric as well as Asymmetric
cryptography combined .
⚫ In case of symmetric cryptography , at both sender
as well as receipt side data is encrypted and
decrypted with a secret key down to both .
⚫ In this case , preferably 256 bits in length is used
as value less than 80 bits is consider insecure .
⚫ A public key as well as a private key are used in
case of asymmetric cryptography .
6. XML Introduction
⚫ The XML acronym stands for Extensible Markup
Language.
⚫ As opposed to HTML tags , which specify how to
display the data , XML tags identify the data and
store it .
⚫ An XML document is a software and hardware -
independent method of strong and transporting
data .
• What is XML ?

⚫ XML stands for eXtensible Markup Language

⚫ XML is a markup language much like HTML
⚫ XML was designed to store and transport data
⚫ XML was designed to be self-descriptive
⚫ XML is an industry-standard W3C Recommended
by W3C.
⚫ XML is a not a programming language .
⚫ This notes a note to Raj from Ravi stored as XML :

<note>
<to> Raj </to>
<from>Ravi</from>
<heading>IReminder</heading>
<body> Meeting at 8 am </body>
</note>
Output
⚫ The XML above is quite self –descriptive :
 It has sender information.
 It has receiver information.
 It has heading.
 It has a message body.

⚫ XML is just information wrapped in tags .

Difference between HTML and XML
HTML XML
HTML stands for Hyper Text XML stands for extensible
Markup Language. Markup Language.
HTML is static in nature. XML is dynamic in nature.
HTML can ignore small errors. XML does not allow errors.
HTML is not Case sensitive. XML is Case sensitive.
HTML tags are predefined tags. XML tags are user defined tags.
XML tags are used for describing the
HTML tags are used for displaying the data.
data not for displaying.
HTML does not carry data it just display XML carries the data to and from database.
it.
In HTML, it is not necessary to use XML makes it mandatory to use a
a closing tag. closing tag.
The XML Tree Structure
An Example XML Document
⚫ The image above represents books in this XML:

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
 XML Syntax Rules

⚫ The syntax rules of XML are very simple and logical.

The rules are easy to learn, and easy to use.
⚫ XML Documents Must Have a Root Element
⚫ XML documents must contain one root element that
is the parent of all other elements:
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
⚫ In this example <note> is the root element

<?xml version="1.0" encoding="UTF-8"?>

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
The XML Prolog

⚫ This line is called the XML prolog:

⚫ <?xml version="1.0" encoding="UTF-8"?>
⚫ The XML prolog is optional. If it exists, it must come
first in the document.
⚫ XML documents can contain international characters,
like Norwegian øæå or French êèé.
⚫ To avoid errors, you should specify the encoding
used, or save your XML files as UTF-8.
⚫ UTF-8 is the default character encoding for XML
documents.
XML Elements
⚫An XML document contains XML Elements.
⚫What is an XML Element?
⚫An XML element is everything from (including)
the element's start tag to (including) the
element's end tag.
<price>29.99</price>
⚫An element can contain:
⚫text
⚫attributes
⚫other elements
⚫or a mix of the above
 <bookstore>
<book category="children">
<title>Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title>Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
⚫ In the example above:
⚫ <title>, <author>, <year>, and <price> have text
content because they contain text (like 29.99).
⚫ <bookstore> and <book> have element contents,
because they contain elements.
⚫ <book> has an attribute (category="children").
 Empty XML Elements

⚫ An element with no content is said to be empty.

⚫ In XML, you can indicate an empty element like this:
<element></element>
⚫ You can also use a so called self-closing tag:
<element />
⚫ The two forms produce identical results in XML
software (Readers, Parsers, Browsers).
 XML Naming Rules

⚫ XML elements must follow these naming rules:

⚫ Element names are case-sensitive
⚫ Element names must start with a letter or underscore
⚫ Element names cannot start with the letters xml (or
XML, or Xml, etc)
⚫ Element names can contain letters, digits, hyphens,
underscores, and periods
⚫ Element names cannot contain spaces
⚫ Any name can be used, no words are reserved (except
xml).
 Best Naming Practices
⚫ Create descriptive names, like this: <person>,
<firstname>, <lastname>.
⚫ Create short and simple names, like this: <book_title>
not like this: <the_title_of_the_book>.
⚫ Avoid "-". If you name something "first-name", some
software may think you want to subtract "name" from
"first".
⚫ Avoid ".". If you name something "first.name", some
software may think that "name" is a property of the
object "first".
⚫ Avoid ":". Colons are reserved for namespaces (more
later).
⚫ Non-English letters like éòá are perfectly legal in
XML, but watch out for problems if your software
doesn't support them!
Naming Conventions
⚫ Some commonly used naming conventions for XML elements:

Style Example Description

Lower case <firstname> All letters lower case
Upper case <FIRSTNAME> All letters upper case
Snake case <first_name> Underscore separates
words (commonly used
in SQL databases)
Pascal case <FirstName> Uppercase first letter
in each word
(commonly used by C
programmers)
Camel case <firstName> Uppercase first letter in
each word except the
first (commonly used
in JavaScript)
 XML Attributes
⚫ XMLAttributes Must be Quoted
⚫ Attribute values must always be quoted. Either single or double
quotes can be used.
⚫ For a person's gender, the <person> element can be written like
this:
<person gender="female">
⚫ or like this:
<person gender='female'>
⚫ If the attribute value itself contains double quotes you can use
single quotes, like in this example:
<gangster name='George "Shotgun" Ziegler'>
⚫ or you can use character entities:
<gangster name="George &quot;Shotgun&quot; Ziegler">
XML DTD

⚫ An XML document with correct syntax is called

"Well Formed".
⚫ An XML document validated against a DTD is
both "Well Formed" and "Valid".
⚫ What is a DTD?
⚫ DTD stands for Document Type Definition.
⚫ A DTD defines the structure and the legal elements
and attributes of an XML document.
 Valid XML Documents
⚫ A "Valid" XML document is "Well Formed", as well as it
conforms to the rules of a DTD:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

⚫ The DOCTYPE declaration above contains a reference to

a DTD file. The content of the DTD file is shown and
explained below.
XML DTD
⚫ The purpose of a DTD is to define the structure
and the legal elements and attributes of an XML
document:
⚫ Note.dtd:
<!DOCTYPE note
[
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
⚫ The DTD above is interpreted like this:

⚫ !DOCTYPE note - Defines that the root element of the

document is note
⚫ !ELEMENT note - Defines that the note element must contain
the elements: "to, from, heading, body"
⚫ !ELEMENT to - Defines the to element to be of type
"#PCDATA"
⚫ !ELEMENT from - Defines the from element to be of type
"#PCDATA"
⚫ !ELEMENT heading - Defines the heading element to be of
type "#PCDATA"
⚫ !ELEMENT body - Defines the body element to be of type
"#PCDATA“

⚫ Tip: #PCDATA means parseable character data.

⚫ When to Use a DTD?
⚫ With a DTD, independent groups of people can agree to use
a standard DTD for interchanging data.
⚫ With a DTD, you can verify that the data you receive from
the outside world is valid.
⚫ You can also use a DTD to verify your own data.

⚫ When NOT to Use a DTD?

⚫ XML does not require a DTD.
⚫ When you are experimenting with XML, or when you are
working with small XML files, creating DTDs may be a
waste of time.
⚫ If you develop applications, wait until the specification is
stable before you add a DTD. Otherwise, your software
might stop working because of validation errors.
XML Schema

⚫ An XML Schema describes the structure of an

XML document, just like a DTD.
⚫ An XML document with correct syntax is called
"Well Formed".
⚫ An XML document validated against an XML
Schema is both "Well Formed" and "Valid".
⚫ XML Schema is an XML-based alternative to DTD:

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"
/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
⚫ The Schema above is interpreted like this:
⚫ <xs:element name="note"> defines the element called
"note"
⚫ <xs:complexType> the "note" element is a complex
type
⚫ <xs:sequence> the complex type is a sequence of
elements
⚫ <xs:element name="to" type="xs:string"> the element
"to" is of type string (text)
⚫ <xs:element name="from" type="xs:string"> the
element "from" is of type string
⚫ <xs:element name="heading" type="xs:string"> the
element "heading" is of type string
⚫ <xs:element name="body" type="xs:string"> the
element "body" is of type string
XML Schemas are More Powerful than
DTD
⚫ XML Schemas are written in XML
⚫ XML Schemas are extensible to additions
⚫ XML Schemas support data types
⚫ XML Schemas support namespaces
 XML DOM

⚫What is the DOM?

⚫ The Document Object Model (DOM) defines a standard for
accessing and manipulating documents:
⚫ "The W3C Document Object Model (DOM) is a platform
and language-neutral interface that allows programs and
scripts to dynamically access and update the content,
structure, and style of a document."
⚫ The HTML DOM defines a standard way for accessing and
manipulating HTML documents. It presents an HTML
document as a tree-structure.
⚫ The XML DOM defines a standard way for accessing and
manipulating XML documents. It presents an XML
document as a tree-structure.
 The XML DOM
⚫ All XML elements can be accessed through the XML DOM.
⚫ Books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
⚫ This code retrieves the text value of the first <title>
element in an XML document:
⚫ Example
⚫ txt=xmlDoc.getElementsByTagName("title")[0].child
Nodes[0].nodeValue;
Programming Interface

⚫ The DOM models XML as a set of node objects. The

nodes can be accessed with JavaScript or other
programming languages. In this tutorial we use
JavaScript.
⚫ The programming interface to the DOM is defined by
a set standard properties and methods.
⚫ Properties are often referred to as something that is
(i.e. nodename is "book").
⚫ Methods are often referred to as something that is
done (i.e. delete "book").
XML DOM Properties

⚫ These are some typical DOM properties:

⚫ x.nodeName - the name of x
⚫ x.nodeValue - the value of x
⚫ x.parentNode - the parent node of x
⚫ x.childNodes - the child nodes of x
⚫ x.attributes - the attributes nodes of x

⚫ Note: In the list above, x is a node object.

XML DOM Methods

⚫ x.getElementsByTagName(name) - get all

elements with a specified tag name
⚫ x.appendChild(node) - insert a child node to x
⚫ x.removeChild(node) - remove a child node from x

⚫ Note: In the list above, x is a node object.

XML DOM Nodes

⚫ According to the XML DOM, everything in an

XML document is a node:

⚫ The entire document is a document node

⚫ Every XML element is an element node
⚫ The text in the XML elements are text nodes
⚫ Every attribute is an attribute node
⚫ Comments are comment nodes
 DOM Example
⚫ <?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
</bookstore>
⚫ The root node in the XML above is named
<bookstore>.
⚫ All other nodes in the document are contained
within <bookstore>.
⚫ The root node <bookstore> holds 4 <book> nodes.
⚫ The first <book> node holds the child nodes:
<title>, <author>, <year>, and <price>.
⚫ The child nodes contain one text node each,
"Everyday Italian", "Giada De Laurentiis", "2005",
and "30.00".
⚫ Text is Always Stored in Text Nodes
⚫ A common error in DOM processing is to expect
an element node to contain text.
⚫ However, the text of an element node is stored in a
text node.
⚫ In this example: <year>2005</year>, the element
node <year> holds a text node with the value
"2005".
⚫ "2005" is not the value of the <year> element!
⚫ The XML DOM Node Tree
⚫ The XML DOM views an XML document as a
tree-structure. The tree structure is called a node-
tree.
⚫ All nodes can be accessed through the tree. Their
contents can be modified or deleted, and new
elements can be created.
⚫ The node tree shows the set of nodes, and the
connections between them.
⚫ The tree starts at the root node and branches out to
the text nodes at the lowest level of the tree:
Node Parents, Children, and Siblings

⚫ The nodes in the node tree have a hierarchical

relationship to each other.
⚫ The terms parent, child, and sibling are used to
describe the relationships. Parent nodes have children.
Children on the same level are called siblings (brothers
or sisters).
⚫ In a node tree, the top node is called the root
⚫ Every node, except the root, has exactly one parent
node
⚫ A node can have any number of children
⚫ A leaf is a node with no children
⚫ Siblings are nodes with the same parent
 •The following image illustrates a part of the node tree and the
relationship between the nodes:

•Because the XML data is structured in a tree form, it can be traversed without
knowing the exact structure of the tree and without knowing the type of data
contained within.
First Child - Last Child
⚫ Look at the following XML fragment:

<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>

⚫ In the XML above, the <title> element is the first child of the
<book> element, and the <price> element is the last child of the
<book> element.
⚫ Furthermore, the <book> element is the parent node of the <title>,
<author>, <year>, and <price> elements.
XML DOM - Accessing Nodes

⚫ You can access a node in three ways:

⚫ By using the getElementsByTagName() method
⚫ By looping through (traversing) the nodes tree
⚫ By navigating the node tree, using the node
relationships
⚫ The getElementsByTagName() Method
⚫ getElementsByTagName() returns all elements
with a specified tag name.
⚫ Syntax
⚫ node.getElementsByTagName("tagname");
Example
⚫ The following example returns all <title> elements
under the x element:
⚫ x.getElementsByTagName("title");
⚫ Note that the example above only returns <title>
elements under the x node. To return all <title>
elements in the XML document use:
⚫ xmlDoc.getElementsByTagName("title");
⚫ Where xmlDoc is the document itself (document
node).
XML DOM Add Nodes

⚫ The appendChild() method adds a child node to an

existing node.
⚫ The new node is added (appended) after any existing
child nodes.
⚫ Note: Use insertBefore() if the position of the node is
important.
⚫ This code fragment creates an element (<edition>),
and adds it after the last child of the first <book>
element:
⚫ newEle = xmlDoc.createElement("edition");
⚫ xmlDoc.getElementsByTagName("book")[0].appe
ndChild(newEle);
⚫ example explained:

⚫ Suppose books.xml is loaded into xmlDoc

⚫ Create a new node <edition>
⚫ Append the node to the first <book> element
Example

newEle = xmlDoc.createElement("edition");
newText=xmlDoc.createTextNode("first");
newEle.appendChild(newText);
xmlDoc.getElementsByTagName("book")[0].appe
ndChild(newEle);
⚫ Example explained:
⚫ Suppose books.xml is loaded into xmlDoc
⚫ Create a new node <edition>
⚫ Create a new text node "first"
⚫ Append the text node to the <edition> node
⚫ Append the <addition> node to the <book> element
XML DOM Remove Nodes
⚫ The removeChild() method removes a specified node.
⚫ The removeAttribute() method removes a specified
attribute.
⚫ The removeChild() method removes a specified node.
⚫ When a node is removed, all its child nodes are also
removed.
⚫ This code will remove the first <book> element from
the loaded xml:
⚫ Example
⚫ y = xmlDoc.getElementsByTagName("book")[0];

xmlDoc.documentElement.removeChild(y);
⚫ Example explained:
⚫ Suppose books.xml is loaded into xmlDoc
⚫ Set the variable y to be the element node to remove
⚫ Remove the element node by using the
removeChild() method from the parent node
Remove Myself – Remove the current
Node
⚫ The removeChild() method is the only way to remove a
specified node.
⚫ When you have navigated to the node you want to remove, it
is possible to remove that node using the parentNode
property and the removeChild() method:
⚫ Example
⚫ x = xmlDoc.getElementsByTagName("book")[0];

x.parentNode.removeChild(x);
⚫ Example explained:
⚫ Suppose books.xml is loaded into xmlDoc
⚫ Set the variable y to be the element node to remove
⚫ Remove the element node by using the parentNode
property and the removeChild() method
⚫ Remove a Text Node
⚫ The removeChild() method can also be used to
remove a text node:
⚫ Example
⚫ x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];
x.removeChild(y);
⚫ Example explained:
⚫ Suppose books.xml is loaded into xmlDoc
⚫ Set the variable x to be the first title element node
⚫ Set the variable y to be the text node to remove
⚫ Remove the element node by using the
removeChild() method from the parent node
⚫ It is not very common to use removeChild() just to
remove the text from a node. The nodeValue
property can be used instead. See next paragraph.
XML Parser

⚫ The XML DOM (Document Object Model) defines

the properties and methods for accessing and
editing XML.
⚫ However, before an XML document can be
accessed, it must be loaded into an XML DOM
object.
⚫ All modern browsers have a built-in XML parser
that can convert text into an XML DOM object.
Parsing a Text String

⚫ This example parses a text string into an XML

DOM object, and extracts the info from it with
JavaScript:
⚫ Example given below :
<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
⚫ Example Explained
⚫ A text string is defined:

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

⚫ An XML DOM parser is created:

⚫ parser = new DOMParser();

⚫ The parser creates a new XML DOM object using the
text string:

⚫ xmlDoc=parser.parseFromString(text,"text/xml");
 XSLT
⚫ XSL (eXtensible Stylesheet Language) is a styling language for
XML.
⚫ XSLT stands for XSL Transformations.
⚫ CSS = Style Sheets for HTML
⚫ HTML uses predefined tags. The meaning of, and how to
display each tag is well understood.
⚫ CSS is used to add styles to HTML elements.
⚫ XSL = Style Sheets for XML
⚫ XML does not use predefined tags, and therefore the meaning
of each tag is not well understood.
⚫ A <table> element could indicate an HTML table, a piece of
furniture, or something else - and browsers do not know how to
display it!
⚫ So, XSL describes how the XML elements should be displayed.
What is XSLT?

⚫ XSLT stands for XSL Transformations

⚫ XSLT is the most important part of XSL
⚫ XSLT transforms an XML document into another
XML document
⚫ XSLT uses XPath to navigate in XML documents
XSLT = XSL Transformations

⚫ XSLT is the most important part of XSL.

⚫ XSLT is used to transform an XML document into another
XML document, or another type of document that is
recognized by a browser, like HTML and XHTML.
Normally XSLT does this by transforming each XML
element into an (X)HTML element.
⚫ With XSLT you can add/remove elements and attributes to
or from the output file. You can also rearrange and sort
elements, perform tests and make decisions about which
elements to hide and display, and a lot more.
⚫ A common way to describe the transformation process is to
say that XSLT transforms an XML source-tree into an
XML result-tree.
Start with a Raw XML Document
⚫ We want to transform the following XML document

("cdcatalog.xml") into XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
 Create an XSL Style Sheet
⚫ Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template:
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="catalog/cd">
<tr>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="artist"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>

</xsl:stylesheet>
Link the XSL Style Sheet to the XML
Document
⚫ Add the XSL style sheet reference to your XML document
("cdcatalog.xml"):
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>
XSLT <xsl:template> Element

⚫ An XSL style sheet consists of one or more set of rules

that are called templates.
⚫ A template contains rules to apply when a specified
node is matched.
⚫ The <xsl:template> element is used to build templates.
⚫ The match attribute is used to associate a template
with an XML element. The match attribute can also be
used to define a template for the entire XML
document. The value of the match attribute is an XPath
expression (i.e. match="/" defines the whole
document).
⚫ Ok, let's look at a simplified version of the XSL file from the previous chapter:
⚫ Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
 Example Explained
⚫ Since an XSL style sheet is an XML document, it always begins with the
XML declaration: <?xml version="1.0" encoding="UTF-8"?>.
⚫ The next element, <xsl:stylesheet>, defines that this document is an XSLT
style sheet document (along with the version number and XSLT namespace
attributes).
⚫ The <xsl:template> element defines a template. The match="/" attribute
associates the template with the root of the XML source document.
⚫ The content inside the <xsl:template> element defines some HTML to write
to the output.
⚫ The last two lines define the end of the template and the end of the style
sheet.
⚫ The result from this example was a little disappointing, because no data was
copied from the XML document to the output. In the next chapter you will
learn how to use the <xsl:value-of> element to select values from the XML
elements.
XSLT <xsl:value-of> Element

⚫ The <xsl:value-of> element is used to extract the

value of a selected node.
⚫ The <xsl:value-of> element can be used to extract
the value of an XML element and add it to the
output stream of the transformation:
⚫ Example
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My CD Collection</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Title</th>
<th>Artist</th>
</tr>
<tr>
<td><xsl:value-of select="catalog/cd/title"/></td>
<td><xsl:value-of select="catalog/cd/artist"/></td>
</tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
⚫ Example Explained
⚫ Note: The select attribute, in the example above,
contains an XPath expression. An XPath expression
works like navigating a file system; a forward slash (/)
selects subdirectories.
⚫ The result from the example above was a little
disappointing; only one line of data was copied from
the XML document to the output. In the next chapter
you will learn how to use the <xsl:for-each> element
to loop through the XML elements, and display all of
the records.
7. JSON JSON - Introduction
⚫ JSON stands for JavaScript Object Notation
⚫ JSON is a text format for storing and transporting
data
⚫ JSON is "self-describing" and easy to understand

JSON
⚫ JSON Example
⚫ This example is a JSON string:
⚫ '{"name":"John", "age":30, "car":null}'
⚫ It defines an object with 3 properties:
⚫ name
⚫ age
⚫ car
⚫ Each property has a value.
⚫ If you parse the JSON string with a JavaScript
program, you can access the data as an object:
⚫ let personName = obj.name;
let personAge = obj.age;
⚫ What is JSON?
⚫ JSON stands for JavaScript Object Notation
⚫ JSON is a lightweight data-interchange format
⚫ JSON is plain text written in JavaScript object
notation
⚫ JSON is used to send data between computers
⚫ JSON is language independent *
 Why Use JSON?

⚫ The JSON format is syntactically similar to the code

for creating JavaScript objects. Because of this, a
JavaScript program can easily convert JSON data into
JavaScript objects.
⚫ Since the format is text only, JSON data can easily be
sent between computers, and used by any
programming language.
⚫ JavaScript has a built in function for converting JSON
strings into JavaScript objects:
⚫ JSON.parse()
⚫ JavaScript also has a built in function for converting
an object into a JSON string:
⚫ JSON.stringify()
JSON Syntax

⚫ The JSON syntax is a subset of the JavaScript syntax.

⚫ JSON Syntax Rules
⚫ JSON syntax is derived from JavaScript object
notation syntax:
⚫ Data is in name/value pairs
⚫ Data is separated by commas
⚫ Curly braces hold objects
⚫ Square brackets hold arrays
⚫ JSON Data - A Name and a Value
⚫ JSON data is written as name/value pairs (aka
key/value pairs).
⚫ A name/value pair consists of a field name (in
double quotes), followed by a colon, followed by a
value:
⚫ Example
⚫ "name":"John"
JSON - Evaluates to JavaScript Objects
⚫ The JSON format is almost identical to JavaScript
objects.
⚫ In JSON, keys must be strings, written with double
quotes:
⚫ JSON
⚫ {"name":"John"}
⚫ In JavaScript, keys can be strings, numbers, or
identifier names:
⚫ JavaScript
⚫ {name:"John"}
JSON Values
⚫ In JSON, values must be one of the following data
types:
⚫ a string
⚫ a number
⚫ an object
⚫ an array
⚫ a boolean
⚫ null
⚫ In JavaScript values can be all of the above, plus any
other valid JavaScript expression, including:
⚫ a function
⚫ a date
⚫ undefined
⚫ n JSON, string values must be written with double
quotes:
⚫ JSON
⚫ {"name":"John"}
⚫ In JavaScript, you can write string values with
double or single quotes:
⚫ JavaScript
⚫ {name:'John'}
JavaScript Objects
⚫ Because JSON syntax is derived from JavaScript object
notation, very little extra software is needed to work with
JSON within JavaScript.
⚫ With JavaScript you can create an object and assign data to
it, like this:
⚫ Example
⚫ person = {name:"John", age:31, city:"New York"};
⚫ You can access a JavaScript object like this:
⚫ Example
⚫ // returns John
person.name;
⚫ It can also be accessed like this:
⚫ Example
⚫ // returns John
person["name"];
8. DOM
⚫ The Document Object Model (DOM) is
a programming interface for HTML(HyperText
Markup Language) and XML(Extensible markup
language) documents.
⚫ It defines the logical structure of documents and
the way a document is accessed and manipulated.
Why DOM is required?
⚫ HTML is used to structure the web pages and
Javascript is used to add behavior to our web
pages.
⚫ When an HTML file is loaded into the browser, the
javascript can not understand the HTML document
directly.
⚫ So, a corresponding document is created(DOM).
⚫ DOM is basically the representation of the same
HTML document but in a different format with
the use of objects.
Representation of the DOM
⚫ Window Object :Window Object is object of the browser which is
always at top of the hierarchy. It is like an API that is used to set and
access all the properties and methods of the browser. It is
automatically created by the browser.
⚫ Document object: When an HTML document is loaded into a
window, it becomes a document object. The ‘document’ object has
various properties that refer to other objects which allow access to
and modification of the content of the web page. If there is a need to
access any element in an HTML page, we always start with
accessing the ‘document’ object. Document object is property of
window object.
⚫ Form Object: It is represented by form tags.
⚫ Link Object: It is represented by link tags.
⚫ Anchor Object: It is represented by a href tags.
⚫ Form Control Elements:: Form can have many control elements
such as text fields, buttons, radio buttons, checkboxes, etc.
In this example, We use HTML element id to
find the DOM HTML element.
⚫ <!DOCTYPE html>
⚫ <html>
⚫ <body>
⚫ <h2>HELLO</h2>
⚫ <!-- Finding the HTML Elements by their Id in DOM -->
⚫ <p id="intro">A INFORMATION TECHNOLOGY portal </p>
⚫ <p>This example illustrates the <b>getElementById</b> method.</p>
⚫ <p id="demo"></p>
⚫ <script>
⚫ const element = document.getElementById("intro");
⚫ document.getElementById("demo").innerHTML = " Web page
of " + element.innerHTML;
⚫ </script>
⚫ </body>
⚫ </html>
Output :
9. URL AND URI
⚫ A URL is a global address of documents and
protocols to retrieve resource on a computer
network.
⚫ A URI is a string containing characters that
identify a physical or logical resource. URI follows
syntax rules to ensure uniformity
⚫ Types of URI :
⚫ As mention in the above figure, there are two types
of URI:
⚫ URL: URL specifies a location on the computer
network and technique for retrieving it.
⚫ URN: Uniform Resource Name (URN) is an
internet resource that specifies URN scheme.
Ven Diagram of URIs and URL
⚫ As mention in the above diagram, “your name” can
be a URI because it identifies you. It cannot be
URL since it does not assist any person to find
your home location.
⚫ On the other hand, “your home location” can be
URI as well as URL. The reason is both identify
you and gives a home location for you.
Syntax of URL

⚫ Here is a Syntax of URL:

⚫ http://www.domainname.com/folder-name/web page-file-name.htm
⚫ We can divide the above URL into the following parts:
⚫ Protocol: It is the first part of the URL. Here, the protocol name is
Hypertext Transfer Protocol (HTTP).
⚫ http://www.domainname.com/: It is your domain name. It is also
known as server id or the host.
⚫ /folder-name/: It indicates that the website page referenced in “filed”
in a given folder on the webserver.
⚫ web-page-file-name.htm: It is actually a web page file name. The
“.htm” is an extension for the HTML file, which shows that it is a static
web page. File names can have different extensions or it is depend on
how you have set up a web server. There could be no extension at all,
and the URL could end with a slash line (/).
⚫ Example:
⚫ This example URL has a folder but no extension
⚫ http://example.com/category/heavy-industries/
Syntax of URI

⚫ Here is a syntax of URI:

⚫ URI = scheme:[//authority]path[?query][#fragment]
⚫ The URI includes the following parts:
⚫ Scheme component: It is a non-empty component followed by a colon
(:). Scheme contains a sequence of characters starting with a letter and
followed by any combination of digits, letters, period (.), hyphen (-), or
plus (+).Examples of well-known schemes include HTTP, HTTPS,
mailto, file, FTP, etc. URI schemes must be registered with the Internet
Assigned Numbers Authority (IANA).
⚫ Authority component: It is an optional field and is preceded by //. It
consists of
⚫ Optional userinfo subcomponent that might consist of a username and
password (optional).
⚫ A host subcomponent containing either an IP address or a registered
name.
⚫ An optional port subcomponent that is followed by a colon (:)
⚫ Path: A path contains a sequence of segments that
are separated by a slash.
⚫ Query component: It is optional and preceded by
a question mark (?). Query component contains a
query string of non-hierarchical data.
⚫ Fragment component: It is an optional field and
preceded by a hash (#). Fragment component
includes a fragment identifier giving direction to a
secondary resource.
⚫ Example of URI
⚫ No protocol mentioned
⚫ www.example.com
 Differences between URL and URI
URL URI
URL stands for Uniform Resource Locator. URI stands for Uniform Resource Identifier.

URL is a subset of URI that specifies where A URI is a superset of URL that identifies a
a resource is exists and the mechanism for resource either by URL or URN (Uniform
retrieving it. Resource Name) or both.
The main aim of URI is to find a resource
The main aim is to get the location or
and differentiate it from other resources
address of a resource
using either name or location.
Used in HTML, XML and other files XSLT
URL is used to locate only web pages (Extensible Stylesheet Language
Transformations) and more.
The scheme must be a protocol like HTTP, In URI, the scheme may be anything like a
FTP, HTTPS, etc. protocol, specification, name, etc.
Continued …..
A URI is a superset of URL that
URL is a subset of URI that specifies
identifies a resource either by URL or
where a resource is exists and the
URN (Uniform Resource Name) or
mechanism for retrieving it.
both.
Protocol information is given in the There is no protocol information given
URL. in URI.
Example of URI:
Example of URL: https://google.com
urn:isbn:0-486-27557-4
It contains components such as It contains components like scheme,
protocol, domain, path, hash, query authority, path, query, fragment
string, etc. component, etc.
Not all URIs are URLs since a URI can
All URLs can be URIs
be a name instead of a locator.
10 . REST API
⚫ Representational State Transfer (REST) is an architectural
style that defines a set of constraints to be used for creating
web services.
⚫ REST API is a way of accessing web services in a simple
and flexible way without having any processing.
⚫ REST technology is generally preferred to the more robust
Simple Object Access Protocol (SOAP) technology because
REST uses less bandwidth, simple and flexible making it
more suitable for internet usage.
⚫ It’s used to fetch or give some information from a web
service. All communication done via REST API uses only
HTTP request.
Working:
⚫ In HTTP there are five methods that are commonly
used in a REST-based Architecture i.e., POST, GET,
PUT, PATCH, and DELETE.
⚫ These correspond to create, read, update, and delete
(or CRUD) operations respectively.
⚫ There are other methods which are less frequently
used like OPTIONS and HEAD.
1. GET: The HTTP GET method is used to read (or
retrieve) a representation of a resource .
2. POST: The POST verb is most often utilized
to create new resources. In particular, it’s used to
create subordinate resources.
3. PUT: It is used for updating the capabilities.
However, PUT can also be used to create a resource
in the case where the resource ID is chosen by the
client instead of by the server.
4. DELETE: It is used to delete a resource identified
by a URI. On successful deletion, return HTTP
status 200 (OK) along with a response body.
THANK YOU !!!!!!!!!