UNIT II- DYNAMIC HTML & JAVASCRIPT

Dynamic HTML – Introduction – cascading style sheets – JavaScript. Introduction – control

structures – functions – arrays – objects – simple web applications, object model and collections
– event model – filters and transition – data binding – data control.

Exercise: Home page Development static pages (using Only HTML) of an online Book store.
---------------------------------------------------------------------------------------------------------------------
---

Dynamic HTML – Introduction

Dynamic HTML is not a markup or programming language but it is a term that combines
the features of various web development technologies for creating the web pages dynamic and
interactive.

Components of Dynamic HTML

DHTML consists of the following four components or languages:
o HTML 4.0
o CSS
o JavaScript
o DOM.
HTML 4.0
HTML is a client-side markup language, which is a core component of the DHTML. It defines
the structure of a web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling
the style and layout of the HTML elements on the web pages.
JavaScript
JavaScript is a scripting language which is done on a client-side. The various browser supports
JavaScript technology. DHTML uses the JavaScript technology for accessing, controlling, and
manipulating the HTML elements. The statements in JavaScript are the commands which tell the
browser for performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a standard interface of
programming for HTML. It is mainly used for defining the objects and properties of all elements
in HTML.

Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):
o It is used for designing the animated and interactive web pages that are developed in real-
time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.
 Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):
o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content
of a web page.
o It provides the facility for using the events, methods, and properties. And, also provides
the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.
Difference between HTML and DHTML
Following table describes the differences between HTML and DHTML:

HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup

language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of

technologies of web development.

2. It is used for developing and creating 2. It is used for creating and designing the
web pages. animated and interactive web sites or pages.

3. This markup language creates static web 3. This concept creates dynamic web pages.
pages.

4. It does not contain any server-side 4. It may contain the code of server-side
scripting code. scripting.

5. The files of HTML are stored with 5. The files of DHTML are stored with
the .html or .htm extension in a system. the .dhtm extension in a system.

6. A simple page which is created by a 6. A page which is created by a user using the
user without using the scripts or styles HTML, CSS, DOM, and JavaScript
called as an HTML page. technologies called a DHTML page.

7. This markup language does not need 7. This concept needs database connectivity
database connectivity. because it interacts with users.

Example 1: The following example shows the current date and time with the JavaScript and
HTML event (Onclick). In this example, we type the JavaScript code in the <head> tag.
<html>
<head>
<title>
DHTML with JavaScript
</title>
<script type="text/javascript">
function dateandtime()
{
alert(Date());
}
</script>
</head>
<body bgcolor="orange">
<font size="4" color="blue">
<center> <p>
Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
# to check the today's date and time.
</p> </center>
</font>
</body>
</html>

Cascading Style Sheets

o CSS stands for Cascading Style Sheet.
o CSS is used to design HTML tags.
o CSS is a widely used language on the web.
o HTML, CSS and JavaScript are used for web designing. It helps the web designers to
apply style on HTML tags.
CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the
look and formatting of a document written in markup language. It provides an additional feature
to HTML. It is generally used with HTML to change the style of web pages and user interfaces.
It can also be used with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.
 CSS can:
o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in CSS
code.

CSS Syntax
A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.
Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned
to color property.
Selector{Property1: value1; Property2: value2; ..........;}

CSS is added to HTML pages to format the document according to information in the style sheet.
There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS

1) Inline CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color:blue">Hello CSS</p>
For more visit here: Inline CSS

2) Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of
the page. It is written inside the style tag within head section of html.
For example:
<style>
p{color:blue}
</style>

3) External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS
code in a css file. Its extension must be .css for example style.css.
For example:
p{color:blue}
You need to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
The link tag must be used inside head section of html.

CSS Example with CSS Editor

<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Write Your First CSS Example</h1>
<p>This is Paragraph.</p>
</body>
</html>

JavaScript.
JavaScript (js) is a light-weight object-oriented programming language which is used by
several websites for scripting the webpages. It is an interpreted, full-fledged programming
language that enables dynamic interactivity on websites when applied to an HTML document. It
was introduced in the year 1995 for adding programs to the webpages in the Netscape Navigator
browser. Since then, it has been adopted by all other graphical web browsers. With JavaScript,
users can build modern web applications to interact directly without reloading the page every
time. The traditional website uses js to provide several forms of interactivity and simplicity.
Although, JavaScript has no connectivity with Java programming language. The name
was suggested and provided in the times when Java was gaining popularity in the market. In
addition to web browsers, databases such as CouchDB and MongoDB uses JavaScript as their
scripting and query language.

Features of JavaScript
There are following features of JavaScript:
1. All popular web browsers support JavaScript as they provide built-in execution
environments.
2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a
structured programming language.
3. JavaScript is a weakly typed language, where certain types are implicitly cast (depending
on the operation).
4. JavaScript is an object-oriented programming language that uses prototypes rather than
using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In the year
1994, Netscape was founded by Marc Andreessen. He realized that the web needed to become
more dynamic. Thus, a 'glue language' was believed to be provided to HTML to make web
designing easy for designers and part-time programmers. Consequently, in 1995, the company
recruited Brendan Eich intending to implement and embed Scheme programming language to
the browser. But, before Brendan could start, the company merged with Sun Microsystems for
adding Java into its Navigator so that it could compete with Microsoft over the web technologies
and platforms. Now, two languages were there: Java and the scripting language. Further,
Netscape decided to give a similar name to the scripting language as Java's. It led to 'Javascript'.
Finally, in May 1995, Marc Andreessen coined the first code of Javascript named 'Mocha'.
Later, the marketing team replaced the name with 'LiveScript'. But, due to trademark reasons
and certain other reasons, in December 1995, the language was finally renamed to 'JavaScript'.
From then, JavaScript came into existence.

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:
o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box),
o Displaying clocks etc.

JavaScript Example
<script>
document.write("Hello JavaScript by JavaScript");
</script>
Introduction to Control Structures
Control Structure
Control structure actually controls the flow of execution of a program. Following are the several
control structure supported by javascript.
 if … else
 switch case
 do while loop
 while loop
 for loop
If … else
The if statement is the fundamental control statement that allows JavaScript to make decisions
and execute statements conditionally.

Syntax
if (expression){
Statement(s) to be executed if expression is true
}

Example
<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
Switch case
The basic syntax of the switch statement is to give an expression to evaluate and several different
statements to execute based on the value of the expression. The interpreter checks each case
against the value of the expression until a match is found. If nothing matches, a default condition
will be used.

Syntax
switch (expression) {
case condition 1: statement(s)
break;
case condition 2: statement(s)
break;
...
case condition n: statement(s)
break;
default: statement(s)
}
Example
<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br/>");
switch (grade) {
case 'A': document.write("Good job<br/>");
break;
case 'B': document.write("Pretty good<br/>");
break;
case 'C': document.write("Passed<br/>");
break;
case 'D': document.write("Not so good<br/>");
break;
case 'F': document.write("Failed<br/>");
break;
default: document.write("Unknown grade<br/>")
}
document.write("Exiting switch block");
//-->
</script>

Do while Loop
The do...while loop is similar to the while loop except that the condition check happens at the
end of the loop. This means that the loop will always be executed at least once, even if the
condition is false.

Syntax
do{
Statement(s) to be executed;
} while (expression);

