Scribd
Upload
23 views15 pages

Chapter 5 Lesson 3 PDF

Exercise to boost your marks

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
23 views15 pages

Chapter 5 Lesson 3 PDF

Exercise to boost your marks

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

ICT1512

Chapter 5
Lesson 3

Running Timed
Commands
Working with Popup
Windows
Creating an Overlay
Exploring the Browser
Object Model
Objectives
• You will have mastered the material in this lesson
when you can:
– Define a timed command that repeats a function or
command block at set intervals.
– Create system dialog boxes that receive user input.
– Open and configure a browser popup window.
– Create an overlay that lies on top of a web document.
– Work with the objects within the Browser Object Model.
Running Timed Commands
• Repeating commands at specified intervals
– Timed command: a command or function that is run at a specified time or
repeated at set intervals
– Syntax to create timeVar, a timed command that repeats a command at set
intervals:
timeVar = window.setInterval(command, interval)
• Stopping a timed command
– Timed commands must be stopped after initiation using the
clearInterval() method:
window.clearInterval(timeVar)
• Using time-delayed commands
– Syntax to create timeVar, a timed command that runs once after a specified
delay:
let timeVar = window.setTimeout(command, delay);
– To prevent a delayed command from running, use the clearTimeout()
method:
window.clearTimeout(timeVar)
Working with Popup Windows
• Popup windows: external windows opened and displayed
on top of or adjacent to the application content
• System dialog boxes
– Alert windows are created with the window.alert() method
– Confirmation windows display a message plus OK and Cancel
buttons
• Created with the method: response = window.confirm(message)
• Returns response, a Boolean value (true = OK, false = Cancel)
– Prompt windows display a message plus a text input box
• Created with the method: response = window.prompt(message,
default)
• Returns response, a text string
Working with Popup Windows - Continued
• Working with browser windows
– You can open a new window object with its own collection of
properties and methods, which can be used to define its
appearance and content
– Syntax for creating a new browser window:
window.open(url, title, options, replace)
• url is the location of the file to display
• title is the window's title
• options is a comma-separated list of features defining the window's
appearance
• replace is an optional Boolean value to specify whether url should create
a new entry in the window's history list (true) or replace the existing entry
(false)
• url, title, and options are enclosed in double quotation marks
– When you assign a new window to a variable, you can apply
properties and methods of the window object to it after creation
Working with Popup Windows - Continued
• Writing content to a browser window
– You can add nodes to the new window's web document by
referencing the window.document.body object where window
is the variable name for the window
– You can add content as a single text string with the
document.write() method
• Limitations of browser windows
– Often blocked by popup blockers
• Usually not blocked when a user-initiated event opens the window
– Don't scale well to small screens
– Cannot display files loaded locally on a user's computer
– Handled inconsistently among browsers as regards supported
features
Creating an Overlay
• Overlay: an element that lays on top of the rest of
the page content, partially obscuring that content
– Type of modal (a.k.a. modal window), a window that
takes control of an application and must be closed
before the user can continue using the app (like popup
dialog boxes)
• Can be created as a div element sized to cover the
browser window using HTML and CSS
Creating an Overlay - Continued

Figure 5-28
this Object
• Introducing the this object
– The this object references the owner of a currently running segment of
JavaScript code
• For an anonymous function called by an event handler/listener, the owner of the
function is the object that initiated the event (e.g., an image that was clicked)
– Sample statements using the this object to clone the node that called the
function:
let overlayImage = this.cloneNode("true");
figureBox.appendChild(overlayImage);
Removing a Node
• Syntax to remove a node, where node is the
parent of the node to be removed and old is
the node to be removed itself:
node.removeChild(old)
Designing the Look of an app

• Place design choices in CSS stylesheet to


make the app's visual appearance easy to
modify
• One strategy is to use class names to apply
formatting so that the details are stored in the
CSS file, not the JavaScript file
Exploring the Browser Object Model

Figure 5-33
Exploring the Browser Object Model - Continued

• The window object (root node) is referred to as the global


object because all other objects in the BOM are contained
within it
• The history object
– History list: list of all the pages that have been opened during the
current session maintained by a browser window
– history object: object that stores history list information (but not
the actual contents or addresses of the pages)
• The location object
– location object: object that stores information about the current
page opened in the browser
– Can be used to provide a URL to load in a new browser window
Exploring the Browser Object Model - Continued

• The navigator object


– navigator object: object used to obtain information about the user's browser
– Primarily used for debugging or for verifying that the user is running a
compatible browser or operating system
– Usually more effective to use object detection to determine whether the browser
supports a section of code and use a try catch statement to handle
exceptions
• The screen object
– screen object: object that stores information about the user's screen
Designing your web app

• Know your users


• Determine how your app will be used
• Provide constant feedback to users
• Anticipate user errors
• Keep it simple to use

You might also like