INTERNSHIP REPORT

ON

WEB DEVELOPMENT&JAVA SCRIPT

Submitted to

CHADALAWADA RAMANAMMA ENGINEERING COLLEGE

(AUTONOMOUS) In partial fulfilment of the requirements for the Award of Degree
of

BACHELOR OF TECHNOLOGY
in
COMPUTER SCIENCE AND ENGINEERING
By

V.Venkata Kishore

Regd. No:
22P11A05B2

Under the Supervision

Of

Mrs. C. Saraswati

Assistant

Professor

(Duration: 6th June, 2024 to Aug 6th ,2024)

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

CHADALAWADA RAMANAMMA ENGINEERING COLLEGE

(AUTONOMOUS)
(Accredited by NAAC, Approved by AICTE, New Delhi, Affiliated to JNTU Anantapur)
Renigunta road, Tirupati – 517 506, Andhra Pradesh, India
2022-2026
 CHADALAWADA RAMANAMMA ENGINEERING COLLEGE
(AUTONOMOUS)
(Accredited by NAAC, Approved by AICTE, New Delhi, Affiliated to JNTU Anantapur)
Renigunta road, Tirupati – 517 506, Andhra Pradesh, India

Department of Computer Science and Engineering

CERTIFICATE

This is to certify that the Internship report on “WEB DEVELOPMENT/JAVASCRIPT ”, is

a Bonafide work done by V Venkata Kishore (Regd.No: 22P11A05B2) in the Department
of “COMPUTER SCIENCE AND ENGINEERING” , and is submitted to
Chadalawada Ramanamma Engineering College (Autonomous), Tirupati during the
Academic year 2024-2025.

Internship Coordinator Head of the Department

Mrs. C.Saraswathi, M.tech Dr. D. Shoba Rani,
Assistant Professor Ph.D. Professor
CERTIFICATE OF COMPLETION
 ACKNOWLEDGEMENT

First, I would like to thank Saloni Madam, HR, of EXCELR for giving me the opportunity to
do an internship within the organization.

I also would like all the people that worked along with me EXCELR with their patience and
openness they created an enjoyable working environment.

It is indeed with a great sense of pleasure and immense sense of gratitude that I acknowledge
the help of these individuals.

I would like to thank our Chairman Dr Chadalawada Krishna Murthy sir for the facilities
provided to accomplish this internship.

I am highly indebted to Principal Dr P. Ramesh Kumar sir for providing the opportunity to
do my internship course and others.

I am very much thankful to Dean (Academics) Dr C. Subhas sir for his continuous support in
academics.

I would like to thank the Head of the Department Dr. D. SHOBA RANI, madam for his
constructive criticism throughout my internship.

I would like to thank Mrs. C. Saraswathi Madam, internship coordinator, Department of CSE
for her support and advices to complete the internship in above said organization.

I am sincerely thankful to my Guide Mrs. C. Saraswathi Madam, Department of CSE for her
guidelines and support from beginning to end of internship.

I am extremely great full to the department staff members and friends who helped me in
successful completion of this internship.
 DECLARATION

I hereby declare that the Internship Report entitled “WEB

DEVELOPMENT/JAVASCRIPT” is done by V Venkata Kishore bearing the roll number
22P11A0594 towards partial fulfillment of the requirement for the Award of the Degree of
Bachelor of Technology in Computer Science and Engineering, and is submitted to
CHADALAWADA RAMANAMMA ENGINEERING COLLEGE OF JNTUA, TIRUPATI.

I further declare that this internship Report has not been Previously submitted before
either in part or full for the award of any degree to any organization or any other
Universities.

(V Venkata Kishore)
Regd.No:22P11A05B2
 ABSTRACT

Web Development of a web application aimed at enhancing user experience through a

responsive and interactive interface. The application integrates modern web technologies,
including HTML5, CSS3, and JavaScript, along with frameworks such as React for the front
end and Node.js for the back end. The primary objective is to provide a seamless platform
that facilitates efficient user interaction and data management.

Key features include user authentication, real-time data updates, and a dynamic content
management system. The project also emphasizes best practices in web development,
focusing on performance optimization, accessibility, and security measures. Through rigorous
testing and user feedback, the application has been refined to ensure usability across various
devices and browsers.

This report outlines the development process, challenges encountered, and solutions
implemented, providing insights into effective web application design and deployment. The
final product not only meets the initial requirements but also sets a foundation for future
enhancements and scalability.
 WEEKLY OVERVIEW OF INTERNSHIP ACTIVITIES

1st DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

24/06/2024 Monday A basic introduction towards web development

W
25/06/2024 Tuesday Introduction of HTML
E
26/06/2024 Wednesday HTML links, images, tables
E
27/06/2024 Thursday HTML Attributes, Headings, Paragraph
K
28/06/2024 Friday HTML attributes, paragraph

29/06/2024 Saturday HTML lists, classes, block& inline

2N DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

D 01/07/2024 Monday HTML form attributes, form elements& form

W 02/07/2024 Tuesday HTML input types, comments
E 03/07/2024 Wednesday HTML input form Attributes
E 04/07/2024 Thursday HTML Responsive web design
K 05/07/2024 Friday HTML tables
06/07/2024 Saturday HTML form elements& forms

3r DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

d 08/07/2024 Monday A basic introduction about CSS
W 09/07/2024 Tuesday CSS-inline, internal& external

E 10/07/2024 Wednesday CSS fonts, border, margin& background

E 11/07/2024 Thursday CSS backgrounds, padding

K 12/07/2024 Friday CSS box model

13/07/2024 Saturday Practice session

4th DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

W 15/07/2024 Monday Styling the links and buttons, display

E 16/07/2024 Tuesday Properties in CSS

