Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
104 views35 pages

HTML Basics and Web Design Guide

DDF

Uploaded by

Dr. A.M.SARAVANAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
104 views35 pages

HTML Basics and Web Design Guide

DDF

Uploaded by

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

Web Designing

1. Introduction to HTML

HTML is a markup language used to structure content on the web. A "markup" language uses
tags to describe how content should be structured and displayed. HTML tags are enclosed in
angle brackets (e.g., <tag>).

Basic Structure of an HTML Page

Every HTML document has a basic structure, which includes:

• <!DOCTYPE html>: Declares the document type as HTML5.


• <html>: The root element of the HTML document.
• <head>: Contains metadata about the page, such as the title and links to stylesheets or
scripts.
• <body>: Contains the actual content that will be displayed on the page.

Example of Basic HTML Page Structure

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

2. Tags and Basic Elements

• Tags: Tags are used to mark up the content. Most tags come in pairs (an opening tag and
a closing tag). For example, <p> and </p> are the opening and closing tags for a
paragraph.

Common Tags in HTML:

1. <html>: Defines the start of the HTML document.


2. <head>: Contains meta information (such as the title, charset, etc.).
3. <title>: Specifies the title of the web page (appears in the browser tab).
4. <body>: Contains the visible content of the page.
3. Working with Text

Text Formatting and Paragraphs

• <p>: Used to define a paragraph.


• <br>: Line break tag. It creates a new line without creating a new paragraph.
• <h1>, <h2>, ..., <h6>: Headings for different levels of text. <h1> is the highest level
heading, and <h6> is the lowest.
• <strong>: Used to emphasize text with bold formatting.
• <em>: Used to emphasize text with italics.
• <u>: Underline text.

Example of Paragraph and Text Formatting

<p>This is a <strong>strong</strong> text, and this is an <em>italic</em>


text.</p>
<p>This is a new paragraph.</p>
<br> <!-- Line break -->
<p>This text is on a new line, thanks to the <code>&lt;br&gt;</code> tag.</p>

4. Adding Comments

Comments in HTML are enclosed within <!-- and -->. Comments are not displayed on the page
but can be used to add notes for developers or to temporarily disable code.

Example of HTML Comment

<!-- This is a comment and will not appear in the browser -->
<p>This is a visible paragraph.</p>

5. Emphasizing Text

Emphasizing text involves using tags like <strong>, <em>, and <b> for bold and <i> for italics.

• <strong>: Represents strong emphasis, which usually results in bold text.


• <em>: Represents emphasized text, which usually appears in italics.

<p><strong>This text is strongly emphasized and will appear


bold.</strong></p>
<p><em>This text is emphasized and will appear italicized.</em></p>

6. Links and Navigation


HTML provides the <a> tag (anchor tag) to create hyperlinks that can link to other web pages or
resources.

• <a href="URL">Link Text</a>: Creates a clickable link to the URL specified in the
href attribute.

Example of Link

<a href="https://www.example.com">Visit Example</a>

You can also link to different parts of the same page by using anchors.

<a href="#section1">Go to Section 1</a>

<!-- Some content -->

<h2 id="section1">Section 1</h2>

7. Lists

HTML supports two types of lists:

1. Unordered List (<ul>): A list with bullet points.


2. Ordered List (<ol>): A list with numbered items.

• <li>: List item, used inside <ul> or <ol>.

Example of Unordered and Ordered Lists

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

8. Tables

Tables are used for displaying tabular data and are created using the <table> element. Rows are
defined with <tr>, headers with <th>, and data cells with <td>.

Example of Table
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>

• <table border="1">: Creates a table with a border.


• <th>: Table header.
• <td>: Table data cell.

9. Frames and Frame Sets

Frames allow the division of a webpage into multiple sections that can load different HTML
documents. The <frameset> tag is used to create a frame layout, and <frame> is used to define
individual frames.

• <frameset>: Specifies the number of columns or rows and their size.


• <frame src="URL">: Specifies the content for the frame.

Example of Frameset

<frameset cols="50%, 50%">


<frame src="page1.html">
<frame src="page2.html">
</frameset>

This will display two frames side by side, each loading a different HTML page.

10. Fonts, Color, and Alignment

In HTML, you can control font size, font family, color, and text alignment using various tags and
attributes.

• <font>: Specifies the font size, face (font family), and color.
• <div>: Can be used for alignment, and CSS can be applied for further customization.
• <center>: Centers the content (though using CSS is more preferred).
Example of Font, Color, and Alignment

<font size="4" face="Arial" color="blue">This is a blue text with Arial font


and size 4.</font>

<p align="center">This text is centered using the 'align' attribute.</p>

<!-- Using CSS for better styling -->


<div style="font-family: Arial; color: red; font-size: 20px;">
This text has been styled using CSS.
</div>

• size="4": Specifies the font size (from 1 to 7, with 1 being the smallest).
• color="blue": Specifies the text color.
• align="center": Centers the content (deprecated in HTML5, prefer using CSS for
alignment).

11. Horizontal Rules

A horizontal rule (<hr>) is used to create a thematic break or a line that separates content. It is
often used to represent a change of topic or section in the content.

Example of Horizontal Rule

<p>This is the first section.</p>


<hr>
<p>This is the second section after the horizontal rule.</p>
1. Working with Images in HTML

Images are an integral part of most websites, helping to improve the user experience by
providing visual appeal. HTML offers several ways to include and manage images on a
webpage.

Adding Images in HTML

The <img> tag is used to embed images in an HTML document. The tag does not have a closing
tag, and it uses the src attribute to specify the image location, and the alt attribute to provide
alternative text for accessibility.

Example: Adding an Image

<img src="image.jpg" alt="Description of the image" width="500" height="300">

• src="image.jpg": Specifies the image file's location.


• alt="Description of the image": Provides alternative text for the image (important
for accessibility).
• width and height: Specifies the image's dimensions in pixels. These attributes can be
adjusted to scale the image.

Types of Image Formats

• JPEG (.jpg or .jpeg): Best for photographs and images with gradient colors.
• PNG (.png): Supports transparency and is ideal for logos, icons, and images with sharp
edges.
• GIF (.gif): Supports animation and is commonly used for simple animations on the
web.

2. Image Maps

An image map allows different regions of an image to act as links. These links can navigate the
user to different URLs or provide interactive functionality on specific areas of an image.

Creating an Image Map

You define an image map with the <map> tag and associate it with the image using the usemap
attribute. Inside the <map>, you define areas of the image using <area> tags.
Example: Image Map

<img src="worldmap.jpg" usemap="#worldmap" alt="World Map">

<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA"
title="USA">
<area shape="circle" coords="500,200,50" href="europe.html" alt="Europe"
title="Europe">
<area shape="poly" coords="250,100,350,300,450,250" href="asia.html"
alt="Asia" title="Asia">
</map>

• usemap="#worldmap": Links the image to the map.


• <area>: Defines clickable areas within the image, where shape can be rect, circle, or
poly, and coords specifies the coordinates of the shape.
• href: Defines the link associated with the area.

3. GIF Animations

GIF animations are commonly used for creating simple animated images. In HTML, you can add
animated GIFs just like regular images by using the <img> tag.

Example: Adding an Animated GIF

<img src="animation.gif" alt="Animated Image" width="400" height="300">

Since GIFs are made of multiple frames that play in sequence, the browser automatically plays
the animation when the image is loaded.

4. Adding Multimedia to Web Pages

HTML also supports embedding multimedia content such as audio and video. The <audio> and
<video> tags make it easy to add sound and video directly into web pages.

Adding Audio

The <audio> tag allows you to embed sound files, and you can use attributes like controls to
provide play, pause, and volume controls.

Example: Adding Audio

<audio controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>

• controls: Displays play, pause, and volume control buttons.


• <source>: Specifies the audio file format and location.

Adding Video

The <video> tag allows you to embed video content, with similar attributes like controls to
provide control options.

Example: Adding Video

<video width="500" height="300" controls>


<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

• width and height: Defines the dimensions of the video player.


• controls: Provides the control interface for the video (play, pause, etc.).

5. HTML Forms

Forms in HTML allow for interactive data collection from users, such as submitting contact
information or searching for content. Forms consist of various input fields, such as text boxes,
password fields, radio buttons, checkboxes, and dropdown lists.

Basic Structure of an HTML Form

<form action="submit.php" method="POST">


<!-- Form fields go here -->
</form>

• action="submit.php": Specifies the server-side script to handle the form submission.


• method="POST": Specifies the HTTP method (GET or POST) used to send the form data.

6. HTML Form Elements

• Text Box: Used to input short, single-line text.

<input type="text" name="username" placeholder="Enter your username">

• Password Field: Used to input sensitive information, such as a password (text is hidden).
<input type="password" name="password" placeholder="Enter your
password">

• Radio Buttons: Allows users to select one option from a list of choices.

<input type="radio" name="gender" value="male"> Male


<input type="radio" name="gender" value="female"> Female

• Checkboxes: Allows users to select multiple options.

<input type="checkbox" name="subscribe" value="yes"> Subscribe to


newsletter

• Text Area: A multi-line text field that allows users to input longer text.

<textarea name="message" rows="5" cols="40" placeholder="Enter your


message here"></textarea>

