1 Explain Architecture of web browser

Web Browser
web Browser is an application software that allows us to view and explore information on the
web. User can request for any web page by just entering a URL into address bar.
Web browser can show text, audio, video, animation and more. It is the responsibility of a web
browser to interpret text and commands contained in the web page.
Earlier the web browsers were text-based while now a days graphical-based or voice-based web
browsers are also available. Following are the most common web browser available today:
Browser Vendor
Internet Explorer Microsoft
Google Chrome Google
Mozilla Firefox Mozilla
Netscape Navigator Netscape Communications Corp.
Opera Opera Software
Safari Apple
Sea Monkey Mozilla Foundation
K-meleon K-meleon

What is 'Web Server'

Definition: A web server is a computer that runs websites. It's a computer program that
distributes web pages as they are requisitioned. The basic objective of the web server is to store,
process and deliver web pages to the users. This intercommunication is done using Hypertext
Transfer Protocol (HTTP). These web pages are mostly static content that includes HTML
documents, images, style sheets, test etc. Apart from HTTP, a web server also supports SMTP
(Simple Mail transfer Protocol) and FTP (File Transfer Protocol) protocol for emailing and for
file transfer and storage.

Architecture
There are a lot of web browser available in the market. All of them interpret and display
information on the screen however their capabilities and structure varies depending upon
implementation. But the most basic component that all web browser must exhibit are listed below:

 Controller/Dispatcher
 Interpreter
 Client Programs
Controller works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it
and make other services to work on the basis of input it receives.
Interpreter receives the information from the controller and execute the instruction line by line.
Some interpreter are mandatory while some are optional For example, HTML interpreter program
is mandatory and java interpreter is optional.
Client Program describes the specific protocol that will be used to access a particular service.
Following are the client programs tat are commonly used:

 HTTP
 SMTP
 FTP
 NNTP
 POP

2 What is HTTP? Explain how browser and server

communicate using HTTP request and response.
What is HTTP explain?

The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web, and
is used to load web pages using hypertext links. HTTP is an application layer protocol
designed to transfer information between networked devices and runs on top of other
layers of the network protocol stack.

HTTP Request / Response

Communication between clients and servers is done by requests and responses:

1. A client (a browser) sends an HTTP request to the web

2. A web server receives the request
3. The server runs an application to process the request
4. The server returns an HTTP response (output) to the browser
5. The client (the browser) receives the response

The HTTP Request Circle

A typical HTTP request / response circle:

6. The browser requests an HTML page. The server returns an HTML file.
7. The browser requests a style sheet. The server returns a CSS file.
8. The browser requests an JPG image. The server returns a JPG file.
9. The browser requests JavaScript code. The server returns a JS file
10. The browser requests data. The server returns data (in XML or JSON).

3 What is full form of CORS? Why are CORS needed?

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that
allows a server to indicate any origins (domain, scheme, or port) other than its own
from which a browser should permit loading resources. CORS also relies on a
mechanism by which browsers make a "preflight" request to the server hosting the
cross-origin resource, in order to check that the server will permit the actual
request. In that preflight, the browser sends headers that indicate the HTTP
method and headers that will be used in the actual request.

4 Explain the term

1)WWW
The World Wide Web -- also known as the web, WWW or W3 -- refers to all
the public websites or pages that users can access on their local computers
and other devices through the internet. These pages and documents are
interconnected by means of hyperlinks that users click on for information.
This information can be in different formats, including text, images, audio and
video.
The term World Wide Web isn't synonymous with the internet. Rather, the
World Wide Web is part of the internet.
2)Website
A website (also written as a web site) is a collection of web pages and related
content that is identified by a common domain name and published on at
least one web server. Examples of notable websites are Google, Facebook,
Amazon, and Wikipedia.
3)XML
XML stands for extensible markup language. A markup language is a set of codes, or
tags, that describes the text in a digital document. The most famous markup language
is hypertext markup language (HTML), which is used to format Web pages. XML, a
more flexible cousin of HTML, makes it possible to conduct complex business over the
Internet.
5 Differentiate between GET and POST method

6 Explain the basic structure of HTML documents. (webpage

structure).
HTML DOCUMENTS STRUCTURE
Html used predefined tags and attributes to tell the browser how to
display content, means in which format, style, font size, and images to
display. Html is a case insensitive language. Case insensitive means
there is no difference in upper case and lower case ( capital and small
letters) both treated as the same, for r example ‘D’ and ‘d’ both are the
same here.
There are generally two types of tags in HTML:

11. Paired Tags: These tags come in pairs. That is they have both
opening(< >) and closing(</ >) tags.
12. Empty Tags: These tags do not require to be closed.
Below is an example of a (<b>) tag in HTML, which tells the browser to
bold the text inside it.

