EXPERIMENT NO: 7
AIM:
Develop interactive webpage using DOM and event handling.
THEORY:
On a webpage, a trigger such as a user interaction or browser
manipulation can cause a client-side JavaScript event to be created.
Events can be used to manipulate the DOM by executing a JavaScript
function.
Events can include anything from a click to hovering a mouse over an
element to a webpage loading or being refreshed. Events are defined
as a part of the JavaScript API built into the web browser.
The goal of JavaScript is to make a page dynamic, which frequently
means responding to certain events (for example, button clicks, user
scrolls, etc). DOM elements can have functions hook onto events.
The functions are called event handlers and the DOM element is
known as an event target.
The example code block shows how to register a function as an event
handler. The property name for event handlers starts with ‘on’ with
the event appended afterwards. Examples: onload, onclick, onfocus,
onscroll.
SOFTWARE USED:
HTML, CSS and JAVASCRIPT
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="[Link]
/>
<!-- styles -->
<style>
/*
===============
Fonts
===============
*/
@import url("[Link]
Roboto:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* dark shades of primary color*/
--clr-primary-1: hsl(205, 86%, 17%);
--clr-primary-2: hsl(205, 77%, 27%);
--clr-primary-3: hsl(205, 72%, 37%);
--clr-primary-4: hsl(205, 63%, 48%);
/* primary/main color */
--clr-primary-5: hsl(205, 78%, 60%);
/* lighter shades of primary color */
--clr-primary-6: hsl(205, 89%, 70%);
--clr-primary-7: hsl(205, 90%, 76%);
--clr-primary-8: hsl(205, 86%, 81%);
--clr-primary-9: hsl(205, 90%, 88%);
--clr-primary-10: hsl(205, 100%, 96%);
/* darkest grey - used for headings */
--clr-grey-1: hsl(209, 61%, 16%);
--clr-grey-2: hsl(211, 39%, 23%);
--clr-grey-3: hsl(209, 34%, 30%);
--clr-grey-4: hsl(209, 28%, 39%);
/* grey used for paragraphs */
--clr-grey-5: hsl(210, 22%, 49%);
--clr-grey-6: hsl(209, 23%, 60%);
--clr-grey-7: hsl(211, 27%, 70%);
--clr-grey-8: hsl(210, 31%, 80%);
--clr-grey-9: hsl(212, 33%, 89%);
--clr-grey-10: hsl(210, 36%, 96%);
--clr-white: #fff;
--clr-red-dark: hsl(360, 67%, 44%);
--clr-red-light: hsl(360, 71%, 66%);
--clr-green-dark: hsl(125, 67%, 44%);
--clr-green-light: hsl(125, 71%, 66%);
--clr-black: #222;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--transition: all 0.3s linear;
--spacing: 0.1rem;
--radius: 0.25rem;
--light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
--dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
--max-width: 1170px;
--fixed-width: 620px;
}
/*
===============
Global Styles
===============
*/
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a{
text-decoration: none;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
font-family: var(--ff-primary);
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p{
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
@media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
/* section */
.section {
padding: 5rem 0;
}
.section-center {
width: 90vw;
margin: 0 auto;
max-width: 1170px;
}
@media screen and (min-width: 992px) {
.section-center {
width: 95vw;
}
}
main {
min-height: 100vh;
display: grid;
place-items: center;
}
/*
===============
Navbar
===============
*/
nav {
background: var(--clr-white);
box-shadow: var(--light-shadow);
}
.nav-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.nav-toggle {
font-size: 1.5rem;
color: var(--clr-primary-5);
background: transparent;
border-color: transparent;
transition: var(--transition);
cursor: pointer;
}
.nav-toggle:hover {
color: var(--clr-primary-1);
transform: rotate(90deg);
}
.logo {
height: 40px;
}
.links a {
color: var(--clr-grey-3);
font-size: 1rem;
text-transform: capitalize;
letter-spacing: var(--spacing);
display: block;
padding: 0.5rem 1rem;
transition: var(--transition);
}
.links a:hover {
background: var(--clr-primary-8);
color: var(--clr-primary-5);
padding-left: 1.5rem;
}
.social-icons {
display: none;
}
.links {
height: 0;
overflow: hidden;
transition: var(--transition);
}
.show-links {
height: 10rem;
}
@media screen and (min-width: 800px) {
.nav-center {
max-width: 1170px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
}
.nav-header {
padding: 0;
}
.nav-toggle {
display: none;
}
.links {
height: auto;
display: flex;
}
.links a {
padding: 0;
margin: 0 0.5rem;
}
.links a:hover {
padding: 0;
background: transparent;
}
.social-icons {
display: flex;
}
.social-icons a {
margin: 0 0.5rem;
color: var(--clr-primary-5);
transition: var(--transition);
}
.social-icons a:hover {
color: var(--clr-primary-7);
}
}
</style>
</head>
<body>
<nav>
<div class="nav-center">
<!-- nav header -->
<div class="nav-header">
<img src="" class="logo" alt="logo" />
<button class="nav-toggle">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- links -->
<ul class="links">
<li>
<a href="[Link]">home</a>
</li>
<li>
<a href="[Link]">about</a>
</li>
<li>
<a href="[Link]">projects</a>
</li>
<li>
<a href="[Link]">contact</a>
</li>
</ul>
<!-- social media -->
<ul class="social-icons">
<li>
<a href="[Link]
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="[Link]
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="[Link]
<i class="fab fa-behance"></i>
</a>
</li>
<li>
<a href="[Link]
<i class="fab fa-linkedin"></i>
</a>
</li>
<li>
<a href="[Link]
<i class="fab fa-sketch"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- javascript -->
<script>
// classList - shows/gets all classes
// contains - checks classList for specific class
// add - add class
// remove - remove class
// toggle - toggles class
const navToggle = [Link](".nav-toggle");
const links = [Link](".links");
[Link]("click", function () {
// [Link]([Link]);
// [Link]([Link]("random"));
// [Link]([Link]("links"));
// if ([Link]("show-links")) {
// [Link]("show-links");
// } else {
// [Link]("show-links");
// }
[Link]("show-links");
});
</script>
</body>
</html>
OUTPUT:
EXPERIMENT NO: 8
AIM:
To develop XML webpage using DTD and XML schema
THEORY:
XML is a software- and hardware-independent tool for storing and
transporting data
The XML language has no predefined tags.
The tags in the example above (like <to> and <from>) are not defined
in any XML standard. These tags are "invented" by the author of the
XML document.
HTML works with predefined tags like <p>, <h1>, <table>, etc.
With XML, the author must define both the tags and the document
structure.
SOFTWARE USED:
XML, XSL, DTD, XSD
CODE:
1. Creating a XML Document([Link])
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE webpage SYSTEM "[Link]">
<webpage>
<title>My XML Webpage</title>
<header>Welcome to My XML Webpage</header>
<paragraph>This is a sample webpage created using XML.</paragraph>
<links>
<link url="[Link]
<link url="[Link]
</links>
</webpage>
2. Define DTD([Link])
<!ELEMENT webpage (title, header, paragraph, links)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT header (#PCDATA)>
<!ELEMENT paragraph (#PCDATA)>
<!ELEMENT links (link+)>
<!ELEMENT link (#PCDATA)>
<!ATTLIST link url CDATA #REQUIRED>
3. Define XML Schema([Link])
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<xs:element name="webpage">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="header" type="xs:string"/>
<xs:element name="paragraph" type="xs:string"/>
<xs:element name="links">
<xs:complexType>
<xs:sequence>
<xs:element name="link" maxOccurs="unbounded">
<xs:complexType>
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="url" type="xs:anyURI"
use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
4. Link XML to XSD
<?xml version="1.0" encoding="UTF-8"?>
<webpage xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="[Link]">
<title>My XML Webpage</title>
<header>Welcome to My XML Webpage</header>
<paragraph>This is a sample webpage created using
XML.</paragraph>
<links>
<link url="[Link]
<link url="[Link]
</links>
</webpage>
5. Display the XML in a Web Browser (Using XSLT)
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="[Link]
<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="webpage/title"/></title>
</head>
<body>
<h1><xsl:value-of select="webpage/header"/></h1>
<p><xsl:value-of select="webpage/paragraph"/></p>
<ul>
<xsl:for-each select="webpage/links/link">
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="@url"/>
</xsl:attribute>
<xsl:value-of select="."/>
</a>
</li>
</xsl:for-each>
</ul>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
6. Link XML to XSL
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="[Link]"?>
<webpage xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="[Link]">
<title>My XML Webpage</title>
<header>Welcome to My XML Webpage</header>
<paragraph>This is a sample webpage created using XML.</paragraph>
<links>
<link url="[Link]
<link url="[Link]
</links>
</webpage>
OUTPUT:
Experiment no: 9
AIM:
To write a program to get and parse the JSON data
THEORY:
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:
[Link]()
JavaScript also has a built in function for converting an object into a
JSON string:
[Link]()
CODE:
<!DOCTYPE html>
<html>
<body>
<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p id="demo"></p>
<script>
const xmlhttp = new XMLHttpRequest();
[Link] = function() {
const myObj = [Link]([Link]);
[Link]("demo").innerHTML = [Link];
}
[Link]("GET", "json_demo.txt");
[Link]();
</script>
</body>
</html>
OUTPUT:
Webpage:-
json_demo.txt:
EXPERIMENT NO: 10
AIM:
To design a registration using PHP and store data on WAMP server.
THEORY:
PHP is an acronym for "PHP: Hypertext Preprocessor"
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
PHP is free to download and use
MySQL is the de-facto standard database system for web sites with
HUGE volumes of both data and end-users (like Facebook, Twitter,
and Wikipedia).
Another great thing about MySQL is that it can be scaled down to
support embedded database applications.
PROCESS:
[Link]:
[Link]:
OUTPUT:
