Module 2
Javascript
Javascript
Module 2
Object in Javascript
What is Object ??
Object is a non-primitive data type used to store collections of data
and more complex entities. It is a fundamental building block of the
language, allowing for the organization and encapsulation of
related information and functionality.
Object in Javascript
● An object can be created with figure brackets {…} with an optional list of properties. A property is
a “key: value” pair, where key is a string (also called a “property name”), and value can be
anything.
● An empty object (“empty cabinet”) can be created using one of two syntaxes:
Usually, the figure brackets {...} are used. That declaration is called an object literal.
Literals and properties
● A property has a key (also known as “name” or “identifier”) before the colon ":" and a value
to the right of it.
In the user object, there are two properties:
○ The first property has the name "name" and the value "John".
○ The second one has the name "age" and the value 30.
● We can add, remove and read files from it at any time.
Property values are accessible using the dot notation:
To remove a property, we can use the delete operator:
● JavaScript is an object-oriented language that views a Web document as a hierarchically
structured collection of objects, methods, and properties.
● Objects are defined in many programming languages. In broad terms, an object is some
defined entity that is named and described with a set of identifiable attributes or
properties that are assigned specific values .
● Parameters can be passed to an object. Document objects are created using the HTML
tags associated with them; further, these objects may have a name attribute defined
that identifies a specific object in a particular document.
● JavaScript has a set of core objects that can be referenced in scripts, such as the
document or date objects.
● JavaScript also permits new objects to be created as needed
● JavaScript uses the dot notation for objects and method. This syntax for
objects provides object names and identifies associated child objects,
properties, or methods.
● The dot notation convention separates these elements with a period (a
“dot”) that reflects the object hierarchy, as in the name “document. form” to
reference a form object within a document, or “[Link]” to identify
a method that displays information within the document object.
● The objects defined in this hierarchy have names, properties, and methods associated
with them.
● The window object has the properties self (refers to the current window itself), frames
(information about each frame window), default status (the status area at the bottom of
the window that displays link addresses when the cursor hovers over them), or top (the
window identified as the first opened window in the session).
● This window object also has methods associated with it, such as presenting a dialog
alert box or other prompting dialog box, as well as methods for opening new windows or
closing them.
● Document objects have a large set of properties and methods in JavaScript.
But it is usually used only for
testing, because:
⚠ After the page loads,
[Link]() will
erase the existing page
⚠ So it is not used in real
websites
Dynamic HTML
What is DHTML ???
● Interactive forms: Validating input fields, showing/hiding elements based on user selections.
○ Google Account Signup – shows errors like “password too short”
● Image galleries and carousels: Changing images and their display based on user navigation.
○ Flipkart home page banner – sliding advertisements
● Real-time data updates: Displaying live data feeds, chat messages, or notifications without refreshing the page.
○ YouTube Live chat
● Dynamic content loading: Loading more content as the user scrolls down a page (infinite scroll).
○ Flipkart/Amazon product list – loads more items as you scroll
● Animations and visual effects: Creating engaging transitions and animations for elements.
○ Canva website – animated elements
Dynamic HTML or DHTML
● DHTML stands for Dynamic Hypertext Markup Language.
● DHTML ⇒ HTML + CSS + JavaScript ⇒ create interactive and dynamic web pages.
○ It allows for customization and changes to the content based on user inputs.
○ Earlier, HTML was used to create static pages that only defined the structure of the [Link] helped
in enhancing the page's appearance. However, these technologies were limited in their ability to create
interactive experiences. DHTML introduced JavaScript and the Document Object Model (DOM) to make
web pages dynamic.
● With DHTML, the web page can be manipulated and updated in response to user actions, eliminating the need
for creating separate static pages for each user.
<!DOCTYPE html>
<html>
<head>
<title>Password Strength Checker</title>
Simple DHTML <style>
body {
font-family: Arial;
padding: 20px;
program }
#strength {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Check Password Strength</h3>
<input type="password" id="password" placeholder="Enter Password" onkeyup="checkStrength()">
<p id="strength"></p>
<script>
function checkStrength() {
let pwd = [Link]("password").value;
let strengthText = [Link]("strength");
if ([Link] === 0) {
[Link] = "";
return;
}
if ([Link] < 4) {
[Link] = "Weak Password";
[Link] = "red";
}
else if ([Link] < 8) {
[Link] = "Medium Password";
[Link] = "orange";
}
else {
[Link] = "Strong Password";
[Link] = "green";
}
}
</script>
</body>
</html>
● It allows for customization and changes to the content based on user inputs.
● With DHTML, the web page can be manipulated and updated in response to
user actions, eliminating the need for creating separate static pages for each
user.
Javascript Object Notation (JSON)
● The JSON (JavaScript Object Notation) is a
general format to represent values and
objects.
● Initially it was made for JavaScript, but many
other languages have libraries to handle it as
well.
● It is a lightweight data format used to store
and exchange data between applications.
● JSON is used to send data between Frontend
(browser) and Backend (server).
JSON
● Without JSON, APIs cannot send or receive data.
● JSON acts like a universal format that every database and language understands.
● Frontend (JS) ⇆ JSON ⇆ Backend
● JSON is needed when data is more than a single value and you must send multiple
values together from one system to another.
○ User profile