Tags and attributes: Tags are individuals of html structure, we have to

open and close any tag with a forward slash like this <h1> </h1>. There
are some variations with the tag some of them are self-closing tag
which isn’t required to close and some are empty tag where we can add
any attributes in it. Attributes are additional properties of html tags
that define the property of any html tags. i.e. width, height, controls,
loops, input, and autoplay. These attributes also help us to store
information in meta tags by using name, content, and type attributes.
Html documents structured mentioned below:

Structure of an HTML Document

An HTML Document is mainly divided into two parts:

 HEAD: This contains the information about the HTML document.

For Example, the Title of the page, version of HTML, Meta Data,
etc.
 BODY: This contains everything you want to display on the Web
Page.

7 Explain ordered list and unordered list in HTML with proper

example.
HTML Unordered List or Bulleted List
In HTML unordered list, the list items have no specific order or sequence. An unordered list is also called
a Bulleted list, as the items are marked with bullets. It begins with the <ul> tag and and closes with a </ul>
tag. The list items begin with the <li> tag and end with </li> tag.

Syntax:
<ul>List of Items</ul>
Example of HTML Unordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ul>
</body>
</html>

Output:

Ordered List or Numbered List (ol)

In HTML, all the list items in an ordered list are marked with numbers by default instead of bullets. An
HTML ordered list starts with the <ol> tag and ends with the </ol> tag. The list items start with the <li>
tag and end with </li> tag.

Syntax:
<ol>List of Items</ol>
Example of HTML Ordered List
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h2>List of Fruits</h2>
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Banana</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
</body>
</html>

Output:

8 Explain following html tags with proper example.

The HTML anchor tag defines a hyperlink that links one page to another page. It can create
hyperlink to other web page as well as files, location, or any URL. The "href" attribute is the most
important attribute of the HTML a tag. and which links to destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In other words, it points
out the destination page.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>

<html>
<head>
<title></title>
</head>
<body>
<p>Click on <a href="https://www.javatpoint.com/"
target="_blank"> this-link </a>to go on home page of
JavaTpoint.</p>
</body>
</html>
HTML img tag is used to display image on the web page. HTML img tag is an empty tag that
contains attributes only, closing tags are not used in HTML image element.
Let's see an example of HTML image

<!DOCTYPE>
<html>
<body>
<h2>HTML Image Example</h2>
<img src="good-morning.jpg" alt="Good Morning Friends"/>

</body>
</html>

HTML <select> tag

HTML <select> tag is used to create a drop down list with multiple options. The <option> element
is nested within <select> tag for defining options in a list.
The <optgroup> element can be used for grouping related options in a list.
If you want to send data to server then use <select> tag within <form> element.

Syntax
13. <select>
14. <option></option>
15. </select>
<!DOCTYPE html>
<html>

<head>
<title>HTML select Tag</title>
<style>
.img{
background-image: url("/htmlpages/images/india.jpg");

background-size: cover;
background-position: center;
height: 100%;
width: 100%;
background-repeat: no-repeat;

position: fixed;
top: 0;
left: 0;
}
</style>

</head>
<body>
<div class="img">
<h2>Example of select tag</h2>
<form>
<label>Choose your Favorite city in India</label>
<select>
<option>New Delhi</option>

<option>Indore</option>
<option>Jaipur</option>
<option>Jodhpur</option>
<option>Chandigarh</option>
<option>Mumbai</option>

<option>Bengaluru</option>
<option>Lucknow</option>
<option>Amritsar</option>
</select>
</form>

</div>
</body>
</html>

HTML <span> tag

HTML <span> tag is used as a generic container of inline elements. It is used for styling purpose
to the grouped inline elements (using class and id attribute or inline style).
The <span> tag does not have any default meaning or rendering.
The <span> tag can be useful for the following task:

 To change the language of a part of the text.

 To change the color, font, background of a part of text using CSS
 To apply the scripts to the particular part of the text.
Note: HTML <span> is much similar as <div> tag, but <div> is used for block-level elements and <span>
tag is used for inline elements.
Syntax
16. <span>Write your content here......</span>
<!DOCTYPE html>
<html>
<head>

<title>Span Tag</title>
</head>
<body>
<h2>Example of span tag</h2>
<p>I have choosen only

<span style="color: red;">red</span>,

<span style="color: blue;">blue</span>, and
<span style="color: green;">green</span> colors for my painting.
</p>
</body>

</html>

HTML Input Tag

The HTML <input> tag is used to represent a form input control in HTML document. This form
input control facilitate user to input data and communicate with a website or application. Let's
take an example of an HTML form with three input fields, two text fields and one button for
submission.
<!DOCTYPE>
<html>