E 17/07/2024 Wednesday CSS colours (REB, HSL, HSL)

K 18/07/2024 Thursday CSS tables, links

19/07/2024 Friday CSS lists, layout, text effects

20/07/2024 Saturday Bootstrap

5t DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

h
22/07/2024 Monday Introduction to JavaScript
W 23/07/2024 Tuesday Variables and data types in JS
E 24/07/2024 Wednesday Arithmetic, comparison, logical operators in JS
E 25/07/2024 Thursday Loops in JS
K 26/07/2024 Friday Arrays, Functions in JS

27/07/2024 Saturday Object Oriented Programming in JS

6t DATE DAY NAME OF THE TOPIC/MODULE COMPLETED

h
29/07/2024 Monday Document Object Model in JavaScript
W 30/07/2024 Tuesday Working with DOM
E 31/07/2024 Wednesday Event handling in JavaScript
E 01/07/2024 Thursday JavaScript Strings& String methods
K 02/07/2024 Friday Functions in JavaScript

03/07/2024 Saturday Promises in JavaScript

 INDEX

S.NO Contents Page.No

1 A basic introduction towards web development 1
Introduction of HTML 3
HTML links, images, tables, Attributes, Headings, Paragraph 5
HTML attributes, paragraph, lists, classes, block& inline 6
2 HTML form attributes, form elements& form 7
HTML input types, comments 7
HTML input form Attributes& Semantic elements 8
HTML Responsive web design 8
HTML tables& form elements& forms 9
3 A basic introduction about CSS 10
CSS-inline, internal& external& box model 11
fonts, border, margin& background& padding 13
4 Styling the links and buttons, display& properties 14
CSS colours (REB, HSL, HSL) & tables, links 16
CSS lists, layout, text effects 20
Bootstrap 22
5 Introduction to JavaScript 23
Variables and data types in JS 25
Arithmetic, comparison, logical& loops operators 26
Arrays, Functions &OOPS in JS 28
6 Document Object Model in JavaScript 29
Event handling, Strings& String methods in JavaScript 32
Functions, Promises in JavaScript 36
7 Conclusion 38
8 References 39
 WEW

WEB DEVELOPMENT AND JAVA SCRIPT

1.A basic introduction towards web development

Web is the process of building and maintaining websites. It encompasses a variety of tasks
and skills, which can be broadly categorized into two main areas: frontend development
and backend development.

1. Frontend Development
This is everything that users see and interact with in their web browsers. It involves:
 HTML (Hyper Text Markup Language): The structure of web pages. It defines
elements like headings, paragraphs, links, and images.
 CSS (Cascading Style Sheets): The styling of web pages. CSS controls the layout,
colors, fonts, and overall visual appearance.

 JavaScript: The scripting language that adds interactivity to web pages. With
JavaScript, you can create dynamic content, animations, and handle user events.

2. Backend Development
This involves the server-side of web applications, which users don’t see. Key components
include:
 Server: A computer that hosts the website and manages requests from users'
browsers.
 Database: A system for storing and retrieving data. Common databases include
MySQL, PostgreSQL, and MongoDB.
 Programming Languages: Languages like Python, Ruby, PHP, or Node.js are used to
write the logic that processes requests, interacts with databases, and sends
responses back to the frontend.
3. Full Stack Development

Full stack developers work on both the frontend and backend, giving them a comprehensive
view of the web application.

4. Tools and Technologies

 Version Control: Systems like Git help track changes in code and collaborate with
others.
 Frameworks: Tools like React (frontend) and Express (backend) streamline
development processes and provide pre-built components.
 Content Management Systems (CMS): Platforms like WordPress and Drupal make it
easier to build and manage websites without deep technical knowledge.

Department of CSE, Page|1

 WEB DEVELOPMENT AND JAVA SCRIPT

5. Development Process
The web development process typically includes:

 Planning: Understanding the requirements and goals of the project.

 Design: Creating wireframes and prototypes.
 Development: Writing the code for both frontend and backend.
 Testing: Ensuring the website works correctly across devices and browsers.
 Deployment: Making the website live on the internet.

 Maintenance: Regularly updating and fixing issues.

1.1 Introduction of HTML

HTML is the standard markup language for creating Web pages.

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.

1.2 HTML links, images, tables

HTML tables allow web developers to arrange data into rows and columns.
Example
A simple HTML table:
<!DOCTYPE html>
<html>

<style>
table, th, td
{
border:1px solid black;
}
</style>

Department of CSE, Page|2

 WEB DEVELOPMENT AND JAVA SCRIPT

<body>
<h2>A basic HTML table</h2>
<table style="width:100%">

<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>

</table>
<p>To understand the example better, we have added borders to the table.</p</body>
</html>
LINKS
The <link> tag defines the relationship between the current document and an external
resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to your
website.
The <link> element is an empty element, it contains attributes only.
<head>
<link rel="stylesheet" href="styles.css">
</head>
IMAGES
Images can improve the design and the appearance of a web page.
<!DOCTYPE html>

<html>
<body>

<h2>HTML Image</h2>

<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>

Department of CSE, Page|3

 </html>

Department of CSE, Page|4

 WEB DEVELOPMENT AND JAVA SCRIPT

1.3 HTML Attributes, Headings, Paragraph

Headings:-
HTML headings are titles or subtitles that you want to display on a webpage.These tags are
typically placed inside the body tag. HTML offers six heading tags, from <h1> to <h6>, each
displaying the heading in a different font size.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Paragraphs:-
The <p> tag in HTML signifies a paragraph. Enclosed within the opening <p> and closing </p>
tags, any content is recognized as a paragraph. As a block-level element, a new paragraph
inherently starts on a fresh line, with browsers intuitively adding space before and after a
paragraph for enhanced readability.

