DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

ACADEMIC YEAR 2023-2024 – ODD SEMESTER (R-2021)

CONTINUOUS INTERNAL ASSESSMENT – I ANSWER KEY FOR REMEDIAL TEST

Course Code & Title: CCS375 & WEB TECHNOLOGIES Batch: 2021-25

Year/ Sem: III/ V (CSE) Max Marks: 60

CO1 Construct a basic website using HTML and Cascading Style Sheets
Build dynamic web page with validation using Java Script objects and by applying
CO2
different event handling mechanisms.
CO3 Develop server side programs using Servlets and JSP.
CO4 Construct simple web pages in PHP and to represent data in XML format.
CO5 Develop interactive web applications
Answer all questions

PART – A (5 X 2 =10 Marks)

1. Distinguish between web design and web development CO1/U

Web Design Web Development
Web Designers are very creative. Web Developers are more technical.
The hiring cost of a web designer is The hiring cost of a web developer is more
comparatively less than a web developer. than a web designer.
Web designing tools include Adobe Languages used are HTML, PHP, JavaScript,
Photoshop, Illustrator, Dreamweaver, Sketch CSS, Python, Ruby, jQuery etc.
etc.
Types of Web Designers- Types of Web Developers-
User Experience (UX) Front-end
User Interface (UI) Back-end
Visual/Graphic Designer Full-stack
 2. What is JSON? Whether JSON is platform independent? Justify. CO2/U (May 22_
A common use of JSON is to read data from a web server, and display the data in a web
page.
 JSON stands for JavaScript Object Notation.
 JSON is lightweight data-interchange format.
 JSON is easy to read and write than XML.
 JSON is language independent.
 JSON supports array, object, string, number and values.
3. Define Session handling in web programming. CO3/R
Session Tracking is the capability of a server to maintain the current state of a single
client‟s sequential requests. Using session tracking, we can keep track of previous
session
(conversations) held between server and the browser by using session ID.
4. Highlight the importance of validation in PHP CO4/R (May 22)
Form validation is a “technical process where a web-form checks if the information
provided by a user is correct.” The form will either alert the user that they messed up and
need to fix something to proceed, or the form will be validated and the user will be able
to continue with their registration process.
There are two types of validation are available in PHP. They are as follows –
 Client-Side Validation − Validation is performed on the client machine web browsers.
 Server Side Validation − After submitted by data, The data has sent to a server and
perform
validation checks in server machine.
5. Name some conditional directives in Angular JS CO5/R
ng-if Directive
The ng-if directive removes the HTML element if the expression evaluates to false.
Syntax: <element ng-if="expression"></element>

PART – B (5X 10 =50 Marks)

6.a. Draw the structure of HTTP request and response message and explain them in detail. CO1 / U
HTTP Request Message
The following are the parts of the HTTP request message:
Request-Line or Start line: This begins with a method token, followed by the Request-URI and the
protocol version, and ending with CRLF (Carriage Return and Line Feed). The elements are separated
by space.
Request Method: This indicates the method to be performed on the resource identified by the given
Request-URI. The method is case-sensitive and should always be mentioned in uppercase. The following
are the methods:

 GET - return the resource specified by the Request-URI as the body of a response message.

 POST- pass the body of this request message on as data to be processed by the resource specified by
the Request-URI.

 HEAD- return the same HTTP header fields that would be returned if a GET method were used, but
not return the message body that would be returned to a GET (this provides information about a
resource without the communication overhead of transmitting the body of the response, which
may be quite large).

 OPTIONS- return (in Allow header field) a list of HTTP methods that may be used to access the
resource specified by the Request-URI.

 PUT- store the body of this message on the server and assign the specified Request-URI to the
data stored so that future GET request messages containing this Request-URI will receive this data in
their response messages.

 DELETE- respond to future HTTP request messages that contain the specified Request- URI with a
response indicating that there is no resource associated with this Request-URI.

 TRACE- return a copy of the complete HTTP request message, including start line, header fields,
and body, received by the server. Used primarily for test purposes.

HTTP Response Message

The following are contents of HTTP Response message:
Status line: It has three fields namely HTTP version, numeric status code and text string which informs
about the information represented by numeric status code.
Status code Recommended Usual meaning
reason phrase
200 OK Request processed normally.
301 Moved Permanently URI for the requested resource has been
changed. All future requests should be made to
URI contained in the location header field of
the response. Most browsers will automatically
send a second request to the new URI and
display the second response.
 307 Temporary redirect URI for the request has been changed at least
temporarily. This request should be fulfilled by
making a second request to the URI contained in
the location header field of the response.

401 Unauthorized The resource is password protected, and the

user has not yet supplied a valid password.
403 Forbidden The resource is present on the server but is
read protected.
404 Not found No resource corresponding to the given
request-URI was found at this server.
500 Internal server error Server software detected an internal failure.

(Or)

6.b. i) Explain the types of selectors in CSS with example. (5) CO1/U
The CSS element Selector

