Multi - Disciplinary Course

(Web Technology)

HTML5 with JavaScript & CSS3: HTML5 &

JavaScript

Name: Devaryan Das

Class: 1BCOM F&I A
Registration No.: 2311332

1|Page
OBJECTIVES

The following will be the objectives for this course: -

• Learn the basics of HTML5, including how to create web pages, add
content, and style elements.
• Learn how to use CSS3 to style HTML elements, such as changing their
colours, fonts, and sizes.
• Learn how to write JavaScript code to interact with HTML elements and
the DOM.
• Create simple web pages using HTML5, JavaScript, and CSS3.
• Understand the basics of object-oriented programming principles in
JavaScript.

2|Page
1.Applying OOP in JavaScript

Object-oriented programming (OOP) is a programming paradigm that uses

objects to model real-world entities. An object is a collection of properties and
methods. A property is a data attribute, and a method is a function that is
associated with an object.
OOP in JavaScript is based on functions. Functions are used to create objects
and define their properties and methods. Objects can inherit properties and
methods from other objects, which is called inheritance.
OOP has several advantages, including:
Reusability of code: Objects can be reused in different applications.
Modularity: Objects can be broken down into smaller, more manageable parts.
Abstraction: Objects can hide their internal details, making them easier to use.
Encapsulation: Objects can control access to their properties and methods,
which helps to protect data.
JavaScript is a prototype-based OOP language, which means that objects are
created by copying the properties and methods of an existing object. This makes
it easy to create new objects and extend existing objects.

3|Page
2.HTML5 Canvas and SVG

HTML5 Canvas and SVG are both used to draw graphics on web pages. Canvas
is a pixel-based drawing API, while SVG is a vector-based drawing language.
Canvas is better for dynamic graphics that need to be updated frequently, while
SVG is better for static graphics that need to be scalable and accessible.
Here are some examples of when to use Canvas and SVG:
• Use Canvas for games, animations, and other dynamic graphics that need
to be updated frequently.
• Use SVG for charts, diagrams, and other static graphics that need to be
scalable and accessible.
• Use Canvas for drawing text, as it has better text rendering capabilities
than SVG.
• Use SVG for drawing shapes, as it has more shape options than Canvas.

4|Page
3. Inheritance and Prototypes

JavaScript utilizes a prototype chain to manage objects and their properties. In

JavaScript, most things are objects, and each object possesses a hidden property
called "prototype," creating a chain of linked objects. This chain allows
JavaScript to search for properties or methods in an object's prototype chain if
they are not found in the object itself. When a property isn't found, JavaScript
keeps looking up the chain until it either locates the property or reaches the end
where the prototype is null.
This prototype chain concept is pivotal in implementing classes and inheritance
in JavaScript. You can create an object and extend its prototype by adding
methods. Objects can inherit these methods, making it possible to create new
objects that share properties and functions from existing ones. The example
demonstrates how to use a function called "inherit" to facilitate prototype
inheritance between objects.
In summary, JavaScript's prototype chain mechanism allows objects to inherit
properties and methods from other objects in a hierarchical manner, enabling the
creation of reusable code and the implementation of inheritance.

5|Page
4.Custom Objects

Creating custom objects in JavaScript involves two main steps: declaration and
instantiation. To declare a custom object, you can use the Object function. For
instance, you can declare a custom object called "someObject" and define its
properties.
After declaring the object, you can instantiate it using the new keyword:
var myobject = new someObject("Hello World");
Now, myobject is an instance of the custom object "someObject" with
properties "propertyOne" and "propertyTwo."
In summary, creating custom objects in JavaScript involves declaring the object
with properties and adding methods to its prototype. Instances of the custom
object can then use these methods to perform specific actions on their
properties.

6|Page
5.Basic Layout Container