Syntax:
<p> Content </p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>The p tag</title>

</head>
<body>
<p>A Computer Science portal for geeks.</p>
<p>It contains well written, well thought articles.</p>

</body>
</html>
Output:
-

Department of CSE, Page|5

 WEB DEVELOPMENT AND JAVA SCRIPT

Attributes:-
HTML attributes provide additional information about HTML elements.
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"

<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href
attribute:</p>
<a href="https://www.w3schools.com">Visit W3Schools</a>
</body>
</html>

Output:-
The href Attribute
HTML links are defined with the a tag. The link address is specified in the href attribute:
Inline Elements:-
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
<span>Hello World</span>
Output:-

Department of CSE, Page|6

 WEB DEVELOPMENT AND JAVA SCRIPT

This is an inline span Hello World element inside a paragraph.

The SPAN element is an inline element, and will not start on a new line and only takes up as
much width as necessary.

HTML lists:-
An HTML list is a structured record of related information used to display data or
information on web pages in an ordered or unordered form. Lists are fundamental for
organizing content in a clear and readable way.

Types of HTML Lists

There are three main types of lists in HTML:

1. Unordered Lists
2. Ordered Lists
3. Description

fig:- html lists

HTML Class Attribute:-

The HTML class attribute is used to assign one or more CSS classes to an HTML element. By
using classes, you can group elements together and apply consistent styles across them,
streamlining both design and functionality.

Department of CSE, Page|7

 WEB DEVELOPMENT AND JAVA SCRIPT

2.HTML form attributes, form elements& form

HTML Forms:-
HTML Forms use the <form> tag to collect user input through various interactive controls.
These controls range from text fields, numeric inputs, and email fields to password fields,
checkboxes, radio buttons, and submit buttons.
<!DOCTYPE html>
<html>

<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>

<label for="lname">Last name:</label><br>

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>

fig:- Basic HTML Form

2.1 HTML input types, comments

Department of CSE, Page|8

 WEB DEVELOPMENT AND JAVA SCRIPT

HTML input types:-

Definition and
Usage
The <input> tag specifies an input field where the user can enter
data. The <input> element is the most important form element.
The different input types are as follows:
 <input type="button">
 <input type="checkbox">

 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">

Fig:-input type

Html Comments:-
HTML comments allows you to add notes, explanations, or instructions within the code
without affecting the appearance of the webpage. These comments are not visible on the
rendered webpage but are present in the source code, making it easier for developers to
collaborate, debug, and maintain clean code.

2.2 Html Responsive Web Design

HTML Responsive Web Design is a modern approach to web development that ensures web
pages look great on any device, from phones and tablets to desktop computers. It focuses
on making HTML elements automatically adjust—resizing, hiding, or repositioning based on
the screen size. This approach guarantees a seamless and visually appealing user experience
across various devices.
In this article, we’ll explore practical examples and techniques for creating HTML responsive
web designs that adapt perfectly to different screen sizes, ensuring optimal functionality.
Example

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!DOCTYPE html>
<html>
<head>

Department of CSE, Page|9

 WEB DEVELOPMENT AND JAVA SCRIPT

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<h2>Setting the Viewport</h2>

<p>This example does not really do anything, other than showing you how to add the
viewport meta element.</p>
</body></html>

2.3 HTML tables

An Html Table Is An Arrangement Of Data In Rows And Columns In Tabular Format. Tables
Are Useful For Various Tasks, Such As Presenting Text Information And Numerical Data. A
Table Is A Useful Tool For Quickly And Easily Finding Connections Between Different Types
Of Data. Tables Are Also Used To Create Databases.

Fig: html tables

Department of CSE, P a g e | 10
 WEB DEVELOPMENT AND JAVA SCRIPT

Introduction about CSS

A basic introduction about CSS
CSS, or Cascading Style Sheets, is a stylesheet language used to control the presentation and
layout of HTML documents. It allows you to apply styles—such as colors, fonts, spacing, and
positioning—to your web content, making it visually appealing and user-friendly.

Key Features of CSS:

1. Separation of Content and Style: CSS separates the design aspects from the
HTML structure, allowing for easier maintenance and updates.

2. Selectors: CSS uses selectors to target HTML elements. Common selectors include
element selectors (e.g., h1), class selectors (e.g., .classname), and ID selectors (e.g.,
#idname).

3. Box Model: CSS describes how elements are structured in a box model, including
margins, borders, padding, and the actual content area.

4. Responsive Design: With media queries, CSS enables responsive design, allowing
websites to adapt to different screen sizes and devices.

5. Styling Capabilities: CSS provides a wide range of properties for styling, including
color, typography, layout (flexbox and grid), transitions, and animations.

6. Cascading Nature: The "cascading" aspect allows multiple stylesheets to apply, with
rules that determine which styles take precedence based on specificity and order.

3.1 CSS-inline, internal& external

CSS is used to add styles on web pages that contain HTML elements. There are three
methods to add styles on web pages, these are – Inline, Internal, and External. In this article,
we will see the differences between Inline, Internal, and External CSS styles.

Table of Content
 Inline CSS
 Internal CSS

 External CSS
 Inline, Internal and External CSS Use Cases

Department of CSE, P a g e | 11
 WEB DEVELOPMENT AND JAVA SCRIPT

Inline CSS:
Inline CSS is a way of defining the styling of an HTML element by adding CSS rules
directly to the element’s tag using the “style” attribute. It is used for quick and
simple styling changes to specific elements, without creating a separate CSS file.

Internal CSS:
Internal CSS, also known as embedded CSS, involves adding CSS rules directly within
the <style> element in the <head> section of an HTML document. It allows styling
specific to that document

External CSS:
External CSS is used to place CSS code in a separate file and link to the HTML
document. To use external CSS, create a separate file with the .css file extension that
contains your CSS rules. You can link this file to your HTML document using the “link”
tag in the head section of your HTML document.

3.2 CSS fonts, border, margin& background

Fonts
You can control the typography of your text using various CSS properties:
 font-family: Specifies the font
type. css
p{
font-family: Arial, sans-serif;
}

}
 font-weight: Defines the thickness of the font (e.g., normal,
bold). css
strong {
font-weight: bold;
}
Borders
Borders can enhance the visual structure of elements:
 border: A shorthand property for setting the width, style, and
