FULL STACK WEB DEVELOPMENT LABORATORY MANUAL
MC4212
AIM
To create a form and validate the contents of the form using Javascript.
THEORY:
HTML
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
JAVASCRIPT
JavaScript (js) is a light-weight object-oriented programming language which is used
by several websites for scripting the webpages.
It is an interpreted, full-fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document.
With JavaScript, users can build modern web applications to interact directly without
reloading the page every time.
The traditional website uses js to provide several forms of interactivity and simplicity.
VALIDATION using JavaScript:
JavaScript Form Validation. HTML form validation can be done by JavaScript.
JavaScript Can Validate Numeric Input
Automatic HTML Form Validation. Automatic HTML form validation does not work
in Internet Explorer 9 or earlier.
Data Validation. Data validation is the process of ensuring that user input is clean,
correct, and useful. Most often, the purpose of data validation is to ensure correct user
input.
HTML Constraint Validation. HTML5 introduced a new HTML validation concept.
PROCEDURE:
1. Create the HTML form using the Form tag.
2. Using the input tag, specify the requirements for the
form. Example:
Name: <input type=”text”>
3. Using the Javascript events, validate the contents of the form using functions.
Example:
function validate()
{
If(name==””)
{
alert(“Name field should not be empty”)
}
}
4. Call the function using the event which is inside the respected input
tag. Example:
<input type=”text” name=”text” onblur=”validate()”>
5. End the HTML coding and save it with any filename with the file extension .html.
PROGRAM:
Index.html
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT:
Alert message:
RESULT:
Thus, the form has been created using HTML and validated using Javascript
and the result is verified.
AIM:
To Get data using Fetch API from an open-source endpoint and display the contents in
the form of a card.
THEORY:
The fetch() method is used to send the requests to the server without refreshing the page. It
is an alternative to the XMLHttpRequest object.
The basic syntax of a fetch() request is as follows:
fetch(url, {options})
.then(data => {
// Do some stuff here
})
.catch(err => {
// Catch and display errors
})
The difference between XMLHttpRequest and fetch is that fetch uses Promises which are
easy to manage when dealing with multiple asynchronous operations where callbacks can
create callback hell leading to unmanageable code.
PROCEDURE:
1. Start the html coding.
2. Using the fetch() method, fetch the API from open source.
3. Using the JSON format , print the API details in the form of a card.
4. Using the function displayCards(), with the help of map() method display the
API details in the form of a card.
5. Save the coding with the help of .html extension.
6. Open any one of the webbrowser, for viewing the output.
7. Stop the program.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
displayCards(data);
})
.catch(err =>
console.log(err)) function
displayCards(posts){ let
card=``; posts.map(post=>{
card+=`
<div style="width: 100px; height:200px; background-color: aqua; padding: 10px;
margin: 10px;">
<h1>${post.id}</h1>
<p>${post.title}</p>
</div>
`
})
document.getElementById('cards').innerHTML=card;
}
</script>
</head>
<body>
<div id="cards" style="display: flex; flex-wrap: wrap;" >
</div>
</body>
</html>
OUTPUT:
RESULT:
Thus, the data fetched using Fetch API from an open-source endpoint and displayed the
contents in the form of a card and the result is verified.
AIM:
To Create a NodeJS server that serves static HTML and CSS files to the user without using
Express.
THEORY:
1. For creating server on Node JS we have used “http” module. For using
any module in Node JS we have to use “require” module. So fist we import the
“http” module.
1. var http=require("http");
2. Now we are creating a server. For creating the server we have to use
‘createServer ‘method of http module and this method takes 2
parametersing [request and response] as show below.
1. var server = http.createServer(function(request, response) {});
3. After that we have to set the content type as plain text for sending response to
the client. As shown in
1. var server = http.createServer(function(request, response) {
2. response.writeHead(200, {
3. 'Content-Type': 'text/plain' 4.
});
5. });
Here you can set any response type like plain text or html etc.
4. Now for sending response to client we have to use response.write() method.
And finally you have to call response.end() method for ending the response.
1. var server = http.createServer(function(request, response) {
2. response.writeHead(200, {
3. 'Content-Type': 'text/plain' 4.
});
5. response.write("This is Test Message.");
6. response.end();
7. });
5. Now we have to start listening to this server; on any http post you can use any
port which is available (not used by any other application in your computer.)
Here I have taken 8082 port.
server.listen(8082);
PROCEDURE:
1. Start the Visual studio code by creating a new folder in desktop or any other
application.
2. Create a new file for Javascript(sample.js).
3. Create a new file for HTML(sample.html).
4. Using the terminal menu, comment node filename.js
5. Server will be listening after running the Javascript.
6. Open the web browser, Type the command localhost:8080.
7. HTML page will be displayed.
8. Stop the execution.
PROGRAM:
sample.js
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(request,response) {
response.writeHead(200,{'Content-Type': 'text/html'});
fs.readFile('sample.html', null, function (error, data) {
if (error) {
response.writeHead(404);
respone.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
});
server.listen(8080);
sample.html
<html>
<body>
<p> Script example </p>
<script>
var p,txt;
p = prompt("Enter the value between 1 and 5 for a!!","0");
if (p == 5){
txt = "Print 5!";
}
else {
txt = "Not 5";
}
document.write(txt);
</script>
<h1>Hello Welcome</h1>
</body>
</html>
Output:
Running the Javascript using node command:
Open any Browser and type localhost:8080 in URL:
Result:
Thus a NodeJS server that serves static HTML and CSS files to the user without using Express
framework has been created and the result is verified.
