Understanding Dynamic Websites and HTML5 Applications
- Refresher on the Different Types of Scripting
- Displaying Random Content on the Client Side
- Understanding the Document Object Model
- Using window Objects
- Working with the document Object
- Accessing Browser History
- Working with the location Object
- More About the DOM Structure
- Working with DOM Nodes
- Creating Positionable Elements (Layers)
- Hiding and Showing Objects
- Modifying Text Within a Page
- Adding Text to a Page
- Changing Images Based on User Interaction
- Thinking Ahead to Developing HTML5 Applications
- Summary
- Q & A
- Workshop
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
This chapter is from the book
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.