color. css

Department of CSE, P a g e | 12
 WEB DEVELOPMENT AND JAVA SCRIPT

Copy code
div {
border: 2px solid black;
}

Margin
Margins create space outside of an element's border:
 margin: A shorthand property for setting margins on all sides.
 h2 { can specify individual
margins: Background:-
Background properties can style the background of an element:
 background-image: Adds an image as the
background. css
div {
background-image: url('image.jpg');
}

margin: 20px;

 You

Fig:- CSS fonts, border, margin&

background

CSS backgrounds, padding

1. CSS Backgrounds
The background property in CSS is a shorthand that allows you to define several background-
related properties in one line. Here are the individual background properties:
background-position: Sets the initial position of the background image (e.g., top, bottom,
center, or specific coordinates).

Department of CSE, P a g e | 13
 WEB DEVELOPMENT AND JAVA SCRIPT

2. CSS Padding
padding controls the space inside an element, between the element’s content and its
border. You can define padding for all sides at once, or individually for each side:
 padding-right: Padding on the right side.

 padding-bottom: Padding at the bottom.

 padding-left: Padding on the left side.

Fig:- CSS backgrounds, padding

CSS box model

Explanation of the different parts:

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

Fig:- box model

Department of CSE, P a g e | 14
 WEB DEVELOPMENT AND JAVA SCRIPT

4. Styling the links and buttons, display

The mistake in your SQL CREATE TABLE statement lies in the way you're defining the
DEFAULT value for the date column. The DEFAULT clause should specify an actual default
value. Since datetime columns often default to the current date and time, you can use the
CURRENT_TIMESTAMP as the default value.
CREATE TABLE dummy_table
( id INT PRIMARY KEY,
date DATETIME DEFAULT CURRENT_TIMESTAMP);

Properties in CSS
CSS (Cascading Style Sheets) properties define the styles that are applied to HTML elements.
Here’s an overview of some common CSS properties, grouped by category

1. Text Properties:text-decoration: Adds decorations like underlining, overlining, or

strikethrough to text.
css
text-decoration: underline;

2. Background Properties:
 background-color: Sets the background color of an
element. css
background-color: #f0f0f0;
 background-image: Specifies an image to use as the
background. css
background-image: url('image.jpg');
 background-size: Defines the size of the background
image. css
background-size: cover;

3. Box Model Properties:

 margin: Defines the space outside the element's

border. css

Department of CSE, P a g e | 15
 WEB DEVELOPMENT AND JAVA SCRIPT
margin: 10px;

 padding: Specifies the space between the element's content and its
border. css

padding: 20px;
 border: Sets the border around the
element. css
border: 1px solid black;
 width: Sets the width of the
element. css
width: 100px;

4. Positioning Properties:
 position: Specifies how an element is positioned in the document (static, relative,
absolute, fixed, sticky).
css
position: absolute;
 top, right, bottom, left: Specifies the offset from the respective edges of the parent
element or the browser window (used with position).
css

top: 10px;
left: 20px;
 z-index: Defines the stack order of elements (higher numbers appear on
top). z-index: 10;

7. Visibility and Opacity:

 visibility: Controls whether the element is visible or
hidden. css
visibility: hidden;
 opacity: Sets the transparency of the element (0 to
1). css
opacity: 0.5;

Department of CSE, P a g e | 16
 WEB DEVELOPMENT AND JAVA SCRIPT

4.1 CSS colours (REB, HSL, HSL)

1. RGB (Red, Green, Blue)
The rgb() function defines colors using the RGB color model. Each of the three parameters
represents the intensity of red, green, and blue, on a scale from 0 to 255.
Syntax:

css
Copy code

color: rgb(red, green,

blue); RGBA:
You can also specify an alpha channel to control the opacity, ranging from 0 (fully
transparent) to 1 (fully opaque).
Syntax for RGBA:
color: rgba(red, green, blue, alpha);

2. HEX (Hexadecimal)
Colors can also be specified using hexadecimal values, which are a combination of six
characters (0-9, A-F). This format represents the amount of red, green, and blue in a color.
Syntax:
color: #RRGGBB;
 RR: Red (00 to FF)
 GG: Green (00 to FF)
 BB: Blue (00 to
FF) Example:
Shorthand HEX:
If the values for each color component are repeated (e.g., #FF0000), you can shorten the HEX
color by using only 3 characters.
Example:
color: #F00; /* Shorthand for #FF0000 (Red) */

3. HSL (Hue, Saturation, Lightness)

Department of CSE, P a g e | 17
 WEB DEVELOPMENT AND JAVA SCRIPT
HSL stands for Hue, Saturation, and Lightness. The hsl() function defines colors based on these
three properties:
 Hue: Represents the color type and is a degree on the color wheel (0-360).
o 0 = red
o 120 = green
o 240 = blue

 Saturation: A percentage value (0% is grayscale, 100% is fully saturated color).

 Lightness: A percentage value (0% is black, 100% is
white). Syntax:
color: hsl(hue, saturation%, lightness%);
Example:
color: hsl(0, 100%, 50%); /* Red */
color: hsl(0, 0%, 50%); /* Gray (no hue, 50% lightness) */
HSLA:
You can also use an alpha channel with HSL, similar to RGBA, to control the opacity.
Syntax for HSLA:
color: hsla(hue, saturation%, lightness%, alpha);
Example:
color: hsla(240, 100%, 50%, 0.5); /* Semi-transparent blue */

CSS tables, links:-

1. CSS for Tables
CSS allows you to style tables to make them visually appealing and more readable. You can
style elements like table borders, spacing, and background colors.
Basic Table Elements:
 <table>: Defines the table.

 <th>: Defines a table header cell.

 <td>: Defines a table data cell.
 <tr>: Defines a table row.

Department of CSE, P a g e | 18
 WEB DEVELOPMENT AND JAVA SCRIPT

4.2 CSS lists, layout, text effects

1. CSS Lists:-
CSS allows you to style both ordered (<ol>) and unordered (<ul>) lists and their items (<li>).
You can control the list marker, spacing, and alignment.

Example: Basic List

html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Example of Custom List Markers:

ul.custom {
list-style-type: none; /* Remove default bullets */
}

ul.custom li::before {
content: "•"; /* Add custom bullet using content */
color: blue;
font-size: 20px;
margin-right:
10px;
}

Department of CSE, P a g e | 19
 WEB DEVELOPMENT AND JAVA SCRIPT
2. CSS Layout
CSS layout techniques are crucial for structuring and organizing the layout of a web page.
a) Box Model
The CSS box model includes margins, borders, padding, and the content area.
Understanding it helps manage spacing and dimensions.
div {
width: 200px;
padding: 10px;
border: 1px solid
black; margin: 20px;
}
b) Flexbox
Flexbox (display: flex;) is a layout model that provides an efficient way to align and distribute
items in a container.
Flexbox Example:
.container {
display:
flex;
justify-content: space-between; /* Space between items
*/ align-items: center; /* Center vertically */
}

