Scribd
Upload
119 views29 pages

FWT

Uploaded by

yashikakaimwaal123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
119 views29 pages

FWT

Uploaded by

yashikakaimwaal123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

There are 2 ways to insert the images into a webpage:

• By providing a full path or address (URL) to access an internet file.


• By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image to the webpage & simultaneously, we will
understand both the above approaches.

Adding images on a webpage: The <img> tag is used to add or embed the images
to a webpage/website. The “img” tag is an empty tag, which means it can contain
only a list of attributes and it has no closing tag. The addition of the images improves
the quality along with enhancing the design structure, appearance of the webpage.
Nowadays, a website does not directly add images to a web page, as the images are
linked to web pages by using the <img> tag which holds space for the image.

Syntax:
<img src="url" alt="some_text" width="" height="">

Attribute: The <img> tag has following attributes:

• src: It is used to specify the path to the image.


• alt: It is used to specify an alternate text for the image. It is useful as it
informs the user about what the image means and also due to any network
issue if the image cannot be displayed then this alternate text will be
displayed.
• crossorigin: It is used to import images from third-party sites that allow
cross-origin access to be used with canvas.
• height: It is used to specify the height of the image.
• width: It is used to specify the width of the image.
• ismap: It is used to specify an image as a server-side image map.
• loading: It is used to specify whether a browser should defer the loading of
images until some conditions are met or load an image immediately.
• longdesc: It is used to specify a URL to a detailed description of an image.
• referrerpolicy: It is used to specify which referrer information to use when
fetching an image i.e. no-referrer, no-referrer-when-downgrade, origin,
origin-when-cross-origin, unsafe-url.
• sizes: It is used to specify image sizes for different page layouts.
• srcset: It is used to specify a list of image files to use in different situations.
• usemap: It is used to specify an image as a client-side image map.
src: The src stands for source. Every image has an src attribute which tells the
browser where to find the image you want to display. The URL of the image provided
points to the location where the image is stored. When the webpage loads for the
first time, then the browser gets the image from a web server and inserts it into the
page. If the image is not spotted by the browser then users will get a broken link
icon. It might be possible if the file path is wrong or the image got deleted from that
location.

Example 1: This simple example illustrates the use of the <img> tag in HTML that is
used to embed the image into the webpage.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Welcome To GFG</title>
</head>

<body>
<h2>GeeksforGeeks</h2>
<p>This is the demo of <img> tag.</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-
300x300.png"
alt="GFG image" />
</body>

</html>

Output:

Adding GFG logo using tag


Example 2: The example illustrates the use of the src attribute in the <img> tag.
• HTML
<!DOCTYPE html>
<html>
<head>
<title>Inserting an image using "img" tag</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"/>
</body>
</html>

Output:

Use of src attribute

alt: If the image cannot be displayed then the alt attribute acts as an alternative
description for the image. The value of the alt attribute is a user-defined text. It
generally happens when the user, for some reason, cannot view it due to a slow
internet connection or an error in the src attribute, or if the user uses a screen reader.

Example 3: The example illustrates the use of the alt attribute in the <img> tag.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Alt Attribute Example</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="This is GeeksforGeeks logo" />
</body>

</html>

Output:

Adding image name in the alt attribute

Setting width and height of Image: The width and height attributes are used to
specify the height and width of an image. The attribute values are specified in pixels
by default. The width and height attributes are always declared in pixels. Please refer
to the How to set the width and height of an image using HTML? article for further
details.
Example 4: The example illustrates the use of the width & height attribute in the
<img> tag.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Setting width and height of image</title>
</head>

<body>

<p>inserted image using<img> tag:</p>

<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo" width="300"
height="300" />
</body>

</html>

Output:

Setting the width & height of the image


Adding titles to Image: Along with the images, titles can also be added to images
to provide further information related to the inserted image. For inserting a title, the
title attribute is used. Please refer to the HTML | title Attribute article for further
details.

Example 5: The example illustrates the use of the title attribute in the <img> tag.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Inserting an image using "img" tag</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="200"
height="200"
title="Logo of GeeksforGeeks" />
</body>

</html>

Output:

Adding the title to the image


Setting style to the Image: In this example, we are using the border property to
decorate the image. By default, every picture has a border around it. By using the
border attribute, the thickness of the border can be changed. A thickness of “0”
means that there will be no border around the picture. Please refer to the HTML |
<img> border Attribute for further details.

Example 6: This example illustrates the use of style property inside the <img> tag
in HTML.
• HTML
<!DOCTYPE html>
<html>
<head>
<title>Setting border to image</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
width="200"
height="200"
border="5" />
</body>
</html>

Output:
Setting the border of the image

Aligning an Image: By default, an image is aligned on the left side of the page, but
it can be aligned to the centre or right using the align attribute. Please refer to the
HTML | <img> align Attribute for further details.

Example 7: This example illustrates the use of align property in the <img> tag whose
value is set to right.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Aligning an image</title>
</head>

<body>
<p>inserted image using <img> tag:</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
align="right" />
</body>

</html>

Output:

Aligning the image to the right

Adding Image as a Link: An image can work as a link with a URL embedded in it. It
can be done by using the “img” tag inside an “a” tag. We need to specify the file path
in order to render the image on the webpage. File paths are used to link external
resources such as images, videos, style sheets, JavaScript, displaying other web
pages, etc. To insert a file on a web page its source must be known.

File paths are of two types:

• Absolute File Paths: It always contains the root element along with the
complete directory list required to locate the file.
• Relative File Paths: It is the hierarchical path representation that locates the
file or folder on a file system beginning from the current directory.
Example 8: This example illustrates the use of link property in the <img> tag. Here,
we have used the absolute path link in order to provide the link to the image. Please
refer to the HTML | File Paths & How to turn an Image into a Link in HTML? article
for further details.
• HTML
<!DOCTYPE html>
<html>

<head>
<title>Adding image as link</title>
</head>

<body>
<h3>GeekforGeeks</h3>
<p>inserted image using <img> tag:</p>
<a href="https://ide.geeksforgeeks.org/tryit.php">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo" />
</a>
</body>

</html>

Output:
Adding the image as a link

Adding animated Image: Animated images in .gif format can also be added using
the “img” tag.

Example 9: This example explains the addition of an image in the GIF format in
HTML.
• HTML
<!DOCTYPE html>
<html>

<body>
<h3>Adding a gif file on a webpage</h3>
<img src="smiley.gif"
alt="smiley"
style="width: 200px; height: 200px" />
</body>

</html>

Output:
Adding an image in GIF format

Using Image as a Background: An image can be used as a background for a


webpage. For this, we use the background-image property of CSS. Please refer to
the HTML | <body> background Attribute for further details.

Example 10: This example illustrates the use of body background property in the
<img> tag.
• HTML
<!DOCTYPE html>
<html>

<body style="background-image: url (


'https://media.geeksforgeeks.org/wp-content/cdn-
uploads/20190710102234/download3.png'
);">
<h2>Image As a Background</h2>
<p>
In this example we have specified a
background for a webpage using an image.
</p>
</body>

</html>

Output:

Adding the image as a background

Common Image Format: Here is the commonly used image file format that is
supported by all the browsers.
S.No. Abbreviation File Type Extension

PNG Portable Network


1. .png
Graphics.

Joint Photographic
JPEG. .jpg, .jpeg, .jfif,
2. Expert Group
.pjpeg, .pjp
image.

SVG Scalable Vector


3. .svg.
Graphics.

Graphics
4. GIF Interchange .gif
Format.

5. ICO Microsoft Icon. .ico, .cur

APNG Animated Portable


6. .apng
Network Graphics.

Supported Browsers:

• Google Chrome 93.0


• Internet Explorer 11.0
• Microsoft Edge 93.0
• Firefox 92.0
• Opera 78.0
• Safari 14.1
HTML Frames are used to divide the web browser window into multiple sections
where each section can be loaded separately. A frameset tag is the collection of
frames in the browser window.

