11

PROGRAMMING
(.NET TECHNOLOGY) NC III
Quarter 2
WEEK 7-8

INFORMATION AND COMMUNICATION TECHNOLOGY

ANGELIQUE F. ESPINO

Learner’s Material
 Guide in Using PIVOT Learner’s Material

For the Parents/Guardian

This module was collaboratively designed, developed and reviewed by

educators both from public and private institutions to assist you, the
teacher or facilitator in helping the learners meet the standards set by the
K to 12 Curriculum while overcoming their personal, social, and economic
constraints in schooling.

This learning resource hopes to engage the learners in guided and

independent learning activities at their own pace and time. Furthermore,
this also aims to help learners acquire the needed 21st century skills while
taking into consideration their needs and circumstances.

As a facilitator, you are expected to orient the learners on how to use

this module. You also need to keep track of the learners' progress while
allowing them to manage their own learning. Furthermore, you are
expected to encourage and assist the learners as they do the tasks
included in the module.

For the Learner

This module was designed to provide you with fun and meaningful
opportunities for guided and independent learning at your own pace and
time. You will have to process the contents of the learning resource while
being an active learner.
DEVELOPMENT OF PIVOT 4A LEARNER'S MATERIAL
 This module was designed and written with you in mind. It is here to help
you master the skills, knowledge, and attitudes required to compare and
contrast the nuances of varied online platforms, sites, and content to best
achieve specific class objectives and address situational challenges. The scope
of this module permits it to be used in many different learning situations. The
language used recognizes the diverse vocabulary level of students. The lessons
are arranged to follow the standard sequence of the course. But the order in
which you read them can be changed to correspond with the textbook you are
now using.

The module consists of one lesson and four Learning Outcomes:

Lesson 15 & 16 - PERFORM PROGRAMMING IN

HTML5

After going through this module, you are expected to:

LO 4 – Create interactive user interface and add offline support for Web Applications
▪ Use Drag-and-Drop APIs to interact with files in web application.
▪ Incorporate audio and video into a Web Application
▪ Explain best practices are explained for creating custom objects in JavaScript.
▪ How to extend custom and native objects is described to add functionality
Independent Object

• Array Object
• Date Object
• Math Object
• Number Object
• String Object

Arrays

• Arrays are a fundamental part of most programming languages and scripting languages.

Date Object

• Date Object provides you with the ability to access the date and time of your user’s local
computer, which can be pretty cool in some cases. This is possible through the
JavaScript date object.
Math Object

• Math object in JavaScript can be invoked without necessarily creating an instance of it.
Hence, no need to declare new Object().
Number Object

• Number Object – In order to use the number object, an instance of it must be created.
The number object’s properties include the following.
String Object

• String Object - JavaScript provides a rich collection of useful methods or functions that
we can use to manipulate strings. The following table provides a comprehensive list
ACTIVITY 1

Pre Test Direction:

Matching Type: Match Column A with Column B. Write the letter of the
correct answer on the space before each number.

A B

1. Displays a string as an anchor

2. Used to convert a string to a decimal value A. Date object
B. NaN
3. Value returned if a positive value overflow C. Positive_Infinity
occurs D. parseInt()
4. Used to indicate that a value is not a J. anchor(anchorName)
number
5. provides you with the ability to
access the date and time of your
user’s local computer.

ACTIVITY 2

Direction: True or False

1. Italics() displays the string in italics

2. Math object in JavaScript cannot be invoked without necessarily creating an instance
of it.
3. GetYear() returns the numeric four digit value of the year
4. Arrays are not fundamental part of most programming languages and scripting
languages
5. JavaScrit provides a rich collection of useful methods or functions that we can use to
manipulate strings.
 CREATE INTERACTIVE USER INTERFACE
AND ADD OFFLINE SUPPORT FOR WEB
APPLICATIONS

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in
browsers. The user may select draggable elements with a mouse, drag those elements to
a droppable element, and drop them by releasing the mouse button. A translucent representation
of the draggable elements follows the pointer during the drag operation.

For web sites, extensions, and XUL applications, you can customize which elements can
become draggable, the type of feedback the draggable elements produce, and
the droppable elements.

This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to
add drag-and-drop support to an application, and an interoperability summary of the interfaces.

Drag Events