.item {
padding: 10px;
background-color: lightgray;

width: 100px;
text-align:
center;
}
c) CSS Grid
CSS Grid is a two-dimensional layout system that allows you to create complex layouts with
rows and columns.

Department of CSE, P a g e | 20
 WEB DEVELOPMENT AND JAVA SCRIPT

CSS Grid Example:

css
Copy code

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 20px; /* Space between items */
}

3. CSS Text Effects

CSS offers several ways to enhance and manipulate text on your web page.
a) Text Shadow
The text-shadow property adds shadow effects to text.

h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

4.3 Bootstrap
Bootstrap is a popular open-source CSS framework that helps developers build responsive,
mobile-first websites quickly and efficiently. It includes a wide range of pre-designed UI
components, layout utilities, and powerful JavaScript plugins. It’s particularly useful for
creating consistent designs across multiple devices and browsers.
Key Features of Bootstrap:
1. Responsive Grid System
2. Pre-built Components
3. CSS Helpers and Utilities

4. JavaScript Plugins
5. Customizable via Sass or LESS

1. Grid System in Bootstrap

Bootstrap’s grid system is one of its core features. It’s a flexible, 12-column grid that helps
you create responsive layouts.

Department of CSE, P a g e | 21
 WEB DEVELOPMENT AND JAVA SCRIPT

Basic Grid Structure:

html
<div class="container">

<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>

</div>
 container: Provides a responsive fixed-width container or a fluid container.
 row: Wraps columns and ensures proper alignment.
 col: Represents a column that takes equal space in the row.

2. Bootstrap Components
Bootstrap comes with a variety of pre-designed components like buttons, navbars,
modals, cards, and more.
a) Buttons
Bootstrap provides different button styles and colors.
html
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>

 btn: Base class for buttons.

 btn-primary, btn-secondary, etc., apply different color schemes.

b) Navbar
The navbar component helps you build responsive navigation bars.

3. Bootstrap CSS Helpers and Utilities

Bootstrap provides utility classes for quickly applying spacing, alignment, colors,
display, and more without writing custom CSS.
a) Spacing Utilities

You can use margin (m-) and padding (p-) utility classes to adjust the spacing.

Department of CSE, P a g e | 22
 WEB DEVELOPMENT AND JAVA SCRIPT

html
<div class="m-3 p-3 bg-light">Margin and Padding Example</div>

4. Bootstrap JavaScript Plugins

Bootstrap includes several JavaScript-based components such as modals, tooltips, and
carousels. These components often require Bootstrap’s JavaScript and jQuery to function.

Department of CSE, P a g e | 23
 WEB DEVELOPMENT AND JAVA SCRIPT

5. Introduction to JavaScript

JavaScript is a versatile, high-level, interpreted programming language that is primarily used

to create interactive effects within web browsers. It is a core technology of the web,
alongside HTML and CSS, and enables developers to enhance the functionality and
interactivity of web pages.
JavaScript can be used for a wide range of tasks, including:
 Manipulating web page content (DOM manipulation)
 Handling events like clicks and form submissions
 Validating user input before sending it to the server

 Creating animations and dynamic user interfaces

 Making HTTP requests for asynchronous loading of data (AJAX)
 Working with APIs and server-side applications (Node.js)

Key Features of JavaScript:

1. Client-Side Scripting Language: JavaScript code is executed in the user's browser,
allowing immediate feedback and interactivity.
2. Dynamically Typed Language: Variable types are determined at runtime.
3. Prototype-Based Object Orientation: JavaScript uses prototypes rather than classical
inheritance.
4. Event-Driven Programming: JavaScript reacts to user actions (e.g., clicks, key presses).
5. Functional Programming: JavaScript treats functions as first-class citizens, meaning
functions can be assigned to variables, passed as arguments, and returned from
other functions.
JavaScript Basics

5.1 Variables and datatypes in JS