Example
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
do{
document.write("Current Count : " + count + "<br/>");
count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>
This will produce following result −
Starting Loop
Current Count : 0
Loop stopped!

While Loop
The purpose of a while loop is to execute a statement or code block repeatedly as long as
expression is true. Once expression becomes false, the loop will be exited.
Syntax
while (expression){
Statement(s) to be executed if expression is true
}
Example
<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br/>");
while (count < 10){
document.write("Current Count : " + count + "<br/>");
count++;
}
document.write("Loop stopped!");
//-->
</script>
This will produce following result −
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

For Loop
The for loop is the most compact form of looping and includes the following three important
parts −
 The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.
 The test statement which will test if the given condition is true or not. If condition is true
then code given inside the loop will be executed otherwise loop will come out.
 The iteration statement where you can increase or decrease your counter.
Syntax
for (initialization; test condition; iteration statement){
Statement(s) to be executed if test condition is true
}

Example
<script type="text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br/>");
for(count = 0; count < 10; count++){
document.write("Current Count : " + count );
document.write("<br/>");
}
document.write("Loop stopped!");
//-->
</script>

This will produce following result which is similar to while loop −

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

Java Script Functions

JavaScript functions are used to perform operations. We can call JavaScript function many
times to reuse the code.
Advantage of JavaScript function
There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it save coding.
2. Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.

JavaScript Function Syntax

The syntax of declaring function is given below.
function functionName([arg1, arg2, ...argN]){
//code to be executed
}
JavaScript Functions can have 0 or more arguments.

JavaScript Function Example

Let’s see the simple example of function in JavaScript that does not has arguments.
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>

Java Script - Arrays

JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and separated by , (comma).
Let's see the simple example of creating and using array in JavaScript.
<script>
var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}
</script>
The .length property returns the length of an array.
Output of the above example
Sonoo
Vimal
Ratan

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
Let's see the example of creating array directly.
<script>
var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
 emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
1. Output of the above example
Arun
Varun
John

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we
don't have to provide value explicitly.
The example of creating object by array constructor is given below.
<script>
var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Output of the above example
Jai
Vijay
Smith

Java Scripts Objects

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and method). For
example: car, pen, bike, chair, glass, keyboard, monitor etc.
JavaScript is an object-based language. Everything is an object in JavaScript.
JavaScript is template based not class based. Here, we don't create class to get the object. But,
we direct create objects.

Creating Objects in JavaScript

There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:
object={property1:value1,property2:value2.....propertyN:valueN}
As you can see, property and value is separated by : (colon).
Let’s see the simple example of creating object in JavaScript.
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output of the above example
102 Shyam Kumar 40000

2) By creating instance of Object

The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create object.
Let’s see the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output of the above example
101 Ravi 50000

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can be assigned in the
current object by using this keyword.
The this keyword refers to the current object.
The example of creating object by object constructor is given below.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
Output of the above example
103 Vimal Jaiswal 30000
The example of defining method in object is given below.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
this.changeSalary=changeSalary;
function changeSalary(otherSalary){
this.salary=otherSalary;
 } }
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>
Output of the above example
103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000

Simple Web Applications, Object Model And Collections – Event Model – Filters And
Transition – Data Binding – Data Control.

Object Model And Collections

The object model
The object model gives access to all elements of a Web page, whose properties and
attributes can thus be retrieved or modified by scripting. The value of the id attribute of an
element becomes the name of the object representing that element.
The various HTML attributes of the element become properties of this object (which
can be modified). For example, the value of the innerText property of a p element is the text
within that element. So, if we have a P element with id pText, we can dynamically change
the rendering of this element with, e.g.,
pText.innerText = “Good bye!”;

This is dynamic content.

In the following example, the function (not the window method) alert is used to pop
up an alert box.
Example:
<html>
<head>
<title>object model</title>
<script type = "text/javascript">
function start()
{
alert( pText.innerText );
pText.innerText = "Good bye!";
}
</script>
</head>
<body onload = "start()">
<p id = "pText">hello!</p>
</body>
</html>
When the page is loaded, the following appears both in the window and in an alert
box:
Hello!
 After the alert box is dismissed, the following appears in the window:
Good bye!
Collections
A collection is an array of related objects on a page. The all collection of an element
(syntactically a property) is a collection of all the elements in it in order of appearance. This
gives us reference even to elements that lack ID attributes. Like all collections, it has a
length property. For example,
document.all[ i ]
references the i th element in the document.
The following are needed for the next example.
The innerHTML property of a p element is like the innerText property but may contain HTML
formatting.
The tagName property of an element is the name of the HTML element.

