Matthew Batchelder. Agenda JavaScript: What it is and isn't JavaScript: Uses What is the DOM? ...

Matthew Batchelder

Agenda JavaScript: What it is and isn't JavaScript: Uses What is the DOM? What is AJAX? jQuery FTW!

Manipulating page elements (the DOM) in sweet ways Simplified AJAX Other Coolness Pluggability

jQuery in myPlymouth

Before We Start!

Important tools to haveUse Firefox

○ Firebug○ JS Debugging FTW○ Web Developer Toolbar (handy)

A sexy text editor (not notepad)

JS: What it is and isn’t NOT Java despite its name ECMAScript More than form validation Client-Side Scripting Language

DynamicWeakly TypedObject-Oriented (Prototype-Based)

DOM Event Tool

JavaScript Sandbox

Scripts run in a “sandbox”Can only perform web-related actions, not

File-System actionsConstrained by a “Same Origin Policy”

JS: Usage

Drop this puppy in your page:

<html><head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script></head><body>…</body></html>

JS: Literals Values (the stuff on the right of the equal sign) are literals.

<script type=“text/javascript”> var myNumber = 123; var myString = ‘Bork!’; var myBoolean = true; var myFunction = function(){ return ‘hello’;} var myRegExp = /bork/gi; var myArray = [1, 2, 3]; var myCarObject = { color: ‘red’, tires: 4, windows: 6 }</script>

JS: Objects

Everything in JS is an ObjectAll literals are object literals.

Those literals can be written:<script type=“text/javascript”> var myNumber = new Number(123); var myString = new String(‘Bork!’); var myBoolean = new Boolean(true); var myFunction = new Function(‘’, “return ‘hello’”);} var myRegExp = new RegExp(‘bork’); var myArray = new Array(); myArray[0] = 1; myArray[1] = 2; myArray[2] = 3; var myCarObject = new Object(); myCarObject.color = ‘red’; myCarObject.tires = 4; myCarObject.windows = 6;</script>

JS: Objects

Objects values are accessed using dot (“.”) notation:

example

<html><head> <title>Examples</title> <script type="text/javascript"> var bork = 'Bork!';

var w00t = { hello: 'Greetings', yo: function(){ alert(bork + ' ' + this.hello); } };

var zomg = { nested: { iMeanReallyNested: { seriously: { out: function(){ alert('whee!'); } } } } };

w00t.yo();

zomg.nested.iMeanReallyNested.seriously.out(); </script></head><body>...</body></html>

JS: Control Structures

if(bork) { //...} else { //...}

while(bork) { //...}

for(var i = 0; i< 10; i++) { //...}

for(var element in array_of_elements) { //...}

do { //...} while(bork);

switch(bork) { case 1: // if bork == 1... case 'whee': // if bork == 'whee'... case false: // if bork == false... default: // otherwise ...}

try { //...} catch(err) { //...}

What is the DOM?

DOM == Document Object Model

The DOM is hierarchical

<html><head> <title>Example JS Page</title></head><body> <form id=“some_form”> <input type=“text” name=“bork”/> <input type=“submit” value=“Go”/> </form></body></html>

Finding DOM Elements

document.getElementById()returns a specific element

document.getElementByTag()returns an array of elements

DOM Element Attributes

nodeName nodeValue nodeType parentNode childNodes firstChild lastChild previousSibling nextSibling attributes ownerDocument

1 = an HTML element 2 = an element attribute 3 = text 8 = an HTML comment 9 = a document 10 = a document type

definition

DOM Attributes Node Types

Here’s a good article that uses these.

Manipulating the DOM

Dynamically creating and adding elementsdocument.createElementappendChild

example

innerHTML

Why go through the trouble of creating Nodes?

More efficient Easier example

Events

Click Dblclick Mousedown Mouseup Mouseover Mousemove Mouseout

Keypress Keydown Keyup

Select Change Submit Reset Focus Blur

Load Unload Abort Error Resize Scroll

Mouse

Keyboard

Frame/Object Form

Simple Alert Box

<html><head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script></head><body>…</body></html>

Confirm Box Bound to an Event

<html><head> <title>Example Message Box Page</title> <script type="text/javascript"> function doLoad() { document.getElementById('sweet-link').addEventListener(‘click’, confirmClick, false); }//end doLoad function confirmClick() { return confirm(‘Are you sure you wish to go to that link?’); }//end confirmClick

window.addEventListener(‘load’, doLoad, false); </script></head><body> <a id="sweet-link" href="http://borkweb.com">BorkWeb</a></body></html>

example

Hiding/Displaying Elements Element visibility is a nice use of events

and DOM manipulation

example

AJAX AJAX (Asychronous Javascript and XML)

Gives you the ability to load content dynamically!Loading content on demandPossible usability IssuesPossible performance problems and

benefits Limitation: No AJAX calls beyond the

sandbox. Note: The way around this is with XSS (Cross Site Scripting)…which can

be dangerous if done poorly.

Ajax: XMLHttpRequest

Loading content on demand:<script type="text/javascript">function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0"); request.open("GET", url, true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ if (request.responseText){ callbackFunction(request.responseText); } } }; request.send(vars);}//end ajax

function out(text){ document.getElementById('content').innerHTML = text;}//end out

function ajaxCall(){ ajax('http://borkweb.com/examples/js_workshop/dynamic_content1.html','',out);return false;}//end ajaxCall

function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false);}//doLoad

window.addEventListener('load', doLoad, false); </script>

example

Things can actually be a bit easier.

How much? Well most of the above.

jQuery. That’s what we use on campus. It is awesome.

What is jQuery?

jQuery is a sweet JavaScript LibraryIts Mantra: Find stuff and do stuff with itFocuses on simplicity

Get it here Check out the docs

Finding Elements

Say goodbye to document.getElementById() and document.getElementByTag()

Say hello to: $()Uses CSS Selectors to find elements and

returns them as an array of elements.

Finding Elements With $$(‘a’)

$(‘.class’)

$(‘#id’)

$(‘.content div’)

$(‘input[name=bork]’)

$(‘input:first’)

Here’s an example.

Check out the selector syntax for more info.

Lets do some of the stuff we already did… Adding Text Fields Toggling Element Visibility Ajax Content

jQuery Coolness Browser data

$.browser Effects

SlidingFadingAnimating

Chaining $(‘a’).click(function(){alert(‘hello’); return

false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’);

jQuery Plugins

Pluggable! Additional jQuery functionality added by including jQuery plugins.

jQuery in myPlymouth

Go Sidebar Bookmarks Tab Stack Etc…

Check out the source.

Resources: Slide Examples, jQuery, Image Sprites, Mega Man!

Matthew Batchelder. Agenda JavaScript: What it is and isn't JavaScript: Uses What is the DOM? ...

Documents

Transcript of Matthew Batchelder. Agenda JavaScript: What it is and isn't JavaScript: Uses What is the DOM? ...