HTML & CSS Direct Study

JavaScript and DOM - Hand in Hand

JavaScript

• Introduced in 1996 by Netscape as a way to add different and new elements to a web page.
• During this time Netscape dominated the Browser market.
• JavaScript's main purpose is to instruct the Browser on what do to by manipulating elements like height, width, and position of existing element or newly created elements.

DOM Scripting

• Document Object Model (DOM) was largely used when fourth generation browsers came out.
  
• Known as an API (Application Programming Interface) -- these are conventions that are agreed on by mutual consent. This is an interface between the user and the content. Some APIs are part of Facebook, Twitter, or Photobuck and allows users to share photos, videos, and other multimedia content.
• DOM scripting is a way for developers to conceptualize contents of a document on a web site.
• Different Levels of DOM:
• Level 0 -- This was the first level of DOM ever created and is used on basic terms for features such as rollover buttons or client validation.
• Level 1 -- Provides a DOM Core: This allows for a set of basic interfaces that are in most common documents as well as extending interfaces found in XML documents. Level 1 also provides HTML: A higher level of interfaces than the core. Interfaces introduced at this level were: Document, Node, Attr, Element, and Text.
• Level 2 -- This level provide us with DOM Core 2: which enhanced Core 1, DOM2 Views: this allows access to content to that it can be updated through programs or coding, DOM2 CSS: this allowed for progams to update or change current CSS sheets, DOM2 traversal and range, DOM2 HTML.
• Level 3 -- This level introduced a few new aspects including Load and Save, Validation, Events, and XPath. While these are new elements, this level also improved the DOM Core.

Best Practices

JavaScript:

• In the early stages developers did not approve or use JavaScript for several reasons including the similar name to Java (programming language). Many developers expected a more complex or powerful language, however this simple language can easily alter pages for new effects. Don't mistake the name for a new programming language, and just because it can look simple doesn't mean that it can provide new elements to web design.
• JavaScript was adopted because it was the only way that designers could manipulate objects within the page.
• Remember: Everyone can learn the basics of HTML. As a result of this there are many pages that have poor structure and want to use JavaScript without learning the language. Coping and Pasting script is not always the right way to do things and may cause the opposite effect you wanted. People can continually copy and past script and each time it becomes change. Be CAREFUL with script that is copied and pasted.
• When designing a web site ask the question: How will users experience be affected by JavaScript?
• Graceful Degradation: It is very common that users have browsers that are old or have JavaScript disabled. As a result of this the web page may not be navigable and users will not visit this site anymore. Use JavaScript correctly so that users can visit your site despite their status of JavaScript.
• Pseudo-protocol - Try to avoid using this as a reference to your JavaScript for several reasons. Old browsers won't understand the protocol and if JavaScript is disabled it will be a broken link.
• Backward Compatibility -- use this in the form of if statements to surround code. This way you can find out if the browser supports JavaScript and the code will act accordingly. This will prevent the problems with compatibility and broken links.

Developments in DOM Scripting

• Browser Wars -- When DOM scripting first came out the market was completely focused on Netscape, however as Internet Explorer came out the Browsers began to have a technology war. It is because of this that DOM scripting and JavaScript has become more useful and can do more things.
• The development of AJAX: Ajax is a new way that was developed to use DOM scripting. Web pages are even more interactive than before!