Example:
<html>
<!-- Using the all collection -->
<head>
<title>Object Model</title>
<script type = "text/javascript">
var elements = "";
function start()
{
for ( var loop = 0;
loop < document.all.length; ++loop )
elements += "<BR>" +
document.all[ loop ].tagName;
pText.innerHTML += elements;
}
</script>
</head>
<body onload = "start()">
<p id = "pText">Elements on this Web page:</p>
</body>
</html>

Elements on this Web page:

HTML
HEAD
TITLE
!
SCRIPT
BODY
P

Note that the tagName property of a comment is !.

The children collection for an object is like the all collection but contains only the next level
down in the hierarchy.
For example, an HTML element has a head and a body child.
In the following example, function child(object) does a preorder traversal of the part of the object
hierarchy rooted at object.
For every object with children, it appends on to global variable elements
· <li>,
· the name of the HTML element represented by the object,
· <ul>,
· similar information for the children (iteratively) and more distant descendants (recursively) of
the object, and
· </ul>
The body tag is
<body onload = “child( document.all[ 1 ] );
myDisplay.outerHTML += elements;”>
When the page is loaded, this calls child, passing it the second object in the hierarchy.
(The first element is the comment at the top of the file.)
When control returns from the call, the string in global variable elements (containing the
hierarchical description of the obects) is appended to the value of the outerHTML property of P
element myDisplay.
Property outerHTML is like innerHTML but includes the enclosing tags.

Example:
<!-- The children collection -->
<head>
<title>Object Model</title>
<script type = "text/javascript">
var elements = "<ul>";
function child( object )
{
var loop = 0;
elements += "<LI>" + object.tagName + "<UL>";
for( loop = 0; loop < object.children.length;
loop++ )

if ( object.children[loop].children.length )
child( object.children[ loop ] );
else
elements += "<LI>" +
object.children[ loop ].tagName
+ "</LI>";
elements += " </UL> ";
}
</script>
</head>
<body onload = "child( document.all[ 1 ] );
myDisplay.outerHTML += elements;">
<p>Welcome to our <strong>Web</strong> page!</p>
<p id = "myDisplay">
Elements on this Web page:
</p>
</body>
</html>

Welcome to our Web page!

Elements on this Web page:
· HTML
· HEAD
· TITLE
· SCRIPT
· BODY
·P
· STRONG
·P

Event model
JavaScript Events
The change in the state of an object is known as an Event. In html, there are various events
which represents that some activity is performed by the user or by the browser.
When javascript code is included in HTML, js react over these events and allow the execution.
This process of reacting over the events is called Event Handling. Thus, js handles the HTML
events via Event Handlers.
For example, when a user clicks over the browser, add js code, which will execute the task to be
performed on the event. Some of the HTML events and their event handlers are:
Mouse events:
Event Performed Event Handler Description

click onclick When mouse click on an element

mouseover onmouseover When the cursor of the mouse comes over the element

mouseout onmouseout When the cursor of the mouse leaves an element

mousedown onmousedown When the mouse button is pressed over the element

mouseup onmouseup When the mouse button is released over the element

mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description

Keydown & Keyup onkeydown & onkeyup When the user press and then release the key
Form events:

Event Event Description

Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element

change onchange When the user modifies or changes the value of a form
element
Window/Document events

Event Event Description

Performed Handler

load onload When the browser finishes the loading of the page

unload onunload When the visitor leaves the current webpage, the browser
unloads it

resize onresize When the visitor resizes the window of the browser
Example:

<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
 <body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

Filters and Transition

Transitions are time-varying filters that create a transition from one
visual state to another. By combining filters and transitions with basic
scripting, you can create visually engaging and interactive documents.
Procedural surfaces are colored surfaces that display between the
content of an object and the object's background. Procedural surfaces
define each pixel's RGB color and alpha values dynamically. Only the
procedure used to compute the surface is stored in memory. The content
of an object with a procedural surface applied is not affected by the
procedural surface.
 AlphaImageLoader