• List Box (Select): Allows users to choose from a dropdown list.

<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="india">India</option>
</select>

• Combo Box: A combination of a text box and a list box, where users can either select
from the list or enter their own option.

<select name="city" size="5">


<option value="newyork">New York</option>
<option value="losangeles">Los Angeles</option>
<option value="chicago">Chicago</option>
</select>

Form Submission Button

<input type="submit" value="Submit">

• type="submit": Creates a button that submits the form when clicked.

7. Tools for Building Web Pages

In the book, FrontPage is mentioned as one of the tools for building web pages. Microsoft
FrontPage was a WYSIWYG (What You See Is What You Get) web design tool that allowed
users to create websites without needing to write code. However, FrontPage has been
discontinued, and modern alternatives such as Adobe Dreamweaver, WordPress, and Visual
Studio Code are more widely used today.

Other Web Development Tools:

• Text Editors: Tools like Notepad++, Visual Studio Code, and Sublime Text are
popular among developers for writing HTML code.
• Content Management Systems (CMS): Tools like WordPress, Joomla, and Drupal
allow for easy creation and management of websites without deep coding knowledge.
• Web Browsers: Browsers such as Chrome, Firefox, and Safari have built-in developer
tools to help debug and inspect HTML, CSS, and JavaScript.
1. Cascading Style Sheets (CSS)

CSS is a stylesheet language used to describe the presentation (visual style) of a web page
written in HTML or XML. It defines how elements should be displayed, including colors, fonts,
layouts, and spacing.

What is CSS?

CSS allows you to separate the content (HTML) from the visual style (CSS). Instead of
embedding style rules in the HTML tags directly, CSS lets you define the style rules separately,
making web pages easier to maintain, more flexible, and consistent across different web pages.

Why We Use CSS

1. Separation of Content and Style: With CSS, the HTML structure is kept separate from
the visual presentation, making it easier to manage the content and styles independently.
2. Consistency Across Pages: You can apply the same style sheet across multiple pages,
ensuring consistency in design.
3. Improved Maintenance: Changes to the design of the website can be made in a single
CSS file, which will automatically update the style across all pages using that CSS file.
4. Faster Page Load: CSS reduces the amount of code in HTML, making web pages lighter
and faster to load.

Adding CSS to Your Web Pages

There are three ways to add CSS to a webpage:

1. Inline CSS: CSS styles are added directly within an HTML tag using the style attribute.
2. Internal CSS: CSS styles are defined within a <style> tag in the <head> section of the
HTML document.
3. External CSS: CSS rules are written in an external .css file and linked to the HTML
document using the <link> tag.

Example of Each Method

Inline CSS:

<p style="color: red;">This text is red.</p>


Internal CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal CSS Example</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This text is blue.</p>
</body>
</html>

External CSS:

<!-- HTML File -->


<link rel="stylesheet" href="styles.css">
css
Copy code
/* styles.css file */
p {
color: green;
}

Grouping Styles in CSS

CSS allows you to group multiple selectors together to apply the same styles to different
elements. This reduces repetition and makes the CSS more efficient.

Example of Grouping Styles

h1, h2, h3 {
font-family: Arial, sans-serif;
color: darkblue;
}

In this example, the same styles are applied to <h1>, <h2>, and <h3> elements.

2. Extensible Markup Language (XML)

XML (Extensible Markup Language) is a flexible and structured format used to store and
transport data. Unlike HTML, which is designed to display data, XML is designed to carry data.
XML allows you to create your own tags, which means you can define custom data structures
based on your needs.

What is XML?

XML is a markup language that provides a way to store and transport data in a self-descriptive,
hierarchical format. It is commonly used for:

• Storing configuration data


• Data interchange between systems (such as APIs)
• Representing structured data in a readable format

Basic Structure of XML

An XML document contains a set of nested elements, each with a start tag, an optional value,
and an end tag. XML documents must be well-formed, meaning they must follow strict syntax
rules (e.g., tags must be properly nested).

Example of XML Structure

<?xml version="1.0" encoding="UTF-8"?>


<bookstore>
<book>
<title>Learning XML</title>
<author>John Doe</author>
<price>29.95</price>
</book>
<book>
<title>Mastering HTML</title>
<author>Jane Smith</author>
<price>19.95</price>
</book>
</bookstore>

In this example:

• The <bookstore> element is the root element.


• Each <book> element contains sub-elements <title>, <author>, and <price>.

Key Features of XML:

1. Custom Tags: You can define your own tags based on the data you need to represent.
2. Self-descriptive Data: Each tag describes the data it contains, making it easy to
understand the structure.
3. Hierarchical Structure: XML data is stored in a tree-like structure, making it easy to
represent nested relationships.
3. Dynamic HTML (DHTML)