The element selector selects HTML elements based on the element name.

p{
text-align: center;
color: red;
}
The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.
The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

ii) Illustrate about transitions and animations in CSS with an example. (5)
CSS Transitions:
CSS transitions provide a way to control animation speed when changing CSS properties.
Instead of having property changes take effect immediately, the transition cause the changes in a
property to take place over a period of time. To create a transition effect, you must specify two things:
1. the CSS property you want to add an effect to
2. the duration of the effect. If the duration part is not specified, the transition will have no
effect, because the default value is 0.
transition-property: Specifies the name or names of the CSS properties to which transitions should
be applied. Only properties listed here are animated during transitions; changes to all other properties
occur instantaneously as usual.

transition-duration: Specifies the duration over which transitions should occur. You can specify a
single duration that applies to all properties during the transition, or multiple values to allow each
property to transition over a different period of time.
CSS Animations
CSS animations make it possible to animate transitions from one CSS style configuration to another.
Animations consist of two components, a style describing the CSS animation and a set of keyframes that
indicate the start and end states of the animation’s style, as well as possible intermediate waypoints

Advantages of animations over transitions:

 They’re easy to use for simple animations; you can create them without even having to know
JavaScript.

 The animations run well, even under moderate system load.

 Letting the browser control the animation sequence lets the browser optimize performance
and efficiency.

Keyframes are used to create animations. The @keyframes CSS at-rule controls the
intermediate steps in a CSS animation sequence by defining styles for keyframes along the
animation sequence. This gives more control over the intermediate steps of the animation
sequence than transitions. The sub-properties of the animation property are:

 Animation-name

 Animation-duration
  Animation-timing function

 Animation-delay

 Animation-iteration count
7.a. i) Write a javascript to demonstrate the usage of form validation. (5)
CO2/U
Form validation occurs at the server, after the client had entered all necessary data and
(May 22)
then pressed the Submit button. If some of the data that had been entered by the client had
been in the wrong form or was simply missing, the server would have to send all the data
back to the client and request that the form be resubmitted with correct information. This is a
lengthy process and over burdening server. JavaScript, provides a way to validate form's data
on the client's computer before sending it to the web server. Form validation generally
performs two functions:
Basic Validation - Checking the form to make sure that the data entered is right.
Data Format Validation – Checking the data entered in the form for right value.

Program for Form Validation

<html><head>
<title>Form Validation</title>
<script type="text/javascript">
</script></head><body>
<form action="/cgi-bin/test.cgi" name="myForm" onsubmit="return(validate());">
<table cellspacing="2" cellpadding="2" border="1">
<tr><td align="right">Name</td>
<td><input type="text" name="Name" /></td></tr>
<tr><td align="right">EMail</td>
<td><input type="text" name="EMail" /></td></tr>
<tr><td align="right">Zip Code</td>
<td><input type="text" name="Zip" /></td></tr>
<tr><td align="right">Country</td><td>
<select name="Country">
<option value="-1" selected>[choose yours]</option>
<option value="1">USA</option>
<option value="2">UK</option>
<option value="3">INDIA</option>
</select></td></tr>
<tr><td align="right"></td>
<td><input type="submit" value="Submit" /></td>
</tr></table></form>
<script type="text/javascript"> function validate()
{
if( document.myForm.Name.value == "" )
{
alert( "Please provide your name!" );
document.myForm.Name.focus() ;
return false;
}
if( document.myForm.EMail.value == "" )
{
alert( "Please provide your Email!" );
document.myForm.EMail.focus() ;
return false;
}
if( document.myForm.Zip.value == "" ||isNaN( document.myForm.Zip.value ) ||
document.myForm.Zip.value.length != 5 )
{
alert( "Please provide a zip in the format #####." );
document.myForm.Zip.focus() ;
return false;
}
if( document.myForm.Country.value == "-1" )
{
alert( "Please provide your country!" );
return false;
}
return( true );
}
</script>
</body>

