Workshop 2

DOM

What is the DOM?

The DOM or Document Object Model is an ... interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. When we use javascript to change a web page, we are able to do it because of the DOM and its methods and structured way of describing a page. When a page is loaded in the browser, the DOM is built and we can use javascript along with DOM Methods and Objects to read and / or change the page.

• Object Model(s) Syntax

Javascript

What is Javascript?

Javascript (NOT to be confused with Java which is a completely unrelated programming language) is a client-side scripting language. What this means is that it is a programming language that runs entirely in the browser of the person viewing the website (NOT on the server) and does not have to be preprocessed or compiled to execute. Therefore it is fairly easy for the non-programmer to learn to use and deploy. You just write the statements in the web page (surrounded by <script> and </script> tags) and they execute when the page is loaded (if they're in the body of the page) or when the function is called out (if they're in the header of the page).

Why is javascript more powerful than HTML?

HTML is simply a markup language whereas Javascript is a scripting language:

1. Javascript is a programming language - it has logic (if-then, loops, etc), arithmetic operators, objects and constants and variables. HTML only executes in the order it is written and displays text or images - it has no logic or operations and cannot do math.
2. Javascript can operate on the DOM - enabling it to interact dynamically with any page element to change or create the display and react to the information the user supplied. Remember this:
   1. HTML creates the elements
   2. CSS styles the elements
   3. Javascript reads / changes HTML and CSS dynamically to change the page in response to user actions

Combining Javascript and the DOM

• Form Validation

• jQuery

Referencing an External Javascript file

Your html will not validate if there is javascript in your code. ALso, you may want to re-use your javascript or use it on more than one page. So, after you get your javascript working, I recommend placing your javascript in a file by itself and then referencing it (like you do CSS).

• Cut the javascript code out of your header and place it in a file by itself
• Save the file as a .js file
• Reference the javascript file in the same place in the header that you removed the code from with this syntax: e.g.

<script type="text/javascript" src="/~webclass/marie/assets/validate.js">

</script>

---

Further Reading

Javascript

1. Learning Javascript: Terms | Operators | Language | Objects | Rules

JQuery Learning resources

1. Learning jQuery
2. jQuery Forum
3. DZone RefCardz on jQuery
4. jQuery widgets
5. Reference: Visual jQuery
6. Examples / Demo site

Further Reading - Books