Variables store data values. You can declare variables using var, let, or
const. javascript
// Declaring variables
var name = "Alice"; // Old way, function-scoped
let age = 25; // Block-scoped
const country = "USA";

Department of CSE, P a g e | 24
 WEB DEVELOPMENT AND JAVA SCRIPT

5.2 JavaScript Control Structures

a) Conditional Statements
Conditional statements like if, else if, else, and switch allow for decision-making in your
code.
Javascript
let age = 18;

if (age < 18) {

console.log("Minor");
} else if (age == 18) {
console.log("Just turned adult");
} else {
console.log("Adult");
}
b) Loops
Loops enable you to repeat a block of code multiple
times. for loop:
javascript
for (let i = 0; i < 5; i++) {
console.log(i); // Prints numbers 0 to 4
}
5.3 JavaScript Objects and Arrays

a) Objects
Objects are collections of key-value pairs. They represent real-world entities in a structured
format.
javascript
let person = {
name: "Alice",
age: 30,
greet: function() {
return "Hello, " + this.name;
}
};

console.log(person.name); // Accessing properties

console.log(person.greet()); // Calling a method

Department of CSE, P a g e | 25
 WEB DEVELOPMENT AND JAVA SCRIPT

7. JavaScript and Progressive Web Apps (PWAs):-

Progressive Web Apps (PWAs) use modern web technologies to provide an app-like
experience in the browser. JavaScript plays a key role in building PWAs, enabling
features like:
 Service Workers: JavaScript files that run in the background and provide features like
ofline capabilities, caching, and push notifications.
 Manifest Files: JSON files that define the app’s metadata, allowing the browser to
present it as an installable app.
Javascript

Arithmetic, comparison, logical operators in JS:-

Arithmetic, Comparison, and Logical Operators in JavaScript
JavaScript offers a wide range of operators that allow you to perform various operations,
such as arithmetic calculations, comparisons, and logical operations. Here's an overview of
these operators:

1. Arithmetic Operators
Arithmetic operators are used to perform mathematical calculations on numeric values.

2. Comparison Operators:-
Comparison operators are used to compare two values. These operators return a Boolean
value (true or false) depending on the comparison result.

3. Logical Operators
Logical operators are used to combine or invert Boolean values. They are often used in
conditional statements.

Operator Description Example Result

&& Logical AND true && false false

` ` Logical OR

! Logical NOT !true false

a) Logical AND (&&):

 Returns true if both operands are true.
 If either one of the operands is false, it returns
false. javascript

Department of CSE, P a g e | 26
 WEB DEVELOPMENT AND JAVA SCRIPT
let a = 5;
let b =
10;

console.log(a > 0 && b > 0); // true: both are greater than 0
console.log(a > 0 && b < 0);

Loops in JavaScript
Loops are fundamental control structures in JavaScript that allow you to execute a block of
code repeatedly as long as a specified condition is true. This helps avoid redundant code and
allows handling repetitive tasks efficiently.
JavaScript provides several types of loops:

1. For Loop
The for loop is used when you know the number of iterations in advance. It has three parts:
 Initialization: executed before the loop starts, usually used to define a counter variable.

 Condition: checked before each iteration. If true, the loop continues; if false, the
loop stops.
 Final Expression: executed after each iteration, usually to update the counter
variable. Syntax:
javascript
for (initialization; condition; finalExpression) {
}

2. while Loop
The while loop continues to execute a block of code as long as the specified condition
remains true. This loop is often used when you don't know the number of iterations in
advance.
Syntax:

javascript
while (condition) {
}

3. do...while Loop
The do...while loop is similar to the while loop, but with one key difference: the block of
code is executed at least once before the condition is checked. This makes it useful when
you want the loop to run at least one time regardless of the condition.

Department of CSE, P a g e | 27
 WEB DEVELOPMENT AND JAVA SCRIPT
Syntax:

javascript
do {

} while (condition);
for (let value of iterable) {
}

6. break and continue

 break: Exits the loop immediately when encountered.

 continue: Skips the current iteration and continues with the next one.
break Example:
javascript
for (let i = 0; i < 5; i++)
{ if (i === 3) break;
console.log(i);
}
// Output: 0, 1, 2

Arrays, Functions in JS
An array in JavaScript is a data structure that allows you to store multiple values in a single
variable. Arrays can store elements of any type, including numbers, strings, objects, or even
other arrays.

1. Creating an Array
There are two ways to create arrays:

 Using the array literal

syntax: avascript
let fruits = new Array('apple', 'banana', 'mango');

2. Accessing Array Elements

You can access array elements by their index, with the first element having an index of 0.
javascript
console.log(fruits[0]); // Output: apple

Department of CSE, P a g e | 28
 WEB DEVELOPMENT AND JAVA SCRIPT

console.log(fruits[2]); // Output: mango

3. Modifying Array Elements

You can change the value of an array element by referring to its index.
javascript
fruits[1] = 'orange'; // Replaces 'banana' with 'orange'
console.log(fruits); // Output: ['apple', 'orange', 'mango']

4. Array Methods
 push(): Adds a new element to the end of the
array. Java script
Fruits push('grape');

Department of CSE, P a g e | 29
 WEB DEVELOPMENT AND JAVA SCRIPT

6.Document Object Model in JavaScript

Document Object Model (DOM) in JavaScript

The Document Object Model (DOM) is a programming interface for web documents. It
represents the page so that programs can change the document structure, style, and
content. In simple terms, the DOM is a tree-like structure where every node is an object
representing a part of the document (such as an element, attribute, or text).
The DOM Tree

 The DOM represents the HTML document as a tree of nodes.

 Each node represents an HTML element (like <div>, <p>, <a>, etc.), an attribute (like
class, id), or text.
 JavaScript can be used to manipulate these nodes to create dynamic content,