Displays an image within the boundaries of the object and between the
object background and content, with options to clip or resize the
image.
 Gradient
Displays a colored surface between the object's background and
content.

Though all filters and transitions are technically filters, the following
filters statically change the way the content of an object displays.
The Compositor filter is implemented as a transition, but gives only a
static output.
Static Filters
Alpha, BasicImage, Blur, Chroma, Compositor, DropShadow, Emboss,
Engrave, Glow, ICMFilter
Light, MaskFilter, Matrix, MotionBlur, Shadow, Wave

Transitions Reference
Transitions are filters that reveal new content of an object with a
particular visual effect. Use the apply and play filters to initiate the visual
effect.

Transitions
Barn, Blinds, CheckerBoard, Fade, GradientWipe, Inset, Iris, Pixelate,
RadialWipe,
RandomBars, Slide, Spiral, Stretch, Strips, Wheel, Zigzag
Data Binding
Data binding is the process that couples two data sources together
and synchronizes them. With data binding, a change to an element in a
data set automatically updates in the bound data set. Data binding may
be used for many reasons, such as to link an application's user interface
(UI) and the data it displays, for data entry, reporting and in text box
elements. It also lets internet users manipulate the representation of data
in the elements of a web page without needing to use a complicated
programming or scripting processes.
Data and data objects of different logic functions can be bound
together in data binding. Data types with different languages can also be
bound, such as data binding Extensible Markup Language (XML) and UI.
Each data change in one data set automatically reflects in the other
bound data set. In binding syntax, the data source is the data provider,
and the other data set is the data consumer. The binding forms the link
between the data provider and the data consumer, enabling the
connection between visual element data and a data source.

Types of data binding are typically defined by their data flow and
include the following:
 One-way binding is a relatively simple type of data binding. Changes
to the data provider update automatically in the data consumer data
set, but not the other way around.
 Two-way binding is where changes to either the data provider or the
data consumer automatically updates the other.
 One-way-to-source binding is the reverse of one-way binding. Changes
to the data consumer automatically update the data provider but not
the other way around.
 One-time binding is where changes to the data provider do not
automatically update the data consumer. This approach is useful when
only a snapshot of the data is needed, and the data is static.
The following examples show how data binding can be used:
 Reporting. Binding is a common way to compile reports that display
data from a data source to a screen or printer.
 Data entry. Data binding is also a common way to enter large amounts
of data and keep it updated and synchronized to a data source.
 Lookup tables. Lookup tables are information tables that are typically
a part of larger data displays. Data binding and controls are used to
display and change data.
 Master-detail formats. This is a model for communication protocols
where one device or process controls another. These formats may
have two tables of data bound together.

Data Control.
 Data control is management oversight of information policies for an
organization’s information. Unlike data quality, which focuses on fixing
problems, data control is observing and reporting on how processes are
working and managing issues. Functions include inspection, validation,
notification, documentation, issue reporting, and issue tracking.

Drivers for Data Control

 Compliance
 Auditability
 Transparency
 Reportability
 Agility
 Risk awareness

Key Data Control Objectives

 Identify risks.
 Implement policies.
 Provide audit framework.
 Ensure proper protection and use of critical data elements.
 Track and manage data quality against service level agreements.
 Manage the identification, reporting, and remediation of data issues.

Data Control Benefits

 Data is monitored and controlled as it moves from users’ systems to
storage devices and applications.
 Data flaws are identified before they cause issues.
 Root causes of issues are identified and remediated.
 Accidental data loss, often caused by mishandling of sensitive data, is
quickly identified.

Data Control Dependencies

 Critical data elements are recognized and agreed upon.
 Business definitions are consistent across the organization.
 Tools and processes are in place to measure conformance to service
level agreements.
 Framework is in place to assess compliance.
 Processes are documented to report data that does not meet
expectations.