HTML drag-and-drop uses the DOM event model and drag events inherited from mouse events.
A typical drag operation begins when a user selects a draggable element, drags the element to
a droppable element, and then releases the dragged element.

During drag operations, several event types are fired, and some events might fire many times,
such as the drag and dragover events.

Each drag event type has an associated global event handler:

Event On Event Handler Fires when…

drag ondrag
…a dragged item (element or text selection) is
Event On Event Handler Fires when…

dragged.

…a drag operation ends (such as releasing a

dragend ondragend mouse button or hitting the Esc key;
see Finishing a Drag.)

…a dragged item enters a valid drop target.

dragenter ondragenter
(See Specifying Drop Targets.)

…an element is no longer the drag operation's

dragexit ondragexit
immediate selection target.

dragleave ondragleave …a dragged item leaves a valid drop target.

…a dragged item is being dragged over a

dragover ondragover valid drop target, every few hundred
milliseconds.

…the user starts dragging an item.

dragstart ondragstart
(See Starting a Drag Operation.)

…an item is dropped on a valid drop target.

drop ondrop
(See Performing a Drop.)
Note: Neither dragstart nor dragend events are fired when dragging a file into the browser from
the OS.

Interfaces

The HTML Drag and Drop interfaces

are DragEvent, DataTransfer, DataTransferItem and DataTransferItemList.

The DragEvent interface has a constructor and one dataTransfer property, which is
a DataTransfer object.

DataTransfer objects include the drag event's state, such as the type of drag being done
(like copy or move), the drag's data (one or more items), and the MIME type of each drag
item. DataTransfer objects also have methods to add or remove items to the drag's data.

The DragEvent and DataTransfer interfaces should be the only ones needed to add HTML Drag
and Drop capabilities to an application. (Firefox supports some Gecko-specific extensions to
the DataTransfer object, but those extensions will only work on Firefox.)

Each DataTransfer object contains an items property, which is a list of DataTransferItem objects.
A DataTransferItem object represents a single drag item, each with a kind property
(either string or file) and a type property for the data item's MIME type.
The DataTransferItem object also has methods to get the drag item's data.

The DataTransferItemList object is a list of DataTransferItem objects. The list object has
methods to add a drag item to the list, remove a drag item from the list, and clear the list of all
drag items.

A key difference between the DataTransfer and DataTransferItem interfaces is that the former
uses the synchronous getData() method to access a drag item's data, but the latter instead uses the
asynchronous getAsString() method.

Note: DragEvent and DataTransfer are broadly supported on desktop browsers. However,
the DataTransferItem and DataTransferItemList interfaces have limited browser support.
See Interoperability for more information about drag-and-drop interoperability.

GECKO-SPECIFIC INTERFACES
Mozilla and Firefox support some features not in the standard drag-and-drop model. These
are convenience functions to help with dragging multiple items or non-string data (such as files).
For more information, see Dragging and Dropping Multiple Items. Additionally, see
the DataTransfer reference page for all of the Gecko-specific properties and Gecko-specific
methods.

The basics

This section is a summary of the basic steps to add drag-and-drop functionality to an application.

IDENTIFY WHAT IS DRAGGABLE

Making an element draggable requires adding the draggable attribute and the ondragstart global
event handler, as shown in the following code sample:

<script>

function dragstart_handler(ev) {

// Add the target element's id to the data transfer object

ev.dataTransfer.setData("text/plain", ev.target.id);

window.addEventListener('DOMContentLoaded', () => {

// Get the element by id

const element = document.getElementById("p1");

// Add the ondragstart event listener

element.addEventListener("dragstart", dragstart_handler);

});

</script>
 <p id="p1" draggable="true">This element is draggable.</p>

For more information, see:

• Draggable attribute reference

• Drag operations guide

DEFINE THE DRAG’S DATA

The application is free to include any number of data items in a drag operation. Each data item is
a string of a particular type — typically a MIME type such as text/html.

Each drag event has a dataTransfer property that holds the event's data. This property (which is
a DataTransfer object) also has methods to manage drag data. The setData() method is used to
add an item to the drag data, as shown in the following example.