respond to user actions, or modify the structure and style of the web page.

Accessing the DOM

JavaScript can interact with the DOM through the document object, which is the root of the
DOM and provides methods to access, manipulate, and listen to events in the document.

1. Selecting Elements in the DOM

JavaScript provides several ways to select elements from the DOM.
 getElementById(): Selects an element by its
id. javascript
Copy code
let title = document.getElementById('main-title');
console.log(title);

Manipulating the DOM

Once elements are selected, you can manipulate them by changing their attributes, content,
or style.
1. Changing the Text Content
You can change the text of an element using the textContent or innerHTML properties.
2. Changing Attributes
You can modify an element’s attributes like id, class, or custom attributes using
setAttribute(), getAttribute(), or by directly modifying the attribute.

Department of CSE, P a g e | 30
 WEB DEVELOPMENT AND JAVA SCRIPT

DOM Events
JavaScript allows you to add event listeners to elements to respond to user actions such as
clicks, form submissions, or key presses.

1. Event Listener
The addEventListener() method is used to attach an event listener to an element.
javascript
Copy code
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button was clicked!');
});
2. Event Object

When an event occurs, an event object is passed to the event handler. This object contains
useful information like the type of event, the target element, and the coordinates of the
event.

Working with DOM:-

Working with the Document Object Model (DOM) allows developers to interact with and
manipulate the structure, style, and content of a web page using JavaScript. You can
dynamically modify elements, respond to user interactions, and update the content of a
webpage without requiring a reload.
Here’s how you can work with the DOM using JavaScript, including selecting, creating,
modifying, and deleting elements, as well as handling events.
1. Selecting Elements in the DOM

To manipulate elements, you first need to select them from the DOM. JavaScript provides
several methods to select DOM elements.
Common Methods for Selecting Elements:

 getElementById(id): Selects an element by its

id. javascript
let element = document.getElementById('header');
2. Modifying the DOM
Once you've selected an element, you can modify its properties, content, attributes, and
styles.
Modifying Text Content:

Department of CSE, P a g e | 31
 WEB DEVELOPMENT AND JAVA SCRIPT

 textContent: Sets or retrieves the text content of an

element. javascript
let title = document.getElementById('header');
title.textContent = "New Heading";
3. Creating and Appending Elements
You can create new elements in the DOM and insert them into the document.
Creating New Elements:

 document create Element(): Creates a new HTML element.

Java script
let new Paragraph = document create Element('p');
new Paragraph. text Content = "This is a new paragraph.";

4. Removing Elements
You can remove elements from the DOM using the removeChild() or remove() method.
Removing an Element:
 remove Child(): Removes a child element from the DOM.
Java script

let parent Element = document. Query Selector('.content');

let child Element = document. query Selector('.content p');

6.1 Event handling in JavaScript

Event Handling in JavaScript

Event handling in JavaScript refers to the process of capturing and responding to user
interactions or system-generated events. Common events include clicks, key presses, form
submissions, and mouse movements. JavaScript provides a variety of ways to manage these
events and trigger specific actions in response.

1. What is an Event?
An event is any interaction that happens in the browser, such as:
 Mouse events: click, dblclick, mouseover, mouseout, mousedown, mouseup

 Keyboard events: keydown, keyup, keypress

 Form events: submit, focus, blur, change
 Window events: load, scroll, resize

Department of CSE, P a g e | 32
 WEB DEVELOPMENT AND JAVA SCRIPT

When an event occurs, JavaScript can be used to execute code in response to that event.
The code that runs in response to an event is called an event handler or event listener.

2. Adding Event Listeners

To handle events in JavaScript, you use the addEventListener() method to attach an event
listener to a specific element. This allows you to execute a function when a certain event
happens.
Syntax:
element.addEventListener(event, function, useCapture);

3. Removing Event Listeners

Event listeners can be removed using the removeEventListener() method, which requires
the same function reference used in addEventListener().
Syntax:

element.removeEventListener(event, function);

4. Common Events and Event Handlers

Here are a few common events and examples of how to handle them:
a. Click Event

Triggered when a user clicks on an element.

let button = document.querySelector('button');
button.addEventListener('click', function() {
console.log('Button was clicked!');
});

5. The Event Object

When an event is triggered, an event object is automatically passed to the event handler
function. This object contains useful information about the event, such as the type of event,
the element that triggered the event, and details like mouse coordinates or key codes.
Common Event Object Properties:
 event.type: The type of event ('click', 'mouseover', etc.).

 event.target: The element that triggered the event.

 event.preventDefault(): Prevents the default action (e.g., prevents form
submission or link navigation).
 event.stopPropagation(): Prevents the event from bubbling up to parent elements.

Department of CSE, P a g e | 33
 WEB DEVELOPMENT AND JAVA SCRIPT

6. Event Propagation
Event propagation refers to the order in which events are handled in the DOM.
When an event is triggered, it can go through the following phases:
1. Capturing Phase: The event travels from the root of the DOM down to the target
element.

2. Target Phase: The event reaches the target element.

3. Bubbling Phase: The event bubbles back up to the root of the DOM.
By default, events propagate during the bubbling phase. However, you can also
listen for events during the capturing phase by passing true as the third argument to
addEventListener().

7. Delegating Events
Event delegation is a pattern where a single event listener is attached to a parent
element to handle events triggered by its children. This is useful for handling events
on dynamically generated elements or multiple similar elements.

8. Preventing Default Actions

Some events have default behaviors (like form submissions or link navigation). You
can prevent these behaviors using the event.preventDefault() method.

9. Keyboard Events
JavaScript allows you to capture and handle keyboard events using keydown, keyup,
and keypress event types. These events provide information about which key was
pressed via the event.key or event.code property.

JavaScript Strings& String methods:-

