Home > Articles

Understanding Dynamic Websites and HTML5 Applications

  • Print
  • + Share This

Use client-side scripting and Document Object Model (DOM) to make elements on a web page respond to user interactions. Although they are simple in their construction, these types of interactions are some of the basic JavaScript-based interactions that form the foundation of web applications.

Save 35% off the list price* of the related book or multi-format eBook (EPUB + MOBI + PDF) with discount code ARTICLE.
* See informit.com/terms

This chapter is from the book

What You’ll Learn in This Chapter:

  • How to conceptualize different types of dynamic content

  • How to display randomized text with JavaScript

  • How the W3C DOM standard makes dynamic pages easier to control

  • The basics of the standard DOM objects: window, document, history, and location

  • How to work with DOM nodes, parents, children, and siblings

  • How to access and use the properties of DOM nodes

  • How to access and use DOM node methods

  • How to control element positioning with JavaScript

  • How to hide and show elements with JavaScript

  • How to add and modify text within a page with JavaScript

  • How to change images using JavaScript and user events

  • How to debug HTML, CSS, and JavaScript using developer tools

  • How to begin thinking ahead to putting all the pieces together to create HTML5 applications

The term dynamic means something active or something that motivates another person to become active. A dynamic website is one that incorporates interactivity into its functionality and design, but also motivates a user to take an action—read more, purchase a product, and so on. In this chapter, you’ll learn about the types of interactivity that can make a site dynamic, including information about both server-side and client-side scripting (as well as some practical examples of the latter).

This chapter will also help you better understand the Document Object Model (or DOM), which is the structured framework of a document within a web browser. Using JavaScript objects, methods, and other functionality (in addition to basic HTML), you can control the DOM to develop rich user experiences. After learning about the different technologies, you’ll use JavaScript and your knowledge of the DOM to display a random quote upon a load loading as well as swap images based on user interaction. Finally, having learned at least the keywords and the basic concept of putting the HTML, CSS, and JavaScript pieces together, you’ll be introduced to the possibilities that exist when you’re creating HTML5 applications.

Refresher on the Different Types of Scripting

In web development in general, two types of scripting exist: server side and client side. Server-side scripting refers to scripts that run on the web server, which then sends results to your web browser. If you have ever submitted a form at a website (which includes using a search engine), you have experienced the results of a server-side script. You were introduced to PHP in the previous chapter, and PHP is a server-side scripting language.

On the other hand, client-side scripting refers to scripts that run within your web browser—no interaction with a web server is required for the scripts to run. By far the most popular client-side scripting language is JavaScript, which you learned about in Chapter 4, “Introducing JavaScript.” For several years, research has shown that more than 99% of all web browsers have JavaScript enabled.

As you work through the book, we’ll focus on using JavaScript for client-side scripting and PHP for server-side scripting.

  • + Share This
  • 🔖 Save To Your Account