Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING
HTML, CSS, JAVASCRIPT
1
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Overview
This training explores the HTML, CSS, JAVASCRIPT. These three languages are for frontend web development and are responsible for what we can see and do on a website. Learn to
write tag and create website, and more.
Objective



To know internet protocols and markup languages.
To know the style sheets .
To know about client side programming
Pre-requisite
The pre-requisite knowledge required by the Students to study this Course is knowledge in
Internet Programming.
Target Audience

First year U.G. Students
2
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
CONTENTS

HTML

CSS

JavaScript
3
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Skill Training Schedule:
S.NO
DAYS
SESSION
TOPIC
1 FN
Basic Tags(Formatting Tags, Heading Tags)
2 AN
Phrase Tag, Anchor ,Image Tag
1 FN
HTML Tables
2 AN
HTML Lists
1 FN
HTML Form
2 AN
HTML Form
1 FN
HTML iframes
2 AN
HTML Layouts
1 FN
HTML Responsive,Computer Code
2 AN
HTML Attributes
1 FN
HTML5(Advance) Tables
2 AN
HTML 5 (Advance)Forms
1
DAY1
2
3
DAY2
4
5
DAY3
6
7
DAY4
8
9
DAY5
10
11
DAY6
12
4
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
1 FN
TML HTML 5 (Advance)Audio Tag
2 AN
HTML 5 (Advance) video Tag
1 FN
HTML 5 (Advance)SVG
2 AN
HTML 5 (Advance)Canvas
1 FN
HTML color
2 AN
HTML Space, Date
1 FN
HTML List box, Button Types
2 AN
Create Simple HTML page
13
DAY7
14
15
DAY8
16
17
DAY9
18
19
DAY10
20
CSS
S.NO
DAYS
SESSION
TOPIC
1 FN
CSS Introducton , Syntax
2 AN
CSS Selector
1 FN
How to add CSS?
2 AN
CSS Background
21
DAY11
22
23
DAY12
24
5
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
1 FN
CSS Border
2 AN
CSS border-radius property
1 FN
CSS display-Cursor
2 AN
CSS Buttons
1 FN
CSS Float- Font
2 AN
CSS background color , Attachment property
1 FN
CSS Margin
2 AN
CSS opacity-Filter
1 FN
CSS Padding- Position
2 AN
CSS Box Shadow
1 FN
CSS Text Shadow,CSS text-decoration
2 AN
CSS outline-Visibility
1 FN
CSS Counters
25
DAY13
26
27
DAY14
28
29
DAY15
30
31
DAY16
32
33
DAY17
34
35
DAY18
36
37
DAY19
6
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
2 AN
CSS Icons,Justify
1 FN
CSS 2D,3D Transform
2 AN
CSS Lists, CSS Border Image
38
39
DAY20
40
Javascript
S.NO
DAYS
SESSION
TOPIC
1 FN
JavaScript Basics
2 AN
JavaScript Statements
1 FN
JavaScript Objects
2 AN
JavaScript Browser Objects Model(BOM)
1 FN
JavaScript Document Objects Model(DOM)
2 AN
JavaScript Document Objects Model(DOM)
1 FN
JavaScript Validation
2 AN
JavaScript OOPs
1 FN
JavaScript Cookies
41
DAY21
42
43
DAY22
44
45
DAY23
46
47
DAY24
48
49
DAY25
7
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
2 AN
Cookie with multiple Name-Value pairs
1 FN
JavaScript Events
2 AN
Exception Handling
1 FN
JavaScript this keyword
2 AN
JavaScript String
1 FN
JavaScript Debugging
2 AN
JavaScript Hoisting
1 FN
Javascript Date objects
2 AN
Javascript JSON objects
1 FN
JavaScript RegExp Object
2 AN
Javascript Form
50
51
DAY26
52
53
DAY27
54
55
DAY28
56
57
DAY29
58
59
DAY30
60
8
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
ROGRAM NO. 1 - HTML
Aim:- To study HTML
What is HTML?






HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
HTML Page Structure
<html>
<head>
<title>PageTitle</title>
</head>
<body>
</body>
</html>




The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Day 1 : Basic Tags(Formatting Tags, Heading Tags)
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
HTML paragraphs are defined with the <p> tag
The <br> tag defines a line break, and is an empty element without a closing tag
9
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
HTML Attributes




All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The style attribute is used to add styles to an element, such as color, font, size, and more.
lang attribute inside the <html> tag, to declare the language of the Web page.
The title attribute defines some extra information about an element.
Background-color property defines the background color for an HTML element.
color property defines the text color for an HTML element
font-family property defines the font to be used for an HTML element.
font-size property defines the text size for an HTML element
text-align property defines the horizontal text alignment for an HTML element
HTML Phrase tag
The HTML phrase tags are special purpose tags, which defines the structural meaning of a
block of text or semantics of text.
o
Marked tag: <mark>
o
Strong tag: <strong>
o
Emphasized tag : <em>
o
Definition tag: <dfn>
o
Quoting tag: <blockquote>
o
Short quote tag : <q>
o
Code tag: <code>
o
Keyboard tag: <kbd>
o
Address tag: <address>
10
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
HTML Anchor
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.
The syntax of HTML anchor tag is given below.
<a href = "..........."> Link Text </a>
Let's see an example of HTML anchor tag.
<a href="second.html">Click for Second Page</a>
HTML Image
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.
The required src attribute specifies the path (URL) to the image.
The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).
style attribute to specify the width and height of an image.
Day 2 : HTML Tables, HTML Lists
HTML Table Tags
HTML tables allow web developers to arrange data into rows and columns. We can create a
table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and
<th> elements. In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
Tag
Description
<table>
It defines a table.
<tr>
It defines a row in a table.
11
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<th>
It defines a header cell in a table.
<td>
It defines a cell in a table.
<caption>
It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col>
It is used with <colgroup> element to specify column properties for
each column.
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term
Tag
Description
<ul>
Defines an unordered list
<ol>
Defines an ordered list
<li>
Defines a list item
<dl>
Defines a description list
<dt>
Defines a term in a description list
<dd>
Describes the term in a description list
12
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 3: HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to be sent to the server for processing
such as name, email address, password, phone number, etc.
HTML Form Tags
Tag
Description
<form>
It defines an HTML form to enter inputs by the used side.
<input>
It defines an input control.
<textarea>
It defines a multi-line input control.
<label>
It defines a label for an input element.
<fieldset>
It groups the related element in a form.
<legend>
It defines a caption for a <fieldset> element.
<select>
It defines a drop-down list.
<optgroup>
It defines a group of related options in a drop-down list.
<option>
It defines an option in a drop-down list.
<button>
It defines a clickable button.
Tag
Description
<input type="text">
Displays a single-line text input field
<input type="radio">
Displays a radio button (for selecting one of many
choices)
<input
type="checkbox">
Displays a checkbox (for selecting zero or more of many
choices)
<input type="submit">
Displays a submit button (for submitting the form)
<input type="button">
Displays a clickable button
13
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 4: HTML iframes, HTML Lawets
HTML iframes
An HTML iframe is used to display a web page within a web page.
The HTML <iframe> tag specifies an inline frame.An inline frame is used to embed another
document within the current HTML document.
Syntax
<iframe src="url" title="description"></iframe>
Use the height and width attributes to specify the size of the iframe.
Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>





The HTML <iframe> tag specifies an inline frame
The src attribute defines the URL of the page to embed
Always include a title attribute (for screen readers)
The height and width attributes specifies the size of the iframe
Use border:none; to remove the border around the iframe
HTML Lawets
HTML has several semantic elements that define the different parts of a web page:






<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
14
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training


<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
Day 4: HTML Responsive, Computer Code, HTML Attributes
HTML Responsive
Responsive web design is about creating web pages that look good on all devices!
A responsive web design will automatically adjust for different screen sizes and viewports.
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)
To create a responsive website, add the following <meta> tag to all our web pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of our page, which will give the browser instructions on how to
control the page's dimensions and scaling.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm
wide, 1vw is 0.5cm.
If the max-width property is set to 100%, the image will scale down if it has to, but never
scale up to be larger than its original size:
The HTML <picture> element allows we to define different images for different browser
window sizes.
Resize the browser window to see how the image below change depending on the width.
Computer code
HTML contains several elements for defining user input and computer code.
The HTML <kbd> element is used to define keyboard input. The content inside is displayed
in the browser's default monospace font.
The HTML <samp> element is used to define sample output from a computer program. The
content inside is displayed in the browser's default monospace font.
The HTML <code> element is used to define a piece of computer code. The content inside is
displayed in the browser's default monospace font.
15
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The HTML <var> element is used to define a variable in programming or in a mathematical
expression. The content inside is typically displayed in italic.
The <pre> element defines preformatted text
HTML Attributes




All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href Attribute
The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page the link goes to:
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed.
The <img> tag should also contain the width and height attributes, which specifies the width
and height of the image (in pixels).
The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to slow connection, or an error
in the src attribute, or if the user uses a screen reader.
The style attribute is used to add styles to an element, such as color, font, size, and more.
lang attribute inside the <html> tag, to declare the language of the Web page. This is meant
to assist search engines and browsers.
Day 6: HTML5(Advance) Tables, Forms
HTML5 Form Tags
HTML5 tutorial provides details of all 40+ HTML tags including audio, video, header,
footer, data, datalist, article etc. HTML5 is a next version of HTML. Here, we will get some
brand new features which will make HTML much easier. These new introducing features
make our website lawet clearer to both website designers and users. There are some elements
like <header>, <footer>, <nav> and <article> that define the lawet of a website.
16
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Why use HTML5
It is enriched with advance features which makes it easy and interactive for
designer/developer and users.
It allows to play a video and audio file.
It allows to draw on a canvas.
It facilitate we to design better forms and build web applications that work offline.
It provides we advance features for that we would normally have to write JavaScript to do.
HTML Table Tags
Tag
Description
<table>
It defines a table.
<tr>
It defines a row in a table.
<th>
It defines a header cell in a table.
<td>
It defines a cell in a table.
<caption>
It defines the table caption.
<colgroup> It specifies a group of one or more columns in a table for formatting.
<col>
It is used with <colgroup> element to specify column properties for
each column.
<tbody>
It is used to group the body content in a table.
<thead>
It is used to group the header content in a table.
<tfooter>
It is used to group the footer content in a table.
Let's see the list of HTML 5 form tags.
Tag
Description
<form>
It defines an HTML form to enter inputs by the used side.
17
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<input>
It defines an input control.
<textarea>
It defines a multi-line input control.
<label>
It defines a label for an input element.
<fieldset>
It groups the related element in a form.
<legend>
It defines a caption for a <fieldset> element.
<select>
It defines a drop-down list.
<optgroup>
It defines a group of related options in a drop-down list.
<option>
It defines an option in a drop-down list.
<button>
It defines a clickable button.
HTML 5 Form Tags
Let's see the list of HTML 5 form tags.
Tag
Description
<datalist>
It specifies a list of pre-defined options for input control.
<keygen>
It defines a key-pair generator field for forms.
<output>
It defines the result of a calculation.
Day 7: HTML 5 (Advance)Audio Tag,Video Tag
HTML Audio Tag
HTML audio tag is used to define sounds such as music and other audio clips. Currently
there are three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg
<audio controls>
<source src="koyal.mp3" type="audio/mpeg"> </audio>
18
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar
technologies are used to play the multimedia items.
There is given a list of HTML audio tag.
Attribute
Description
Controls
It defines the audio controls which is displayed with play/pause
buttons.
Autoplay
It specifies that the audio will start playing as soon as it is ready.
Loop
It specifies that the audio file will start over again, every time when it
is completed.
Muted
It is used to mute the audio output.
Preload
It specifies the author view to upload audio file when the page loads.
Src
It specifies the source URL of the audio file.
HTML Video Tag
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files
such as a movie clip, song clip on the web page.
<video width="320" height="240" controls autoplay loop>
<source src="movie.mp4" type="video/mp4">
</video>
Currently, there are three video formats supported for HTML video tag:
1. mp4
2. webM
3. ogg
Attributes of HTML Video Tag
Let's see the list of HTML 5 video tag attributes.
19
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Attribute
Description
Controls
It defines the video controls which is displayed with play/pause
buttons.
Height
It is used to set the height of the video player.
Width
It is used to set the width of the video player.
Poster
It specifies the image which is displayed on the screen when the
video is not played.
Autoplay
It specifies that the video will start playing as soon as it is ready.
Loop
It specifies that the video file will start over again, every time when it
is completed.
Muted
It is used to mute the video output.
Preload
It specifies the author view to upload video file when the page loads.
Src
It specifies the source URL of the video file.
Day 8: HTML 5 (Advance)SVG, Canvas
What is SVG?



SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation
The HTML <svg> Element
The HTML <svg> element is a container for SVG graphics.SVG has several methods for
drawing paths, boxes, circles, text, and graphic images.
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
20
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Differences Between SVG and Canvas
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. We
can attach JavaScript event handlers for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are
changed, the browser can automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the
browser. If its position should be changed, the entire scene needs to be redrawn, including
any objects that might have been covered by the graphic.
HTML Canvas
The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. We must use JavaScript to actually
draw the graphics.Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.
Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no
content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and
a width and height attribute to define the size of the canvas. To add a border, use
the style attribute.
Day 9 : HTML color, Date, Space
Color Names Supported by All Browsers
All modern browsers support the following 140 color names .Colors are displayed combining
RED, GREEN, and BLUE light.
With CSS, colors can be specified in different ways:
21
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training