DHTML is a combination of HTML, CSS, and JavaScript that allows you to create interactive
and dynamic web pages. It enables web pages to update and change content in real-time without
requiring a page reload.

How DHTML Works

DHTML allows you to modify the content, structure, and style of a web page dynamically
through scripting. By using JavaScript to manipulate the Document Object Model (DOM), and
combining CSS to apply styles, DHTML enables effects such as:

• Animations
• Changing the content of elements
• Responding to user actions like clicks or mouse movements

DHTML Example

Below is an example that uses DHTML to dynamically change the color of a text element when
the user clicks a button:

<!DOCTYPE html>
<html>
<head>
<title>DHTML Example</title>
<style>
#message {
font-size: 20px;
color: blue;
}
</style>
<script>
function changeColor() {
document.getElementById("message").style.color = "red";
}
</script>
</head>
<body>
<p id="message">Click the button to change my color!</p>
<button onclick="changeColor()">Change Color</button>
</body>
</html>

In this example:

• The changeColor() function is triggered by clicking the button.


• The function modifies the color of the text inside the <p> tag with the ID message.
5. Advanced CSS Techniques

CSS is a crucial technology for styling web pages, and it offers various advanced techniques that
can enhance the visual experience and layout of a website.

1. CSS Box Model

The CSS box model is a fundamental concept in CSS that determines how elements on a web
page are rendered and spaced. Every element is essentially a box, and the box model consists of
the following parts:

• Content: The actual content of the element, such as text or images.


• Padding: Space between the content and the border. It creates space inside the element.
• Border: The border around the padding (optional).
• Margin: Space outside the border, which separates the element from surrounding
elements.

Example: Understanding the Box Model

<div class="box">This is a box model example</div>


css
Copy code
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 15px;
background-color: lightblue;
}

In this example:

• Width: 300px for the content area.


• Padding: 20px around the content.
• Border: 5px solid black.
• Margin: 15px separating this box from others.

2. CSS Flexbox

Flexbox is a layout module in CSS that makes it easier to design flexible, responsive layouts
without using floats or positioning. Flexbox enables you to distribute space and align elements
dynamically within a container.

Example: Using Flexbox

<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
css
Copy code
.flex-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
background-color: lightgray;
}

.flex-item {
width: 30%;
padding: 10px;
background-color: lightgreen;
text-align: center;
}

In this example:

• The flex-container defines a flexbox layout.


• justify-content: space-between; distributes space evenly between the items.
• align-items: center; aligns items vertically in the center.

3. CSS Grid Layout

CSS Grid is another layout system that allows you to create complex, responsive designs with
ease. It uses a grid-based approach to define rows and columns.

Example: Using CSS Grid

<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
css
Copy code
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}

.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
}
Here:

• The grid-template-columns property defines three equal-width columns.


• gap: 10px; adds space between the grid items.

6. Advanced XML Concepts

XML is a powerful tool for structuring data and transmitting it across systems. It is often used in
APIs, web services, configuration files, and more. Let's explore some advanced XML topics.

1. XML Namespaces

In XML, namespaces are used to avoid element name conflicts when combining XML
documents from different sources. A namespace is typically defined with a URI (Uniform
Resource Identifier), which is used to distinguish between elements with the same name.

Example: Using XML Namespaces

<?xml version="1.0" encoding="UTF-8"?>


<bookstore xmlns:fiction="http://www.example.com/fiction"
xmlns:nonfiction="http://www.example.com/nonfiction">
<fiction:book>
<fiction:title>The Great Adventure</fiction:title>
<fiction:author>John Smith</fiction:author>
<fiction:price>20.00</fiction:price>
</fiction:book>
<nonfiction:book>
<nonfiction:title>Science 101</nonfiction:title>
<nonfiction:author>Jane Doe</nonfiction:author>
<nonfiction:price>25.00</nonfiction:price>
</nonfiction:book>
</bookstore>

In this example:

• The fiction and nonfiction namespaces are defined with unique URIs to differentiate
between similarly named tags.

2. XML Schema (XSD)

XML Schema defines the structure and rules for XML documents. It ensures that the data is
valid and follows the specified format. XML Schema defines the types of data that each XML
element can contain (e.g., strings, integers, dates).

Example: XML Schema Definition (XSD)

xml
Copy code
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="book">
<xs:complexType>
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>

In this schema:

• Defines the structure of the <book> element, which must contain <title>, <author>,
and <price> elements of specified types.

7. Advanced DHTML Concepts

DHTML enables dynamic, interactive features on web pages by combining HTML, CSS, and
JavaScript. It's widely used for things like dropdown menus, interactive forms, animations, and
more. Here's a deeper dive into DHTML.

