The website created with HTML and CSS the content and the styles are static.
That is why we require another technology for web designing, JavaScript. JavaScript can
make the website lively. (JavaScript - dynamic and interactive)
JavaScript instruct the browser how to dynamically change the content and
presentation of the website based on user interactions and user inputs.
Ex: A building has a
structure (e.g., how many rooms and what type), decorations (e.g., floor tiling and
bricked walls), and functions (e.g., serving food to the customers). Similarly, HTML
describes the structure (e.g., what web content - title, image, paragraph, etc.) of the
web page to the browser, CSS describes the styling (e.g., colour and position), and
JavaScript adds behaviours (e.g., display a list of items when the user hovers mouse over
the menu).
JavaScript is the programming language used by front-end web developers to instruct
the browser to add behaviours to the web page. It provides many programming
components like variables, functions, loops, and conditions to implement instructions
for the browser. Using these components, JavaScript can instruct the browser to change
the content and styles of HTML documents or interact with the webserver upon
receiving events generated by the user's interaction with the browser user interface.
DOM
HTML is a markup language; JS is a programming language. JS does not understand
HTML, because HTML uses tags to communicate with the browser.
Here we have some text between paragraph tags.
The HTML DOM has an object corresponding to the paragraph tag.
Assume we want to change the colour of this paragraph to Yellow using JavaScript. To
achieve this, JavaScript accesses the paragraph tag object and changes its colour
property to yellow.
Then browser updates the web page to reflect the new changes to the DOM .
Stands for Document Object Model.
Structures a document as a tree.
The browser generates it when the HTML document loads to the browser.
An object-oriented
representation of a
document. (That means DOM uses the concept of object.)
All the HTML elements (tags) are objects. Then attributes and text are accessible as
properties of objects.
How JavaScript Access DOM
we need to write
some JavaScript code within the HTML document.
We write JavaScript code within script tags.
Now, to access the DOM, we use the DOM API or (Application Programming Interface)
provided by the browser. (Provided by W3C (the standardization organization of the
world wide web))
We first access the root element of the tree. It is the document object.
It contains the complete HTML document, but we are interested in the paragraph tag
object.
So, to access the paragraph tag, we need to use a function provided by the document
object called getElementbyID.
We can give the value of the id attribute in the brackets.
It provides us with the relevant paragraph tag object. Next, we want to change its text
content.
For that, we access a property called textContent in the paragraph tag object.
We can set the value of text content to "Hello!" like this.
How exactly does JavaScript understands objects?
Objects in JavaScript
JavaScript is an object-oriented programming (OOP) language. (High-level Language)
Objects in JavaScript are used to model real-world objects.
Objects have properties and behaviours.
Classes in JavaScript
In JavaScript, the concept of class allows code reuse.
It allows specifying common properties and behaviours under a class. Then objects are
created by giving specific values to properties.
The keyword class tells the browser this block of
code is a class named Car. Inside the class, we
write a mandatory function called the
constructor.
This function sets values to the class properties.
Here, the constructor sets only the colour
property.
You can call this constructor function by new keyword when creating an object from
the class.
To create the object, I give the colour property value blue. To create the red car, I give
the colour property value red.
Exercise:
Write a HTML code to get the user preferred colour using an HTML input element. Then
update the JavaScript code to set the value of the colour style property to the user's
preferred colour.