Extending HTML5 – Introduction

As you have discovered up to this point, HTML web pages are documents with structures that determine how page content is viewed in a web browser. During this module, you will learn about the Document Object Model (DOM) and its use in providing a logical structure for your HTML content.

This module will also introduce you to another HTML content styling level, Dynamic HTML (DHTML). DHTML is an extension of HTML; it is a collection of tools used together to create interactive and animated websites using HTML, CSS, and JavaScript.

DOM and DHTML enable more user interaction and allow web designers to create web pages that go beyond their original role of hypertext display and act as powerful graphical user interfaces (GUIs) for computer applications. In this module you will see the implications of such an approach and explore an example of an interactive web page.

This module will cover the following topics:

• JavaScript
• Document Object Model
• Dynamic HTML
• AJAX
• HTML5-Based graphic user interfaces 
• a basic GUI web page
• locating users with the Geolocation API

By the end of this module you should be able to answer the following questions:

• What is the role of JavaScript in a web page?
• What is DOM and why is it used?
• Why is AJAX popular with web developers?

---

Read section “JavaScript” (opens new tab) of Chapter 4 in Practical Web Development. 

This section teaches you about the JavaScript language, including language overview, as well as an overview of computer programming. 

You will not be assessed on JavaScript program functionality in this course, and will not be expected to write JavaScript code. General JavaScript and programming language concepts may be assessed. 

As you read, consider the following questions:

• What is the difference between compiled and interpreted languages?
  • Needs to be compiled and run versus running in realtime
• Based on the reading, why is an interpreted language preferred for web pages rather than a compiled language?
  • because it reduces the overall time to creation

Document Object Model (DOM)

Learning Objectives

• Define the document object model (DOM).

The Document Object Model (DOM) is an application programming interface (API) that defines a way to access and manipulate documents, as well as their logical structure. A DOM can be considered a container of data that is in a variety of formats. It can be a file in a specific structure, such as an XML or HTML file. However, while a DOM could be defined as almost any format, in the W3C context the DOM for XML and HTML formats is commonly referred to simply as the DOM.

Programmers can use the DOM API to create, edit and add content to XML and HTML documents. The main goal of the DOM is to provide a standard programming interface to be used to access documents over the Internet, and for that reason, DOM was specified by the W3C.

The DOM is commonly referred to as having a tree-like structure, as it uses a top-down approach for how documents are stored and manipulated. For example, given the HTML table exemplified in Module 2, the corresponding DOM representation is indicated in the corresponding picture.

Read section “DOM Objects, Properties, Methods, and Events” (opens new tab) of Chapter 4 in Practical Web Development. 

This section teaches you about the Document Object Model, objects, methods, nodes, and events. 

As you read, consider the following questions:

• What objects are available when running a web page in a browser?
  • windows and document
• What is the document object?

Watch “Document Object Model (DOM)” (opens new tab) in the course Building Websites with HTML, CSS, and JavaScript: Getting Started from PluralSight

This video teaches you how the DOM works and more about the interconnected technology systems that recreate the web browsing and design experience.

As you watch, consider the following questions:

• How did the video describe how the DOM interacts with the World Wide Web, specifically noting:
  • How the DOM translates data into content that developers work with?
  • How the DOM translates data on websites into content that users can see and interact with?

---

Dynamic HTML (DHTML)

Learning Objectives

• Analyze the relationship between document object model (DOM) and Dynamic HTML (DHTML)

Dynamic HTML (DHTML) utilizes a combination of JavaScript (JS), which is a client-side scripting language, CSS3, HTML5, and the DOM together to create websites that are interactive and animated. Some examples of DHTML are forms with responses and roll over buttons.

DHTML is also defined by the World Wide Web Consortium (W3C) and is therefore compatible with most web browsers. DHMTL defines customary commands that can be inserted into JS code; these commands operate over the DOM of the web page, allowing the web page to change its content accordingly. Thus, DHTML enables dynamic web pages that do not require server processing. This makes DHTML ideal for providing interactive web page content that is typically found in web-based graphical user interfaces (GUIs).