JavaScript Strings & String Methods
In JavaScript, a string is a sequence of characters used to represent text. Strings are one of
the most commonly used data types and are enclosed in single quotes (' '), double quotes ("
"), or backticks (` `).
Example:
let str1 = "Hello, World!";

1. Basic String Operations

a. Concatenation
You can combine strings using the + operator or the concat() method.’

Department of CSE, P a g e | 34
 WEB DEVELOPMENT AND JAVA SCRIPT

2. Common String Methods

JavaScript provides a rich set of methods to manipulate and interact with strings.

a. length
Returns the length of a string (i.e., the number of characters).
javascript
Copy code
let text = "JavaScript";
console.log(text.length); // Output: 10

3. Common String Methods

JavaScript provides many methods to manipulate and analyze strings. Here are some of the
most commonly used string methods:
a. charAt()

Returns the character at a specified index in a string.

javascript
Copy code
let str = "JavaScript";
console.log(str.charAt(0)); // Output: "J"

4. Template Literals
Template literals are enclosed by backticks (`) and allow for embedding expressions directly
into strings using ${}.
Example:
javascript
Copy code
let name = "Alice";
let age = 25;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: "Hello, my name is Alice and I am 25 years old."

5. String Concatenation
You can combine strings using the + operator or the concat() method.

Department of CSE, P a g e | 35
 WEB DEVELOPMENT AND JAVA SCRIPT

6. Escape Sequences
Escape sequences are used to include special characters in strings, such as quotes or newlines.

Common Escape Sequences:

 \': Single quote
 \": Double quote
 \\: Backslash
 \n: Newline

 \t: Tab

 8. Search Methods

JavaScript provides methods for searching for strings or substrings.

a. search()
Searches for a specified value and returns the position of the match.

Java script

let str = "I love JavaScript";

console.log(str.search("JavaScript")); // Output:

9. String Iteration
You can iterate over a string using a for loop or a for...of loop.

Example:

javascript

Copy code

let text = "Hello";

for (let char of text) {

console.log(char); // Output: "H", "e", "l", "l", "o"

6.2 Functions& promises in JavaScript

A function in JavaScript is a block of code designed to perform a specific task. Functions are
fundamental building blocks that allow you to organize and reuse code. Once a function is
defined, it can be executed whenever it is called or invoked.
1. Defining a Function

Department of CSE, P a g e | 36
 WEB DEVELOPMENT AND JAVA SCRIPT

In JavaScript, functions can be defined in several ways. The most common method is using the
function declaration or function expression.
a. Function Declaration
A function declaration defines a function with a specific name.
javascript
Copy code
function greet()
{
console.log("Hello, World!");
}
In this example, the function greet is declared. You can call this function using its name:
javascript
Copy code
greet(); // Output: "Hello, World!"

2. Function Parameters
Functions can take input values, known as parameters, which allow the function to be more
dynamic and reusable.

3. Returning Values from a Function

A function can return a value using the return statement. Once a return statement is
executed, the function stops and returns the specified value.

4. Anonymous Functions
Functions that do not have a name are called anonymous functions. They are typically used
in places where a function is expected but doesn't need to be reused, such as in event
handlers or callbacks.
.

10. Recursion
Recursion occurs when a function calls itself. It is useful for solving problems that can be
divided into smaller, similar problems.
function factorial(n)
{ if (n === 1) {
return 1;
}

Department of CSE, P a g e | 37
 WEB DEVELOPMENT AND JAVA SCRIPT

return n * factorial(n - 1);

}
console.log(factorial(5)); // Output: 120

Promises in JavaScript
In JavaScript, Promises are used to handle asynchronous operations. They represent a value
that may be available now, or in the future, or never. Promises help manage asynchronous
tasks like data fetching, timers, or file handling without nesting callbacks, often referred to
as "callback hell."
1. What is a Promise?

A Promise is an object that represents the eventual completion (or failure) of an

asynchronous operation and its resulting value.
A promise can have one of the following states:

 Pending: The initial state, the operation has not completed yet.
 Fulfilled: The operation completed successfully, and the promise has a result.
 Rejected: The operation failed, and the promise has an error.
2. Creating a Promise

A promise is created using the Promise constructor, which takes a function (known as the
executor) that has two parameters: resolve and reject.

3. Handling Promises
Once a promise is created, you can handle its result using two primary methods:
 then(): Handles the fulfilled result

Department of CSE, P a g e | 38
 WEB DEVELOPMENT AND JAVA SCRIPT

Conclusion
In conclusion, web development using JavaScript is a crucial aspect of creating dynamic and
interactive web applications. JavaScript enables developers to enhance user experiences
through features like real-time updates, form validation, and responsive design.

Key points to consider:

1. **Client-Side Functionality**: JavaScript runs in the user's browser, allowing for quick
interactions without needing server communication.
2. **Frameworks and Libraries**: Tools like React, Angular, and Vue.js streamline
development and improve code efficiency.
3. **Asynchronous Programming**: JavaScript’s async features, such as Promises and
async/await, enhance the ability to handle operations like API calls smoothly.
4. **Ecosystem**: A rich ecosystem with numerous packages and tools (e.g., Node.js for
server-side JavaScript) supports full-stack development.
5. **Community and Resources**: A large community means ample resources for
learning, troubleshooting, and collaboration.
In essence, mastering JavaScript is essential for modern web developers, allowing them to
build robust applications that meet user expectations and adapt to evolving web standards.

Department of CSE, P a g e | 39
 WEB DEVELOPMENT AND JAVA SCRIPT

References
[1] https://dev.to/devland/19-handy-websites-for-web-developers-1m3i
[2] https://developer.mozilla.org/en-US/
[3] https://webreference.com/

Department of CSE, P a g e | 40