Creating Frames: Instead of using body tag, use frameset tag in HTML to use
frames in web browser. But this Tag is deprecated in HTML 5. The frameset tag is
used to define how to divide the browser. Each frame is indicated by frame tag and
it basically defines which HTML document shall open into the frame. To define the
horizontal frames use row attribute of frame tag in HTML document and to define
the vertical frames use col attribute of frame tag in HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>

<frameset rows = "20%, 60%, 20%">


<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>

Output: The above example basically used to create three horizontal frames: top,
middle and bottom using row attribute of frameset tag and the noframe tag is used
for those browser who doesn’t support noframe.

Example: This example illustrates the col attribute of frameset tag.

<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Frames Using col Attribute</title>
</head>

<frameset cols = "30%, 40%, 30%">


<frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />
<noframes>
<body>The browser you are working does
not support frames.</body>
</noframes>
</frameset>
</html>
Output: The above example basically used to create three vertical frames: left,
center and right using col attribute of frameset tag.

Attributes of Frameset tag:

• cols: The cols attribute is used to create vertical frames in web browser. This
attribute is basically used to define the no of columns and its size inside the
frameset tag.
The size or width of the column is set in the frameset in the following ways:
• Use absolute value in pixel
Example:<frameset cols = "300, 400, 300">
• Use percentage value
Example:<frameset cols = "30%, 40%, 30%">
• Use wild card values:
Example:<frameset cols = "30%, *, 30%">
• In the above example * will take the remaining percentage for creating
vertical frame.
• rows: The rows attribute is used to create horizontal frames in web browser.
This attribute is used to define no of rows and its size inside the frameset
tag.
The size of rows or height of each row use the following ways:
• Use absolute value in pixel
Example:
• <frameset rows = "300, 400, 300">
• Use percentage value
Example:<frameset rows = "30%, 40%, 30%">
• Use wild card values
Example:<frameset rows = "30%, *, 30%">
• In the above example * will take the remaining percentage for creating
horizontal frame.
• border: This attribute of frameset tag defines the width of border of each
frames in pixels. Zero value is used for no border.
Example:<frameset border="4" frameset>
• frameborder: This attribute of frameset tag is used to specify whether the
three-dimensional border should be displayed between the frames or not for
this use two values 0 and 1, where 0 defines for no border and value 1
signifies for yes there will be border.
• framespacing: This attribute of frameset tag is used to specify the amount of
spacing between the frames in a frameset. This can take any integer value as
an parameter which basically denotes the value in pixel.
Example:<framespacing="20">
It means there will be 20 pixel spacing between the frames

o Attributes of Frame Tag:

• name: This attribute is used to give names to the frame. It differentiate one
frame from another. It is also used to indicate which frame a document
should loaded into.
Example: <frame name = "top" src =
"C:/Users/dharam/Desktop/attr1.png" />
<frame name = "main" src =
"C:/Users/dharam/Desktop/gradient3.png" />
<frame name = "bottom" src =
"C:/Users/dharam/Desktop/col_last.png" />

• Here we use three frames with names as left center and right.
• src: This attribute in frame tag is basically used to define the source file that
should be loaded into the frame.The value of src can be any url.
Example:<frame name = "left" src = "/html/left.htm" />
• In the above example name of frame is left and source file will be loaded
from “/html/left.htm” in frame.
• marginwidth: This attribute in frame tag is used to specify width of the
spaces in pixels between the border and contents of left and right frame.
Example:<frame marginwidth="20">

• marginheight: This attribute in frame tag is used to specify height of the


spaces in pixels between the border and contents of top and bottom frame.
Example:<frame marginheight="20">

• scrollbar: To control the appearance of scroll bar in frame use scrollbar


attribute in frame tag. This is basically used to control the appearance of
scrollbar. The value of this attribute can be yes, no, auto. Where the value no
denotes there will be no appearance of scroll bar.
Example:<frame scrollbar="no">