A simple example of the use of DHTML is the following code, where an HTML <button> tag is used to call a DHTML command getElementById over the DOM of the web page (referred to as document) and look for the element with “demo” as the value for the idattribute and change the element content.

<!DOCTYPE html>

<html>

    <body>

        <h2>DHTML Example</h2>

        <p id="demo">Click to say hello...</p>

        <button type="button" onclick='document.getElementById("demo").innerHTML = "... Hello to you too!"'>click here</button>

    </body>

</html>

“DHTML example execution” © WGU 2020

It is worth mentioning that since the launch of HTML5 in October 2014, the use of DHTML is assumed to be within the new HTML version. Officially, this is not the case, but that assumption has caused most developers to stop mentioning DHTML when describing its commands. Either way, commands like document.write or document.getElementByIdare defined within the W3C’s DHTML framework.

Watch “Applying DHTML effects” (opens new tab) from LinkedIn Learning.

This video teach you about the differences between HTML5 and DHTML.

As you watch, consider the following questions:

• Why was there a need for DHTML?
• What are the major differences between HTML5 and DHTML?

Which statement describes the relationship between Dynamic HTML (DHTML) and the Document Object Model (DOM)?

DHTML utilizes a collection of technologies, including the DOM, to control the overall appearance and function of a web page.

Correct! This correctly describes how the DOM is used by web designers to provide structure to a web page, but DHTML is a collection of technologies, including the DOM, used by designers to create interactive web pages

What is the primary purpose of the document object model (DOM)?

Defines documents’ logical structure and how they are accessed and manipulated

Correct! The DOM is designed to be used with any programming language.

---

AJAX

Learning Objectives

• Identify technologies for enhancing a user’s web experience, including programming languages and multimedia technologies.

AJAX is a method where a client asynchronously retrieves data from the server side. AJAX, or Asynchronous JavaScript and XML, allows a web client to update a page based on the modified data retrieved from the web server. In this way, the client does not need to refresh the entire web page. AJAX is popular because developers can (W3Schools, n.d.)

• read data from a web server, especially after the web page has already loaded.
• update a web page without reloading the web page, and
• send data to a web server in the background

Note:

AJAX should not be confused with push technology. Push technology refers to a type of internet communication wherein a transaction is initiated by a content publisher or server, and data is sent to a user without their having explicitly requested it. This differs from the more common pull approach wherein a user actively requests information from a server.

Read section “Chapter 8” (opens new tab) in Practical Web Development. 

This chapter teaches you about how to collect data from the web server. 

As you read, consider the following questions:

• What is the purpose of XMLHttpRequest object?
  • It is used to send HTTP or HTTPS request to a webserver and load the server response data back into the script
• Based on the reading, why use AJAX for a web page or website?
  • so you can use it like an app and not have to load requested data everytime something is clicked

---

HTML5-Based Graphic User Interfaces

Learning Objectives

• Apply third-party applications to a web page.

Graphical User Interfaces

Graphical user interfaces (GUIs) react to a user action. A simple example of this process is buttons that the user clicks. However, any form of user input that results in a web page response qualifies as user interface behavior. Given that web pages are rendered in graphical representation by the browsers, this user interface behavior allows us to refer to interactive web pages as graphical user interfaces.

From a computational point of view, a computer system is composed of a processing core and a user interface that, together, perform both input and output operations, which convey information to and from the user.“Information flow between the user and computational system” © WGU 2020

HTML input tags and other elements provide the computational system’s end-user interface within HTML forms. The processing core may be provided by:

• HTML text and graphics rendering commands, when the web page is solely intended to deliver information, i.e., there is no user input, just output
• JavaScript and DHTML commands, when the processing tasks are coded within the HTML/CSS/JS/DOM
• a third-party application, when it is an external programming piece, which typically is a program that is invoked and runs on the web server