It discusses the basics of layout containers in web design, emphasizing the use
of HTML5 semantic elements. HTML5 provides structural elements such as
<aside>, <details>, <footer>, <header>, <nav>, <section>, and <summary> to
improve webpage organization. These elements help define different parts of a
webpage, such as sidebars, details, footers, headers, navigation, sections, and
summaries.

To create layout designs, CSS is essential. Several CSS methods are explained,
including CSS Flexbox, which offers flexible column and row layouts but is not
compatible with older versions of Internet Explorer (IE); the CSS float property
for managing elements' positions within the document flow; and CSS
frameworks like Bootstrap and Foundation, which simplify layout design.

The tutorial also highlights the importance of considering browser compatibility

issues, especially for older versions of IE, and the evolving nature of HTML5,
which may lead to changes in browser behaviour. Additionally, it provides an
example of conditional comments for IE compatibility and demonstrates how to
semantically structure content using HTML5 elements for improved styling
with CSS.

7|Page
6.Creating HTML5 Forms

This covers the creation of HTML5 forms. Forms in HTML5 are initiated using
the <form> element, specifying attributes like "action" and "method." The
"action" attribute defines the destination URL where form data is sent upon
submission, often pointing to a script that processes the data. The "method"
attribute specifies the HTTP method used for sending data, with "post"
recommended for security, as it doesn't expose data in the URL.
Within the <form> element, various form elements like input fields can be
added. To create a text input field, use the <input> element with the "type"
attribute set to "text" and a "name" attribute for data submission. Labels can be
associated with input fields using the "for" attribute, enhancing user
accessibility.
Radio buttons, allowing users to select one option from a group, can also be
added using <input> elements with the "type" set to "radio." All radio buttons in
a group should have the same "name" attribute but different "value" attributes.
Using the "checked" attribute on one radio button makes it the default selection.
Finally, a submit button can be included with <input> having "type" set to
"submit," which, when clicked, submits the form data to the specified URL.

8|Page
7.Validating User Input in JavaScript

It explores form validation using JavaScript, a crucial aspect of ensuring data

integrity and accuracy in web applications. HTML forms can leverage
JavaScript to validate user input, with validation procedures executed upon
form submission. There are two primary validation approaches: server-side and
client-side.

Server-side validation occurs after the form data is sent to the server, where
server-side code processes it, potentially sending back messages or redirecting
to another page. In contrast, client-side validation, the focus of this tutorial,
takes place in the browser before data is sent to the server. It ensures that user-
entered data matches the expected format, enhancing user experience and
reducing server-side errors.

The example demonstrates client-side validation, where JavaScript checks if the

"fname" field is empty when the form is submitted. If empty, it triggers an alert
and prevents form submission, ensuring that required fields are filled and data is
in the correct format. Client-side validation helps validate user input before it
reaches the server, enhancing data quality and preventing issues on the server-
side.

9|Page
8.Validate with HTML5 Attributes

This delves into HTML5 constraint validation, a method for validating forms in
web development. HTML5 introduced various attributes for HTML input
elements that help constrain input values and behaviour. Some of these
attributes include:
• Autocomplete: Controls whether the input field allows auto-completion.
• Novalidate: Prevents validation of the input values.
• Disabled: Disables the input field, making it unclickable.
• Size: Defines the size of the input field and its character format.
• Form: Specifies one or more forms associated with the input element.
• Value: Sets the initial value of the input.
• Maxlength: Specifies the maximum length of input.
• Readonly: Makes the input field read-only.
Additionally, there are other input attributes like autocomplete, autofocus,
height, width, list, max, min, pattern, and step that serve various purposes.
HTML5 input attributes facilitate form validation without the need for
JavaScript, allowing developers to specify constraints and requirements directly
in the HTML. For instance, the required attribute ensures that a field must be
filled out before submission, and the type attribute, such as type="email",
specifies the expected input format, simplifying validation and enhancing user
experience.

10 | P a g e
9.HTML5 New Input Types and Content Attributes