ii) Explain in detail about various objects in java script. (5)

 Java Script has several built-in or native objects
 These objects can be accessed anywhere in the program as the other objects
 The following are some of the important JavaScript Native Objects:
 JavaScript Number Object
 Java Script Boolean Object
 Java Script String Object
 Java Script Array Object
 Java Script Date Object
 Java Script Math Object
JavaScript Number Object
The JavaScript number object enables you to represent a numeric value. It may be integer or
floating-point. JavaScript number object follows IEEE standard to represent the floating-point
numbers.
Java script String object
 A string is a collection of characters.
Methods:
 concat (str)- This methods concatenates two strings (eg) st.concate(s2)
 charAt(index-val)- Returns the character at the specified index
 substring(begin,end)- This method returns the substring specified by begin and end
 character
 toLowerCase()-It converts the given string into lowercase letter.
 toUpperCase()-It converts the given string into uppercase letter.
 valueOf()- returns the value of the string
Java script Array objects
 The array object is used to store multiple values in a single variable
 Example: var fruits = new Array(“apple”, “orange”, “mango”)
Methods
valueOf()- This method is used to obtain the primitive value of the array
push()- push the value in the array
pop()-is used to remove the value from the array
reverse()- This method is used to reverse the elements of an array
sort()- This method is used to sort elements of an array
splice()-The splice() method adds and/or removes array elements.
shift()-Shift (remove) the first element of the array
Boolean Object
• The Boolean object represents two values, either "true" or "false".
• var val = new Boolean(value);
Boolean Methods:
 toSource()-Returns a string containing the source of the Boolean object; you can use this
string to create an equivalent object.
 toString()-Returns a string of either "true" or "false" depending upon the value of the
object.
 valueOf()-Returns the primitive value of the Boolean object.

(Or)
7.b. Write a program using HTML 5 for creating client-side image map. CO2/U
main.html (May 22)
<html>
<head>
<BODY bgcolor="#gop6876cgdt5564ss">
<img src ="indiamap.jpeg" usemap="#indiamap" />
<map name=indiamap>
<area shape="circle" coords="500,1092,15" href="tamilnadu.html" alt="Tamilnadu">
<area shape="rect" coords="376,1076,406,1100" href="karnataka.html" alt="Karnataka">
</map>
</head>
</BODY>
</html>
tamilnadu.html
<html>
<head><title>Tanil Nadu - India</title></head>
<body bgcolor="palegreen">
<h1><center>Tamil Nadu</center></h1>
<h3>is one of the 29 states of India. Its capital and largest city is Chennai.
Tamil Nadu lies in the southernmost part of the Indian Peninsula and
is bordered by the States of puducherry, Kerala, Karnataka, Andha Pradesh.
</h3>
<h3>
<ul>
<li>Districts<i> - 33</i>
<li>Capital City<i> - Chennai</i>
<li>Largest City<i> - Chennai</i>
<li>Governor<i> - R.N.Ravi</i>
<li>Chief Minister<i> - M.K.Stalin </i>
<li>Population<i> - 72,147,030</i>
<li>Tourist spots<i> - Mamallapuran, Ooty, Kodaikanal, Marina,
Mudurai Meenakshi Amman Temple, Thanjavur etc.,</i>
</ul>
<a href="main.html">back</a>
</body>
</html>
karnataka.html
<html>
<head><title>Karnataka - India</title></head>
<body bgcolor="wheat">
<h1><center>Karnataka</center></h1>
<h3>
<ul>
<li>Districts<i> - 30</i>
 <li>Capital City<i> - Bangalore</i>