Third-party applications can be coded in a variety of languages. Since they usually run over a web server, it is up to the web server configuration to provide the means to execute the application. Examples of third-party applications include PHP, Python, or Perl, to cite a few.

One common example of the use of a third-party application is the PHP call appearing in the following code snippet. In this example, a program called action_page.php is invoked by the form submit button. This program must be available on the web server where the web page is stored, and this program will receive—as input parameters—the current status of the form elements using the JavaScript method post.

Please note that it is outside of the scope of this course to discuss design considerations usually covered in HCI (Human-Computer Interaction). The details of this example are only presented to illustrate a practical use of HTML forms, while third-party applications of this nature are not discussed in detail during this course.

<form name="myForm" action="./action_page.php" method="post">

    Name: <input type="text" name="fname">

    <input type="submit" value="Submit">

</form>

“HMTL and JavaScript form button” © WGU 2020

In the web programming world, a website’s value is measured by the site’s usability and the quality of user experience it offers. If the end user is unable to navigate the web pages based on what they see, they may give up or lose interest and leave the website. Therefore, a clear GUI is considered a crucial element for websites.

---

A Basic GUI Web Page

Learning Objectives

• Create basic web pages using the most current version of Hypertext Markup Language (HTML).
• Apply third-party applications to a web page.

The universal availability of web browsers, and the web design capabilities offered by HTML/CSS/JS/DOM/DHTML, provide great opportunities for you to grow as a web designer. It is possible to produce elegant and powerful GUIs for programs that are available as web services via the internet, or on a local machine, but without graphical capabilities, like command line programs. Whether used online or locally, the development of HTML-based GUI provides several advantages, including:

• rapid prototyping: the development of powerful inputs and controls is easily implemented using HTML forms
• platform independence: the HTML-coded interface will be equally available to any operating system (Windows, MacOS, mobile, etc.) since the system adaptation is provided by the browser
• easy display configuration: the interface aspect is easy to change by modifying the CSS definitions that do not affect the HTML/JS/DOM/DHTML encoding

A GUI provides tailored access to third-party applications, and all its interface complexity will be encapsulated by the GUI design. This allows the end user to interact with the third-party application without encountering any of the internal complexity of the GUI.

Most third-party applications are made available through an application programming interface (API). An API is a software artifact that serves as an intermediary between two programs that need to pass information between each other, in which the parameter passage format is predefined. An HTML-based GUI defines a standard method to feed the API with the collected parameters received by the end user and passes it along to the web service API. This is usually done by a post method that is available in HTML forms.

Examples of GUIs applied to third-party servers are often found integrated with database management systems (DBMS) that provide storage and retrieval of data. Third-party applications are often integrated into websites using server-side PHP code and DBMS systems such as MySQL.

Read “Graphical User Interface” (opens new tab) from omni sci.

This article explains the differences between character and graphical user interfaces.

As you read, consider the following questions:

• What are the advantages and disadvantages of a GUI?
  • useability and encourage discoverability
• Are there any disadvantages to having a GUI?
• What strategies should a web designer consider to ensure that interactions are not overwhelming for the user?

Watch “What is an API” (opens new tab) in the course Web Technology Fundamentals from LinkedIn Learning.

This video teaches you about application programming interfaces.

As you watch, consider the following question:

• What is the purpose of an API?
  • instructions and standards for using a specific type of service

Watch “HTML5 APIs” (opens new tab) in the course Web Technology Fundamentals from LinkedIn Learning.

This video teaches you about why HTML5 was developed and how HTML5 APIs can make for a more interactive web page.

As you watch, consider the following questions:

• What problems was HTML5 designed to solve?
  • to enable users to experience richer media without the use of extensive plugins
• Based on the reading, what HTML5 APIs would you want to implement on a web page to make the page more interactive?

---

Locating Users with the Geolocation API

Learning Objectives

• Apply third-party applications to a web page.