Advantages:
• It allows the user to view multiple documents within a single Web page.
• It load pages from different servers in a single frameset.
• The older browsers that do not support frames can be addressed using the
tag.
Disadvantages: Due to some of its disadvantage it is rarely used in web browser.

• Frames can make the production of website complicated.


• A user is unable to bookmark any of the Web pages viewed within a frame.
• The browser’s back button might not work as the user hopes.
• The use of too many frames can put a high workload on the server.
• Many old web browser doesn’t support frames.
• Note: This tag is not supported in HTML5.
Supported Browser: The browser supported by <frame> tag are listed
below:
• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari
XHTML stands for EXtensible HyperText Markup Language. It is the next
step in the evolution of the internet. The XHTML 1.0 is the first document
type in the XHTML family.
XHTML is almost identical to HTML 4.01 with only few differences. This is
a cleaner and stricter version of HTML 4.01. If you already know HTML,
then you need to give little attention to learn this latest version of HTML.
XHTML was developed by World Wide Web Consortium (W3C) to help web
developers make the transition from HTML to XML. By migrating to
XHTML today, web developers can enter the XML world with all of its
benefits, while still remaining confident in the backward and future
compatibility of the content.
Why Use XHTML?
Developers who migrate their content to XHTML 1.0 get the following
benefits −
• XHTML documents are XML conforming as they are readily viewed,
edited, and validated with standard XML tools.
• XHTML documents can be written to operate better than they did
before in existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and
applets that rely upon either the HTML Document Object Model or
the XML Document Object Model.
• XHTML gives you a more consistent, well-structured format so that
your webpages can be easily parsed and processed by present and
future web browsers.
• You can easily maintain, edit, convert and format your document in
the long run.
• Since XHTML is an official standard of the W3C, your website
becomes more compatible with many browsers and it is rendered
more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages
can be rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow
that, then your web pages are counted as quality web pages. The
W3C certifies those pages with their quality stamp.
Web developers and web browser designers are constantly discovering
new ways to express their ideas through new markup languages. In XML,
it is relatively easy to introduce new elements or additional element
attributes. The XHTML family is designed to accommodate these
extensions through XHTML modules and techniques for developing new
XHTML-conforming modules. These modules permit the combination of
existing and new features at the time of developing content and
designing new user agents.
Basic Understanding
Before we proceed further, let us have a quick view on what are HTML,
XML, and SGML.

What is SGML?
This is Standard Generalized Markup Language (SGML) application
conforming to International Standard ISO 8879. HTML is widely regarded
as the standard publishing language of the World Wide Web.
This is a language for describing markup languages, particularly those
used in electronic document exchange, document management, and
document publishing. HTML is an example of a language defined in SGML.

What is XML?
XML stands for EXtensible Markup Language. XML is a markup language
much like HTML and it was designed to describe data. XML tags are not
predefined. You must define your own tags according to your needs.

Why use XHTML?


• XHTML documents are validated with standard XML tools.
• It is easily to maintain, convert, edit document in the long run.
• It is used to define the quality standard of web pages.
• XHTML is an official standard of the W3C, your website becomes more
compatible and accurate with many browsers.
Benefits of XHTML:
• All XHTML tags must have closing tags and are nested correctly. This
generates cleaner code.
• XHTML documents are lean which means they use less bandwidth. This
reduces cost particularly if your web site has 1000s of pages.
• XHTML documents are well formatted well–formed and can easily be
transported to wireless devices, Braille readers and other specialized web
environments.
• All new developments will be in XML (of which XHTML is an application).
• XHTML works in association with CSS to create web pages that can easily
be updated.

Difference Between HTML and XHTML:

HTML XHTML

XHTML (Extensible HyperText Markup


HTML or HyperText Markup Language is Language) is a family of XML markup
the main markup language for creating languages that mirror or extend versions
web pages of the widely used Hypertext Markup
Language (HTML)

Flexible framework requiring lenient HTML Restrictive subset of XML which needs to
specific parser be parsed with standard XML parsers

World Wide Web Consortium


Proposed by Tim Berners-Lee in 1987
Recommendation in 2000.