<body>
<form action="#">
First name: <input type="text" name="FirstName" placeholder="enter firstname..."><br>
Last name: <init" value="Submit">
</form>

</body> put type="text" name="LastName" placeholder="enter lastname..."><br>

<input type="subm
</html>

9 What is meta tag? How it is useful by search engine? OR

Explain all the Meta Tags with example
Meta tags are snippets of code that tell search engines important
information about your web page, such as how they should display it
in search results. They also tell web browsers how to display it to
visitors.
Every web page has meta tags, but they’re only visible in the HTML code.
the six most important meta tags for SEO:
 Meta title
 Meta description
 Meta robots
 Meta refresh redirect
 Meta charset
 Meta viewport
 Meta Title Tag: An HTML element that communicates the title of a web page to search
engines
 Meta Description Tag: An HTML element that summarizes the content of a web page
for search engines
 Meta Keyword Tag: An HTML element that communicates target keywords related to
the content of a web page to search engines
 Meta Robots Tag: An HTML element that instructs search engine bots on how to read
the content of a web page
17. Title Tag
18. Meta Description
19. Canonical Tag
20. Alternative Text Tag
21. Robots Meta Tag
22. Open Graph Meta Tags and Twitter Cards
 23. Header Tags
24. Responsive Design Meta Tags
By using these meta tags, you can boost your website's SEO.

1. Title Tag
The title tag is the first HTML element that specifies what your web page is about. Title tags are
important for SEO and visitors because they appear in the search engine results page (SERP) and
in browser tabs.
For example, you can see the title tag in the browser tab header of this Templatemonster post.

The title element supports all browsers including Chrome, Firefox, and Safari.
Always add your title tag in the <head> section of your site:
<head>
<title>This is Title Sample</title>
</head>
Here are some good pointers for writing a title tag:

 Keep your title tag under 60 characters if possible

 Add words that indicate what your content is about, such as “How to,” “Review,” “Best,”
“Tips,” “Top,” “Find,” or “Buy”
 Use long-tail keywords, or keywords with 4+ words, such as “is my site mobile-friendly”
or “how to make a website mobile-friendly”
 Add numbers to your title, such as “9 HTML Tags That Will Improve SEO”
 Start your title tag with your main targeted keyword
  Don't stuff your keywords by writing anything like the following: “We sell custom cigar
humidors. Our custom cigar humidors are handmade. If you’re thinking of buying a
custom cigar humidor, please contact our custom cigar humidor specialists”
 Include a unique title tag on every page

2. Meta Description
A meta description is an HTML element that sums up the content on your web page. Search
engines typically show the meta description in search results below your title tag.
Here’s an example of the meta description appearing on a search results page:

This is how you’d code a meta description like the one above:
<head>
<meta name="description" content="This is meta description Sample. We can add up to 158.">
</head>
Google does not use the meta description as a ranking signal. However, it still has a massive
effect on your page's click-through rate (CTR) because it appears in search results and informs
users what your page is about.
Lately, Google has changed the length of what it will show in SERPs. The search engine giant
confirmed that it shortened search results snippets after expanding them last December.
Google's public search liaison, Danny Sullivan, mentioned that there is no fixed length for
snippets.
The new average length of the description snippet field on desktop is around 160 characters,
down from around 300+ characters.
Mobile characters for the search results snippets are now down to an average of 130 characters.
Here’s how to write a good description tag:

 Do not add duplicate meta descriptions.

 Add a clear call to action (CTA) in your descriptions like “apply today,” “check out
____,” or one of these 100 CTA phrases.
 Add your targeted keywords in descriptions.
 Add any discounts or offers you have.
That way, you’ll have a compelling description tag.

3. Canonical Tag
A canonical tag is an HTML link tag with the attribute “rel=canonical."
It’s used to indicate that there are other versions of this webpage. By implementing the canonical
tag in the code, your website tells search engines that this URL is the main page and that the
engines shouldn’t index other pages.
Use the following syntax to add a canonical tag:
<link rel="canonical" href="http://example.com/" />

4. Alternative Text Tag

Search engines can’t read images, which are a crucial part of many websites. Alternative text (alt
text) is a way around that issue.
You should add proper alt text to images, such as the one below, so that search engines know
how to interpret them.

That way, you can include inviting graphics on your website without damaging your SEO.
When creating alt text for your website, use the following syntax:
<img src=” http://example.com/xyz.jpg” alt=”xyz” />
Here are some tips for your alt text tags:

 Always use a proper description, and never stuff your keyword in this tag
 Use informative filenames
 Be clear and to the point
 Create an image sitemap
 Use 50-55 characters (up to 16 words) in the alt text
 Use an average or small file size for faster page loading speed – just don’t compromise
