Here's a basic example to demonstrate the concept.
If you enter your name into the following input field, your name will appear under the input field. It will update with each letter you type. You don't need to click any buttons to make this happen. It just works.
script tag. We didn't have to go through the HTML code and remove event handlers, function calls, etc.
- Separation of functionality from content and presentation
Graceful Degradation or Progressive Enhancement
When developing, graceful degradation is an approach where you focus on providing functionality for the "best case scenario" (e.g. for browsers that support all your functionality), then work out ways of making it work well in other cases (e.g. browsers that don't support all of the enhanced functionality).
Progressive enhancement on the other hand, works in the reverse order. You concentrate on providing functionality that works in all situations, then provide "extra" functionality that more advanced browsers can take advantage of.
Let's look at the previous example again, but this time we'll take a closer look at the code.
onclick attribute into the
input tag in order to trigger a function. So it might look something like this:
Therefore, we use this (inside the
.js file) instead:
.js file. This means there's no need to put
onclick into any form elements.
Loading the DOM
This code allows us to wait for the document object model (DOM) to load before running the rest of the code. We do this to ensure that we can make reference to any object on the page — even if it comes later on in the code. If we didn't do this, we wouldn't be able to call the HTML elements further down the page.