1. Changing Styles Dynamically Using JavaScript

DHTML allows you to change the styles of HTML elements dynamically, responding to user
interactions like clicks or mouse movements.

Example: Changing Background Color Dynamically

<!DOCTYPE html>
<html>
<head>
<title>DHTML Background Color Change</title>
<style>
.container {
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 20px;
}
</style>
<script>
function changeColor() {
document.getElementById('box').style.backgroundColor = 'orange';
}
</script>
</head>
<body>
<div class="container" id="box" onclick="changeColor()">Click me!</div>
</body>
</html>

• When the user clicks the div element with the ID box, the background color is changed
to orange.

2. Animations with CSS and JavaScript

DHTML allows you to create animations by changing the styles of elements over time, either
using CSS animations or JavaScript.

Example: CSS Animation

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Example</title>
<style>
@keyframes move {
0% { left: 0px; }
100% { left: 200px; }
}

#animatedBox {
position: relative;
width: 50px;
height: 50px;
background-color: green;
animation: move 3s infinite;
}
</style>
</head>
<body>
<div id="animatedBox"></div>
</body>
</html>

In this example:

• The @keyframes rule defines an animation called move, which moves the box from left to
right over 3 seconds.
1. Dynamic HTML (DHTML)

DHTML combines HTML, CSS, and JavaScript to create dynamic, interactive, and animated
content on web pages. DHTML allows us to change the structure, style, and content of a
webpage without reloading it. Below are key concepts related to DHTML.

1.1 Document Object Model (DOM)

The Document Object Model (DOM) represents the structure of an HTML document as a tree
of nodes. Each element, attribute, and text content of an HTML document is represented as a
node in this tree, and JavaScript can be used to access and manipulate these nodes.

• DOM as a Tree Structure: The DOM allows JavaScript to interact with the web page’s
elements in a hierarchical structure. For example, the <html> element is the root of the
document, with child nodes like <head>, <body>, and all other HTML tags.

1.2 Accessing HTML & CSS through DOM

JavaScript can be used to interact with both HTML elements and CSS properties. By accessing
the DOM, you can dynamically modify the content and styling of the web page.

• Accessing HTML Elements: JavaScript can access elements using methods like
getElementById(), getElementsByClassName(), and querySelector().

document.getElementById("myElement").innerHTML = "New Content";

• Accessing and Modifying CSS: You can modify the style of an HTML element directly
through JavaScript by accessing its style property.

document.getElementById("myElement").style.backgroundColor = "red";

1.3 Dynamic Content Styles & Positioning

With DHTML, you can dynamically change the style and positioning of elements using
JavaScript. This enables features such as sliding menus, pop-up windows, or moving elements on
the screen.
• Changing Style Dynamically:

document.getElementById("myElement").style.display = "block";

• Changing Position:

var element = document.getElementById("myElement");


element.style.position = "absolute";
element.style.left = "100px";
element.style.top = "200px";

1.4 Event Bubbling

Event bubbling refers to the propagation of an event from the target element to its ancestors in
the DOM tree. For example, if a user clicks on a button inside a div, the click event will first be
triggered on the button, and then bubble up to the parent div, and then further up if any parent
elements are listening for the event.

• Event Bubbling Example:

document.getElementById("parent").addEventListener("click", function()
{
alert("Parent clicked");
});

document.getElementById("child").addEventListener("click",
function(event) {
alert("Child clicked");
event.stopPropagation(); // Prevents bubbling
});

1.5 Data Binding in DHTML

Data binding is the process of connecting HTML elements to data sources, ensuring that changes
in data are automatically reflected in the UI. In DHTML, JavaScript can be used to bind data to
HTML elements.

• Example:

<div id="output"></div>
<input type="text" id="inputField" onkeyup="updateContent()" />

<script>
function updateContent() {
var inputText = document.getElementById("inputField").value;
document.getElementById("output").innerHTML = inputText;
}
</script>
In this example, the content of the <div> with the id output is updated every time the user types
into the inputField.

2. JavaScript: Client-Side Scripting

JavaScript is a client-side scripting language that runs directly in the user's browser, enabling
dynamic interactivity on web pages. It allows developers to create responsive, interactive
elements such as buttons, forms, and animations without requiring server-side interactions for
every user action.

2.1 What is JavaScript?

JavaScript is a scripting language that enables dynamic behavior on web pages. It is primarily
used for client-side programming, meaning that it runs in the browser, but it can also be used on
the server-side with technologies such as Node.js.

• JavaScript allows developers to:


o Manipulate HTML content and structure.
o Modify CSS styles dynamically.
o Handle user interactions such as clicks, key presses, and mouse movements.
o Validate and submit forms.
o Animate elements.
o Communicate with servers asynchronously using technologies like AJAX
(Asynchronous JavaScript and XML).

2.2 How to Develop JavaScript

Developing JavaScript typically involves writing scripts within <script> tags in an HTML
document or in external .js files. These scripts are then executed by the browser when the page
is loaded or when certain events occur.

Example: Including JavaScript in HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JavaScript Example</title>
</head>
<body>
<button onclick="alert('Hello, world!')">Click Me</button>
</body>
</html>

2.3 Basic JavaScript Concepts


1. Variables

Variables in JavaScript are used to store data values. JavaScript uses three main keywords for
declaring variables: var, let, and const.

let name = "John Doe";


const age = 30;

• let is used to declare variables that can change.


• const is used to declare constants, variables that cannot be reassigned.

2. Functions

A function is a block of code that can be executed when called. Functions help organize code
and improve reusability.

function greet() {
alert("Hello, welcome to JavaScript!");
}
greet(); // Calling the function

3. Conditional Statements

Conditional statements allow you to execute different blocks of code depending on a condition.
The main conditional statements in JavaScript are if, else if, and else.

Let age = 20;

if (age >= 18) {


alert("You are an adult.");
} else {
alert("You are a minor.");
}

4. Loops and Repetition

JavaScript provides several loop structures for repeating a block of code multiple times. The
most common ones are for, while, and do...while.

// Example of a for loop


for (let i = 0; i < 5; i++) {
console.log(i); // Outputs 0, 1, 2, 3, 4
}

// Example of a while loop


let i = 0;
while (i < 5) {
console.log(i);
i++;
}
5. Arrays and Objects

Arrays and objects are key data structures in JavaScript.

• Array: A collection of ordered values.

Let fruits = ["apple", "banana", "cherry"];


console.log(fruits[0]); // Outputs "apple"

• Object: A collection of key-value pairs.

let person = {
name: "Alice",
age: 25,
greet: function() {
alert("Hello, " + this.name);
}
};
person.greet(); // Outputs "Hello, Alice"

2.4 Client-Side Scripting with JavaScript

JavaScript plays an essential role in client-side scripting, as it enables a wide range of


interactions and behaviors on the webpage. Some common use cases include:

• Form validation: Checking whether all required fields are filled and ensuring that data
formats are correct.
• Event handling: Responding to user actions such as clicks, key presses, and mouse
movements.
• DOM manipulation: Changing the HTML and CSS of elements dynamically based on
user actions.
• AJAX requests: Sending and receiving data from the server without reloading the entire
page.

Example: Simple Form Validation

<form onsubmit="return validateForm()">


<input type="text" id="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
let name = document.getElementById("name").value;
if (name == "") {
alert("Name must be filled out");
return false;
}
return true;
}
</script>
In this example:

• The JavaScript function validateForm() is triggered when the user submits the form.
• If the name field is empty, the form submission is prevented, and an alert message is
shown.

1. How to Develop JavaScript

JavaScript is typically written directly in an HTML file or in an external .js file. It can be
included within <script> tags inside an HTML document or in separate JavaScript files that are
linked to HTML files.

Example of including JavaScript in an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Example</title>
</head>
<body>
<h1>JavaScript Demo</h1>
<button onclick="greet()">Click me to say hello!</button>

<script>
// JavaScript code goes here
function greet() {
alert("Hello, welcome to JavaScript!");
}
</script>
</body>
</html>

In the example above:

• The JavaScript function greet() is defined within the <script> tag.


• The function is triggered when the button is clicked, showing an alert box with a
message.

2. Simple JavaScript
In JavaScript, you can perform simple operations like defining variables, performing arithmetic
operations, and displaying messages. Let’s go over the basics.

2.1 Variables

Variables store data values. You can declare variables using var, let, or const.

• var is the older way of declaring variables, and it is function-scoped.


• let is block-scoped and can be reassigned.
• const is block-scoped but cannot be reassigned once set.

Example of declaring variables:

let name = "John"; // Variable that can be reassigned


const age = 30; // Constant, cannot be reassigned
var city = "New York"; // Older way to declare variables

2.2 Simple Arithmetic Operations

JavaScript allows you to perform basic arithmetic operations like addition, subtraction,
multiplication, and division.

Example of arithmetic operations:

let a = 10;
let b = 5;

let sum = a + b; // Addition


let difference = a - b; // Subtraction
let product = a * b; // Multiplication
let quotient = a / b; // Division

console.log("Sum: " + sum); // Outputs: Sum: 15


console.log("Difference: " + difference); // Outputs: Difference: 5
console.log("Product: " + product); // Outputs: Product: 50
console.log("Quotient: " + quotient); // Outputs: Quotient: 2