the image’s resolution

5. Robots Meta Tag

The robots meta tag tells search engines to either index or non-index your web page.
The tag has four main values for the search engine crawlers:
  FOLLOW –The search engine crawler will follow all the links in that webpage
 INDEX –The search engine crawler will index the whole webpage
 NOFOLLOW – The search engine crawler will NOT follow the page and any links in
that webpage
 NOINDEX – The search engine crawler will NOT index that webpage
Use the following syntax for your robots meta tag:
<meta name=”robots” content=”noindex, nofollow”> Means not to index or not to follow this
webpage.
<meta name=”robots” content=”index, follow”> Means index and follow this webpage.
Place the robots meta tag in the <head> section of your webpage.

6. Open Graph Meta Tags and Twitter Cards

These tags make social media syncing easier.
Open graph meta tags promote integration between Facebook, LinkedIn, Google, and your
website.
Here is a sample of how Open Graph tags look like in standard HTML:
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
Twitter cards work in a similar way to Open Graph, except for Twitter.
Twitter will use these tags to enhance the display of your page when shared on their platform.
Here is a sample of How Twitter card look like in standard HTML:
<meta name="twitter:title" content="TITLE OF POST OR PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@USERNAME">
<meta name="twitter:creator" content="@USERNAME">
7. Header Tags
You can use header tags to change font sizes and signify information hierarchy on a page.
The heading elements go from H1 to H6. H1 is the largest and most important level, and H6 is
the smallest and least important.

If you mark text with an H1 tag, you signify to search engines that it’s the most important text on
that page.

8. Responsive Design Meta Tags for SEO

The final important meta tag is the responsive design meta tag, which is also called the viewport
meta element.
Viewport meta tags allow web designers to configure how a page scales and displays on any
device.

In the first image, the text is cramped and hard to read, and the image doesn’t scale well. In the
second, both the text and the image fit the dimensions of the screen.
You can find the viewport element in the head section of your web page.
Use the following syntax to add a responsive design meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
There’s one exception to the viewport meta tag rule: don’t use it if your website pages are not
responsive, as it will make the user experience worse. You can use this tool to check whether
your site is responsive.

10 Discuss SEO.
Search Engine Optimization (SEO)
SEO means Search Engine Optimization and is the process used to optimize a website's technical
configuration, content relevance and link popularity so its pages can become easily findable,
more relevant and popular towards user search queries, and as a consequence, search engines
rank them better.

How do search engines work?

Search engines provide results for any search query a user enters. To do so, they survey and
“understand” the vast network of websites that make up the web. They run a sophisticated
algorithm that determines what results to display for each search query.

Why SEO focuses on Google

To many people, the term “search engine” is synonymous with Google, which has about 92% of
the global search engine market. Because Google is the dominant search engine, SEO typically
revolves around what works best for Google. It’s useful to have a clear understanding of how
Google works and why.

The role of SEO

The goal of SEO is to raise your ranking in organic search results. There are different practices for
optimizing AdWords, shopping, and local results.
While it may appear that so many competing elements taking up real estate on SERPs push the
organic listings down, SEO can still be a very powerful, lucrative effort.

11 What is CSS? What are the benefits of CSS? List out the
different ways to write CSS.
CSS (Cascading Style Sheet) describes the HTML elements which are displayed on screen, paper,
or in other media. It saves a lot of time. It controls the layout of multiple web pages at one time.
It sets the font-size, font-family, color, background color on the page.
It allows us to add effects or animations to the website. We use CSS to display animations like
buttons, effects, loaders or spinners, and also animated backgrounds.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text,
the style of fonts, the spacing between paragraphs, how columns are sized and laid out, etc.
The following are the advantages of CSS −

 CSS saves time − You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many Web
pages as you want.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages to
make them compatible with future browsers.
 Platform Independence − The Script offer consistent platform independence and can
support latest browsers as well.

Using CSS
CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is easier
to demonstrate, and easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text
color of the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style>
element.

The following example sets the text color of ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p> elements to red. In addition, the page will be
displayed with a "powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each HTML
page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

12 Explain Class and ID Selector in CSS with

examples

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.

<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the
style.</p>

</body>
</html>

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.

<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned

heading</h1>
<p class="center">Red and center-aligned
paragraph.</p>

</body>
</html>

13 Explain the use of Media Query in CSS

CSS2 Introduced Media Types

The @media rule, introduced in CSS2, made it possible to define different style rules
for different media types.

