Mirpur University of Science and Technology: Deparment Software Engineering

MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY
DEPARMENT OF SOFTWARE ENGINEERING

Client-side Scripting – JavaScript
(lecture # 12)
Engr. Muhammad Raees

(Lecturer)
Date: April 23, 2020

LECTURE CONTENTS
• JavaScript Event Handling

• Selectors
• History, Navigator and form objects
Web Design & Development 3

Element Handling
• To access HTML elements using the DOM, several methods are offered by the object
document
• document.getElementById(“element-id”): accesses an element via its id
• getElementByTagName(“tag-name”): gets all the elements of the given tag as an
array of objects
• getElementsByName(“name”): returns an array of objects containing all the
elements whose attribute name is equal to the given argument
• querySelector(); This function takes as a parameter a string representing a CSS
selector, Returns the first element that corresponds to this selector
• querySelectorAll(); Returns an array of all the elements corresponding to the given
selector
• getAttribute() method is used to retrieve values of attributes
• document.getElementById(“elementid”).getAttribute(“attribute-name”)
• document.getElementById(“pic”).getAttribute(“src”)
• setAttribute() method is used to set values of attributes
• document.getElementById(“element-id”).setAttribute(“attribute-name”, ”Value”)
• document.getElementById(“pic”).setAttribute(“src”, ”abc.jpg”)
4
Web Design & Development
Element and Query Selector
var getByid=
<!doctype html> document.getElementById('myMenu');
<html>
<head> var getElementByTagName =
<meta charset="utf-8" /> document.getElementsByTagName("div");
<title> My Test Page </title> var getElementByName =
</head>
<body> document.getElementsByName("myName");
<div id="myMenu"> console.log("Result of getElementById : " +
<div class="item"> getByid.textContent);
<span> Menu 1</span>
<span> Menu 2</span> console.log("Result of getElementByTagName:");
</div> for(var i=0;i<getElementByTagName.length;i++){
<div class="Pub"> console.log(getElementByTagName[i]);
<span> Pub 1</span>
<span> Pub 2</span> }
</div> console.log("Result of getElementByName : ");
</div> for(var i=0;i<getElementByName.length;i++){
<div id="content">
<span> console.log(getElementByName[i]);
Here is my content } var querySel=
</span>
document.querySelector("head title");
</div>
A weird form to test var querySelAll=
getElementsByName() : document.querySelectorAll("#myMenu .item
<form name="myName">
span");
<input type="password"
name= "myName"> console.log("Result of querySelector : " +
<input> querySel.textContent);
<button name="myName"></button>
console.log("Result of querySelectorAll : ");
</form>
<script src="test.js"></script> for(var i=0;i<querySelAll.length;i++){
</body> console.log(querySelAll[i].textContent);
</html>
}
Image Rolling and Slide Show
Task: Image Preview
6
Attributes Selector
• There are some useful attributes that help extracting DOM elements
• nodeType: gets the type of DOM node, in the form of a number such as:
• Element
• Attribute
• Text
• nodeName: gets the name of the element node in Uppercase
• Other attributes to go through the DOM
• parentNode: enables to access the parent node of an element
• firstChild : enables to access the first child of a node
• lastChild: enables to access the last child of a node
• firstElementChild : enables to access the first element child of a node
• lastElementChild : enables to access the last element child of a node
• childNodes: returns an array containing all the child nodes
• nextSibling: accesses the next node, sibling of the current
• previousSibling: accesses the previous node

Event Handling
• HTML DOM events allow JavaScript to register different event handlers on

elements in an HTML document.
• Events are normally used in combination with functions, and the function will not
be executed before the event occurs (such as when a user clicks a button).
• Every DOM element has its own addEventListener method, which allows you to
listen specifically on that element.
• The removeEventListener method, called with arguments similar to as
addEventListener, removes a handler. <button>Act-once button</button>
<button>Click me</button> <script>
<p>No handler here.</p> var button = document.querySelector("button");
<script> function once() {
var button = document.querySelector("button"); console.log("Done.");
button.addEventListener("click", function() { button.removeEventListener("click", once);
alert("Button clicked."); }
}); button.addEventListener("click", once);
</script> </script>
Event Propagation
• DOM elements can be nested inside each other. And somehow, the handler of the parent
works even if you click on it’s child.
• If a button inside a paragraph is clicked, event handlers on the paragraph will also
receive the click event.
• Event Propagation:
• In all browsers, except IE <9, there are two stages of event propagation:
• The event first goes down, from the topmost element to the innermost element:
called Capturing (1->2->3)
• It then bubbles up, to trigger on parents in nesting order: called Bubbling (3->2-
>1)
• All methods of event handling ignore the capturing phase.
• By default, only the bubbling takes place
• Using addEventListener with last argument true is only the way to catch the event at
capturing.
• The event object has a target property refering to the node where they originated
Events
• Javascript defines various DOM events, such as:

• onmouseover: when the mouse hovers over the element
• onblur: when the element loses focus
• onfocus: when the element gains focus
• onselect: when the element is selected
• onchange: when the content of the element is changed
• onsubmit: when a form is submitted
• onload: when an element ends its loading phase
•…

Task
• Step1: Interface
• Create an interface that looks like the following
• Step 2:
• Add a listener to the button add, that adds the written element to the todolist
• Add a listener for the modify button, that modifies the element which id is
given in the first input with the task in the second
• Add a listener for the delete button, that deletes the task which id is given in
the input
• Add a listener to the toggle completed button, that does that to the task which
id is given in the input
• Add a listener to the ToggleAll button
• Step 3:
• Now, the tasks will be displayed in an unordered list under the form. Every
modification of the list is immediately impacted on the display
History
The history object contains the URLs visited by the user (within a browser window)
The history object is part of the window object and is accessed through the window.history
property
12
History
• The history object contains the URLs visited by the user (within a browser
window)
• The history object is part of the window object and is accessed through the
window.history property
• Used to move forward and backward through the visitor’s browsing history
• Length: Returns the number of URLs in the history list
• back(): Loads the previous URL in the history list
• forward(): Loads the next URL in the history list
• go(): Loads a specific URL from the history list

Navigator
• The navigator object contains information about the browser

• provides several properties that assist in the detection of various elements of the
visitor’s browser and environment
Navigator object properties:

appCodeName: Returns the code name of the browser
appName: Returns the name of the browser
appVersion: Returns the version information of the
browser
Navigator object methods:
javaEnabled(): Specifies whether or not the browser
has Java enabled

Form
• The Form object represents an HTML form

• For each <form> tag in an HTML document, a Form object is created
• The browser crates a ‘forms array’ which keeps the number of form objects in the
HTML program
• The first form object in the HTML file being held as array index [0], the second as
index [1] and so on
document.forms[0].name.value = “ali”
<body> or
document.form1.elements[0].value = “ali”
<form name=“form1”>
<input type=“text” name=“name”>
<input type=“text” name=“email”> document.forms[0].email.value = “ali”
</form> or
</body> document.form1.elements[1].value = “ali”
15
References
• Chapter 11, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,

Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.
• M. Haverbeke, Eloquent JavaScript: A modern introduction to programming, 2014

THANKS

Mirpur University of Science and Technology: Deparment Software Engineering

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Mirpur University of Science and Technology: Deparment Software Engineering

Uploaded by

Copyright:

Available Formats

MIRPUR UNIVERSITY OF SCIENCE AND TECHNOLOGY

DEPARMENT OF SOFTWARE ENGINEERING

Engr. Muhammad Raees

Date: April 23, 2020

• JavaScript Event Handling

Web Design & Development 3

Task: Image Preview

Web Design & Development 7

• HTML DOM events allow JavaScript to register different event handlers on

• Javascript defines various DOM events, such as:

Web Design & Development 10

Web Design & Development 13

• The navigator object contains information about the browser

Navigator object properties:

Web Design & Development 14

• The Form object represents an HTML form

• Chapter 11, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett,

Web Design & Development 16

You might also like