3. Functions

Functions allow you to bundle code together and reuse it. Functions can take inputs (called
parameters) and return outputs.

Example of a simple function:

function greetUser(name) {
return "Hello, " + name + "!";
}

let message = greetUser("Alice");


console.log(message); // Output: Hello, Alice!
Here, greetUser is a function that takes a parameter (name) and returns a greeting message. You
can call the function with different values for name to generate different messages.

4. Conditions (If, Else, Else If)

Conditional statements allow you to execute code based on certain conditions. The basic
conditional statements in JavaScript are if, else, and else if.

Example of using if, else if, and else:

let age = 18;

if (age >= 18) {


console.log("You are an adult.");
} else if (age > 12 && age < 18) {
console.log("You are a teenager.");
} else {
console.log("You are a child.");
}

In this example, JavaScript evaluates the condition for age. If age is greater than or equal to 18,
it prints "You are an adult." If the condition isn't met, it checks if age is between 13 and 17,
printing "You are a teenager." Otherwise, it prints "You are a child."

5. Loops and Repetition

Loops allow you to repeat actions multiple times without having to write the same code again.
There are several types of loops in JavaScript: for, while, and do...while.

5.1 For Loop

A for loop is often used when you know how many times you want to repeat an action.

Example of a for loop:

for (let i = 0; i < 5; i++) {


console.log("Iteration: " + i);
}

This loop runs 5 times, outputting the value of i on each iteration:

Iteration: 0
Iteration: 1
Iteration: 2
Iteration: 3
Iteration: 4

5.2 While Loop


A while loop repeats a block of code as long as the given condition is true.

Example of a while loop:

let i = 0;
while (i < 5) {
console.log("While loop iteration: " + i);
i++;
}

This loop will also run 5 times, just like the for loop above, but the condition is checked before
each iteration.

5.3 Do...While Loop

A do...while loop is similar to a while loop, but it ensures that the code block is executed at
least once before checking the condition.

Example of a do...while loop:

let i = 0;
do {
console.log("Do-while loop iteration: " + i);
i++;
} while (i < 5);

This loop will output the same as the others but guarantees that the loop runs at least once, even
if the condition is false.

6. Repetition with Arrays

Arrays are used to store multiple values in a single variable. You can loop over arrays to process
each element.

Example of iterating over an array:

let fruits = ["apple", "banana", "cherry", "date"];

for (let i = 0; i < fruits.length; i++) {


console.log(fruits[i]);
}

This loop iterates over each fruit in the fruits array and prints it out:

bash
Copy code
apple
banana
cherry
date
7. More Complex Example (Combining Variables, Functions, Conditions, and
Loops)

Here’s an example that combines variables, functions, conditions, and loops:

function checkVotingEligibility(age) {
if (age >= 18) {
return "You are eligible to vote.";
} else {
return "You are not eligible to vote.";
}
}

let ages = [16, 18, 21, 17, 25];

for (let i = 0; i < ages.length; i++) {


let eligibility = checkVotingEligibility(ages[i]);
console.log("Age " + ages[i] + ": " + eligibility);
}

Output:

Age 16: You are not eligible to vote.


Age 18: You are eligible to vote.
Age 21: You are eligible to vote.
Age 17: You are not eligible to vote.
Age 25: You are eligible to vote.

In this example:

• We define a function checkVotingEligibility that checks if a person is old enough to


vote.
• We use a for loop to go through an array of ages and call the function for each one.
1. JavaScript Objects

JavaScript objects are fundamental to working with real-world data. Objects are collections of
properties (key-value pairs) and can also contain methods (functions that belong to the object).

1.1 Creating Objects

You can create objects in several ways: using object literals, the new Object() syntax, or by
defining custom constructors (a function that creates and initializes an object).

Using Object Literals:

let person = {
firstName: "John",
lastName: "Doe",
age: 30,
greet: function() {
console.log("Hello, my name is " + this.firstName + " " +
this.lastName);
}
};

person.greet(); // Output: Hello, my name is John Doe

Using the new Object() Constructor:

let car = new Object();


car.brand = "Toyota";
car.model = "Corolla";
car.year = 2021;
car.displayInfo = function() {
console.log("Car Info: " + this.brand + " " + this.model + " " +
this.year);
};

car.displayInfo(); // Output: Car Info: Toyota Corolla 2021

Using a Constructor Function:


function Animal(name, sound) {
this.name = name;
this.sound = sound;
this.makeSound = function() {
console.log(this.name + " says " + this.sound);
};
}

let dog = new Animal("Dog", "Woof");


let cat = new Animal("Cat", "Meow");

