GRADE

11
ICT-PROGRAMMING.NET
FOURTH QUARTER, WEEK 3

Name: _________________________________________________________________________________________________
Grade & Section: ______________________________________________________________________________________
Important Reminders: Read and follow directions. Do not put unnecessary markings on this material.
Always follow the standard health protocols.

LEARNING ACTIVITY SHEET NO.3

Performing Programming in HTML5 with JavaScript
and CSS3

Let’s Explore!

Communicate with Remote Data Source and create objects

and methods using JavaScript
Data rarely reside in one place. Oftentimes, there is a need to collect data from
many different data sources and combine them locally into meaningful reports,
analytics, or tables. The process for accessing, collecting, validating, and using data
from remote data sources requires the same level of design and architectural
considerations as building data structures for a software application.

In this lesson, methods of accessing remote data will be introduced with the goal of
presenting best practices and ways to optimize load processes. This will lead to a
discussion of performance and how to avoid the latency often associated with loading
data from remote locations.

Learn from here!

Using XML HTTP Request object

The XML HTTP Request object can be used to exchange data with a web
server behind the scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.
All modern browsers (Chrome, Firefox, IE, Edge, Safari, Opera) have a built-in XML
Http Request object.

1
Simplifying codes using jQuery Ajax method

jQuery, the JavaScript library supplies a powerful set of jQuery AJAX APIs to manage
AJAX requests. The normal way of making AJAX calls using JavaScript is a bit odd
as you must first create an XML HTTP Request object that depends on the browser
and then make an AJAX call. Also sending form data using AJAX is also a bit difficult
if we use the normal JavaScript approach of calling AJAX. jQuery supplies simple
yet powerful functions which have extended the JavaScript AJAX methods and
provide a more flexible way. Let us see separate ways of doing AJAX things in jQuery.
GET Request method using jQuery

Load a remote page using the HTTP GET request method. This is an easy way
to send a simple GET request to a server. It allows a single callback function to be
specified that will be executed when the request is complete (and only if the response
has a successful response code).

Benefits of structuring JavaScript code

How you structure your JavaScript is important because:
1. Done right, it makes code easier to understand for others and yourself re-
visiting your own code.
2. Having a decided-upon structure helps keep future code clean and
encourages your declared best practices.

3. It makes your code testable.

Creating custom objects in JavaScript

You have already learned that JavaScript variables are containers for data values.

This code assigns a simple value (Isabel) to a variable named Town:

let town = "Isabel";

Implementing HTML5 APIs

According to Wikipedia:
“An application programming interface (API) is a computing interface which
defines interactions between multiple software intermediaries. It defines the
kinds of calls or requests that can be made, how to make them, the data
formats that should be used, the conventions to follow, etc.”

In a typical HTML API, the calls and requests along with definitions and
protocols are written and invoked with HTML itself. HTML API uses certain class or
attribute patterns used in the HTML element to invoke the functions in the API.

Lists of HTML APIs

• The canvas element for immediate mode 2D drawing.
• Timed media playback
• Offline Web Applications
• Document editing
• Drag-and-drop

2
 • Cross-document messaging
• Browser history management
• MIME-type and protocol handler registration
• Microdata
• Web Storage, a key-value pair storage framework that provides behavior
similar to cookies but with larger storage capacity and improved API.
• Web Workers
• Geolocation — get the latitude and longitude of the user’s browser
• File — get file information from local files selected via file input, or drag and
drop
• History — add or remove URLs in the browser’s history stack — useful in
single-page apps
• Audio API
• Video API

Some more commonly used HTML APIs would be:

• High-Resolution Time API: Provides the current time in the sub-
millisecond resolution which is not dependent on the system clock
• Navigation Timing API: Offers detailed timing information throughout the
page load process
• Network Information API. Provides estimation of bandwidth

Implementing callback, Serializing, deserializing, and transmitting data