Examples: You could have one set of style rules for computer screens, one for
printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than
the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a
type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

 width and height of the viewport

 width and height of the device
 orientation (is the tablet/phone in landscape or portrait mode?)
 resolution

Using media queries are a popular technique for delivering a tailored style sheet to
desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
14 Explain CSS box model (border, margin,
padding)
All HTML elements can be considered as boxes.

The CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space
between elements.

<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box

that wraps around every HTML element. It
consists of: borders, padding, margins, and
the actual content.</p>

<div>This text is the content of the box. We

have added a 50px padding, 20px margin and
a 15px green border. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est
laborum.</div>

</body>
</html>
15 What is JavaScript? What are the benefits
of JavaScript?
JavaScript is a dynamic computer programming language. It is
lightweight and most commonly used as a part of the web pages,
whose implementation allows a client-side script to interact with a user
and to make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.
 Less server interaction − You can validate user input before sending the page off to the server.
This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have
forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers over them with
a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop components
and sliders to give a Rich Interface to your site visitors.
16 Differentiate Client side scripting and Server side scripting

17 Explain pop-up boxes in JavaScript with example.

Alert Box
An alert box is often used if you want to make sure information comes through to the
user.

When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
window.alert("sometext");

The window.alert() method can be written without the window prefix.

Confirm Box
A confirm box is often used if you want the user to verify or accept something.

When a confirm box pops up, the user will have to click either "OK" or "Cancel" to
proceed.

If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.

Syntax
window.confirm("sometext");

The window.confirm() method can be written without the window prefix.

Prompt Box
A prompt box is often used if you want the user to input a value before entering a
page.

When a prompt box pops up, the user will have to click either "OK" or "Cancel" to
proceed after entering an input value.

If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.

Syntax
window.prompt("sometext","defaultText");

The window.prompt() method can be written without the window prefix.

Line Breaks
To display line breaks inside a popup box, use a back-slash followed by the character
n.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
alert("I am an alert box!");
}
</script>

</body>
</html>
18 Explain DOM in javascript.
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.
Note: It is called a Logical structure because DOM doesn’t specify any relationship
between objects.
DOM is a way to represent the webpage in a structured hierarchical way so that it
will become easier for programmers and users to glide through the document. With
DOM, we can easily access and manipulate tags, IDs, classes, Attributes, or
Elements of HTML using commands or methods provided by the Document object.
Using DOM, the JavaScript gets access to HTML as well as CSS of the web page and
can also add behavior to the HTML elements. so basically Document Object Model
is an API that represents and interacts with HTML or XML documents.

19 Callback function
A callback function is a function passed into another function as an argument,
which is then invoked inside the outer function to complete some kind of routine
or action.
Here is a quick example:
function greeting(name) {
alert(`Hello, ${name}`);
}

function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}

processUserInput(greeting);
Copy to Clipboard
The above example is a synchronous callback, as it is executed immediately.
Note, however, that callbacks are often used to continue code execution after an
asynchronous operation has completed — these are called asynchronous callbacks.
A good example is the callback functions executed inside a .then() block chained
onto the end of a promise after that promise fulfills or rejects. This structure is used
in many modern web APIs, such as fetch().

20 What is JavaScript event handling? List the major events and

show use of at least one event by writing JavaScript code.
JavaScript Events
The change in the state of an object is known as an Event. In html, there are various events which
represents that some activity is performed by the user or by the browser. When javascript code
is included in HTML, js react over these events and allow the execution. This process of reacting
over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event.
Some of the HTML events and their event handlers are:

Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an
element
mouseover onmouseover When the cursor of the
mouse comes over the
element
mouseout onmouseout When the cursor of the
mouse leaves an element
mousedown onmousedown When the mouse button is
pressed over the element
mouseup onmouseup When the mouse button is
released over the element
mousemove onmousemove When the mouse movement
takes place.
Keyboard events:
Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup When the user press and then
release the key
Form events:
Event Performed Event Handler Description
focus onfocus When the user focuses on an
element
submit onsubmit When the user submits the
form
blur onblur When the focus is away from
a form element
change onchange When the user modifies or
changes the value of a form
element
Window/Document events
Event Performed Event Handler Description
 load onload When the browser finishes
the loading of the page
unload onunload When the visitor leaves the
current webpage, the
browser unloads it
resize onresize When the visitor resizes the
window of the browser

25. <html>
26. <head> Javascript Events </head>
27. <body>
28. <script language="Javascript" type="text/Javascript">
29. <!--
30. function clickevent()
31. {
32. document.write("This is JavaTpoint");
33. }
34. //-->
35. </script>
36. <form>
37. <input type="button" onclick="clickevent()" value="Who's this?"/>
38. </form>
39. </body>
40. </html>