function dragstart_handler(ev) {

// Add different types of drag data

ev.dataTransfer.setData("text/plain", ev.target.innerText);

ev.dataTransfer.setData("text/html", ev.target.outerHTML);

ev.dataTransfer.setData("text/uri-list", ev.target.ownerDocument.location.href);

● For a list of common data types used in drag-and-drop (such as text, HTML, links, and files),
see Recommended Drag Types.
• For more information about drag data, see Drag Data.
DEFINE THE DRAG IMAGE

By default, the browser supplies an image that appears beside the pointer during a drag operation.
However, an application may define a custom image with the setDragImage() method, as shown
in the following example.

function dragstart_handler(ev) {

// Create an image and then use it for the drag image.

// NOTE: change "example.gif" to a real image URL or the image

// will not be created and the default drag image will be used.

let img = new Image();

img.src = 'example.gif';

ev.dataTransfer.setDragImage(img, 10, 10);

Learn more about drag feedback images in:

• Setting the Drag Feedback Image

DEFINE THE DRAG EFFECT

The dropEffect property is used to control the feedback the user is given during a drag-and-drop
operation. It typically affects which cursor the browser displays while dragging. For example,
when the user hovers over a drop target, the browser's cursor may indicate the type of operation
that will occur.

Three effects may be defined:

1. copy indicates that the dragged data will be copied from its present location to the drop
location.
 2. move indicates that the dragged data will be moved from its present location to the drop
location.
3. link indicates that some form of relationship or connection will be created between the
source and drop locations.
During the drag operation, drag effects may be modified to indicate that certain effects are
allowed at certain locations.

The following example shows how to use this property.

function dragstart_handler(ev) {

ev.dataTransfer.dropEffect = "copy";

For more details, see:

• Drag Effects

DEFINE A DROP ZONE

By default, the browser prevents anything from happening when dropping something onto most
HTML elements. To change that behavior so that an element becomes a drop zone or
is droppable, the element must have both ondragover and ondrop event handler attributes.

The following example shows how to use those attributes, and includes basic event handlers for
each attribute.

<script>

function dragover_handler(ev) {

ev.preventDefault();

ev.dataTransfer.dropEffect = "move";

function drop_handler(ev) {
 ev.preventDefault();

// Get the id of the target and add the moved element to the target's DOM

const data = ev.dataTransfer.getData("text/plain");

ev.target.appendChild(document.getElementById(data));

</script>

<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop

Zone</p>

Note that each handler calls preventDefault() to prevent additional event processing for this event
(such as touch events or pointer events).

For more information, see:

• Specifying Drop Targets

•
Handle the drop effect

The handler for the drop event is free to process the drag data in an application-specific way.

Typically, an application uses the getData() method to retrieve drag items and then process them
accordingly. Additionally, application semantics may differ depending on the value of
the dropEffect and/or the state of modifier keys.

The following example shows a drop handler getting the source element's id from the drag data,
and then using the id to move the source element to the drop element:

<script>
function dragstart_handler(ev) {

// Add the target element's id to the data transfer object

ev.dataTransfer.setData("application/my-app", ev.target.id);

ev.dataTransfer.effectAllowed = "move";

function dragover_handler(ev) {

ev.preventDefault();

ev.dataTransfer.dropEffect = "move"

function drop_handler(ev) {

ev.preventDefault();

// Get the id of the target and add the moved element to the target's DOM

const data = ev.dataTransfer.getData("application/my-app");

ev.target.appendChild(document.getElementById(data));

</script>

<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is

draggable.</p>

<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop

Zone</div>
For more information, see:

• Performing a Drop

Drag End

At the end of a drag operation, the dragend event fires at the source element — the element that
was the target of the drag start.

This event fires regardless of whether the drag completed or was canceled. The dragend event
handler can check the value of the dropEffect property to determine if the drag operation
succeeded or not.

For more information about handling the end of a drag operation, see:

• Finishing a Drag

Interoperability

As can be seen in the DataTransferItem interface's Browser Compatibility table, drag-and-drop

interoperability is relatively broad among desktop browsers (except
the DataTransferItem and DataTransferItemList interfaces have less support). This data also
indicates drag-and-drop support among mobile browsers is very low.

HTML5 features include native audio and video support without the need for Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a website. You need to
set src attribute to identify the media source and include a controls attribute so the user can play
and pause the media.
 ACTIVITY 3

Direction: Fill in the table.

EVENT ON EVENT HANDLER FIRES WHEN…

dragend ondragend 1.
2. ondragenter …a dragged item enters a
valid drop target.
drag 3. …a dragged item ( element
or text selection) Is dragged
dragover ondragover 4.
5. ondragleave …a dragged item leaves a
valid drop target

ACTIVITY 4

Direction: Fill in the Blanks

1. A key difference between the and interfaces

is that the former uses the synchromous getDta() method to access a drag
item’s data, but the latter instead uses the asynchronous
method.
2. The object is a list of obejects.
 CREATE INTERACTIVE USER INTERFACE
AND ADD OFFLINE SUPPORT FOR WEB
APPLICATIONS

Embedding Video
Here is the simplest form of embedding a video file in your webpage −
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>
The current HTML5 draft specification does not specify which video formats browsers should
support in the video tag. But most commonly used video formats are −
• Ogg − Ogg files with Thedora video codec and Vorbis audio codec.
• mpeg4 − MPEG4 files with H.264 video codec and AAC audio codec.

Video Attribute Specification

The HTML5 video tag can have a number of attributes to control the look and feel and various
functionalities of the control −

Sr.No. Attribute & Description

autoplay
1
This Boolean attribute if specified, the video will automatically begin to play back as
soon as it can do so without stopping to finish loading the data.

autobuffer
2 This Boolean attribute if specified, the video will automatically begin buffering even
if it's not set to automatically play.

controls
3 If this attribute is present, it will allow the user to control video playback, including
volume, seeking, and pause/resume playback.

height
4
This attribute specifies the height of the video's display area, in CSS pixels.
 loop
5 This Boolean attribute if specified, will allow video automatically seek back to the
start after reaching at the end.

preload
6 This attribute specifies that the video will be loaded at page load, and ready to run.
Ignored if autoplay is present.

poster
7
This is a URL of an image to show until the user plays or seeks.

src
8 The URL of the video to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.

width
9
This attribute specifies the width of the video's display area, in CSS pixels.

Embedding Audio
HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML
document as follows.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
The current HTML5 draft specification does not specify which audio formats browsers should
support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.
You can use <source&ggt; tag to specify media along with media type and many other attributes.
An audio element allows multiple source elements and browser will use the first recognized
format.

Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various
functionalities of the control −

Sr.No. Attribute & Description

1
autoplay
 This Boolean attribute if specified, the audio will automatically begin to play back as
soon as it can do so without stopping to finish loading the data.

autobuffer
2 This Boolean attribute if specified, the audio will automatically begin buffering even if
it's not set to automatically play.

controls
3 If this attribute is present, it will allow the user to control audio playback, including
volume, seeking, and pause/resume playback.

loop
4 This Boolean attribute if specified, will allow audio automatically seek back to the start
after reaching at the end.

preload
5 This attribute specifies that the audio will be loaded at page load, and ready to run.
Ignored if autoplay is present.

src
6 The URL of the audio to embed. This is optional; you may instead use the <source>
element within the video block to specify the video to embed.
 ACTIVITY 5

Direction: Give at least 5 Video Attribute Specification and Audio Attribute

Specification

Video Attribute
1.
2.
3.
4.
5.
Audio Attribute
1.
2.
3.
4.
5.

ACTIVITY 6
Direction: Fill in the BLANKS. Write the correct answer on your notebook or in a
piece of paper.

1. are files with Thedora video code and Vorbis audio codec
2. are files with H.264 video codec and AAC audio codec
3. can have a number of attributes to control the look and feel and various
functionalist of the control
4. specifies the height if the videos display area
5. is a URL of n image to show until the user plays or seeks
 ACTIVITY 7

Direction: Complete the simplest form of Embedding a Video file in a

webpage.

<video = "foo.mp4" = "300" height = "200" controls>

Your browser does not support the < > element.

ACTIVITY 8
Reflect on the question. Write your answer on a sheet of paper.

1. What is the importance of the video attributes specification in HTML?

2. How Audio and Video Attribute helps us to improve our web page?

ACTIVITY 9

Direction: Sight the difference between Audio Attribute Specification and

Video Attribute Specification and their uses. (at least 5 sentences)
https://www.w3.org/standards/webdesign/audiovideo
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
https://www.tutorialspoint.com/html5/html5_audio_video.htm
For inquiries or feedback, please write or call: