...But we can't rely on it.●Not all browsers implement the samefunctionality●Surprise!●Users can disable JavaScript●Security concerns●Poorly-designed experiences

When not to use JavaScript●When it can be done in CSS●Form validation (when used exclusively)●Any functionality that isrequiredfor thefunctioning of your site

Progressive Enhancement●Start with content●Annotate with semantic HTML●Apply cross-browser CSS●Embellish CSS with less supported features after●Add JavaScript toenhancethe final experiencefor those users supporting it

Using JavaScript

Adding JavaScript: <script>●Within the <script> tag●Empty <script> element, with the src attributepointing to a .js file (preferred)●type=”text/javascript”●Required in HTML 4.01/XHTML 1.0●Optional in HTML5●Strongly recommended to use aslatein thepage as possible

<aside> JavaScript and XHTML●Data inside a script tag will be treated asparsed character data (PCDATA) as XML bydefault!●<![CDATA[content]]>●contentis only character data (CDATA), not parsedas XML●Another case for just using src, but if youreally

<aside> HTML Comments●Some browsers didn't know how to interpretJavaScript●Wrapping the script in an HTML comment hidthem from these browsers●Don't. We're not in 1990 anymore.●Using -- operator may be parsed as the end ofa comment

<aside> HTML Comments●Some browsers didn't know how to interpretJavaScript●Wrapping the script in an HTML comment hidthem from these browsers●Don't. We're not in 1990 anymore.●Using -- operator may be parsed as the end ofa comment

<aside> Global Scope●Declaring variables without var...●Look for the variable name within scope●If it doesn't exist, variable defined on theglobalscope●Always use the var keyword to avoidunexpected behavior!

JavaScript Values●Objectsare referred to by variables●When assigning var obj2 = obj1, only the referenceis copied●obj1 and obj2 now point to the same object●Types of objects●Primitive wrappers●Arrays●Other Predefined Objects●Functions●Object literals

<aside> Type Coercion●When attempting to use a variable in a contextwhere another type is expected, it will beautomatically cast to the appropriate type●Example:var s = “foo”;/* s is a primitive string. When calling stringmanipulation functions on it, it is coerced to anobject with the appropriate wrapper */alert(s.length);

JavaScript Objects●All other objects derive themselves from thebase Object()●Can be instantiated using the new keyword●var o = new Object();●Note:Instantiation via the new keyword is reallycloning an existing object!●Can be declared using object literal notation●var o = {}; // literal

JavaScript Objects●Can refer to keys using myObj.foo ormyObj[“foo”]●Latter is required if there's a dash in the name●Can add keys to existing objects once declared●myObj[“val5”] = {};●myObj.val6 = null;●Only applies to this instance!

JavaScript Objects●Objects keys are eitherpropertiesormethods●Propertiessimply refer to a value●Methodshave a special Function() object astheir value, which is evaluated when called

JavaScript Functions●Functions in JavaScript are actually Function()objects●Includes object methods●Note: JavaScript is case-sensitive!●return statement required at end●Do not have to be declared in the global scope;can be nested (advanced)●Declared a number of ways...

JavaScript Functions●Function statement●function myFunction(arg1, arg2) { returnarg1*arg2; }●Parsed when loaded●Creates a variable with the same name as thefunction name in the scope it was declared●Dynamic Functions●Declared at runtime●Assigned to a variable

What can we do with it?●Can be executed server-side●V8 JavaScript engine + node.js●Usually executed client-side●Retrieve information about the document●Manipulate the document once this information isretrieved

Document Object Model (DOM)

Document Object Model (DOM)●Standard way of referring to an XML and HTMLdocuments●Returns to the notion of XML/HTML as atreeofnodes●Sound familiar?●Languages like JavaScript, implement the DOMto refer to the document root and its children asobjects●Once accessed, possible to manipulate thedocument structure

document Object●Type HTMLDocument●Always refers to the document root●Properties●offsetWidth/offsetHeight – dimensions of document●Methods●getElementById(id) – return an Element objectmatching the givenid●createElement(tagName) – create an Elementinstance, which may be later added to thedocument tree

<aside> Inline Event Handling●Some may have seen something like <bodyonload=”foo()”>●Run into same maintenance issues as withCSS!●Event handling within the script itself is alwayspreferred

Event Objects●Whenever an event fires, information about thetriggering event is passed to the event handlervia an Event object●Properties of this object can be checked formore information if needed●type – Type of triggering event (mouseover, click,etc)●timeStamp – When the event occurred●Not all are compatible cross-browser!

Event Propagation●If an element and its child share an eventhandler, which fires first?●Used to depend heavily on the browser...●Netscape: “The parent!” (Event Capturing)●Microsoft: “No, the child!” (Event Bubbling)●W3C: “...Fine. You're both right!”