21 How user defined Objects are created in Javascript? explain

with proper example.
Creating User-defined JavaScript Object Type
We can define a custom object type by writing a constructor function where the name of the
function should start with an uppercase alphabet for example Car, Cup, Human, etc.
The constructor function is defined just as we define any other user-defined JavaScript Function.
<head>
<title>Create User-defined Object in JavaScript</title>
 </head>
<body>
<script>
/* defining a new constructor function */
function Bike(company, model, year) {
this.company = company;
this.model = model;
this.year = year;
}

/* creating the object */

let myBike = new Bike("KTM", "Duke", 2010);

document.write(myBike.company+"<br/>"+myBike.model+"<br/>"+myBike.year
);
</script>
</body>
</html>

22 Write short note on JSON.

JSON or JavaScript Object Notation is a lightweight text-based open standard designed for human-
readable data interchange. Conventions used by JSON are known to programmers, which include
C, C++, Java, Python, Perl, etc.

 JSON stands for JavaScript Object Notation.

 The format was specified by Douglas Crockford.
 It was designed for human-readable data interchange.
 It has been extended from the JavaScript scripting language.
 The filename extension is .json.
 JSON Internet Media type is application/json.
 The Uniform Type Identifier is public.json.

Uses of JSON
 It is used while writing JavaScript based applications that includes browser extensions and
websites.
 JSON format is used for serializing and transmitting structured data over network
connection.
 It is primarily used to transmit data between a server and web applications.
  Web services and APIs use JSON format to provide public data.
 It can be used with modern programming languages.

Characteristics of JSON
 JSON is easy to read and write.
 It is a lightweight text-based interchange format.
 JSON is language independent.


23 PHP Features
PHP is very popular language because of its simplicity and open source.
There are some important features of PHP given below:

Performance:
PHP script is executed much faster than those scripts which are written
in other languages such as JSP and ASP. PHP uses its own memory, so the
server workload and loading time is automatically reduced, which results
in faster processing speed and better performance.

Open Source:
PHP source code and software are freely available on the web. You can
develop all the versions of PHP according to your requirement without
paying any cost. All its components are free to download and use.

Familiarity with syntax:

PHP has easily understandable syntax. Programmers are comfortable coding
with it.

Embedded:
PHP code can be easily embedded within HTML tags and script.

Platform Independent:
PHP is available for WINDOWS, MAC, LINUX & UNIX operating system. A PHP
application developed in one OS can be easily executed in other OS also.

Database Support:
PHP supports all the leading databases such as MySQL, SQLite, ODBC, etc.

Error Reporting -
PHP has predefined error reporting constants to generate an error notice
or warning at runtime. E.g., E_ERROR, E_WARNING, E_STRICT, E_PARSE.

Loosely Typed Language:

PHP allows us to use a variable without declaring its datatype. It will
be taken automatically at the time of execution based on the type of
data it contains on its value.

Web servers Support:

PHP is compatible with almost all local servers used today like Apache,
Netscape, Microsoft IIS, etc.

Security:
PHP is a secure language to develop the website. It consists of multiple
layers of security to prevent threads and malicious attacks.

Control:
Different programming languages require long script or code, whereas PHP
can do the same work in a few lines of code. It has maximum control over
the websites like you can make changes easily whenever you want.
24 PHP Session
PHP session is used to store and pass information from one page to
another temporarily (until user close the website).
PHP session technique is widely used in shopping websites where we need
to store and pass cart information e.g. username, product code, product
name, product price etc from one page to another.
PHP session creates unique user id for each browser to recognize the
user and avoid conflict between multiple browsers.

41. <?php
42. session_start();
43. ?>
44. <html>
45. <body>
46. <?php
47. $_SESSION["user"] = "Sachin";
48. echo "Session information are set successfully.<br/>";
49. ?>
50. <a href="session2.php">Visit next page</a>
51. </body>
52. </html>

25 GET method
The GET method is used to submit the HTML form data. This data is
collected by the predefined $_GET variable for processing.
63.2M

1.3K
 OOPs Concepts in Java

The information sent from an HTML form using the GET method is visible
to everyone in the browser's address bar, which means that all the
variable names and their values will be displayed in the URL. Therefore,
the get method is not secured to send sensitive information.
For Example

53. localhost/gettest.php?username=Harry&bloodgroup=AB+

POST method
Similar to the GET method, the POST method is also used to submit the
HTML form data. But the data submitted by this method is collected by
the predefined superglobal variable $_POST instead of $_GET.
Unlike the GET method, it does not have a limit on the amount of
information to be sent. The information sent from an HTML form using the
POST method is not visible to anyone.
For Example

