15 JAVASCRIPT and HTML Document Object Model or D_241025_132441
15 JAVASCRIPT and HTML Document Object Model or D_241025_132441
DOM
15.1 INTRODUCTION
15.2 OBJECTIVES
15.10 SUMMARY
15.1 INTRODUCTION
HTML documents are shown in the windows of the browser, with the former represented by the window
objects. There is a document property on this window that points to a document object. The objects in the
document object are representations of the document's content. HTML documents include forms,
graphics, text, and hyperlinks. All document's content can be accessed and manipulated by JavaScript
code. The way in which a document is accessed is specified by the API and is called a Document Object
Model (DOM), providing cross-browser portability for JavaScript scripts and Java programs, as it was
originally envisaged. DOM also defines the logical structure of documents, telling how to open and edit
documents.
Document Object Model further led to ‘Dynamic HTML.’ It came to be known as DHTML. This unit
explains the Document Object Model or DOM in detail.
15.2 OBJECTIVES
● After going through this unit, you should be able to:
● define the Document Object Model
● develop JavaScript code to handle HTML DOM
● create documents and navigate through their structures
● add, modify and delete elements and content;
Source:
https://en.wikipedia.org/wiki/Client%E2%80%93server_model#/media/File:Client-server-model.svg
Scripting enables web pages to respond dynamically to user actions by executing a series of commands or
scripts when specific events occur. These events can be anything from clicking a button, hovering over a
link, submitting a form, to resizing a window. Script or scripting language is a computer language that
does not need the compilation step and is rather interpreted one by one at runtime. It is where the script is
written and where instructions for a run-time environment are written.
Scripting languages are often embedded in the HTML pages to change the behaviour of the web pages
according to the user’s requirements.
Difference between client-side and server-side scripting
Server-side scripts are executed on the web server in response to a user's request. The server processes the
script and sends the resulting HTML (or other formatted data) to the user's browser. Client-side scripts are
executed in the user's browser, not by the web server. The web server provides the scripts as part of the
web page, and the browser runs these scripts to modify the page dynamically after it has been loaded or in
response to user actions.
Client-side scripts are not executed by the web server. Instead, they are executed by the user's web
browser (e.g., Chrome, Firefox). The web server sends the client-side scripts (usually written in
JavaScript) along with the HTML, CSS, and other resources to the user's browser. The browser then
interprets and runs these scripts locally on the user's machine.
Source: https://images.app.goo.gl/EDQMcNaJ4AUCkRuYA
Source: https://images.app.goo.gl/p1mX8WUtDCs2eWH29
Source: https://slideplayer.com/slide/5854201/
Source: https://studyopedia.com/cpp/cpp-classes-objects/
JavaScript is a scripting language, which can be executed on the client-side and on the server side. It is
primarily known for its role in client-side web development, where it is executed directly in the web
browser on the user's device.
JavaScript code should be enclosed between the <SCRIPT> and </SCRIPT> tags. <Script Tag> defines a
script for an HTML page to make them interactive. The browser that supports scripts interprets and
executes the script specified under the <script> tag when the page loads in the browser. There are two
main purposes of the <script> tag. One is to identify a given segment of the script in the HTML page and
another one is to load an external script file. Generally what people do is include the JavaScript code
within the <HEAD> and </HEAD> tags and it is the right approach.
Now let us talk about variables. A variable is a symbolic name that represents a value stored in the
computer's memory. Variables are used to store and manage data in a program, and their values can
change during the execution of the program. For example, the age of a student and the salary of an
employee can be treated as variables. Variables need to be name specific, but the names must be in
keeping with the rules. Variable names must adhere to certain rules. Names must begin with a letter
(uppercase or lowercase) or an underscore (_). The following characters can be letters (A-Z, a-z), digits
(0-9), or underscores (_). JavaScript is case-sensitive, so "myVariable" and "myvariable" would be treated
as distinct variables. The characters that follow can also be digits (0-9). It distinguishes between
uppercase and lowercase letters, so variables named with different letter cases are considered distinct.
Generally, meaningful variable names are chosen so that they relate to the value they hold.
Declaring Variables
Example:
Var studID;
studID = 50;
StudName = “Ram”
The variable name is on the left-hand side of expression and the value you want to assign to the variable
is on the right side. Thus, the variable “StudName” shown above gets the value “Ram” assigned to it.
Functions
JavaScript functions are an integral part of the language. They allow you to encapsulate a set of
statements to perform a specific task and can be reused throughout your code. Here's an example of how
you can create a basic function:
You can also create functions that take parameters and return values:
// Function that takes in a name as a parameter and returns a greeting
function greetWithName(name) {
return `Hello, ${name}!`;
}
// Calling the function and storing the result in a variable
let greeting = greetWithName("Alice");
console.log(greeting); // This will print 'Hello, Alice!' to the console
A JavaScript function is essentially a block of code designed to perform a particular task. A function is
executed when something invokes it (calls it). By encapsulating code within functions, you prevent it
from running immediately when the page loads. Instead, the function's code runs only when the function
is explicitly called. We may call a function from anywhere within the page. Functions can be defined
either <head> or <body> section.
They are defined using the function keyword followed by a name (if you want to name the function) and
a set of parentheses that can contain parameters.
Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>
So, this script first generates a click button, then calls the function and after the function
is finished it continues to execute the rest of the instructions in the calling code.
Result:
Source:
https://sceweb.sce.uhcl.edu/helm/WEBPAGE-Javascript/my_files/Object/Module-9/module9page.html
Window Object: The window object serves as the top-level object in the browser's JavaScript
environment. It represents the window or tab that contains the web page, providing access to various
properties and methods related to the browsing context. Within the window object, several key objects
exist like current frame, history list, and the web page document. The web page document contains its
own set of objects, including links, anchors, and forms. Within each form are form objects, such as input
boxes, radio buttons, or selection lists.
The window object includes a wide array of properties and methods to interact with the browser window
or tab. One of the most significant properties of the window object is the document property.
when you access the document object in JavaScript within a browser, you're actually referencing a
property of the window object. For instance, you might see code like:
Both window.document and document are interchangeable when referring to the Document object within
the browser's JavaScript environment. This is because document is a property of the window object and
serves as an entry point to interact with the DOM.
Document object: The document object is the representation of an HTML document once it's loaded into
a browser window. It serves as an entry point to interact with and manipulate the content of the webpage.
Form Object: It represents an HTML form element and its associated properties and methods. Within a
web page's Document Object Model (DOM), forms are represented as objects, allowing JavaScript to
interact with and manipulate their attributes and elements.
Link Object: This used to link external resources, such as stylesheets or icon files, to an HTML
document. The link object, accessed through the document object, represents each <link> element in the
DOM and allows JavaScript to interact with and manipulate these elements. These <link> elements are
typically used to reference external resources and provide metadata about the document.
Anchor Object: The anchor object represents an HTML <a> (anchor) element. Anchors are used to
create hyperlinks within HTML documents, allowing users to navigate to different pages or sections
within the same page.
Form Control Elements: Form control elements in the Document Object Model (DOM) represent
various HTML form elements, such as input fields, buttons, checkboxes, radio buttons, select lists, and
more. These elements are accessible via JavaScript and are part of the DOM hierarchy when they're
present within an HTML <form> element.
Event Object: The Event object represents an occurrence or interaction that happens within the browser.
Events can be triggered by user actions (like clicks, mouse movements, keyboard inputs), the browser
(like page load, resize), or by scripts and can be handled by event listeners or event handlers in
JavaScript.
● getElementById() is a method of the document object used to select an element by its unique id.
● id is the parameter passed to the getElementById() method, representing the specific ID attribute
value of the HTML element you want to retrieve.
● innerHTML: Modifies the content within an element.
The general format is:
Result: As shown below the colour of the content of h2 element is changed from default colour (black) to
blue
Check Your Progress
15.10SUMMARY
Scripting involves writing scripts using a scripting language, which is a type of programming language
that is typically interpreted rather than compiled. JavaScript has been discussed at length in the unit. This
unit introduced you to the concept of Document Object Model (DOM) acting as the bridge between web
documents (such as HTML and XML documents) and scripting languages like JavaScript. DOM treats an
XML/HTML document, which is a cross-platform and language-independent interface. When an XML or
HTML document is loaded into a web browser, the browser creates a representation of the document in
memory as a tree-like structure, where each element, attribute, and piece of text becomes a node in the
tree. Therefore, DOM can be thought of as a way to interact with and represent objects within HTML
texts. In this unit, the Document Object Model or DOM has been explained in detail.