dog.makeSound(); // Output: Dog says Woof


cat.makeSound(); // Output: Cat says Meow

2. The DOM (Document Object Model)

The DOM is a programming interface that represents the HTML or XML structure of a web page
as a tree of objects. With JavaScript, you can manipulate these objects, allowing you to
dynamically change the content, structure, and style of a webpage.

2.1 DOM Manipulation

JavaScript provides powerful methods to interact with the DOM, such as getElementById,
querySelector, and createElement.

Accessing Elements by ID:

let heading = document.getElementById("myHeading");


heading.innerHTML = "Hello, JavaScript!";

Selecting Elements with querySelector:

let paragraph = document.querySelector(".myClass");


paragraph.style.color = "blue"; // Changes text color to blue

Creating and Appending Elements:

let newDiv = document.createElement("div");


newDiv.innerHTML = "<p>This is a new paragraph!</p>";

document.body.appendChild(newDiv);

Changing Styles Dynamically:

let element = document.getElementById("myElement");


element.style.backgroundColor = "yellow";

3. Web Browser Environment


JavaScript is typically executed in a web browser, which provides a browser environment with
various built-in objects and APIs. These objects include window, document, location,
navigator, and more.

3.1 Window Object

The window object represents the browser window and provides methods for interacting with the
browser, like opening new windows, navigating, and managing timeouts.

window.alert("This is an alert!");
let userResponse = window.prompt("What is your name?");
console.log("Hello, " + userResponse);

3.2 Document Object

The document object represents the web page's content and provides methods to interact with the
HTML structure. For example, you can use it to access elements, add events, and change content.

let title = document.title; // Gets the title of the page


console.log("Page title: " + title);

document.body.style.backgroundColor = "lightgray"; // Change background


color

3.3 Navigator Object

The navigator object provides information about the browser, such as its name, version, and
operating system.

let browserInfo = navigator.userAgent; // Provides detailed information about


the browser
console.log("Browser Information: " + browserInfo);

3.4 Location Object

The location object gives information about the current URL of the web page and allows you
to change the page's URL or reload the page.

javascript
Copy code
console.log("Current URL: " + location.href); // Logs the current URL

// Redirect to another page


location.href = "https://www.example.com";

// Reload the current page


location.reload();

4. Forms and Form Validation


Forms are essential for collecting user input. JavaScript can validate the data entered into forms
to ensure that it's correct before submitting the data to the server.

4.1 Accessing Form Elements

You can access form elements (like input fields, checkboxes, and buttons) using the
document.forms collection or the getElementById method.

Example: Accessing a form and its elements:

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

<script>
let form = document.getElementById("myForm");
let nameField = form.elements["name"];
console.log(nameField.value); // Access the value entered in the 'name'
field
</script>

4.2 Form Validation

Form validation is a critical step to ensure that the data entered by users is valid before
submission. Here's an example of simple validation for a text field and a checkbox:

<form id="contactForm" onsubmit="return validateForm()">


<label for="email">Email:</label>
<input type="text" id="email" name="email" required>

<label for="agree">Agree to terms:</label>


<input type="checkbox" id="agree" name="agree" required>

<input type="submit" value="Submit">


</form>

<script>
function validateForm() {
let email = document.getElementById("email").value;
let agree = document.getElementById("agree").checked;

if (email == "") {
alert("Email is required!");
return false; // Prevent form submission
}

if (!agree) {
alert("You must agree to the terms.");
return false;
}
return true; // Allow form submission
}
</script>

In this example:

• The validateForm() function checks if the email field is empty and if the agree
checkbox is checked.
• If either condition is false, the form submission is prevented using return false.

4.3 Validating Multiple Inputs

You can also validate multiple form fields, such as ensuring that a phone number is entered
correctly or a password meets certain criteria.

<form id="signupForm" onsubmit="return validateSignup()">


<label for="username">Username:</label>
<input type="text" id="username" name="username">

<label for="password">Password:</label>
<input type="password" id="password" name="password">

<label for="confirmPassword">Confirm Password:</label>


<input type="password" id="confirmPassword" name="confirmPassword">

<input type="submit" value="Sign Up">


</form>

<script>
function validateSignup() {
let username = document.getElementById("username").value;
let password = document.getElementById("password").value;
let confirmPassword =
document.getElementById("confirmPassword").value;

if (username == "") {
alert("Username is required!");
return false;
}

if (password != confirmPassword) {
alert("Passwords do not match!");
return false;
}

if (password.length < 6) {
alert("Password must be at least 6 characters.");
return false;
}

return true;
}
</script>
In this example:

• The form ensures that the username is provided.


• The password must match the confirmation password.
• The password must be at least 6 characters long.

You might also like