HTML5 introduces an array of input types and attributes that enhance the
functionality and usability of web forms. These new features simplify the
collection of user input and validation. Some notable HTML5 input types
include:
• Search: Designed for search fields, simplifying search functionality on
websites.
• Range: Specifies a numeric range with a default of 0 to 100, allowing
input within defined limits.
• Datetime-local: Enables users to input date and time without specifying a
time zone.
• Email: Validates email addresses automatically, ensuring correct format
upon submission.
• Date: Used for date input fields, streamlining date selection.
• Colour: Offers a colour picker for selecting colours in input fields.
• URL: Validates URL addresses, ensuring they follow the correct format.
• Month: Allows users to choose months and years in input fields.
• Tel: For entering telephone numbers, helping maintain proper formatting.
• Week: Enables selection of weeks and years in input fields.
• Number: Specifies numeric input fields.
• Time: Allows users to select time without specifying a time zone.

11 | P a g e
These HTML5 input types simplify form development, reducing the need for
extensive validation and custom scripts. For instance, the 'email' input type
automatically checks email format, and the 'required' attribute ensures users
provide valid email addresses before proceeding to the next form element.
These features enhance user experience and streamline web development.

10.Implementing Encapsulation

In JavaScript, inheritance and encapsulation can be implemented to create

objects with shared functionalities. To achieve this, you can use constructor
functions and prototypes. Here's a breakdown of how this works:
• Constructor Function: You can define a constructor function, like
Mammal, which accepts parameters like species and sound. This function
sets instance-specific properties using this keyword.
• Prototype Methods: You can extend the constructor function's prototype
to define shared methods for instances of the object. For example, you
can create a method like makeSound within the prototype, allowing all
instances of Mammal to access it.
• Encapsulation: Encapsulation is achieved by grouping the object's
functionality within the constructor function and sharing common
methods via the prototype. This way, each instance of the object can
utilize these shared methods and define its unique properties.

12 | P a g e
• Creating Instances: You can create instances of the Mammal object, such
as cat and dog, by calling the constructor function with specific values for
species and sound.
• Method Invocation: Instances of Mammal, like cat and dog, can invoke
shared methods like makeSound. These methods access properties
specific to each instance, resulting in customized outputs.
In summary, encapsulation in JavaScript involves using constructor functions to
define object properties and prototypes to share methods. This allows you to
create multiple instances of an object with shared functionalities while
maintaining individual instance-specific properties.

11.Exercise Using JavaScript OOP and HTML5 Forms

In this exercise, you're tasked with creating a JavaScript object that stores an
initial value upon creation and has two methods. The first method takes a
number as a parameter and adds it to the stored value, and the second method
returns the total for the object. Additionally, you need to create a web page with
a single input box and use the JavaScript object's methods to add the input box's
value to the stored value, outputting the latest sum.

13 | P a g e
Here's a step-by-step summary of the implementation:
• Create a JavaScript object called myObject. Set an initial value (e.g.,
firstValue = 10) as a property of this object.
• Define two methods for myObject:
o addToValue(number): Add the number parameter to the firstValue
property and store the result as total.
o getTotal(): Log the total value to the console.
• Create an HTML form with an input field of type "number" and an ID of
"formValue." Include a submit button.
• Use JavaScript to:
o Retrieve the form element by its ID ("myForm").
o Add an onsubmit event handler to the form.
o Prevent the default form submission behavior using
e.preventDefault().
o Create an instance of myObject called newobject.
o Parse the input value as an integer using parseInt() and pass it to
addToValue() method.
o Call the getTotal() method to log the updated total to the console.
• Add form validation to ensure that only numbers can be entered. Display
a message when non-numeric input is detected.
• Test the implementation by entering numeric values in the input box and
clicking "submit" to see the updated total in the console.
By following these steps, you create an interactive web page that allows users to
input numbers, perform calculations, and see the results in real-time.
Additionally, you've implemented form validation to ensure data integrity.

14 | P a g e
15 | P a g e