By color names
As RGB values
As hexadecimal values
As HSL values (CSS3)
As HWB values (CSS4)
HTML Entities
HTML character entities are used as a replacement of reserved characters in HTML. We can
also replace characters that are not present on our keyboard by entities.These characters are
replaced because some characters are reserved in HTML. HTML entities provide a wide
range of characters which can allow to add icons, geometric shapes, mathematical operators,
etc.
For example: if we use less than (<) or greater than (>) symbols in our text, the browser can
mix them with tags that's why character entities are used in HTML to display reserved
characters.
Syntax:
&entity_name;
OR
&#entity_number;
Most used HTML Character Entities
Result
Description
Entity Name
Entity Number
non-breaking space
&nbsp;
160
<
less than
&lt;
60
>
greater than
&gt;
62
&
Ampersand
&amp;
38
"
double quotation mark
&quot;
34
'
single quotation mark (apostrophe)
&apos;
39
¢
Cent
&cent;
162
£
Pound
&pound;
163
¥
Yen
&yen;
165
€
Euro
&euro;
8364
22
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
©
Copyright
&copy;
169
®
registered trademark
&reg;
174
Note:Entity names are case sensitive.
Date:
The <input type="date"> defines a date picker.
The resulting value includes the year, month, and day.
Tip: Always add the <label> tag for best accessibility practices!
Syntax : <input type="date">
<!DOCTYPE html>
<html><body>
<h1>Show a Date Control</h1>
<form action="/action_page.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
<input type="submit">
</form><p><strong>Note:</strong> type="date" is not supported in Internet Explorer 11 or
prior Safari 14.1.</p>
</body> </html>
Day 10 : HTML List box, Button Types
HTML List Box
The list box is a graphical control element in the HTML document that allows a user to select
one or more options from the list of options.
To create a list box, use the HTML element <select> which contains two
attributes Name and Size. The Name attribute is used to define the name for calling the list
box, and size attribute is used to specify the numerical value that shows the how many
options it contains.
23
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<select Name="Name_of_list_box" Size="Number_of_options">
<option> List item 1 </option>
<option> List item 2 </option>
<option> List item 3 </option>
<option> List item N </option>
</select>
Example: Consider the below example that creates a simple list box.
<!DOCTYPE html>
<html>
<title>
Example of List Box
</title>
<body>
Customer Name: <input type="text" Placeholder="Enter the Customer Name"/><br><br>
<select name="Cars" size="5">
<option value="Merceders"> Merceders </option>
<option value="BMW"> BMW </option>
<option value="Jaguar"> Jaguar </option>
<option value="Lamborghini"> Lamborghini </option>
<option value="Ferrari"> Ferrari </option>
<option value="Ford"> Ford </option>
</select> </body> </html>
Html <Button> Type
The type is an attribute of <button> element, which sets the type of the button as described
in the following syntax: <button type="button|submit|reset">
Following are the three values of type attribute:
1. Button: The button value is used for the clickable button.
2. Submit: The submit value is used for submitting the form-data.
3. Reset: The reset value is used to reset the values of a form to its initial values.
Test Projects: Portfolio Website, Restaurant management
PROGRAM NO. 2 – CSS
24
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 11: CSS Introduction , Syntax, Selectors
Aim: 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.
The major points of CSS are given below:
o
CSS stands for Cascading Style Sheet.
o
CSS is used to design HTML tags.
o
CSS is a widely used language on the web.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
o
HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.
Selector: Selector indicates the HTML element we 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:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
25
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
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; ..........;}
CSS Selector
CSS selectors are used to select the content we want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector -The element selector selects the HTML element by name.
2. CSS Id Selector - The id selector selects the id attribute of an HTML element to select
a specific element. An id is always unique within the page so it is chosen to select a
single, unique element. It is written with the hash character (#), followed by the id of
the element.
3. CSS Class Selector : The class selector selects HTML elements with a specific class
attribute. It is used with a period character
4. CSS Universal Selector: The universal selector is used as a wildcard character. It
selects all the elements on the pages.
5. CSS Group Selector: The grouping selector is used to select all the elements with the
same style definitions. Grouping selector is used to minimize the code. Commas are used
to separate each selector in grouping.
Day 12: How to add CSS? CSS Backgrounds
CSS is added to HTML pages to format the document according to information in the style
sheet. There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
1) Inline CSS
26
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color:blue">Hello CSS</p>
2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements
of the page. It is written inside the style tag within head section of html.
For example:
<style>
p{color:blue}
</style>
3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example style.css.
For example:
p{color:blue}
We need to link this style.css file to our html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
CSS Background
CSS background property is used to define the background effects on element. There are 5
CSS background properties that affects the HTML elements:
1. background-color : The background-color property is used to specify the background
color of the element.
2. background-image: The background-image property is used to set an image as a
background of an element. By default the image covers the entire element.
3. background-repeat: By default, the background-image property repeats the
background image horizontally and vertically. Some images are repeated only
horizontally or vertically.
27
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
4. background-attachment: The background-attachment property is used to specify if the
background image is fixed or scroll with the rest of the page in browser window. If
we set fixed the background image then the image will not move during scrolling in
the browser.
5.background-position: The background-position property is used to define the initial
position of the background image. By default, the background image is placed on the top-left
of the webpage.
We can set the following positions:
1. center
2. top
3. bottom
4. left
5. right
Day:13 CSS border-radius property
CSS Border
The CSS border is a shorthand property used to set the border on an element.
The CSS border properties are use to specify the style, color and size of the border of an
element. The CSS border properties are given below
o
border-style
o
border-color
o
border-width
o
border-radius
1) CSS border-style
The Border style property is used to specify the border type which we want to display on the
web page.
There are some border style values which are used with border-style property to define a
border.
28
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Value
Description
none
It doesn't define any border.
dotted
It is used to define a dotted border.
dashed
It is used to define a dashed border.
solid
It is used to define a solid border.
double
It defines two borders wIth the same border-width value.
groove
It defines a 3d grooved border. effect is generated according to bordercolor value.
ridge
It defines a 3d ridged border. effect is generated according to bordercolor value.
inset
It defines a 3d inset border. effect is generated according to border-color
value.
outset
It defines a 3d outset border. effect is generated according to bordercolor value.
CSS border-radius property
This CSS property sets the rounded borders and provides the rounded corners around an
element, tags, or div. It defines the radius of the corners of an element.
This CSS property includes the properties that are tabulated as follows:
Property
Description
border-top-left-radius
It is used to set the border-radius for the top-left
corner
border-top-right-radius
It is used to set the border-radius for the top-right
corner
border-bottom-rightradius
It is used to set the border-radius for the bottomright corner
border-bottom-leftradius
It is used to set the border-radius for the bottomleft corner
29
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 14: CSS display-Cursor – Buttons
CSS Display
CSS display is the most important property of CSS which is used to control the element. It
specifies how the element is displayed.
Every element has a default display value according to its nature. Every element on the
webpage is a rectangular box and the CSS property defines the behavior of that rectangular
box.
CSS Display default properties
default value
Inline
Inherited
No
animation supporting
No
Version
css1
javascript syntax
object.style.display="none"
Syntax
display:value;
CSS Cursor
It is used to define the type of mouse cursor when the mouse pointer is on the element. It
allows us to specify the cursor type, which will be displayed to the user. When a user hovers
on the link, then by default, the cursor transforms into the hand from a pointer.
Let's understand the property values of the cursor.
Values
Usage
alias
It is used to display the indication of the cursor of something that is to
be created.
auto
It is the default property in which the browser sets the cursor.
all-scroll
It indicates the scrolling.
colresize
Using it, the cursor will represent that the column can be horizontally
resized.
30
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The cursor will represent that a cell or the collection of cells is
selected.
cell
CSS Buttons
In HTML, we use the button tag to create a button, but by using CSS properties, we can style
the buttons. Buttons help us to create user interaction and event processing. They are one of
the widely used elements of web pages. During the form submission, to view or to get some
information, we generally use buttons.
background-color
Syntax
element {
// background-color style
}
Day:15 CSS Float,Font, CSS background color , Attachment property
CSS Float
The CSS float property is a positioning property. It is used to push an element to the left or
right, allowing other element to wrap around it. It is generally used with images and lawets.
CSS Float Properties
Property
Description
Values
Clear
The clear property is used to avoid elements after left, right, both,
the floating elements which flow around it.
none, inherit
Float
It specifies whether the box should float or not.
left, right, none,
inherit
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property we
can change the text size, color, style and more.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone
attribute)
31
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and
lightness of the font.
CSS Background-color
This property is used to set the background color of an element. The background of an
element covers the total size, including the padding and border and excluding margin. It can
be applied to all HTML elements.
Syntax
element {
background-color: color_name|transparent|initial|inherit;
}
CSS background-attachment property
The background-attachment property is used to specify that the background image is fixed or
scroll with the rest of the page in the browser window.
This property has three values scroll, fixed, and local. Its default value is scroll, which
causes the element to not scroll with its content. The local value of this property causes the
element to scroll with the content. If we set the value to fixed, the background image will not
move during scrolling in the browser.
Syntax
background-attachment: scroll | fixed | local | initial | inherit;
Day:16 CSS Margin, Opacity,Filter
CSS Margin
CSS Margin property is used to define the space around elements. It is completely
transparent and doesn't have any background color. It clears an area around the element.
Top, bottom, left and right margin can be changed independently using separate properties.
We can also change all properties at once by using shorthand margin property.
There are following CSS margin properties:
32
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
CSS Margin Properties
Property
Description
Margin
This property is used to set all the properties in one declaration.
margin-left
it is used to set left margin of an element.
margin-right
It is used to set right margin of an element.
margin-top
It is used to set top margin of an element.
margin-bottom
It is used to set bottom margin of an element.
CSS Opacity
The CSS opacity property is used to specify the transparency of an element. In simple word,
we can say that it specifies the clarity of the image.In technical terms, Opacity is defined as
degree in which light is allowed to travel through an object.
How to apply CSS opacity setting
Opacity setting is applied uniformly across the entire object and the opacity value is defined
in term of digital value less than 1. The lesser opacity value displays the greater opacity.
Opacity is not inherited.
CSS filter
CSS filters are used to set visual effects to text, images, and other aspects of a webpage. The
CSS filter property allows us to access the effects such as color or blur, shifting on the
rendering of an element before the element gets displayed.
The syntax of CSS filter property is given below.
Syntax
filter: none | invert() | drop-shadow() | brightness() | saturate() | blur() | huerotate() | contrast() | opacity() | grayscale() | sepia() | url();
Day:17 CSS Padding- Position- CSS Box Shadow
33
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
CSS Padding
CSS Padding property is used to define the space between the element content and the
element border.
It is different from CSS margin in the way that CSS margin defines the space around
elements. CSS padding is affected by the background colors. It clears an area around the
content.
Top, bottom, left and right padding can be changed independently using separate properties.
We can also change all properties at once by using shorthand padding property.
CSS Padding Properties
Property
Description
Padding
It is used to set all the padding properties in one declaration.
padding-left
It is used to set left padding of an element.
padding-right
It is used to set right padding of an element.
padding-top
It is used to set top padding of an element.
padding-bottom
It is used to set bottom padding of an element.
CSS Padding Values
Value
Description
Length
It is used to define fixed padding in pt, px, em etc.
%
It defines padding in % of containing element.
CSS Position
The CSS position property is used to set position for an element. It is also used to place an
element behind another and also useful for scripted animation effect.
We can position an element using the top, bottom, left and right properties. These properties
can be used only after position property is set first. A position element's computed position
property is relative, absolute, fixed or sticky.
Let's have a look at following CSS positioning:
1. CSS Static Positioning
34
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
2. CSS Fixed Positioning
3. CSS Relative Positioning
4. CSS Absolute Positioning
1) CSS Static Positioning
This is a by default position for HTML elements. It always positions an element according to
the normal flow of the page. It is not affected by the top, bottom, left and right properties.
2) CSS Fixed Positioning
The fixed positioning property helps to put the text fixed on the browser. This fixed test is
positioned relative to the browser window, and doesn't move even we scroll the window.
3) CSS Relative Positioning
The relative positioning property is used to set the element relative to its normal position.
4) CSS Absolute Positioning
The absolute positioning is used to position an element relative to the first parent element that
has a position other than static. If no such element is found, the containing block is HTML.
With the absolute positioning, we can place an element anywhere on a page.
Box-shadow CSS
It is used to add shadow-like effects around the frame of an element.
Syntax
box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;
Let's understand property values.
h-offset: It horizontally sets the shadow position. Its positive value will set the shadow to the
right side of the box. Its negative value is used to set the shadow on the left side of the box.
v-offset: Unlike the h-offset, it is used to set the shadow position vertically. The positive
value in it sets the shadow below the box, and the negative value sets the shadow above of
the box.
blur: As its name implies, it is used to blur the box-shadow. This attribute is optional.
spread: It sets the shadow size. The spread size depends upon the spread value.
35
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 18: CSS Text Shadow, CSS text-decoration, CSS outline-Visibility
CSS Text-shadow
As its name implies, this CSS property adds shadows to the text. It accepts the commaseparated list of shadows that applied to the text. It's default property is none. It applies one
or more than one text-shadow effect on the element's text content.
Syntax
text-shadow: h-shadow v-shadow blur-radius color| none | initial | inherit;
Values
h-shadow: It is the required value. It specifies the position of the horizontal shadow and
allows negative values.
v-shadow: It is also the required value that specifies the position of the vertical shadow. It
does not allow negative values.
blur-radius: It is the blur-radius, which is an optional value. Its default value is 0.
color: It is the color of the shadow and also an optional value.
CSS Outline
CSS outline is just like CSS border property. It facilitates we to draw an extra border around
an element to get visual attention.
<!DOCTYPE html>
<html>
<style type="text/css">
.box {
background-color: #eee;
outline: 3px solid red;
border: 3px solid lightgreen;
padding: 5px 10px;
}
</style>
<div class="box">Welcome to JavaTpoint</div> </body> </html>
CSS Visibility
36
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The CSS visibility property is used to specify whether an element is visible or not.
Note: An invisible element also take up the space on the page. By using display property we
can create invisible elements that don't take up space.
Syntax:
visibility: visible|hidden|collapse|initial|inherit;
CSS Visibility Parameters
visible:It is the by default value. It specifies that the element is visible.
hidden:It specifies that the element is invisible (but still takes up space).
collapse:It is used only for table elements. It is used to remove a row or column, but it does
not affect the table lawet.
The space taken up by the row or column will be available for other content.
If collapse is used on other elements, it renders as "hidden"
initial:It is used to set this property to its default value.
Day 19: CSS counters, Icons, justify
CSS Counters
CSS counters are similar to variables. These are maintained by CSS and those values can be
incremented by CSS rules to track how many times they are used.
CSS counters facilitate simple CSS based incrementing and display of a number for
generated content.
CSS Counter Properties
Following is a list of properties that are used with CSS counter:
o
counter-reset: It is used to create or reset a counter.
o
counter-increment: It is used to increment the counter value.
o
content: It is used to insert generated content.
o
counter() or counters() function: It is used to add the value of a counter to an
element.
37
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
CSS icons
Icons can be defined as the images or symbols used in any computer interface refer to an
element. It is a graphical representation of a file or program that helps the user to identify
about the type of file quickly.
Using the icon library is the easiest way to add icons to our HTML page. It is possible to
format the library icons by using CSS. We can customize the icons according to their color,
shadow, size, etc.
There are given some of the icon libraries such as Bootstrap icons, Font Awesome
icons, and Google icons that can be used in CSS easily. There is no need to install or
download the libraries mentioned above.
Font Awesome icons
To use this library in our HTML page, we need to add the following link within
the <head></head> section.
1.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
CSS justify-content
This CSS property is used to align the items of the flexible box container when the items do
not use all available space on the main-axis (horizontally). It defines how the browser
distributes the space around and between the content items.
This CSS property can't be used to describe containers or items along the vertical axis. To
align the items vertically, we have to use the align-items property.
Syntax
justify-content: center | flex-start | flex-end | space-around | space-evenly | spacebetween | initial | inherit;
The default value of this property is flex-start. Let's understand its property values in detail.
Property values
o
center: As its name implies, it set the position of items at the center of the container.
o
flex-start: It is the default value that positioned the items at the beginning of the
container.
o
flex-end: It set the position of items at the end of the container.
38
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 20: CSS 2D,3D Transform, CSS Lists, CSS Border Image
CSS Transforms
CSS3 supports transform property. This transform property facilitates we have to translate,
rotate, scale, and skews elements.
Transformation is an effect that is used to change shape, size and position.
There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.
CSS 2D Transforms
The CSS 2D transforms are used to re-change the structure of the element as translate, rotate,
scale and skew etc.
Following is a list of 2D transforms methods:
o
translate(x,y): It is used to transform the element along X-axis and Y-axis.
o
translateX(n): It is used to transform the element along X-axis.
o
translateY(n): It is used to transform the element along Y-axis.
o
rotate(): It is used to rotate the element on the basis of an angle.
o
scale(x,y): It is used to change the width and height of an element.
CSS 3D Transforms
The CSS 3D transforms facilitates we to move an element to X-axis, Y-axis and Z-axis.
Following is a list of 3D transforms methods:
Function
Description
matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) It specifies a 3D transformation, using a
4x4 matrix of 16 values.
translate3D(x,y,z)
It specifies a 3D translation.
translateX(x)
It specifies 3D translation, using only
the value for the X-axis.
translateY(y)
It specifies 3D translation, using only
the value for the Y-axis.
translateZ(z)
It specifies 3D translation, using only
39
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
the value for the Z-axis.
CSS Lists
There are various CSS properties that can be used to control lists. Lists can be classified as
ordered lists and unordered lists. In ordered lists, marking of the list items is with alphabet
and numbers, whereas in unordered lists, the list items are marked using bullets.
We can style the lists using CSS. CSS list properties allow us to:
o
Set the distance between the text and the marker in the list.
o
Specify an image for the marker instead of using the number or bullet point.
o
Control the marker appearance and shape.
o
Place the marker outside or inside the box that contains the list items.
o
Set the background colors to list items and lists.
The CSS properties to style the lists are given as follows:
o
list-style-type: This property is responsible for controlling the appearance and shape
of the marker.
o
list-style-image: It sets an image for the marker instead of the number or a bullet
point.
o
list-style-position: It specifies the position of the marker.
o
list-style: It is the shorthand property of the above properties.
o
marker-offset: It is used to specify the distance between the
CSS Images
Images are an important part of any web application. Including a lot of images in a web
application is generally not recommended, but it is important to use the images wherever they
required. CSS helps us to control the display of images in web applications.
The styling of an image in CSS is similar to the styling of an element by using the borders
and
margins.
There
are
multiple
CSS
properties
such
as border property, height property, width property, etc. that helps us to style an image.
Test Projects Using CSS: Survey Forms, Calculator App
40
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
PROGRAM NO. 3 – JAVASCRIPT
Day 21: JavaScript Basics, Statement
JavaScript is an object-based scripting language which is lightweight and cross-platform.
JavaScript is not a compiled language, but it is a translated language. The JavaScript
Translator (embedded in the browser) is responsible for translating the JavaScript code for
the web browser.
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML
document. It was introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other graphical web
browsers. With JavaScript, users can build modern web applications to interact directly
without reloading the page every time. The traditional website uses js to provide several
forms of interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name was
suggested and provided in the times when Java was gaining popularity in the market. In
addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript as
their scripting and query language.
Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it
is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast
(depending on the operation).
Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o
Client-side validation,
41
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
o
Dynamic drop-down menus,
o
Displaying date and time,
o
Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),
o
o
o
Displaying clocks etc.
The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about
the data.
The document.write() function is used to display dynamic content through
JavaScript.
o
JavaScript Variable
1. JavaScript variable
2. JavaScript Local variable
3. JavaScript Global variable
A JavaScript variable is simply a name of storage location. There are two types of variables
in JavaScript : local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
2. After first letter we can use digits (0 to 9), for example value1.
3. JavaScript variables are case sensitive, for example x and X are different variables.
Correct JavaScript variables
var x = 10;
var _value="sonoo";
avascript Data Types
JavaScript provides different data types to hold different types of values. There are two
types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type
JavaScript is a dynamic type language, means we don't need to specify type of the variable
because it is dynamically used by JavaScript engine. We need to use var here to specify the
data type. It can hold any type of values such as numbers, strings etc. For example:
42
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
var a=40;//holding number
var b="Rahul";//holding string
JavaScript primitive data types
There are five types of primitive data types in JavaScript. They are as follows:
Data Type
Description
String
represents sequence of characters e.g. "hello"
Number
represents numeric values e.g. 100
Boolean
represents boolean value either false or true
Undefined
represents undefined value
JavaScript Operators
JavaScript operators are symbols that are used to perform operations on operands. For
example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are following types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
JavaScript If-else
The JavaScript if-else statement is used to execute the code whether condition is true or
false. There are three forms of if statement in JavaScript.
1. If Statement
2. If else statement
3. if else if statement
43
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
JavaScript If statement
It evaluates the content only if expression is true. The signature of JavaScript if statement is
given below.
if(expression){
//content to be evaluated
}
JavaScript Switch
The JavaScript switch statement is used to execute one code from multiple expressions. It is
just like else if statement that we have learned in previous page. But it is convenient
than if..else..if because it can be used with numbers, characters etc.
The signature of JavaScript switch statement is given below.
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if above values are not matched;
}
JavaScript Loops
The JavaScript loops are used to iterate the piece of code using for, while, do while or for-in
loops. It makes the code compact. It is mostly used in array.
There are four types of loops in JavaScript.
1. for loop
2. while loop
3. do-while loop
4. for-in loop
44
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Day 22: JavaScript Objects, JavaScript Browser Objects Model(BOM)
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object.
But, we direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
1) JavaScript Object by object literal
The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
2) By creating instance of Object
The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
3) By using an Object constructor
Here, we need to create function with arguments. Each argument value can be assigned in the
current object by using this keyword.The this keyword refers to the current object.
Browser Object Model
1. Browser Object Model (BOM)
The Browser Object Model (BOM) is used to interact with the browser.
45
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The default object of browser is window means we can call all the functions of window by
specifying window or directly. For example:
window.alert("hello javatpoint");
Window Object
1. Window Object
2. Properties of Window Object
3. Methods of Window Object
The window object represents a window in browser. An object of window is created
automatically by the browser.
Window is the object of browser, it is not the object of javascript. The javascript objects
are string, array, date etc.
Methods of window object
The important methods of window object are as follows:
Method
Description
alert()
displays the alert box containing message with ok button.
confirm()
displays the confirm dialog box containing message with ok and
cancel button.
prompt()
displays a dialog box to get input from the user.
open()
opens the new window.
close()
closes the current window.
setTimeout() performs action after specified time like calling function,
evaluating expressions etc.
JavaScript History Object
1. History Object
2. Properties of History Object
46
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
3. Methods of History Object
The JavaScript history object represents an array of URLs visited by the user. By using this
object, we can load previous, forward or any particular page.
The history object is the window property, so it can be accessed by:
window.history
Property of JavaScript history object
There are only 1 property of history object.
No.
Property
Description
1
Length
returns the length of the history URLs.
JavaScript Navigator Object
1. Navigator Object
2. Properties of Navigator Object
3. Methods of Navigator Object
The JavaScript navigator object is used for browser detection. It can be used to get browser
information such as appName, appCodeName, userAgent etc.
The navigator object is the window property, so it can be accessed by:
window.navigator
The JavaScript screen object holds information of browser screen. It can be used to display
screen width, height, colorDepth, pixelDepth etc.
The navigator object is the window property, so it can be accessed by:
window.screen
Day 23: JavaScript Document Objects Model(DOM)
Document Object Model
47
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The document object represents the whole html document.
When html document is loaded in the browser, it becomes a document object. It is the root
element that represents the html document. It has properties and methods. By the help of
document object, we can add dynamic content to our web page.
window.document
Methods of document object
We can access and change the contents of document by its methods.
The important methods of document object are as follows:
Method
Description
write("string")
writes the given string on the doucment.
writeln("string")
writes the given string on the doucment with newline
character at the end.
getElementById()
returns the element having the given id value.
getElementsByName() returns all the elements having the given name value.
Accessing field value by document object
name is the attribute name of the input text.
value is the property, that returns the value of the input text.
The document.getElementById() method returns the element of specified id.
In the previous page, we have used document.form1.name.value to get the value of the
input value. Instead of this, we can use document.getElementById() method to get value of
the input text. But we need to define id for the input field.
The document.getElementsByName() method returns all the element of specified name.
The syntax of the getElementsByName() method is given below:
document.getElementsByName("name")
The document.getElementsByTagName() method returns all the element of specified tag
name.
48
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The syntax of the getElementsByTagName() method is given below:
document.getElementsByTagName("name")
The innerHTML property can be used to write the dynamic html on the html document.
It is used mostly in the web pages to generate the dynamic html such as registration form,
comment form, links etc.
The innerText property can be used to write the dynamic text on the html document. Here,
text will not be interpreted as html text but a normal text.
It is used mostly in the web pages to generate the dynamic content such as writing the
validation message, password strength etc.
Day 24: JavaScript Validation, JavaScript OOPs
It is important to validate the form submitted by the user because it can have inappropriate
values. So, validation is must to authenticate user.
JavaScript provides facility to validate the form on the client-side so data processing will be
faster than server-side validation. Most of the web developers prefer JavaScript form
validation.Through JavaScript, we can validate name, password, email, date, mobile numbers
and more fields.
JavaScript Form Validation Example
In this example, we are going to validate the name and password. The name can’t be empty
and password can’t be less than 6 characters long.
Here, we are validating the form on form submit. The user will not be forwarded to the next
page until given values are correct.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
49
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >
Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
In JavaScript, classes are the special type of functions. We can define the class just like
function declarations and function expressions.
The JavaScript class contains various class members within a body including methods or
constructor. The class is executed in strict mode. So, the code containing the silent error or
mistake throws an error.
The class syntax contains two components:
o
Class declarations
o
Class expressions
Class Declarations
A class can be defined by using a class declaration. A class keyword is used to declare a class
with any particular name. According to JavaScript naming conventions, the name of the class
always starts with an uppercase letter.
Class Declarations Example
Let's see a simple example of declaring the class.
<script>
//Declaring class
class Employee
{
50
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
//Initializing an object
constructor(id,name)
{
this.id=id;
this.name=name;
}
//Declaring method
detail()
{
document.writeln(this.id+" "+this.name+"<br>")
}
}
//passing object to a variable
var e1=new Employee(101,"Martin Roy");
var e2=new Employee(102,"Duke William");
e1.detail(); //calling method
e2.detail();
</script>
JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object.
But, we direct create objects.
Creating Objects in JavaScript
There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)
Method
51
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
A JavaScript constructor method is a special type of method which is used to initialize and
create an object. It is called when memory is allocated for an object.
Points to remember
o
The constructor keyword is used to declare a constructor method.
o
The class can contain one constructor method only.
o
JavaScript allows us to use parent class constructor through super keyword
<script>
class Employee {
constructor() {
this.id=101;
this.name = "Martin Roy";
}
}
var emp = new Employee();
document.writeln(emp.id+" "+emp.name);
</script>
Day 25: JavaScript Cookies, Cookie with multiple Name-Value pairs
JavaScript Cookies
A cookie is an amount of information that persists between a server-side and a client-side. A
web browser stores this information at the time of browsing.
A cookie contains the information as a string generally in the form of a name-value pair
separated by semi-colons. It maintains the state of a user and remembers the user's
information among all the web pages.
How Cookies Works?
o
When a user sends a request to the server, then each of that request is treated as a new
request sent by the different user.
o
So, to recognize the old user, we need to add the cookie with the response from the
server.
o
browser at the client-side.
o
Now, whenever a user sends a request to the server, the cookie is added with that
request automatically. Due to the cookie, the server recognizes the users.
52
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
How to create a Cookie in JavaScript?
In JavaScript, we can create,
using document.cookie property.
read,
update
and
The following syntax is used to create a cookie:
1.
document.cookie="name=value";
JavaScript Cookie Example
Let's see an example to set and get a cookie.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" value="setCookie" onclick="setCookie()">
<input type="button" value="getCookie" onclick="getCookie()">
<script>
function setCookie()
{
document.cookie="username=Duke Martin";
}
function getCookie()
{
if(document.cookie.length!=0)
{
alert(document.cookie);
}
else
{
alert("Cookie not available");
}
}
</script>
</body>
</html>
53
delete
a
cookie
by
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Cookie with multiple Name-Value pairs
In JavaScript, a cookie can contain only a single name-value pair. However, to store more
than one name-value pair, we can use the following approach: o
Serialize the custom object in a JSON string, parse it and then store in a cookie.
o
For each name-value pair, use a separate cookie.
Examples to Store Name-Value pair in a Cookie
Example 1
Let's see an example to check whether a cookie contains more than one name-value pair.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Name: <input type="text" id="name"><br>
Email: <input type="email" id="email"><br>
Course: <input type="text" id="course"><br>
<input type="button" value="Set Cookie" onclick="setCookie()">
<input type="button" value="Get Cookie" onclick="getCookie()">
<script>
function setCookie()
{
//Declaring 3 key-value pairs
var info="Name="+ document.getElementById("name").value+";Email="+document.ge
tElementById("email").value+";Course="+document.getElementById("course").value;
//Providing all 3 key-value pairs to a single cookie
document.cookie=info;
}
function getCookie()
{
if(document.cookie.length!=0)
{
//Invoking key-value pair stored in a cookie
54
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
alert(document.cookie);
}
else
{
alert("Cookie not available")
} }
</script>
</body>
</html>
Day 26: JavaScript Events, Exception Handling
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:
55
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Event
Performed
Keydown
Keyup
Event Handler
& onkeydown
onkeyup
Description
& 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
What is Exception Handling
In programming, exception handling is a process or method used for handling the abnormal
statements in the code and executing them. It also enables to handle the flow control of the
code/program. For handling the code, various handlers are used that process the exception
and execute the code. For example, the Division of a non-zero value with zero will result
into infinity always, and it is an exception. Thus, with the help of exception handling, it can
be executed and handled.
In exception handling:
A throw statement is used to raise an exception. It means when an abnormal condition
occurs, an exception is thrown using throw.
56
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
The thrown exception is handled by wrapping the code into the try…catch block. If an error
is present, the catch block will execute, else only the try block statements will get executed.
Thus, in a programming language, there can be different types of errors which may disturb
the proper execution of the program.
Types of Errors
While coding, there can be three types of errors in the code:
1. Syntax Error: When a user makes a mistake in the pre-defined syntax of a
programming language, a syntax error may appear.
2. Runtime Error: When an error occurs during the execution of the program, such an
error is known as Runtime error. The codes which create runtime errors are known as
Exceptions. Thus, exception handlers are used for handling runtime errors.
3. Logical Error: An error which occurs when there is any logical mistake in the
program that may not produce the desired output, and may terminate abnormally.
Such an error is known as Logical error.
Error Object
When a runtime error occurs, it creates and throws an Error object. Such an object can be
used as a base for the user-defined exceptions too. An error object has two properties:
1. name: This is an object property that sets or returns an error name.
2. message: This property returns an error message in the string form.
Although Error is a generic constructor, there are following standard built-in error types or
error constructors beside it:
1. EvalError: It creates an instance for the error that occurred in the eval(), which is a
global function used for evaluating the js string code.
2. InternalError: It creates an instance when the js engine throws an internal error.
3. RangeError: It creates an instance for the error that occurs when a numeric variable
or parameter is out of its valid range.
4. ReferenceError: It creates an instance for the error that occurs when an invalid
reference is de-referenced.
5. SyntaxError: An instance is created for the syntax error that may occur while
parsing the eval().
57
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Exception Handling Statements
There are following statements that handle if any exception occurs:
o
throw statements
o
try…catch statements
o
try…catch…finally statements.
Day 27: JavaScript this keyword, String
JavaScript this keyword
The this keyword is a reference variable that refers to the current object. Here, we will learn
about this keyword with help of different examples.
<script>
var address=
{
company:"Javatpoint",
city:"Noida",
state:"UP",
fullAddress:function()
{
return this.company+" "+this.city+" "+this.state;
}
};
var fetch=address.fullAddress();
document.writeln(fetch);
</script>
JavaScript String
The JavaScript string is an object that represents a sequence of characters.
There are 2 ways to create string in JavaScript
1. By string literal
58
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
2. By string object (using new keyword)
1) By string literal
The string literal is created using double quotes. The syntax of creating string using string
literal is given below:
var stringname="string value";
Let's see the simple example of creating string literal.
<script>
var str="This is string literal";
document.write(str);
</script>
2) By string object (using new keyword)
The syntax of creating string object using new keyword is given below:
var stringname=new String("string literal");
JavaScript String Methods
Let's see the list of JavaScript string methods with examples.
Methods
Description
charAt()
It provides the char value present at the specified index.
charCodeAt()
It provides the Unicode value of a character present at the
specified index.
concat()
It provides a combination of two or more strings.
indexOf()
It provides the position of a char value present in the given
string.
lastIndexOf()
It provides the position of a char value present in the given
string by searching a character from the last position.
search()
It searches a specified regular expression in a given string
and returns its position if a match occurs.
match()
It searches a specified regular expression in a given string
59
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
and returns that regular expression if a match occurs.
replace()
It replaces a given string with the specified replacement.
substr()
It is used to fetch the part of the given string on the basis
of the specified starting position and length.
substring()
It is used to fetch the part of the given string on the basis
of the specified index.
slice()
It is used to fetch the part of the given string. It allows us
to assign positive as well negative index.
toLowerCase()
It converts the given string into lowercase letter.
toLocaleLowerCase() It converts the given string into lowercase letter on the
basis of host?s current locale.
toUpperCase()
It converts the given string into uppercase letter.
toLocaleUpperCase()
It converts the given string into uppercase letter on the
basis of host?s current locale.
toString()
It provides a string representing the particular object.
valueOf()
It provides the primitive value of string object.
split()
It splits a string into substring array, then returns that
newly created array.
trim()
It trims the white space from the left and right side of the
string.
Day28: JavaScript Debugging, JavaScript Hoisting
JavaScript Debugging
Sometimes a code may contain certain mistakes. Being a scripting language, JavaScript didn't
show any error message in a browser. But these mistakes can affect the output.The best
practice to find out the error is to debug the code. The code can be debugged easily by using
web browsers like Google Chrome, Mozilla Firebox.
JavaScript Debugging Example
Here, we will find out errors using built-in web browser debugger. To perform debugging,
we can use any of the following approaches:
60
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
o
Using console.log() method
o
Using debugger keyword
Using console.log() method
The console.log() method displays the result in the console of the browser. If there is any mistake in
the code, it generates the error message.
JavaScript Hoisting
Hoisting is a mechanism in JavaScript that moves the declaration of variables and functions at the top.
So, in JavaScript we can use variables and functions before declaring them.
JavaScript hoisting is applicable only for declaration not initialization. It is required to initialize the
variables and functions before using their values.
JavaScript Hoisting Example
Here, we will use the variable and function before declaring them.
JavaScript Variable Hoisting
Let's see the simple example of variable hoisting.
<script>
document.write(sum(10,20));
function sum(a,b)
{
return a+b;
}
</script>
Day 29: Javascript Date objects, JSON objects
JavaScript Date Object
The JavaScript date object can be used to get year, month and day. We can display a timer on the
webpage by the help of JavaScript date object.
We can use different Date constructors to create date object. It provides methods to get and set day,
month, year, hour, minute and seconds.
Constructor
We can use 4 variant of Date constructor to create date object.
Date()
Date(milliseconds)
Date(dateString)
Date(year, month, day, hours, minutes, seconds, milliseconds)
JavaScript Date Methods
Let's see the list of JavaScript date methods with their description.
Methods
Description
getDate()
It returns the integer value between 1 and 31 that represents the day for
the specified date on the basis of local time.
getDay()
It returns the integer value between 0 and 6 that represents the day of
the week on the basis of local time.
getFullYears() It returns the integer value that represents the year on the basis of local
61
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
time.
getHours()
It returns the integer value between 0 and 23 that represents the hours
on the basis of local time.
What is JSON?
JSON stands for JavaScript Object Notation
JSON is a lightweight data interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
* The JSON syntax is derived from JavaScript object notation syntax, but the JSON format is text
only. Code for reading and generating JSON data can be written in any programming language.
JSON Example
This JSON syntax defines an employees object: an array of 3 employee records (objects):
JSON Example
{
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
}
JSON Syntax Rules
Data is in name/value pairs
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays
JSON Data - A Name and a Value
JSON data is written as name/value pairs, just like JavaScript object properties.
A name/value pair consists of a field name (in double quotes), followed by a colon, followed by a
value:
"firstName":"John"
JSON names require double quotes. JavaScript names do not.
JSON Objects
JSON objects are written inside curly braces.
Just like in JavaScript, objects can contain multiple name/value pairs:
{"firstName":"John", "lastName":"Doe"}
Day 30: Regular Expression , Forms
What Is a Regular Expression?
A regular expression is a sequence of characters that forms a search pattern.
When we search for data in a text, we can use this search pattern to describe what we are searching
for. A regular expression can be a single character, or a more complicated pattern.
Regular expressions can be used to perform all types of text search and text replace operations.
Syntax
/pattern/modifiers;
Example
/w3schools/i;
62
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Example explained:
/w3schools/i is a regular expression.
w3schools is a pattern (to be used in a search).
i is a modifier (modifies the search to be case-insensitive).
Using String Methods
In JavaScript, regular expressions are often used with the two string
methods: search() and replace().
The search() method uses an expression to search for a match, and returns the position of the match.
The replace() method returns a modified string where the pattern is replaced.
Using String search() With a String
The search() method searches a string for a specified value and returns the position of the match:
Example
Use a string to do a search for "W3schools" in a string:
let text = "Visit W3Schools!";
let n = text.search("W3Schools");
The result in n will be:
6
Using String search() With a Regular Expression
Example
Use a regular expression to do a case-insensitive search for "w3schools" in a string:
let text = "Visit W3Schools";
let n = text.search(/w3schools/i);
The result in n will be:
6
JavaScript Form Validation
HTML form validation can be done by JavaScript.
If a form field (fname) is empty, this function alerts a message, and returns false, to prevent
the form from being submitted.
Data Validation
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:



has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different ways.
63
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Server side validation is performed by a web server, after input has been sent to the server.
Client side validation is performed by a web browser, before input is sent to a web server.
HTML Constraint Validation
HTML5 introduced a new HTML validation concept called constraint validation.
HTML constraint validation is based on:



Constraint validation HTML Input Attributes
Constraint validation CSS Pseudo Selectors
Constraint validation DOM Properties and Methods
Constraint Validation HTML Input Attributes
Attribute
Description
disabled
Specifies that the input element should be disabled
max
Specifies the maximum value of an input element
min
Specifies the minimum value of an input element
pattern
Specifies the value pattern of an input
element
required
Specifies that the input field requires an
element
type
Specifies the type of an input element
Test Projects using Javascript: Technical documentation website, Digital Clock
Sample Project: Photo studio Website
<!DOCTYPE html>
<html lang="en">
64
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<title>HTML Project</title>
</head>
<body>
<!--Header(start)-->
<table id="header" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#4CAF50">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
<tr>
<td>
</td>
<td>
<font face="Comic sans MS" size="6">
<b>LENS KING PHOTOGRAPHY</b>
</font>
</td>
<td width="15%">
</td>
<td>
<a href="#home" style="text-decoration:none">
<font face="Verdana" size="5" color=black>
Home
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#about" style="text-decoration:none">
<font face="Verdana" size="5" color=black>
About
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#projects" style="text-decoration:none">
65
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<font face="Verdana" size="5" color=black>
Projects
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#achievements" style="text-decoration:none">
<font face="Verdana" size="5" color=black>
Achievements
</font>
</a>
</td>
<td>
|
</td>
<td>
<a href="#contact" style="text-decoration:none">
<font face="Verdana" size="5" color=black>
Contact
</font>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Header(end)-->
<!--Home(start)-->
<table id="home" border="1" width="100%"
cellpadding="20" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
<tr>
<td align="center" valign="middle">
<h3>
<font face="Times New Roman"
size="6" color="#ffffff">
WELCOME TO LENS KING PHOTOGRAPHY !
</font>
</h3>
66
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3942.7389161462247!
2d78.1352789147329!3d8.810580593672604!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1
!3m3!1m2!1s0x3b03ef7b8bb39277%3A0xb7529bf2f58fc2cf!2sThoothukudi%20New%20Bus%2
0Stand!5e0!3m2!1sen!2sin!4v1633584962386!5m2!1sen!2sin" width="200"
height="100" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
<h2>
<font face="Verdana" size="6"
color="#4CAF50">
<!-- Freelance Programmer -->
</font>
</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Home(end)-->
<!--About(start)-->
<table id="about" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="#4CAF50">
About Me
</font>
<hr color="#4CAF50" width="90">
</td>
</tr>
<tr>
<td width="40%">
<img src="img.png">
</td>
<td width="60%">
<font face="Verdana" size="4"
color="white">
Thanks for your interest, here
is a quick story of me and this
website.
67
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<hr color="black">
Abisheik Jebastin, An third year engineering student
and CEO of lens king photography. He
loves to take sttuning images
in most efficient ways. Apart from
Lens King photography, he has worked as a editor and freelance
photographer.
<hr color="black">
I do my work mainly in doing event photography and travel
photography are my stronger section.
Besides these we are organising events.
<hr color="black">
we have organised alot of small events like birthday
parties,retirement functions and also we have organised big events like MNC
conferences,weddings,public meetings etc.
Thanks again for reading this, because of people like you, it
exists and prospers!
<hr color="black">
Cheers,
<br>
<b>LENS KING PHOTOGRAPHY.</b>
</font>
</td>
</tr>
</table>
<hr color="black">
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
<!--About(end)-->
<!--Projects(start)-->
<table id="projects" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="black">
Projects
68
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
</font>
<hr color="black" width="90">
</td>
</tr>
<tr>
<td height="10">
<font face="Times New Roman"
size="5" color="black">
<ul>
<li>
Birthday
<a href="#" style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
wedding
<a href="#" style="text-decoration:none"
color="#c2c0c3">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
baptism
<a href="#" style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
state matches
<a href="#" style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
MNC conferences
<a href="#" style="text-decoration:none">
➲
</a>
</li>
<li>
69
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<hr color="#c2c0c3">
Weddings
<a href="#" style="text-decoration:none">
➲
</a>
</li>
<li>
<hr color="#c2c0c3">
Public events
<a href="#" style="text-decoration:none">
➲
</a>
</li>
</ul>
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
<hr color="#c2c0c3">
</font>
</td>
<td width="45%">
<img src="img.png" alt="Project" width="75%">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Projects(end)-->
<!--Achievement(start)-->
<table id="achievements" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center" valign="middle">
<font face="Verdana" size="7" color="#4CAF50">
Achievements
<hr color="#4CAF50" width="100">
</font>
</td>
</tr>
<tr>
<td>
70
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<font face="Verdana" size="4" color="white">
<ul>
<li>
<b>Intern at Studio A.</b>
<ul>
<li>
December,2020 - Present.
</li>
<li>
done an historical monument project.
</li>
</ul>
</li>
<li>
<hr color="black">
<hr color="black">
<hr color="black">
<b>Worked with V2K Photography .</b>
<ul>
<li>
August,2018 - 2019.
</li>
<li>
Worked in weddings.
</li>
</ul>
</li>
<li>
<hr color="black">
<hr color="black">
<hr color="black">
<b>Photography Mentor .</b>
<ul>
<li>
October,2019.
</li>
<li>
took classes for Basic and medium level Photographers.
</li>
<hr color="black">
<hr color="black">
<hr color="black">
<hr color="black">
<hr color="black">
</ul>
</li>
</ul>
71
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Achievement(end)-->
<!--Contact(start)-->
<table id="contact" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="80%" align="center">
<tr>
<td height="180" align="center"
valign="middle" colspan="2">
<font face="Verdana" size="7"
color="black">
Contact
</font>
<hr color="black" width="90">
</td>
</tr>
<tr>
<td align="left" valign="top">
<table border="0" width="60%" cellpadding="-40"
cellspacing="40" align="left" bgcolor="black" ;>
<tr>
<td width="30%">
<hr color="black">
<font face="Verdana" size="4"
color="#ffffff">
Name
</font>
</td>
<td width="70%">
<font face="Verdana" size="7
"
color="#ffffff">
<input type="text" size="40">
</font>
</td>
</tr><br>
<tr>
72
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<tr>
<td align="right" valign="top">
<table border="0" width="60%" cellpadding="10"
cellspacing="10" align="center" bgcolor="black">
<tr>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
<td width="30%">
<hr color="black">
<font face="Verdana" size="4"
color="#ffffff">Email
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4"
color="#ffffff">
Number
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<input type="number" size="12">
</font>
</td>
</tr>
<tr>
<td width="30%">
<font face="Verdana" size="4"
color="#ffffff">
Message
</font>
</td>
<td width="70%">
<font face="Verdana" size="4"
color="#ffffff">
<textarea rows="5"
cols="37">
</textarea>
</font>
</td>
</tr>
<tr>
<td width="30%">
</td>
<td width="70%">
<button type="Submit">
<font face="Verdana"
73
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
size="4" color="black">
<b>Submit</b>
</font>
</button>
<hr color="black">
<hr color="black">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Contact(end)-->
<!--Footer1(start)-->
<table id="footer" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="#4CAF50">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
<tr>
<td width="13%" valign="top">
<b>LinkedIn</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>GitHub</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
74
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<td>
|
</td>
<td width="13%" valign="top">
<b>HackerRank</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>GeeksforGeeks</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Twitter</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Instagram</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Email</b>
75
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
<a href="#" style="text-decoration:none">
➲
</a>
</td>
<td>
|
</td>
<td width="13%" valign="top">
<b>Website</b>
<a href="#" style="text-decoration:none">
➲
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Footer1(end)-->
<!--Footer2(start)-->
<table id="footer" border="0" width="100%"
cellpadding="0" cellspacing="0" bgcolor="black">
<tr>
<td>
<table border="0" cellpadding="15"
cellspacing="0" width="90%" align="center">
<tr>
<td width="80%" valign="top">
<font face="Verdana"
color="#4CAF50" size="5">
©Copyright 2050 by nobody.
All rights reserved.
</font>
</td>
<td width="10%">
<font face="arial" color="black" size="5">
<a href="#header" style="text-decoration:none">
<font face="Verdana" color="#4CAF50" size="6">
<b>TOP</b>
</font>
</a>
</font>
</td>
</tr>
</table>
</td>
76
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
</tr>
</table>
<!--Footer2(end)-->
</body>
</html>
Viva Questions - HTML
1) What is HTML?
HTML stands for Hyper Text Markup Language. It is a language of World Wide Web. It is a
standard text formatting language which is used to create and display pages on the Web. It
makes the text more interactive and dynamic. It can turn text into images, tables, links.
2) What are Tags?
HTML tags are composed of three things: an opening tag, content and ending tag. Some tags
are unclosed tags. HTML documents contain two things:
content, and tags.
When a web browser reads an HTML document, the browser reads it from top to bottom and
left to right. HTML tags are used to create HTML documents and render their properties.
Each HTML tags have different properties.
3) Do all HTML tags have an end tag?
No. There are some HTML tags that don't need a closing tag. For example: <image> tag,
<br> tag.
4) What is formatting in HTML?
The HTML formatting is a process of format the text for a better look and feel. It uses
different tags to make text bold, italicized, underlined.
5) How many types of heading does an HTML contain?
The HTML contains six types of headings which are defined with the <h1> to <h6> tags.
Each type of heading tag displays different text size from another. So, <h1> is the largest
heading tag and <h6> is the smallest one.
6) How to create a hyperlink in HTML?
The HTML provides an anchor tag to create a hyperlink that links one page to another page.
These tags can appear in any of the following ways:
Unvisited link - It is displayed, underlined and blue.
Visited link - It is displayed, underlined and purple.
Active link - It is displayed, underlined and red.
7) Which HTML tag is used to display the data in the tabular form?
The HTML table tag is used to display data in tabular form (row * column). It also manages
77
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
the layout of the page, e.g., header section, navigation bar, body content, footer section.
8) What are some common lists that are used when designing a page?
Ordered list - The ordered list displays elements in numbered format. It is represented by
<ol> tag.
Unordered list - The unordered list displays elements in bulleted format. It is represented by
<ul> tag.
Definition list - The definition list displays elements in definition form like in dictionary. The
<dl>, <dt> and <dd> tags are used to define description list.
9) What is the difference between HTML elements and tags?
HTML elements communicate to the browser to render text. When the elements are enclosed
by brackets <>, they form HTML tags. Most of the time, tags come in a pair and surround
content.
10) What is semantic HTML?
Semantic HTML is a coding style. It is the use of HTML markup to reinforce the semantics
or meaning of the content. For example: In semantic HTML <b> </b> tag is not used for
bold statement as well as <i> </i> tag is used for italic. Instead of these we use
<strong></strong> and <em></em> tags.
11) What is an image map?
Image map facilitates you to link many different web pages using a single image. It is
represented by <map> tag. We can define shapes in images that we want to make part of an
image mapping.
12) How to insert a copyright symbol on a browser page?
You can insert a copyright symbol by using &copy; or &#169; in an HTML file.
13) How to create a nested webpage in HTML?
The HTML iframe tag is used to display a nested webpage. In other words, it represents a
webpage within a webpage. The HTML <iframe> tag defines an inline frame.
14) Can you create a multi-colored text on a web page?
Yes. To create a multicolor text on a web page we can use <font color ="color"> </font> for
the specific texts we want to color.
15) Is it possible to change the color of the bullet?
The color of the bullet is always the color of the first text of the list. So, if we want to change
the color of the bullet, we must change the color of the text.
16) What is a marquee?
Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down,
left or right automatically.We should put the text which you want to scroll within the
<marquee>......</marquee> tag.
78
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
17) How many tags can be used to separate a section of texts?
Three tags are used to separate the texts.
<br> tag - Usually <br> tag is used to separate the line of text. It breaks the current line and
conveys the flow to the next line
<p> tag - The <p> tag contains the text in the form of a new paragraph.
<blockquote> tag - It is used to define a large quoted section. If you have a large quotation,
then put the entire text within <blockquote>.............</blockquote> tag.
18) How to make a picture of a background image of a web page?
To make a picture a background image on a web page, you should put the following tag code
after the </head> tag.
<body background = "image.gif">
19) What are empty elements?
HTML elements with no content are called empty elements. For example: <br>, <hr> etc.
20) What is the use of a span tag? Give one example.
The span tag is used for following things:
For adding color on text
For adding background on text
Highlight any color text
21)Does a <!DOCTYPE html> tag is a HTML tag?
No, the <!DOCTYPE html> declaration is not an HTML tag. There are many type of HTML
e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict,
XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc. So, <!DOCTYPE html>
is used to instruct the web browser about the HTML page.
22) Is there any need to change the web browsers to support HTML5?
No. Almost all browsers (updated versions) support HTML 5. For example Chrome, Firefox,
Opera, Safari, IE.
23) Which type of video formats are supported by HTML5?
HTML 5 supports three types of video format:
mp4
WebM
Ogg
24) Is audio tag supported in HTML 5?
Yes. It is used to add sound or music files on the web page. There are three supported file
formats for HTML 5 audio tag.
mp3,WAV,Ogg
25) If I do not put <!DOCTYPE html> will HTML 5 work?
No, the browser will not be able to identify that it is an HTML document and HTML 5 tags
do not function properly.
79
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Viva Questions – CSS
1) What is CSS?
CSS stands for Cascading Style Sheet. It is a popular styling language which is used with
HTML to design websites. It can also be used with any XML documents including plain
XML, SVG, and XUL.
2) What is the origin of CSS?
SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that
defines markup languages.
3) How can you integrate CSS on a web page?
There are three methods to integrate CSS on web pages.
Inline method - It is used to insert style sheets in HTML document
Embedded/Internal method - It is used to add a unique style to a single document
Linked/Imported/External method - It is used when you want to make changes on multiple
pages.
4) What are the advantages of CSS?
Bandwidth
Site-wide consistency
Page reformatting
Accessibility
Content separated from presentation
5) What are the limitations of CSS?
Ascending by selectors is not possible
Limitations of vertical control
No expressions
No column declaration
6) Why background and color are the separate properties if they should always be set
together?
It enhances the legibility of style sheets. The background property is a complex property in
CSS, and if it is combined with color, the complexity will further increase.
7) What is Embedded Style Sheet?
An Embedded style sheet is a CSS style specification method used with HTML. You can
embed the entire stylesheet in an HTML document by using the STYLE element.
8) What is a CSS selector?
It is a string that identifies the elements to which a particular declaration apply. It is also
referred as a link between the HTML document and the style sheet. It is equivalent of HTML
elements.
80
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
9) Name some CSS style components.
Selector
Property
Value
12) What is the use of CSS Opacity?
The CSS opacity property is used to specify the transparency of an element. In simple word,
you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as
the degree to which light is allowed to travel through an object.
13) Explain universal selector.
The universal selector matches the name of any of the element type instead of selecting
elements of a specific type.
14) Which command is used for the selection of all the elements of a paragraph?
The p[lang] command is used for selecting all the elements of a paragraph.
15) What is the use of % unit?
It is used for defining percentage values.
16) Name the property used to specify the background color of an element.
The background-color property is used to specify the background color of the element.
17) Name the property for controlling the image repetition of the background.
The background-repeat property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.
18) Name the property for controlling the image position in the background.
The background-position property is used to define the initial position of the background
image. By default, the background image is placed on the top-left of the webpage.
19) What is the use of ruleset?
The ruleset is used to identify that selectors can be attached with other selectors.
20) What is the difference between class selectors and id selectors?
An overall block is given to class selector while id selectors take only a single element
differing from other elements.
21) What are the advantages of External Style Sheets?
You can create classes for reusing it in many documents.
By using it, you can control the styles of multiple documents from one file.
In complex situations, you can use selectors and grouping methods to apply styles.
22) What is the CSS Box model and what are its elements?
The CSS box model is used to define the design and layout of elements of CSS.
The elements are:
81
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Margin - It removes the area around the border. It is transparent.
Border - It represents the area around the padding
Padding - It removes the area around the content. It is transparent.
Content - It represents the content like text, images, etc.
23) What is the float property of CSS?
The CSS float property is used to move the image to the right or left along with the texts to
be wrapped around it. It doesn't change the property of the elements used before it.
24) How to restore the default property value using CSS?
In short, there is no easy way to restore to default values to whatever a browser uses.
The closest option is to use the 'initial' property value, which restores the default CSS values,
rather than the browser's default styles.
25) What is the purpose of the z-index and how is it used?
The z-index helps to specify the stack order of positioned elements that may overlap one
another. The z-index default value is zero and can take on either a positive or negative
number.
26) What is the difference between CSS2 and CSS3?
The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections
which are also known as modules. Unlike CSS2, CSS3 modules are supported by many
browsers.
Viva Questions – Javascript
1) What is JavaScript?
JavaScript is a scripting language. It is different from Java language. It is object-based,
lightweight, cross-platform translated language. It is widely used for client-side validation.
The JavaScript Translator (embedded in the browser) is responsible for translating the
JavaScript code for the web browser.
2) List some features of JavaScript.
Lightweight
Interpreted programming language
Good for the applications which are network-centric
Complementary to Java
Complementary to HTML
Open source
3) Who developed JavaScript, and what was the first name of JavaScript?
JavaScript was developed by Brendan Eich, who was a Netscape programmer. Brendan Eich
developed this new scripting language in just ten days in the year September 1995. At the
time of its launch, JavaScript was initially called Mocha. After that, it was called Live Script
and later known as JavaScript.
4) List some of the advantages of JavaScript.
82
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
Server interaction is less
Feedback to the visitors is immediate
Interactivity is high
Interfaces are richer
5) List some of the disadvantages of JavaScript.
No support for multithreading
No support for multiprocessing
Reading and writing of files is not allowed
No support for networking applications.
6) Define a named function in JavaScript.
The function which has named at the time of definition is called a named function. For
example
function msg()
{
document.writeln("Named Function");
}
msg();
7) Define anonymous function
It is a function that has no name. These functions are declared dynamically at runtime using
the function operator instead of the function declaration. The function operator is more
flexible than a function declaration. It can be easily used in the place of an expression.
8) Can an anonymous function be assigned to a variable?
Yes, you can assign an anonymous function to a variable.
9) In JavaScript what is an argument object?
The variables of JavaScript represent the arguments that are passed to a function.
10) Define closure.
In JavaScript, we need closures when a variable which is defined outside the scope in
reference is accessed from some inner scope.
11) If we want to return the character from a specific index which method is used?
The JavaScript string charAt() method is used to find out a char value present at the specified
index. The index number starts from 0 and goes to n-1, where n is the length of the string.
The index value can't be a negative, greater than or equal to the length of the string. For
example:
var str="Javatpoint";
document.writeln(str.charAt(4));
12) What is the difference between JavaScript and JScript?
Netscape provided the JavaScript language. Microsoft changed the name and called it JScript
83
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
to avoid the trademark issue. In other words, you can say JScript is the same as JavaScript,
but Microsoft provides it.
13) How to write a hello world example of JavaScript?
A simple example of JavaScript hello world is given below. You need to place it inside the
body tag of HTML.
<script type="text/javascript">
document.write("JavaScript Hello World!");
</script>
14) What are the key differences between Java and JavaScript? / How is JavaScript different
from Java?
JavaScript is a lightweight programming language (most commonly known as scripting
language) developed by Netscape, Inc. It is used to make web pages interactive. It is not a
part of the Java platform. Following is a list of some key differences between Java and
JavaScript
15) How to use external JavaScript file?
I am assuming that js file name is message.js, place the following script tag inside the head
tag.
<script type="text/javascript" src="message.js"></script>
16) Is JavaScript case sensitive language?
Yes, JavaScript is a case sensitive language.
17) What is BOM?
BOM stands for Browser Object Model. It provides interaction with the browser. The default
object of a browser is a window. So, you can call all the functions of the window by
specifying the window or directly. The window object provides various properties like
document, history, screen, navigator, location, innerHeight, innerWidth,
18) What is DOM? What is the use of document object?
DOM stands for Document Object Model. A document object represents the HTML
document. It can be used to access and change the content of HTML.
19) What is the use of window object?
The window object is created automatically by the browser that represents a window of a
browser. It is not an object of JavaScript. It is a browser object.
20) What is the use of history object?
The history object of a browser can be used to switch to history pages such as back and
forward from the current page or another page. There are three methods of history object.
21) How to write a comment in JavaScript?
There are two types of comments in JavaScript.
Single Line Comment: It is represented by // (double forward slash)
Multi-Line Comment: Slash represents it with asterisk symbol as /* write comment here */
84
Department of Computer Science and Engineering, Francis Xavier Engineering College – Skill Training
22) How to create a function in JavaScript?
To create a function in JavaScript, follow the following syntax.
function function_name(){
//function body
}
23) What are the different data types present in JavaScript?
There are two types of data types in JavaScript:
Primitive data types
Non- Primitive data types
24) what is Object?
The Object is a non-primitive data type. It is used to store collections of data. An object
contains properties, defined as a key-value pair. A property key (name) is always a string, but
the value can be any data type, such as strings, numbers, Booleans, or complex data types
like arrays, functions, and other objects.
25) What is Array?
The Array data type is used to represent a group of similar values. Every value in an array
has a numeric position, called its index, and it may contain data of any data type-numbers,
strings, Booleans, functions, objects, and even other arrays. The array index starts from 0 so
that the first array element is arr[0], not arr[1].
26) What is the difference between == and ===?
The == operator checks equality only whereas === checks equality, and data type, i.e., a
value must be of the same type.
27) How to write HTML code dynamically using JavaScript?
The innerHTML property is used to write the HTML code using JavaScript dynamically.
example:
document.getElementById('mylocation').innerHTML="<h2>This is heading using</h2>
28) What does the isNaN() function?
The isNan() function returns true if the variable value is not a number.
29) What is the output of 10+20+"30" in JavaScript?
3030 because 10+20 will be 30. If there is numeric value before and after +, it treats as binary
+ (arithmetic operator).
30) What is the output of "10"+20+30 in JavaScript?
102030 because after a string all the + will be treated as string concatenation operator (not
binary +).
85