54. localhost/posttest.php

PHP $_REQUEST
PHP $_REQUEST is a PHP super global variable which is used to collect data after
submitting an HTML form.

The example below shows a form with an input field and a submit button. When a
user submits the data by clicking on "Submit", the form data is sent to the file
specified in the action attribute of the <form> tag. In this example, we point to this
file itself for processing form data. If you wish to use another PHP file to process form
data, replace that with the filename of your choice. Then, we can use the super global
variable $_REQUEST to collect the value of the input field:

26 Exception Handling in PHP

Exception handling is a powerful mechanism of PHP, which is used to
handle runtime errors (runtime errors are called exceptions). So that
the normal flow of the application can be maintained.
The main purpose of using exception handling is to maintain the normal
execution of the application.
What is an Exception?
An exception is an unexcepted outcome of a program, which can be handled
by the program itself. Basically, an exception disrupts the normal flow
of the program. But it is different from an error because an exception
can be handled, whereas an error cannot be handled by the program itself.
In other words, - "An unexpected result of a program is an exception,
which can be handled by the program itself." Exceptions can be thrown
and caught in PHP.

27 What is a Cookie?
A cookie is often used to identify a user. A cookie is a small file that the server embeds
on the user's computer. Each time the same computer requests a page with a
browser, it will send the cookie too. With PHP, you can both create and retrieve cookie
values.

Syntax
setcookie(name, value, expire, path, domain, secure, httponly);

55. Modify a Cookie Value. To modify a cookie, just set (again) the cookie using the
setcookie() function: ...
56. Delete a Cookie. To delete a cookie, use the setcookie() function with an
expiration date in the past: ...
57. Check if Cookies are Enabled. The following example creates a small script that
checks whether cookies are enabled.

28 Include() Function

The Include() function is used to put data of one PHP file into another PHP file. If errors occur
then the include() function produces a warning but does not stop the execution of the script i.e.
the script will continue to execute.

Require() Function

The Require() function is also used to put data of one PHP file to another PHP file. If there are any
errors then the require() function produces a warning and a fatal error and stops the execution
of the script i.e. the script will continue to execute.
29 Explain file handling in PHP with example
File handling is needed for any application. For some tasks to be done file needs to be
processed. File handling in PHP is similar as file handling is done by using any
programming language like C. PHP has many functions to work with normal files. Those
functions are:
1) fopen() – PHP fopen() function is used to open a file. First parameter of fopen()
contains name of the file which is to be opened and second parameter tells about mode
in which file needs to be opened, e.g.,
<?php
$file = fopen(“demo.txt”,'w');
?>
Files can be opened in any of the following modes :

 “w” – Opens a file for write only. If file not exist then new file is created and if file
already exists then contents of file is erased.
 “r” – File is opened for read only.
 “a” – File is opened for write only. File pointer points to end of file. Existing data in
file is preserved.
 “w+” – Opens file for read and write. If file not exist then new file is created and if
file already exists then contents of file is erased.
 “r+” – File is opened for read/write.
 “a+” – File is opened for write/read. File pointer points to end of file. Existing data
in file is preserved. If file is not there then new file is created.
 “x” – New file is created for write only.
2) fread() –– After file is opened using fopen() the contents of data are read using fread().
It takes two arguments. One is file pointer and another is file size in bytes, e.g.,
<?php
$filename = "demo.txt";
$file = fopen( $filename, 'r' );
$size = filesize( $filename );
$filedata = fread( $file, $size );
?>
3) fwrite() – New file can be created or text can be appended to an existing file using
fwrite() function. Arguments for fwrite() function are file pointer and text that is to
written to file. It can contain optional third argument where length of text to written is
specified, e.g.,
<?php
$file = fopen("demo.txt", 'w');
$text = "Hello world\n";
 fwrite($file, $text);
?>
4) fclose() – file is closed using fclose() function. Its argument is file which needs to be
closed, e.g.,

30 What is Laravel? What are Pros and cons of using Laravel

Framework?
Laravel is one such scalable framework that makes it easy for you to use for small
and medium-sized web applications. Secure: The software has a safe, built-in access
control system. Plus, it provides a robust mechanism that allows you to handle any bugs
or issues with ease.

31 What is a Route? What is the importance of it in

Laravel?
What Is a Route?
The route is a way of creating a request URL for your application. These URLs
do not have to map to specific files on a website, and are both human readable
and SEO friendly.

In Laravel, routes are created inside the routes folder. They are are created in
the web.php file for websites. And for APIs, they are created inside api.php.