Syntax for creating an XML Http Request object: variable = new XMLHttpRequest();

• A callback function is a function passed as a parameter to another function.

In this case, the callback function should contain the code to execute when the
response is ready.

xhttp.onload = function() {
// What to do when the response is ready
}

• To send a request to a server, you can use the open() and send() methods of
the XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Example
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function

xhttp.onload = function() {
// Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

3
LEARNING COMPETENCY WITH CODE
LO 3. Communicate with Remote Data Source and
create objects and methods using JavaScript
TLE_ICTP.NET11-12PPHJC-IIId-h-31

K: The learners demonstrate an understanding of the principles and concepts in

performing programming in HTML5 with JavaScript and CSS3

S: The learners independently demonstrate the programming in HTML5 with

JavaScript and CSS3

Let’s engage and work!

Practice 1- Using XML Http Request Object

The XMLHttpRequest object can be used to request data from a web server.
The XMLHttpRequest object is a developers dream, because you can:
• Update a web page without reloading the page
• Request data from a server - after the page has loaded
• Receive data from a server - after the page has loaded
Send data to a server - in the background
A common JavaScript syntax for using the XML Http Request object looks much
like this:
Type the following code:
<!DOCTYPE html>
<html>
<body>
<h2>Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "xmlhttp_info.txt", true);
xhttp.send();
}
</script>

</body>
</html>

4
 (Desktop/PC /Laptop View) (Mobile Phone View)

(Luna, 2021)

Save the document as callback.html. It should look like the page shown above.
Practice 2- AJAX - The XMLHttpRequest Object

• The keystone of AJAX is the XMLHttpRequest object.

• The XMLHttpRequest object can be used to exchange data with a server
behind the scenes. This means that it is possible to update parts of a web
page, without reloading the whole page.
• All modern browsers (Chrome, Firefox, Edge (and IE7+), Safari, Opera) have
a built-in XMLHttpRequest object.
• Syntax for creating an XMLHttpRequest object:
variable = new XMLHttpRequest();

(Luna, 2021)
5
 <!DOCTYPE html>
<html>
<body>
<h1>The XMLHttpRequest Object</h1>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>

Practice 3 – Using jQuery ajax() Method

• AJAX is the art of exchanging data with a server, and updating parts of a
web page - without reloading the whole page.
• The ajax() method is used to perform an AJAX (asynchronous HTTP) request.
• This method is mostly used for requests where the other methods cannot be
used.

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>
</html>

6
 (Luna, 2021)

Let’s apply now!

GUIDE QUESTIONS

WRITTEN WORKS
General Instruction: Write your answer on a separate sheet of paper.
1. Describe the benefits of structuring JavaScript code carefully to aid
maintainability and extensibility.
2. Explain best practices for creating custom objects in JavaScript.
3. Describe how to extend custom and native objects to add functionality.

PERFORMANCE TASK:
General Instruction:
• Provide the missing code and execute the program on your text editor,
• Include your name and date of submission on the footer,
• Submit the screenshot of the complete code and running program.

4. Perform the program given and check for errors.

<body>
<h1> Isabel National Comprehensive School</h1>
<h2>Wk3-Performance Task in JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "Your First Name",
lastName: "Your Last Name",
age: 18,
eyeColor: "blue"
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>

7
5. Make a Program that either serialize, deserializes, sends, and received data using
XML HTTP Request Object and It should look like the display shown below.

RUBRIC FOR SCORING (IF NECESSARY):

Program (Excellent - 5) (Good-4) (Fair-3) (Poor- 2)
(20 pts)
Program The program The program The program The program
execution executes runs correctly runs with a does not
correctly with with syntax or minor (easily execute
no syntax or runtime errors fixed error)
runtime errors
Correct The program Output has Output has Output is
output displays minor errors multiple incorrect
correct output errors
with no errors
Design of Program The program The program Output is
output displays more displays does not poorly
than expected minimally display the designed
desired output required
output
Design of logic The program The program The program Program is
is logically has slight logic has significant incorrect
well designed errors that do logic errors
not
significantly
affect the
results