Application of Standard Generalized


Application of XML
Markup Language (SGML).

Extended from SGML. Extended from XML, HTML


What is CSS
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe
the look and formatting of a document written in markup language. It provides an additional
feature to HTML. It is generally used with HTML to change the style of web pages and user
interfaces. It can also be used with any kind of XML documents including plain XML, SVG and
XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for
web applications and user interfaces for many mobile applications.

What does CSS do


• You can add new looks to your old HTML documents.
• You can completely change the look of your website with only a few changes in CSS
code.

Why use CSS


These are the three major benefits of CSS:

1) Solves a big problem


Before CSS, tags like font, color, background style, element alignments, border and size had
to be repeated on every web page. This was a very long process. For example: If you are
developing a large website where fonts and color information are added on every single
page, it will be become a long and expensive process. CSS was created to solve this problem.
It was a W3C recommendation.

2) Saves a lot of time


CSS style definitions are saved in external CSS files so it is possible to change the entire
website by changing just one file.

3) Provide more attributes


CSS provides more detailed attributes than plain HTML to define the look and feel of the
website.

Types of 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.
Without using CSS, the website will not look attractive. There are 3 types of CSS which are
below:

• Inline CSS
• Internal/ Embedded CSS
• External CSS

1. Internal CSS
The Internal CSS has <style> tag in the <head> section of the HTML document. This CSS style is an
effective way to style single pages. Using the CSS style for multiple web pages is time-consuming
because we require placing the style on each web page.

We can use the internal CSS by using the following steps:


1. Firstly, open the HTML page and locate the <head>
2. Put the following code after the <head>

1. <style type="text/css">
3. Add the rules of CSS in the new line.
Example:
2. body {
3. background-color: black;
4. }
5. h1 {
6. color: white;
7. padding: 50px;
8. }
4. Close the style tag.

9. </style>
After adding the internal CSS, the complete HTML file looks like the following:

10. <!DOCTYPE html>


11. <html>
12. <head>
13. <style>
14. body {
15. background-color: black;
16. }
17. h1 {
18. color: red;
19. padding: 50px;
20. }
21. </style>
22. </head>
23. <body>
24. <h2>CSS types</h2>
25. <p>Cascading Style sheet types: inline, external and internal</p>
26. </body>
27. </html>
We can also use the selectors (class and ID) in the style sheet.
Example:

28. .class {
29. property1 : value1;
30. property2 : value2;
31. property3 : value3;
32. }
33.
34. #id {
35. property1 : value1;
36. property2 : value2;
37. property3 : value3;
38. }
Pros of Internal CSS

• Internal CSS cannot upload multiple files when we add the code with the HTML page.
Cons of Internal CSS:

• Adding code in the HTML document will reduce the page size and loading time of
the webpage.

2. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text editor.
The CSS is more efficient method for styling a website. By editing the .css file, we can change
the whole site at once.
To use the external CSS, follow the steps, given below:
1. Create a new .css file with text editor, and add Cascading Style Sheet rules too.
For example:

39. .xleftcol {
40. float: right;
41. width: 35%;
42. background:#608800;
43. }
44. .xmiddlecol {
45. float: right;
46. width: 35%;
47. background:#eff3df;
48. }
2. Add a reference to the external .cssfile right after <title> tag in the <head> section of
HTML sheet:
49. <link rel="stylesheet" type="text/css" href="style.css" />
Pros of External CSS:

• Our files have a cleaner structure and smaller in size.


• We use the same .css file for multiple web pages in external CSS.
Cons of External CSS:

• The pages cannot be delivered correctly before the external CSS is loaded.
• In External CSS, uploading many CSS files can increase the download time of a
website.

3. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each HTML tag
without using the selectors. Managing a website may difficult if we use only inline CSS.
However, Inline CSS in HTML is useful in some situations. We have not access the CSS files
or to apply styles to element.
In the following example, we have used the inline CSS in <p> and <h1> tag.

50. <!DOCTYPE html>