These routes are assigned to the net middleware group, highlighting the
session state and CSRF security. The routes in routes/api.php are stateless
and are assigned the API middleware group.
The default installation of Laravel comes with two routes, one for the web and
the other for API. Here is how the route for web in web.php looks like:
58. Route::get('/', function () {
59.
60. return view('welcome');
61.
62. });

Routing in Laravel allows you to route all your application requests to their
appropriate controller. The main and primary routes in Laravel acknowledge and accept
a URI (Uniform Resource Identifier) along with a closure, given that it should have to be
a simple and expressive way of routing.

Controllers can group related request handling logic into a single class. For example,
a UserController class might handle all incoming requests related to users, including
showing, creating, updating, and deleting users. By default, controllers are stored in the
app/Http/Controllers directory.
A session stores the variables and their values within a file in a temporary directory
on the server. Cookies are stored on the user's computer as a text file. The session
ends when the user logout from the application or closes his web browser. Cookies end
on the lifetime set by the user.

32 Define Composer in Laravel.

In Laravel, the composer is a tool that includes all the dependencies and libraries. It helps
the user to develop a project with respect to the mentioned framework. Third-party
libraries can be installed easily using composer.

Composer is used to managing its dependencies and the dependencies are noted in
composer.json file which is placed in the source folder.

33 What is php artisan commands?

Artisan is the command line interface included with Laravel. Artisan exists at the root
of your application as the artisan script and provides a number of helpful commands that
can assist you while you build your application.

make:channel Create a new channel class

make:command Create a new Artisan command
make:controller Create a new controller class
make:event Create a new event class
make:exception Create a new custom exception class
make:factory Create a new model factory
make:job Create a new job class
make:listener Create a new event listener class
make:mail Create a new email class
make:middleware Create a new middleware class
make:migration Create a new migration file
make:model Create a new Eloquent model class
 make:notification Create a new notification class
make:observer Create a new observer class
make:policy Create a new policy class
make:provider Create a new service provider class
make:request Create a new form request class
make:resource Create a new resource
make:rule Create a new validation rule
make:seeder Create a new seeder class
make:test Create a new tes

The Benefits of Node.js

⊕ Robust technology stack
JavaScript has proven to be an undisputed leader among the most
popular programming languages. In turn, Node.js has become a
stand-alone name in the industry. With a total of 368,985,988
downloads and over 750 new contributors as stated in Node-by-
numbers report 2018, the project seems to be stronger than ever.
Using Node.js for backend, you automatically get all the pros of
full stack JavaScript development, such as:
 better efficiency and overall developer productivity
 code sharing and reuse
 speed and performance
 easy knowledge sharing within a team
 a huge number of free tools
It is used for server-side programming, and primarily deployed for non-
blocking, event-driven servers, such as traditional web sites and back-
end API services, but was originally designed with real-time, push-based
architectures in mind. Every browser has its own version of a JS engine,
and node.js is built on Google Chrome’s V8 JavaScript engine. Sounds a
bit complicated, right?
Features of Node.js
Following are some of the important features that make Node.js the first choice of software
architects.

 Asynchronous and Event Driven − All APIs of Node.js library are asynchronous, that is,
non-blocking. It essentially means a Node.js based server never waits for an API to return
data. The server moves to the next API after calling it and a notification mechanism of
Events of Node.js helps the server to get a response from the previous API call.
 Very Fast − Being built on Google Chrome's V8 JavaScript Engine, Node.js library is very
fast in code execution.
 Single Threaded but Highly Scalable − Node.js uses a single threaded model with event
looping. Event mechanism helps the server to respond in a non-blocking way and makes
the server highly scalable as opposed to traditional servers which create limited threads to
handle requests. Node.js uses a single threaded program and the same program can provide
service to a much larger number of requests than traditional servers like Apache HTTP
Server.
 No Buffering − Node.js applications never buffer any data. These applications simply
output the data in chunks.
 License − Node.js is released under the MIT license

What is Routing?
Routing defines the way in which the client requests are
handled by the application endpoints.
Implementation of routing in Node.js: There are two ways to
implement routing in node.js which are listed below:
 By Using Framework
 Without using Framework
Using Framework: Node has many frameworks to help you to get
your server up and running. The most popular is Express.js.
Routing with Express in Node: Express.js has an “app” object
corresponding to HTTP. We define the routes by using the
methods of this “app” object. This app object specifies a
callback function, which is called when a request is
received. We have different methods in app object for a
different type of request
Write a Node JS code to create a server
var http = require('http'); // 1 - Import Node.js core module

var server = http.createServer(function (req, res) { // 2 - creating

server

//handle incomming requests here..

});

server.listen(5000); //3 - listen for any incoming requests

console.log('Node.js web server at port 5000 is running..')