<li>Largest City<i> - Bangalore</i>
<li>Governor<i>- Thawar Chand Gehlot</i>
<li>Chief Minister<i> Basavaraj Bommai </i>
<li>Population<i> - 61,130,704</i>
<li>Tourist spots<i> - Gol Gumbaz, Mysore Palace, Keshava Temple etc.,</i>
</ul>
</h3>
<a href="main.html">back</a>
</body>
</html>
CO3/U
8.a. Sketch the life cycle of java servlets and explain them in detail
In the life cycle of servlet there are three important methods. These methods are
i) init()
ii) service()
iii) destroy()

 init()
 The life cycle of servlet begins here
 This method is called only once
 It is not called again for each user request
 The init() method simply creates or loads some data that will be used throughout the
life of the servlet.
 Syntax:
public void init() throws ServletException {
// Initialization code...
}
 service()
 Handles all the request sent by the client
 It is called only after the servlet is initialized
 It is the main method to perform the actual task
 This service() method then involves doGet(), doPost() etc. methods.
 Syntax:
public void service (HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
 // Servlet code
}

 doGet()
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Servlet code
}

 doPost()
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// Servlet code
}

 destroy()
 The end of the servlet life is indicated by this method
 It is called only once
 All the resources initialized for servicing the request are cleaned up
 Syntax:

public void destroy {

// Servlet code
}

Example program for Servlet Life Cycle

// Import required java libraries
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
// Extend HttpServlet class
public class HelloWorld extends HttpServlet {

private String message;

public void init() throws ServletException {
// Do required initialization
message = "Hello World";
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

// Set response content type

response.setContentType("text/html");
// Actual logic goes here.
PrintWriter out = response.getWriter();
out.println("<h1>" + message + "</h1>");
}
public void destroy() {
// do nothing.
}
}

(Or)
8.b. Write a servlet program to get username and password and to display the result. Use CO3 /A
validation and exception handling whenever required
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class JDBCServlet extends HttpServlet
{
public void doGet(HttpServletRequest inRequest,HttpServletResponse outResponse)
throws ServletException,IOException
{
PrintWriter out = null;
Connection connection = null;
Statement statement;
ResultSet rs;
try {
Class.forName("com.mysql.jdbc.Driver");
connection =DriverManager.getConnection("jdbc:mysql://localhost/products");
statement = connection.createStatement();
outResponse.setContentType("test/html");
out = outResponse.getWriter();
rs = statement.executeQuery("SELECT ID, title, price FROM product");
out.println("<HTML><HEAD><TITLE>Products</TITLE></HEAD>");
 out.println("<BODY>");
out.println("<UL>");
while (rs.next()) {
out.println("<LI>" + rs.getString("ID") + " " + rs.getString("title")+ " " +rs.getString("price"));
}
out.println("</UL>");
out.println("</BODY></HTML>");
}
catch (ClassNotFoundException e)
{
out.println("Driver Error");
} catch (SQLException e)
{
out.println("SQLException: " + e.getMessage());
}
}
public void doPost(HttpServletRequest inRequest,HttpServletResponse outResponse) throws
ServletException, IOException
{
doGet(inRequest, outResponse);
}
}

Explain the various string handling functions in PHP necessary examples.

9.a. CO4 / U
 String Handling functions (May 22)
Function Purpose Sample PHP code Output
strlen(string1 It finds the total <?php 13
) number of
// PHP program to find the
characters in the // length of a given string
string $str = "GeeksforGeeks";

// prints the length of the

string
// including the space
 echo strlen($str);
?>
strrev() It returns the <?php !dlroW olleH
reversed string of
$str = "Hello World!";
the given string. echo strrev($str);

?>
strtoupper() It returns the <?php GEEKSFORGEEKS
& string after
$str = "GeeksForGeeks"; Geeksforgeeks
strtolower() converting all the echo strtoupper($str)."<br>";
letters to echo strtolower($str);
uppercase
?>
It returns the
string after
converting all the
letters to
lowercase.
str_split() It returns an <?php Array (
array containing
$str = "GeeksForGeeks"; [0] => G
parts of the print_r(str_split($str));
string. echo "<br>"; [1] => e
Syntax: print_r(str_split($str, 3));
str_split(string, [2] => e
length) ?>
[3] => k
[4] => s
[5] => F
[6] => o
[7] => r
[8] => G
[9] => e
[10] => e
[11] => k
[12] => s
)
Array (
[0] => Gee
[1] => ksF
[2] => orG
[3] => eek
[4] => s
 )