Identifying a website visitor’s physical location can be used to improve the user experience. For example, identifying the location of an online shopper means they can then be directed to their closest store and be shown stock availability most relevant to them. It is also frequently used to redirect website visitors to a version of the site specific to their country, language, or currency.

For a web browser to identify a person’s location, the website itself must be hosted securely under https and the person must also explicitly give permission. This is because information about a person’s location is sensitive personal information. When the Geolocation API is first accessed by a website’s JavaScript, a popup is displayed so that the person can accept or reject the website’s use of their location.

Because of the opt-in nature of the Geolocation API, it is important that any website using this feature has a functional experience regardless of whether the user’s location was successfully identified or not. The Geolocation API returns an error when the location is not available to allow for an alternative action to be taken.

The Geolocation API is accessed in JavaScript via the browser’s navigator API, under navigator.geolocation. The Geolocation API offers a getCurrentPosition function which accepts three parameters: a success handler function, an error handler function, and an options object. If the geolocation request is successful, then the success handler will be passed a GeolocationPositionobject containing a timestamp and any available location information. This function must be called once each time the user’s location is required.

The basic usage of the getCurrentPosition function is exemplified by the following code, where the the navigator.geolocation API is called and the result is saved in a variable called result, that can be assigned local variables with both latitude and longitude positions, respectively lat and lon.

navigator.geolocation.getCurrentPosition(function(result) { var lon = result.coords.longitude; var lat = result.coords.latitude; });

For cases where the user’s location needs to be tracked over time, another function called watchPositionis available. This function accepts the same parameters as getCurrentPositionbut will continue to watch the user’s location and will call the success function each time a new location update is available. The position watcher can be stopped using the clearWatchfunction.

This geolocation CodePen demo (opens new tab) will provide an example of this API’s functionality. Click on the getCurrentLocation button on the page; this will trigger the prompt for obtaining permission to gain the user location. You may take note, in the CodePen window, that only the Javascript, Console, and Preview windows display for this code. The HTML and CSS panels are not needed, so are not displayed.

The Geolocation API provides a user’s location as latitude and longitude coordinates, and is often used alongside a secondary service like Google Maps JavaScript API (opens new tab), which can display the location on a map, or Reverse Geocoding (opens new tab), which can transform those coordinates into the name of a country or city.

Different devices will give different levels of accuracy, so this is also important to consider. The results are not always accurate because different devices have different location capabilities. Devices with GPS can take longer to locate but give quite accurate locations, while computers connected via Wi-Fi are usually faster to locate but with a lower level of accuracy. Learn more about geolocation developer tools from MDN (opens new tab) and Mozilla Support (opens new tab).

Watch “How Geolocation Works” (opens new tab) in the course HTML5: Geolocation from LinkedIn Learning. 

This video will demonstrate how you could use the Geolocation API to find the user’s location and display it on a map.

As you watch, consider the following question:

• In what ways can the user’s type of device affect the accuracy or availability of an accurate location?
  • depends on how the device connects with the internet – could be power intensive as well

---

Extending HTML5 – Summary

There are multiple mechanisms to extend HTML usefulness; a developer can use a scripting language like JavaScript to create a more interactive website. The developer can also use DOM, DHTML, or AJAX to increase flexibility and the user experience of the website. Using these tools can give the developer the option of creating web-based graphical user interfaces, which are especially beneficial for providing front-end navigation for command-line programs or even for remote systems. The purpose of these tools is to improve the website visitor’s experience—either by creating a useful GUI, or by making the user’s experience better or easier by automatically finding the user’s location.

During this module you learned the following:

• JavaScript allows the developer to create code for advanced web page functionality 
• The Document Object Model can create, edit, and add content to XML and HTML documents
• Dynamic HTML is a combination of HTML, CSS, and JavaScript that can create interactive web pages 
• AJAX is a method for asynchronously (one-direction at a time) retrieval of data 
• Application programming interfaces (APIs) have a specific role and function.