So, let me break this lesson down into three parts.
Let me give an example, using something very simple.
Imagine we have a bold tag on a webpage. We already know what a bold tag looks like, and what it does.
The webpage is the Document.
The bold tag is the Object.
The browser knowing "I need to make this bold" is part of the way the browser will Model that object.
Does that make more sense?
So, a webpage is a "document", all the HTML elements on that page are the "objects", the internal processing of how to display those objects is the "model".
Makes sense now?
Another good analogy is a television set. We all know how a television works. A signal gets sent to the television, via the air or over a cable, the internal electronics interpret that signal, and process it into a picture on the screen. Think of your browser like a television set. The "signal" being sent to your browser is the code of a webpage. There is an internal processing component of your browser, which interprets that code, then shows it in your browser window. The DOM of a television would be the internal circuitry. The HTML and CSS of a television would be the image that appears on the screen.
The internal processing in a browser, which understands how to render HTML, is the "DOM" of the browser.
Let me give you examples of both...
- Altering fonts... (use CSS instead)
- Posting information from a database... (use XML or PHP instead)
- Displaying a date on the page... (use PHP instead)
- Writing data to the page from another file, such as a plain text or .JSON file... (use PHP instead)
- Building a calculator... (for example, an order form which totals your costs)
- Creating an interactive map... (like the markers used in a Google Maps API)
- Changing dynamic image links... (such as the "Watch Video" image on this webpage)
- Tracking special parameters in links... (this was something we did at Disney, to track the popularity of links)
What is the difference?
Why do I make these suggestions?
2.) Since your data is in a separate file from the HTML page (for example, if you are parsing information from a JSON file), if the user wants to save that webpage for later reference, they are unable to do so.
3.) Because you are dynamically changing the page content, it breaks the "BACK" button in the browser. For example, a user may click on a link, and be presented with an entirely new page of data. But when they click the "BACK" button in their browser, with the intent of returning to the previous page, they get sent to the previous website they had visited, because the new "page" they were given was simply the same page with new data.
As you make different selections in this form, pay attention to the "TOTAL PRICE" field at the bottom, and note how it changes.
You know what you just accomplished? You just learned a fourth programming language, and you didn't even know it!
What am I talking about?
I'm talking about DHTML which is an abbreviation for "Dynamic HTML". You will sometimes see computer nerds throw around the term DHTML as if it's a unique language or something special.
It's stupid. But computer nerds like to make things confusing and complicated.
Don't do that.
Well, on a single page, there isn't any advantage at all. But, suppose you are running a small business and you build a website with 20 pages. Suppose you actually want customers to contact you, so you wisely place your address and phone number on the footer of every page. What if your phone number changes?
BUT WAIT! THERE'S MORE!
You get the code! You get the example! BUT THAT'S NOT ALL!
All this can be yours for three low monthly payments of $19.95! Call now! Operators are standing by!
And remember, kids, the world owes you nothing... until you create things of value.
DOMAn acronym for "Document Object Model" and it describes the way a browser has been programmed to render HTML elements of a webpage.