I. REFLECTION

An app interacts with data sources through the LoopBack model API,
available locally within Node.js, remotely over REST, and via native client APIs
for iOS, Android, and HTML5. Using the API, apps can query databases, store
data, upload files, send emails, create push notifications, register users, and
perform other actions provided by data sources.

Mobile clients can call LoopBack server APIs directly using Strong
Remoting, a pluggable transport layer that enables you to provide backend
APIs over REST, WebSockets, and other transports.

8
 9
1. Written Works 1 – Key Points
Like with all programming languages, JavaScript has certain advantages and disadvantages to
consider. Many of these are related to the way JavaScript is often executed directly in a client's
browser. But there are other ways to use JavaScript now that allow it to have the same benefits as
server-side languages.
Advantages of JavaScript
• Speed. Client-side JavaScript is very fast because it can be run immediately within the client-
side browser. Unless outside resources are required, JavaScript is unhindered by network calls
to a backend server.
• Simplicity. JavaScript is relatively simple to learn and implement.
• Popularity. JavaScript is used everywhere on the web.
• Interoperability. JavaScript plays nicely with other languages and can be used in a huge variety
of applications.
• Server Load. Being client-side reduces the demand on the website server.
• Gives the ability to create rich interfaces.
Disadvantages of JavaScript
• Client-Side Security. Because the code executes on the users’ computer, in some cases it can
be exploited for malicious purposes. This is one reason some people choose to disable
JavaScript.
• Browser Support. JavaScript is sometimes interpreted differently by different browsers. This
makes it somewhat difficult to write cross-browser code.
2. Written Works 2 – Key Points
All JavaScript coders eventually reach a stage where they would like to create and use their
objects, apart from the pre-built ones, such as documents. Custom objects allow you to build up your
own personal JavaScript "toolbox" that extends beyond what the pre-build objects have to offer.
Creating an object requires two steps:
• First, declare the object by using an object function
• Lastly, instantiate the newly created object by using the "new" keyword
3. Written Works 3 – Key Points
The simplest way to create a custom object is to create a new instance of Object and add properties
and methods to it. By interacting with its APIs to develop extensions and tailor existing functionalities
to the needs of the organization. By customizing the platform's auto-configuration script according
to the needs of the organization. An object is an array of values in no particular order. Each property
or method is identified by a name and mapped to a value. Javascript objects are like hash tables: a
grouping of name-value pairs where the value may be data or a function.
Written Works
ANSWER KEY
 10
4. Performance Task – Key Points
5. Performance Task – Key Points
<!DOCTYPE html>
<html>
<body>
<h1> Isabel National Comprehensive School</h1>
<h2>Wk3-Performance Task on JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "Your First Name",
lastName: "Your Last Name",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
Performance Task
ANSWER KEY
REFERENCES FOR LEARNERS

JQuery Ajax Tutorial, Example: Simplify Ajax Development with JQuery.”

ViralPatel.net, December 22, 2014. https://www.viralpatel.net/jquery-ajax-
tutorial-example-ajax-jquery-development/.

Chris Coyier onJan, and Chris Coyier. “How Do You Structure Javascript? the
Module Pattern Edition.” CSS, January 12, 2013. https://css-tricks.com/how-do-
you-structure-javascript-the-module-pattern-edition/.

Swain, Anisha. “HTML Apis in Depth.” Medium. Coffee with The UI Girl, August 17,
2020. https://medium.com/the-ui-girl/html-apis-in-depth-78f0abc918c8.

“Ajax - the Xmlhttprequest Object.” AJAX The XMLHttpRequest Object. Accessed

November 28, 2021. https://www.w3schools.com/js/js_ajax_http.asp.

Prepared By:
Nestor D. Luna
ICT-Programming.net
Isabel National Comprehensive School

11