Scribd
Upload
16 views

Chapter 5 Lesson 3 PDF

Exercise to boost your marks

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Chapter 5 Lesson 3 PDF

Exercise to boost your marks

Uploaded by

mokoneaujan
Copyright
© © All Rights Reserved
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