trim() This function <?php : PHP
eliminates the $str=“PHP ”;
echo"<h3>:$str</h3>”; : PHP
white space from
both ends of the echo"<h3>:”.trim($str);
string echo"</h3>”;
?>
(Or)

9.b. Illustrate the merits and demerits of DOM and SAX parser with neat examples. CO4 /
AN (Dec
DOM vs SAX
22)
SAX DOM

Event based model Tree data structure

Low memory usage High memory usage

Doesn’t store XML in memory Occupies more memory

SAX is Simple API for XML Document Object Model (DOM) API

import java.xml.parsers.*; import javax.xml.parsers.*;

import org.xml.sax.*; import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
SAX generally runs little faster than DOM is slower than SAX
DOM

DOM based XML Parsing (tree based)

• JAXP- Java API for XML Processing
– Used for accessing and manipulating XML document in tree manner
• Two packages
– java.xml.parsers
– org.w3c.dom
• The following DOM classes are necessary to process XML document
– DocumentBuilderFactory
– DocumentBuilder
Program To count elements in XML file
Step 1: Create an xml file: Employee-Detail.xml
<?xml version = "1.0" ?>
<Employee-Detail>
<Employee>
<Emp_Id> E-001 </Emp_Id>
<Emp_Name> Vinod </Emp_Name>
<Emp_E-mail> [email protected] </Emp_E-mail>
</Employee>
<Employee>
<Emp_Id> E-002 </Emp_Id>
 <Emp_Name> Arun </Emp_Name>
<Emp_E-mail> [email protected] </Emp_E-mail>
</Employee>
</Employee-Detail>
Step 2: Create a java based DOM for counting number of elements in XML file
import org.w3c.dom.*;
import javax.xml.parsers.*;
import java.io.*;

public class CountNodes

{
public static void main(String[] args)
{
try
{
File file = new File(args[0]); // Employee_Detail.xml is a file to be parsed is given as
//input from command prompt
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder(); // parser is created
Document doc = builder.parse(file); // file is parsed
NodeList list = doc.getElementsByTagName(“Emp_Id”); // the element to be searched is
specified
System.out.println("Number of nodes: " + list.getLength()); // counting no. of occurrences
}catch (Exception e){ }
}
}
Output:
Number of nodes: 2

Event Oriented XML Parsing: SAX

• Simple API for XML
• Reading the data from XML document
• Event oriented approach
• The kind of events
– the start of the document is encountered
 – the end of the document is encountered
– the start tag of an element is encountered
– the end tag of an element is encountered
– character data is encountered
– a processing instruction is encountered
SAX Parser methods
• startDocument() and endDocument()
• startElement() and endElement()
• characters()

Step 1. Create a XML file

<?xml version="1.0"?>
<company>
<staff>
<firstname>Ram</firstname>
<salary>100000</salary>
</staff>
<staff>
<firstname>Kumar</firstname>
<salary>200000</salary>
</staff>
</company>

2. Create a Java file.

import javax.xml.parsers.SAXParser;
import javax.xml.parsers.SAXParserFactory;
import org.xml.sax.SAXException;
import org.xml.sax.helpers.DefaultHandler;
public class ReadXMLFileSAX
{ public static void main(String argv[])
{
try
{
SAXParserFactory factory = SAXParserFactory.newInstance();
SAXParser saxParser = factory.newSAXParser();
DefaultHandler handler = new DefaultHandler() {
boolean bfname = false;
boolean bsalary = false;
public void startElement(String uri, String localName,String qName, Attributes attributes)
throws SAXException
{
System.out.println("Start Element :" + qName);
if (qName.equals("FIRSTNAME")) {bfname = true;}
if (qName.equals("SALARY")) { bsalary = true;}
}
public void endElement(String uri, String localName, String qName) throws
SAXException { }
public void characters(char ch[], int start, int length) throws SAXException
{
if (bfname)
 {
System.out.println("First Name : "+ new String(ch, start, length));
bfname = false;
}
if (bsalary)
{
System.out.println("Salary : " + new String(ch, start, length));
bsalary = false;
}
}
}
saxParser.parse("c:\\file.xml", handler);
} catch (Exception e) { }
}
}
10.a Outline the various conditional directives used in AngularJS with relevant example programs. CO5 / U
 ng – if
 ng – switch