51. <html>
52. <body style="background-color:white;">
53. <h1 style="color:Red;padding:20px;">CSS Tutorials</h1>
54. <p style="color:blue;">It will be useful here.</p>
55. </body>
56. </html>
Pros of inline CSS:

• We can create CSS rules on the HTML page.


• We cannot create and upload a separate document in inline CSS.
Cons of inline CSS:

• Inline CSS, adding CSS rules to HTML elements is time-consuming and messes up
the HTML structure.
• It styles multiple elements at the same time which can affect the page size and
download time of the page.

CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations separated
by a semicolon. For the above example, there are two declarations:

57. color: yellow;


58. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

Selector{Property1: value1; Property2: value2; ..........;}


Overview
All programming functions have some input and output. The function contains instructions used
to create the output from its input. Functions in JavaScript usually take in data, process it, and
return a result. Once a function is written, it can be used over and over and over again. Functions
are the foundation of the javascript language, and every Javascript developer should understand
them. This tutorial explains what javascript functions are and their application.
What Are Javascript Functions?
JavaScript functions are a set of statements that perform a task or calculate a value. Values can
be passed to a function as parameters, and the function will return a value.

Notable points:
1. Functions are considered as one of the fundamental building blocks in Javascript.
2. To use a function, it must be defined somewhere in the scope from which it will be
called.
3. A javascript function is composed of a sequence of statements called the function body.
4. JavaScript function can take one or more inputs and can return output also. However,
both taking input and returning an output are optional.
5. Every function in JavaScript is a function object.

First Class Objects:


JavaScript Functions are called first-class objects because they can have properties and
methods just like any other object. What distinguishes them from other objects is their ability to
be called. So, they are also called function object.
Defining Functions
Function declarations:
A function declaration (also known as a function definition or function statement) consists of the function
keyword, followed by:

a. The function name


b. The parameter list(enclosed in parentheses)
c. The javascript statements that defines the function (enclosed in curly braces{})
For example:
function add(a,b){
return a+b;
}
console.log(add(5,10))
Output: 15
In the above example, the function add takes two parameters -- a and b. The function consists of one
statement, which is supposed to return the sum of the parameters (a and b) passed to the function. Then, the
return a+b; statement specifies the value returned by this function.
The return statement is the last line of any function and ends function execution. It specifies a value to be
returned to the calling function. However, it is not mandatory to include the return statement in every
function.
For example, consider the below code:
function greet(){
alert("Hello World!")
}

Explanation: This is a function, which on being called alerts "Hello World!". We have not added any return
statement in this code, because it is not required.
The following image shows the structure of a JavaScript function:
Explanation:
We have a "function" keyword in JavaScript functions, followed by the "function name".
There is a parameter list in the function that takes some input. The parameter list in any function is
optional, for example:
Example:
function demo(){
alert("Good Morning!")
}
The above function does not take any input and has an empty parameter list. It may also be called a non-
parameterized function. 3. There is a set of code statements enclosed in parentheses, also known as the
function body. 4. We have an optional "return" statement that returns some output from the function.

Pass by value vs. Pass by Reference:


Functions in Pass by Value are called by directly passing the value of the variable as an argument. Thus,
any changes made inside the function do not affect the original value. In simple words, the changes made
to the arguments in pass-by-value are not reflected globally or in the calling function. In the above example,
we passed a & b by value. They are also called primitive parameters.
In Pass by Reference, Functions are called bypassing the reference/address of the variable as an argument.
So, altering the value of the parameters inside the function also changes the value globally(in the calling
function). Passing objects as a parameter follows this property (here, object referred to as a non-primitive
value, such as Array or a user-defined object).

Function expressions
A function expression is very similar to a function declaration. Their syntax, too, is almost similar. The
main difference between a function expression and a function declaration is the function name, which can
be omitted(not mandatory though) in function expressions to create an anonymous function. For example,
the above add function can now be defined as --
const add = function (a,b){ //function expression
return a+b;
}
console.log(add(3, 4));
// expected output: 7
Output:- 7

You might also like