ng-if Directive
 The ng-if directive removes the HTML element if the expression evaluates to false.
 If the if statement evaluates to true, a copy of the Element is added in the DOM.
 Syntax
<element ng-if="expression"></element>

Keep HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
ng – switch

 The ng-switch directive lets you hide/show HTML elements depending on an expression.
 Child elements with the ng-switch-when directive will be displayed if it gets a match, otherwise the
element, and its children will be removed.
 You can also define a default section, by using the ng-switch-default directive, to show a section if
none of the other sections get a match.
 Syntax
<element ng-switch="expression">
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-when="value"></element>
<element ng-switch-default></element>
</element>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h1>Dogs</h1>
<p>Welcome to a world of dogs.</p>
</div>
<div ng-switch-when="tuts">
 <h1>Tutorials</h1>
<p>Learn from examples.</p>
</div>
<div ng-switch-when="cars">
<h1>Cars</h1>
<p>Read about cars.</p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select topic from the dropdown, to switch the content of this DIV.</p>
</div>
</div>

(Or)

10. Discuss in detail about node JS and react JS with neat architecture. CO5/
b U
 ReactJS is an open source, component-based front end Java Script library maintained by
Facebook
 This library is responsible only for the view layer of the application. That means this
JavaScript is for building user interfaces.
Features of ReactJS
JSX
 JSX stands for JavaScript XML. It is a JavaScript syntax extension.
 Its an XML or HTML like syntax used by ReactJS.
Components
 ReactJS is all about components.
 ReactJS application is made up of multiple components, and each component has
its own logic and controls.

One-way Data Binding

 ReactJS is designed in such a manner that follows unidirectional data flow or one-way data
binding.
 The benefits of one-way data binding give you better control throughout the application.
Virtual DOM
 A virtual DOM object is a representation of the original DOM object.
 It works like a one-way data binding.
 Whenever any modifications happen in the web application, the entire UI is re-rendered in
virtual DOM representation.
Setting up a React Environment

If you have npx and Node.js installed, you can create a React application by using create-react-app.

Run this command to create a React application named my-react-app:

npx create-react-app my-react-app
The create-react-app will set up everything you need to run a React application.
Run the React Application
Now you are ready to run your first real React application!

Run this command to move to the my-react-app directory:

cd my-react-app

Run this command to run the React application my-react-app:

npm start

A new browser window will pop up with your newly created React App! If not, open your browser and
type localhost:3000 in the address bar.

Node JS
 NodeJS is an open source technology for servers.
 Using Node.js we can run JavaScript on the server.
 It runs on various platforms such as Windows, Linux, Unix and MacOS.
Uses of Node.js
1. It can create, open, read, delete, write and close files on the server.
2. It can collect form data.
3. It can also add, delete, modify data in databases.
4. It generates dynamic web pages.
Features
 Extremely fast: Node.js is built on Google Chrome's V8 JavaScript Engine, so its library
is very fast in code execution.
 Single threaded: Node.js follows a single threaded model with event looping.
 Highly Scalable: Node.js is highly scalable because event mechanism helps the server to
respond in a non-blocking way.
 No buffering: Node.js cuts down the overall processing time while uploading audio and
video files. Node.js applications never buffer any data. These applications simply output
 the data in chunks.
 Open source: Node.js has an open source community which has produced many excellent
modules to add additional capabilities to Node.js applications.
 License: Node.js is released under the MIT license.
Environment
 For executing the Node.js scripts we need to install it. We can get it downloaded from
https://nodejs.org.en
 After successful installation we can now execute the Node.js document. The Node.js file
has extension .js
 Following is a simple node.js program which can be written in notepad.
File: console_example1.js
console.log('Hello JavaTpoint');

Open Node.js command prompt and run the following code:

node console_example1.js

Here, console.log() function displays message on console.