table of contents | all in one | link list | examples | lecture...

CSCI E‐12 Fundamentals ofWebsite Development

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home

March 24, 2010

Harvard UniversityExtension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: [email protected] staff email: [email protected]

CSCI E-12 - March 24, 2010- Presentation and Cascading Style Sheets http://tomcat.localhost/cocoon/course_webdev/slides/20100324/handout.html

1 of 62 3/25/2010 9:05 AM

Javascript

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you haveseen the lecture.

Image created at wordle.net


2 of 62 3/25/2010 9:05 AM

Markup (XHTML, HTML)

Structure

Content

Style (CSS)

Style

Presentation

Appearance

Function (Javascript)

Actions

Manipulations

Structure + Style + Function: solarsystem.html

Structure + Style: solarsystem‐style.html

Structure: solarsystem‐markup.html


3 of 62 3/25/2010 9:05 AM

JavaScript provides access to virtually all aspects of a page.

CSS properties

Markup content

Forms, communication to Server

Wikipedia entries:

JavaScript

ECMAScript

JavaScript is a scripting language most often used for client‐side web development. It was the originating dialect of theECMAScript standard. It is a dynamic, weakly typed, prototype‐based language with first‐class functions. JavaScript wasinfluenced by many languages and was designed to have a similar look to Java, but be easier for non‐programmers towork with. The language is best known for its use in websites (as client‐side JavaScript), but is also used to enablescripting access to objects embedded in other applications.


4 of 62 3/25/2010 9:05 AM

Manipulate Styles

Manipulate Content

Communicate with Web Server (Ajax)


5 of 62 3/25/2010 9:05 AM

Manipulate Styles

Manipulate Content


US Senate


6 of 62 3/25/2010 9:05 AM

Manipulate Styles

Manipulate Content


Course Search


7 of 62 3/25/2010 9:05 AM

click

change

submit

load

mouseout

mouseover

blur

focus

dblclick

keydown

keyup

keypress

unload

mousedown

mousemove

mouseup

reset

select


8 of 62 3/25/2010 9:05 AM

event attributes

Javascript function

function setBackgroundColor(myid,mycolor) { mynode = document.getElementById(myid); mynode.style.backgroundColor = mycolor; return false;}

Example 8.1 ‐ Javascript Events Illustrated ‐ View example by itself (Without Styles)

view plain print ?

<ul> 1. <li><a href="#" onclick="setBackgroundColor('p1','#f33');" shape="rect">Click to make "red"</a2. <li><a href="#" onclick="setBackgroundColor('p1','#33f');" shape="rect">Click to make "blue"</a></li>

3.

<li><a href="#" ondblclick="setBackgroundColor('p1','#3f3');" shape="rect">Double Click to mak</a></li>

4.

<li><a href="#" onmouseover="setBackgroundColor('p1','#ff3');" onmouseout="setBackgroundColor(</a></li>

5.

<li><a href="#" onkeypress="setBackgroundColor('p1','#f3f');" shape="rect">Keypress to make "m</a></li>

6.

</ul> 7.<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis orci a 8. odio. Donec cursus, felis eu pulvinar ornare, sem turpis dapibus elit, eget laoreet eros 9. quam vel dolor. Ut ante mauris, ullamcorper quis, posuere quis, lacinia a, felis. In 10. tincidunt malesuada pede. Donec varius lacus sed nisi. Donec rhoncus est ac erat. Duis 11. lobortis fringilla eros. Donec volutpat ligula eu neque. In hac habitasse platea 12. dictumst. Donec in massa. Aenean lectus ante, gravida et, luctus id, posuere at, pede. Nam 13. risus orci, rhoncus eu, aliquam ut, interdum ut, orci. Suspendisse rutrum, turpis sed 14. molestie gravida, libero risus iaculis ligula, quis tempor ligula enim vel sem. </p> 15.

In style element (<style type="text/css">) within head element:

view plain print ?

body {font-family: Calibri,Tahoma,Verdana,Helvetica,sans-serif;} 1.#p1 { 2. padding: 1em; 3. border: medium solid black; 4. width: 75%; 5.} 6.

In script element within head element (<script type="text/javascript">):

view plain print ?

function setBackgroundColor(myid,mycolor) { 1. mynode = document.getElementById(myid); 2. mynode.style.backgroundColor = mycolor; 3. return false; 4.} 5.

Markup Style Script Screenshot


9 of 62 3/25/2010 9:05 AM


10 of 62 3/25/2010 9:05 AM

Scripts in HTML Documents from the HTML 4 Specificationhttp://www.w3.org/TR/html4/interact/scripts.html

<script> element

Can contain reference to external JS file (src attribute)

Actual JS code can be within script element

<script> element typically goes in head, but can be a child of body and many other elements.

Note the <noscript> element for clients without JavaScript.


11 of 62 3/25/2010 9:05 AM

To function in all browsers, script element should not be empty, but should include a space, a comment, oreven a simple return true; statement. Best:

<script src="jquery.js" type="text/javascript" > </script>

Do not use:

<script src="jquery.js" type="text/javascript" />


12 of 62 3/25/2010 9:05 AM

External Script<script src="/url/to/javascript/file.js" type="text/javascript" > </script> 1.

Script within XHTML document<script type="text/javascript"> 1. /* 2. JavaScript code as content of script element 3. */ 4.</script> 5.

"Inline" scripts as values of event attributes<a href="#" 1. onclick="javascript:void(window.resizeTo(800,600))"> 2. Size Window to 800 x 600 3.</a> 4.


13 of 62 3/25/2010 9:05 AM

These are attributes defined for X/HTML elements, which are "event attributes":

onclick

onchange

onsubmit

onload

onblur

onfocus

onmouseout

onmouseover

ondblclick

onkeydown

onkeyup

onkeypress

onunload

onmousedown

onmousemove

onmouseup

onreset

onselect


14 of 62 3/25/2010 9:05 AM

JS can be used to manipulate CSS properties.

Note the use of event attributes (onclick, onmouseover, onmouseout).

Example 8.2 ‐ Using Javascript to manipulate style properties ‐ View example by itself | JavaScript example2.js

view plain print ?

<div id="cscis12-course" style="float: left; width: 50%; padding: 10px; margin: 10px; border: thin solid black;">

1.

<h3>Fundamentals of Website Development</h3> 2. <p> Harvard Extension School, Spring 2010 3. <br/> CSCI E-12 4. <br/> Wednesday, 5:30 to 7:30 pm 5. <br/>Maxwell-Dworkin, G115 6. </p> 7. <p id="cscis12-description"> 8. This course provides a comprehensive overview of website development. Students 9. explore the prevailing vocabulary, tools, and standards used in the field and learn 10. how the various facets -- including XHTML, CSS, JavaScript, Ajax, multimedia, 11. scripting languages, HTTP, clients, servers, and databases -- function together in 12. today's web environment. The course provides a solid web development foundation, 13. focusing on content and client-side (browser) components (XHTML, CSS, JavaScript, 14. multimedia), with an overview of the server-side technologies. In addition, 15. software and services that are easily incorporated into a website (for example, 16. maps, checkout, blogs, content management) are surveyed and discussed. Students 17. produce an interactive website on the topic of their choice for the final project and 18. leave the course prepared for more advanced and focused web development studies. 19. </p> 20.</div> 21.<div style="width: 20%; float: left; margin-left: 2em;"> 22. <p><strong>Align Description</strong></p> 23. <ul> 24. <li><a href="#" onclick="align('right')" shape="rect">right</a></li> 25. <li><a href="#" onclick="align('left')" shape="rect">left</a></li> 26. <li><a href="#" onclick="align('justify')" shape="rect">justify</a></li> 27. </ul> 28. <p><strong>Hide/Show/Toggle Description</strong></p> 29. <ul> 30. <li><a href="#" onclick="hidedesc()" shape="rect">Hide</a></li> 31. <li><a href="#" onclick="showdesc()" shape="rect">Show</a></li> 32. <li><a href="#" onclick="toggledesc()" shape="rect">Toggle</a></li> 33. </ul> 34. <p><strong>Set background-color</strong></p> 35. <ul> 36. <li><a href="#" onclick="backgroundcolor('#f33')" shape="rect">red</a></li> 37. <li><a href="#" onclick="backgroundcolor('#3f3')" shape="rect">green</a></li> 38. <li><a href="#" onclick="backgroundcolor('#ff3')" shape="rect">yellow</a></li> 39. <li><a href="#" onclick="backgroundcolor('#33f')" shape="rect">blue</a></li> 40. <li><a href="#" onmouseover="backgroundcolor('#f3f')" onmouseout="revertcolor()" shape="41. </ul> 42.</div> 43.

In head element:

view plain print ?

<script src="example2.js" type="text/javascript"> </script> 1.

Contents of example2.js

Markup Script Screenshot


15 of 62 3/25/2010 9:05 AM

view plain print ?

function align(val) { 1. node = document.getElementById('cscis12-description'); 2. node.style.textAlign = val; 3. return false; 4.} 5.function hidedesc() { 6. node = document.getElementById('cscis12-description'); 7. node.style.display = 'none'; 8. return false; 9.} 10.function showdesc() { 11. node = document.getElementById('cscis12-description'); 12. node.style.display = 'block'; 13. return false; 14.} 15.function toggledesc() { 16. node = document.getElementById('cscis12-description'); 17. var currentdisplay = node.style.display; 18. if(currentdisplay == 'none') 19. showdesc(); 20. else 21. hidedesc(); 22.} 23.var previouscolor = '#fff'; 24.function backgroundcolor(mycolor) { 25. node = document.getElementById('cscis12-course'); 26. previouscolor = node.style.backgroundColor; 27. node.style.backgroundColor = mycolor; 28. return false; 29.} 30.function revertcolor() { 31. node = document.getElementById('cscis12-course'); 32. node.style.backgroundColor = previouscolor; 33. return false; 34.} 35.


16 of 62 3/25/2010 9:05 AM

Additional relevant form elements are exposed based upon user input. Here, this is achieved by having the entire form inthe markup, with a certain section hidden via CSS (display: none;). If "Yes" is chosen, the display property ischanged to "block" through JS.

Example 8.3 ‐ Exposing Additional Form Elements ‐ View example by itself (Without Styles)

view plain print ?

<form method="get" name="ice_cream" id="ice_cream" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded">

1.

<div> Would you like ice cream?<br/> 2. <input type="radio" name="want" id="ic_yes" value="yes" onclick="displayIceCreamOptions()"/>3. <label for="ic_yes">Yes</label><br/> 4. <input type="radio" name="want" id="ic_no" value="no" onclick="displayIceCreamOptions()"/> 5. <label for="ic_no">No</label> </div> 6. 7. <fieldset id="icecream_options" style="display: none;"> 8. <legend>Ice Cream Options</legend> 9. <p>How would you like it?</p> 10. <input type="radio" id="container_cup" name="container" value="cup"/> 11. <label for="container_cup">Cup</label> 12. <br/> 13. <input type="radio" id="container_cone" name="container" value="cone"/> 14. <label for="container_cone">Cone</label> 15. <br/> 16. <p>Pick your toppings:</p> 17. <input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/> 18. <label for="toppings_wc">Whipped cream</label> 19. <br/> 20. <input type="checkbox" name="toppings" id="toppings_j" value="jimmies"/> 21. <label for="toppings_j">Jimmies</label> 22. <br/> 23. <input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/> 24. <label for="toppings_nuts">Nuts</label> 25. <br/> 26. <input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/> 27. <label for="toppings_cherry">Cheery</label> 28. </fieldset> 29. 30. <p><input type="submit"/></p> 31.</form> 32. 33. 34.


view plain print ?

#icecream_options { 1. display:none; 2. background-color: #eee; 3. margin-left: 2em;} 4.


view plain print ?

function displayIceCreamOptions() { 1. var divico = document.getElementById('icecream_options'); 2. var state = divico.style.display; 3. var inputYes = document.getElementById('ic_yes'); 4. if (inputYes.checked == true) { 5. divico.style.display = 'block'; 6. } else { 7. divico.style.display = 'none'; 8. } 9.} 10.

Markup Style Script Screenshot


17 of 62 3/25/2010 9:05 AM


18 of 62 3/25/2010 9:05 AM

Validate form input using the onsubmit event attribute.

Things to note:

onsubmit

false stops the form submission

this is the magic object

Validate function accepts an argument, which is the form object

On failure, focus is put on failed input and background color changed.

Example 8.4 ‐ Simple Form Validation ‐ View example by itself

view plain print ?

<form onsubmit="return Validate(this)" method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded">

1.

<div> 2. <label for="YourName1">Enter your name</label>: 3. <input type="text" id="YourName1" name="YourName"/> 4. <br/> 5. <input type="submit" value="Submit Information"/> 6.</div> 7.</form> 8.


view plain print ?

function Validate(thisForm) { 1. if(thisForm.YourName.value == null || thisForm.YourName.value == "") { 2. alert("Please enter your name!"); 3. thisForm.YourName.focus(); 4. thisForm.YourName.style.backgroundColor = '#ff3'; 5. return false; 6. } else { 7. return true; 8. } 9.} 10.



19 of 62 3/25/2010 9:05 AM

Q. What if we want to test for a string pattern other than "null" or "empty"?...A. Regular Expressions!

Regular Expression for an email address: (yes, this is simplified)/^[\w\._-]+@[\w\._-]+\.[a-zA-Z]{2,7}$/

^

beginning of the string

[\w\._-]+

[square brackets] indicate a character class"\w" is a word character"+" means 1 or more times

@

the "@" part of the email address

\.[a-zA-Z]{2,7}

matches the TLD (dot something, where something is 2 to 7 letters

$

end of string

Example 8.5 ‐ Form Validation with Regular Expressions ‐ View example by itself | JavaScript example5.js

view plain print ?

<form onsubmit="return Validate(this)" method="get" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" enctype="application/x-www-form-urlencoded">

1.

<div> 2. <label for="email1">Email Address</label>: 3. <input type="text" size="32" name="email" id="email1"/> 4. <br/> 5. <input type="submit"/> </div> 6.</form> 7.

In head element:

view plain print ?

<script src="example5.js" type="text/javascript"> </script> 1.

Contents of example5.js

view plain print ?

/* validates that the entry is formatted as an email address */ 1.function Validate(thisForm) { 2. var tocheck = thisForm.email.value; 3. var re = /^[\w\._-]+@[\w\._-]+\.[a-zA-Z]{2,7}$/; 4. if (!tocheck.match(re)) { 5. alert("Please verify the email address format."); 6. thisForm.email.focus(); 7. thisForm.email.style.backgroundColor = '#ff9'; 8. return false; 9. } else { 10. return true; 11. } 12.} 13.



20 of 62 3/25/2010 9:05 AM


21 of 62 3/25/2010 9:05 AM

And do the same for the other three seasons to get:


22 of 62 3/25/2010 9:05 AM

view plain print ?

<p> 1. <a href="#" onclick="makeSeasonsList(); return 0;"> 2. Click to append list of seasons 3. </a> 4.</p> 5.

view plain print ?

function makeSeasonsList() { 1. var ul_node = document.createElement("ul"); 2. 3. // Autumn 4. var li_node1 = document.createElement("li"); 5. var li_text1 = document.createTextNode("Autumn"); 6. li_node1.appendChild(li_text1); 7. 8. // Winter 9. var li_node2 = document.createElement("li"); 10. var li_text2 = document.createTextNode("Winter"); 11. li_node2.appendChild(li_text2); 12. 13. // Spring 14. var li_node3 = document.createElement("li"); 15. var li_text3 = document.createTextNode("Spring"); 16. li_node3.appendChild(li_text3); 17. 18. // Summer 19. var li_node4 = document.createElement("li"); 20. var li_text4 = document.createTextNode("Summer"); 21. li_node4.appendChild(li_text4); 22. 23. // Append the list items to the ul 24. ul_node.appendChild(li_node1); 25. ul_node.appendChild(li_node2); 26. ul_node.appendChild(li_node3); 27. ul_node.appendChild(li_node4); 28. 29. // Place on page 30. var container = document.getElementById("seasonslist"); 31. container.appendChild(ul_node); 32.} 33.

Click to append list of seasons


23 of 62 3/25/2010 9:05 AM

jQuery

Prototype / Scriptaculous

Moo Tools

Yahoo! UI

Dojo

EXT JS


24 of 62 3/25/2010 9:05 AM

jQuery is a new kind of JavaScript Library.jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, andAjax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.


25 of 62 3/25/2010 9:05 AM

Let's get started with jQuery by "striping" a table. The plain table comes froma list of United States Senators.

Plain table:

Striped table:

Plain table: senate‐plain.html

Striped table: senate‐striped.htmlInclude some Javascript libraries (jquery.js and write a function that selects the table rows and applies a class.Note that the jQuery selectors are like CSS selectors (and here we see custom jQuery selectors of :even and:odd).


26 of 62 3/25/2010 9:05 AM

console.log() allows you output messages to a console.

view plain print ?

$(document).ready(function() 1. { 2. if (typeof console == "object") { 3. console.log("in the 'document ready' state"); 4. console.log($("#senatetable tbody tr").size() + " rows in table"); 5. console.log($("#senatetable tbody tr:even").size() + " even rows in table"); 6. console.log($("#senatetable tbody tr:odd").size() + " odd rows in table"); 7. console.log($("#senatetable tbody td").size() + " cells in table"); 8. } 9. $("#senatetable tbody tr:even").addClass('evenRow'); 10. $("#senatetable tbody tr:odd").addClass('oddRow'); 11. } 12.); 13.

Debugging Example

Firebug in Firefox:

IE:


28 of 62 3/25/2010 9:05 AM

Safari:

Chrome:


29 of 62 3/25/2010 9:05 AM


30 of 62 3/25/2010 9:05 AM

Query Tablesorter Plugin makes dealing with tables even easier!

Sortable table:

Tables are constructed with thead and tbody. Simply by giving them a class="sortable", the jQuery TablesorterPlugin makes them 'sortable' and 'striped':

Plain table: senate‐plain.html

Sortable table: senate‐sortable.html

Javascript

jQuery (jquery.js)

jQuery Tablesorter Plugin (jquery.tablesorter.js)

CSS

Use the "blue" theme from the tablsorter plugin

Assign tables with classes

jQuery "ready" function


31 of 62 3/25/2010 9:05 AM

Senate data used with permission from GovTrack.US.Table sorting is achieved through jQuery and the jQuery Tablesorter Plugin


32 of 62 3/25/2010 9:05 AM

In an earlier example, we used the "onclick" attribute to specify a javascript function to call:


33 of 62 3/25/2010 9:05 AM

Use Javascript to add the "onclick" listener

Let's see how we can do this with jQuery. Items to note:

Separation. The "click" handler is bound via JavaScript and not the onclick attribute.

Fancier. jQuery provides many "effects" and "animations" (basic ones here are fadeOut and fadeIn)

Default Behavior Stopped. The default behavior for event propagation can be stopped.

Example 8.6 ‐ JS Separation from Markup ‐ View example by itself

view plain print ?

<div id="cscie12-course2" style="font-family: calibri,verdana,tahoma,helvetica,sans-serif; float: left; width: 50%; padding: 10px; margin: 10px; border: medium solid black; backgrocolor: #ffb;">

1.

<h3>Fundamentals of Website Development</h3> 2. <p> Harvard Summer School, Spring 2010 3. <br/> CSCI S-12 4. <br/> Wednesday, 5:30 to 7:30 pm 5. <br/> Maxwell-Dworkin, G115 6. </p> 7. <p id="cscis12-description2"> 8. This course provides a comprehensive overview of website development. Students 9. explore the prevailing vocabulary, tools, and standards used in the field and learn 10. how the various facets -- including XHTML, CSS, JavaScript, Ajax, multimedia, 11. scripting languages, HTTP, clients, servers, and databases -- function together in 12. today's web environment. The course provides a solid web development foundation, 13. focusing on content and client-side (browser) components (XHTML, CSS, JavaScript, 14. multimedia), with an overview of the server-side technologies. In addition, 15. software and services that are easily incorporated into a website (for example, 16. maps, checkout, blogs, content management) are surveyed and discussed. Students 17. produce an interactive website on the topic of their choice for the final project and 18. leave the course prepared for more advanced and focused web development studies. 19. </p> 20.</div> 21.<div style="width: 20%; float: left; margin-left: 2em;"> 22. <p><strong>Hide/Show/Toggle Description</strong></p> 23. <ul> 24. <li><a href="#" id="hide" shape="rect">Hide</a></li> 25. <li><a href="#" id="show" shape="rect">Show</a></li> 26. <li><a href="#" id="toggle" shape="rect">Toggle</a></li> 27. </ul> 28.</div> 29.




34 of 62 3/25/2010 9:05 AM

view plain print ?

$(document).ready(function() { 1. $('a#hide').click(function(event){ 2. $('#cscis12-description2').fadeOut('slow'); 3. event.preventDefault(); 4. }); 5. $('a#show').click(function(event){ 6. $('#cscis12-description2').fadeIn('slow'); 7. event.preventDefault(); 8. }); 9. $('a#toggle').toggle( 10. function(event){ 11. $('#cscis12-description2').fadeOut('slow'); 12. event.preventDefault(); 13. }, 14. function(event){ 15. $('#cscis12-description2').fadeIn('slow'); 16. event.preventDefault(); 17. } 18. ); 19.}); 20.


35 of 62 3/25/2010 9:05 AM

JavaScript:

Here we take advantage of an attribute value selector ([name=how]) the ability to retrieve and set attribute values,and also to completely remove attributes. Note too that we iterate through each of the checkboxes.

Example 8.7 ‐ View example by itself

view plain print ?

<form action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" method="get" enctype="application/x-www-form-urlencoded">

1.

<h3>How did you hear about us?</h3> 2. <p>[<a href="#" id="checkall" shape="rect">check all</a>] 3. [<a href="#" id="uncheckall" shape="rect">uncheck all</a>] 4. [<a href="#" id="togglecheckboxes" shape="rect">toggle</a>] 5. </p> 6. <ul style="list-style: none;"> 7. <li><input type="checkbox" name="how" value="radio"/>Radio</li> 8. <li><input type="checkbox" name="how" value="newspaper"/>Newspaper</li> 9. <li><input type="checkbox" name="how" value="magazine"/>Magazine</li> 10. <li><input type="checkbox" name="how" value="online"/>Online</li> 11. <li><input type="checkbox" name="how" value="friend"/>Friend</li> 12. </ul> 13. <input type="submit"/> 14.</form> 15.


view plain print ?

$(document).ready(function() { 1. $('#checkall').click(function() { 2. $('input[name=how]').attr('checked','checked'); 3. }); 4. $('#uncheckall').click(function() { 5. $('input[name=how]').removeAttr('checked'); 6. }); 7. $('#togglecheckboxes').click(function() { 8. $('input[name=how]').each(function (i) { 9. if ($(this).attr('checked')) { 10. $(this).removeAttr('checked'); 11. } else { 12. $(this).attr('checked','checked'); 13. } 14. }); 15. }); 16. }); 17.



36 of 62 3/25/2010 9:05 AM


37 of 62 3/25/2010 9:05 AM

Example: add_another.html

JavaScript:

select the "div" we want to duplicate

clone the "div" to create a new one

change the id (to maintain uniqueness) of the new div

insert the new div into the document

$(document).ready(function() { 1. var numberofphones = 1; 2. $('#addphone').click(function() { 3. numberofphones++; 4. newid = 'phone' + numberofphones; 5. var phonediv = $('#phone1'); 6. var newphonediv = phonediv.clone(); 7. newphonediv.attr('id',newid); 8. newphonediv.insertBefore('#addphone'); 9. }); 10. }); 11.

Markup:

<form action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi" method="get"> 1. <fieldset> 2. <legend>Contact Information</legend> 3. <div>Name: 4. <input type="text" name="name"/></div> 5. <div id="phone1">Phone: 6. <input type="text" name="phone"/> </div> 7. <input type="button" id="addphone" value="Add another phone"/> 8. </fieldset> 9. <div><input type="submit"/></div> 10.</form> 11.


38 of 62 3/25/2010 9:05 AM

calculate the new "id" string

select the phone div to be duplicated

duplicate (clone) the phone div

change the id of the new phone div

insert the new phone div into the document

jQuery methods return nodes, so we can easily chain these steps together.

Stepwise:

$(document).ready(function() { 1. var numberofphones = 1; 2. $('#addphone').click(function() { 3. numberofphones++; 4. newid = 'phone' + numberofphones; 5. var phonediv = $('#phone1'); 6. var newphonediv = phonediv.clone(); 7. newphonediv.attr('id',newid); 8. newphonediv.insertBefore('#addphone'); 9. }); 10. }); 11.

Chained:

$(document).ready(function() { 1. var numberofphones = 1; 2. $('#addphone').click(function() { 3. numberofphones++; 4. newid = 'phone' + numberofphones; 5. $('#phone1').clone().attr('id',newid).insertBefore('#addphone'); 6. }); 7. }); 8.


39 of 62 3/25/2010 9:05 AM

Principles of Unobtrusive JavaScript

Separation

Graceful degradation


40 of 62 3/25/2010 9:05 AM

One strategy would be to hide the "Add Another" button and make it visible through JavaScript.

Alternatively, we could create the "Add Another" node in JS and then adding it to the page via JS.

$(document).ready(function() { 1. $('#addphone').css('display','inline'); 2. var numberofphones = 1; 3. $('#addphone').click(function() { 4. numberofphones++; 5. newid = 'phone' + numberofphones; 6. $('#phone1').clone().attr('id',newid).insertBefore('#addphone'); 7. }); 8. }); 9.

A browser with JS disabled would display form with a single phone field.

Example: add_another_unobtrusive.htmlWith JavaScript disabled in browser:


41 of 62 3/25/2010 9:05 AM

jQuery UI Tab Widget allows the easy creation of tabs from simple markup.

Example: tabs‐jquery.html

With JS and CSS:

Without JS and CSS:


42 of 62 3/25/2010 9:05 AM

Markup:


43 of 62 3/25/2010 9:05 AM

<div id="tabs"> 1. <ul> 2. <li><a href="#basic">Overview</a> 3. </li> 4. 5. <li><a href="#description">Description</a> 6. </li> 7. <li><a href="#schedule">Schedule</a> 8. </li> 9. </ul> 10. 11. <div id="basic"> 12. <h2>Overview</h2> 13. <h3>Fundamentals of Website Development 14. <br/>CSCI E-12</h3> 15. <p> 16. <br/> Wednesday, 5:30 to 7:30 pm 17. <br/>Maxwell-Dworkin, G115</p> 18. <p> Harvard Extension School, Spring 2010</p> 19. <p><a href="http://cscie12.dce.harvard.edu/">cscie12.dce.harvard.edu</a> 20. </p> 21. </div> 22. 23. <div id="description"> 24. <h2>Course Description</h2> 25. <p>This course provides a comprehensive overview of website development. Students 26. explore the prevailing vocabulary, tools, and standards used in the field and learn 27. how the various facets—including XHTML, CSS, JavaScript, Ajax, multimedia, 28. scripting languages, HTTP, clients, servers, and databases—function together in 29. today's web environment. The course provides a solid web development foundation, 30. focusing on content and client-side (browser) components (XHTML, CSS, JavaScript, 31. multimedia), with an overview of the server-side technologies. In addition, 32. software and services that are easily incorporated into a website (for example, 33. maps, checkout, blogs, content management) are surveyed and discussed. Students 34. produce an interactive website on the topic of their choice for the final project and 35. leave the course prepared for more advanced and focused web development studies. 36. Prerequisites: CSCI E-1, or the equivalent experience. </p> 37. </div> 38. 39. <div id="schedule"> 40. <h2>Schedule of Lectures</h2> 41. 42. <ol> 43. <li>Introduction, Internet and Web Basics</li> 44. <li>Markup: XHTML and HTML, Part 1</li> 45. <li>Markup: XHTML and HTML, Part 2</li> 46. <li>Style: Cascading Style Sheets (CSS), Part 1</li> 47. <li>Style: Cascading Style Sheets (CSS), Part 2</li> 48. <li>Style: CSS, Part 3, Accessibility, and Images</li> 49. <li>Designing and Building a Site</li> 50. <li>Function: Javascript, Part 1</li> 51. <li>Function: JavaScript and Ajax, Part 2</li> 52. <li>Function: External Functionality, Flash, Applets, and Web 2.0</li> 53. <li>Video and Multimedia on the Web</li> 54. <li>Server-side: Dynamic content</li> 55. <li>Server-side: HTTP and Apache Web Server</li> 56. <li>Grab Bag</li> 57. </ol> 58. </div> 59.</div> 60.

JS and CSS:

view plain print ?

<link rel="stylesheet" 1. href="jquery/jquery-ui-1.8/css/smoothness/jquery-ui-1.8custom.css" 2. type="text/css"/> 3.<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"> </script> 4.<script 5. src="jquery/jquery-ui-1.8/js/jquery-ui.custom.min.js" type="text/javascript"> </script> 6.<script type="text/javascript"> 7. $(function(){ 8. $('#tabs').tabs(); 9. }); 10.</script> 11.


44 of 62 3/25/2010 9:05 AM

jQuery User Interface (UI)

jQuery UI provides abstractions for low‐level interaction and animation, advanced effects and high‐level, themeablewidgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

Accordion

Datepicker

Dialog

Progressbar

Slides

Tabs


45 of 62 3/25/2010 9:05 AM

jQuery has plugins that will provide an unobtrusive "calendar" widget for picking dates.

Example: date_picker.html

Markup:

<form action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi"> 1. <p> 2. Enter a start date: <input class="date" type="text" size="32" name="startdate" id="startdate" /3. </p> 4. <p> 5. Enter an end date: <input class="date" type="text" size="32" name="enddate" id="enddate" /> 6. </p> 7. <input type="submit"/> 8.</form> 9.

CSS amd JS:

<link rel="stylesheet" 1. href="http://morpheus.dce.harvard.edu/jquery/jquery-ui-1.8/css/smoothness/jquery-ui-1.8.custom.css"

2.

type="text/css"/> 3.<script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js" 4. type="text/javascript"></script> 5.<script 6. src="http://morpheus.dce.harvard.edu/jquery/jquery-ui-1.8/js/jquery-ui-1.8.custom.min.js" 7. type="text/javascript"></script> 8.<script type="text/javascript"> 9. $(document).ready(function(){ 10. $('input.date').datepicker(); 11. }) 12.</script> 13.


46 of 62 3/25/2010 9:05 AM

Apply the "smoothness" theme(css/smoothness/jquery-ui-1.8.custom.css):

Apply the "hot‐sneaks" theme(css/hot-sneaks/jquery-ui-1.8.custo


47 of 62 3/25/2010 9:05 AM

Structure + Style + Function: planets.html

Structure + Style: planets‐style.html


48 of 62 3/25/2010 9:05 AM


49 of 62 3/25/2010 9:05 AM

A gallery with no JavaScript ‐‐ thumbnail images are linked to the full‐sized image with a simple<a href="full/a.png" rel="gallery"><img src="thumb/a.png"/></a>:

Example Galleries

View example galleries implemented in various "lightbox" or "slideshow" programs.

Colorbox

Fancybox


50 of 62 3/25/2010 9:05 AM

Shadowbox

Lightbox 2


51 of 62 3/25/2010 9:05 AM

HarvardScience: Science and Engineering at Harvard University

Amazon.com

"Mega" Dropdown Menus

Jakob Nielsen's Alertbox, March 23, 2009: Mega Drop‐Down Navigation Menus Work Well


52 of 62 3/25/2010 9:05 AM

The White House

Food Network


53 of 62 3/25/2010 9:05 AM

The basics are:

Make the first list "inline"

Hide the secondary lists

Use the CSS ":hover" pseudo‐class to change secondary list display property

Example 8.8 ‐ View example by itself (Without Styles)

view plain print ?

<ul id="dropdown1"> 1. <li><a href="#" shape="rect">AL East</a> 2. <ul> 3. <li><a href="#" shape="rect">Baltimore</a></li> 4. <li><a href="#" shape="rect">Boston</a></li> 5. <li><a href="#" shape="rect">New York</a></li> 6. <li><a href="#" shape="rect">Toronto</a></li> 7. <li><a href="#" shape="rect">Tampa Bay</a></li> 8. </ul> </li> 9. <li><a href="#" shape="rect">AL Central</a> 10. <ul> 11. <li><a href="#" shape="rect">Chicago</a></li> 12. <li><a href="#" shape="rect">Cleveland</a></li> 13. <li><a href="#" shape="rect">Detroit</a></li> 14. <li><a href="#" shape="rect">Kansas City</a></li> 15. <li><a href="#" shape="rect">Minnesota</a></li> 16. </ul> </li> 17. <li><a href="#" shape="rect">AL West</a> 18. <ul> 19. <li><a href="#" shape="rect">Los Angeles</a></li> 20. <li><a href="#" shape="rect">Oakland</a></li> 21. <li><a href="#" shape="rect">Texas</a></li> 22. <li><a href="#" shape="rect">Seattle</a></li> 23. </ul> </li> 24.</ul> 25.

Markup Style


54 of 62 3/25/2010 9:05 AM


view plain print ?

ul { 1. padding: 0; 2. margin: 0; 3. list-style: none; 4. } 5.li { 6. float: left; 7. position: relative; 8. width: 10em; 9. } 10.li ul { 11. display: none; 12. position: absolute; 13. top: 1em; 14. left: 0; 15. } 16.li:hover ul { display: block; } 17. 18.


55 of 62 3/25/2010 9:05 AM

The Original Suckerfish

See: A List Apart: Suckerfish Dropdowns

Dropdown menus inspired by Suckerfish

Son of Suckerfish Dropdowns

Well now they're back and they're more accessible, even lighter in weight (just 12 lines of JavaScript), have greatercompatibility (they now work in Opera and Safari without a hack in sight) and can have multiple‐levels.

Superfish

Superfish is an enhanced Suckerfish‐style menu jQuery plugin that takes an existing pure CSS drop‐down menu (soit degrades gracefully without JavaScript) and adds the following much‐sought‐after enhancements.


56 of 62 3/25/2010 9:05 AM

jQuery Form Validation Plugin makes validating forms easy and flexible.

Form 1

Use the jquery.validation.js plugin in a basic way.

Validation rules are specified in "class" attributes


57 of 62 3/25/2010 9:05 AM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.

<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3. <title>A Form to Illustrate Validation using the jQuery Validation Plugin</title> 4. <link rel="stylesheet" type="text/css" href="form.css"/> 5. <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.3.2.js" 6. type="text/javascript"> </script> 7. <script type="text/javascript" 8. src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js"> 9. </script> 10. <script type="text/javascript"> 11.$(document).ready(function(){ 12. $("#myForm").validate(); 13.}); 14.</script> 15.</head> 16.<body> 17. <form id="myForm" method="post" 18. action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi"> 19. <fieldset> 20. <legend>Information</legend> 21. <p> 22. <label for="name">Name</label> <em>(Required)</em> 23. <br/> 24. <input id="name" name="name" size="25" class="required"/> </p> 25. <p> 26. <label for="email">Email Address</label> <em>(Required)</em> 27. <br/> 28. <input id="email" name="email" size="25" class="required email"/> </p> 29. <p> 30. <label for="url">URL</label> <em>(Required)</em> 31. <br/> 32. <input id="url" name="url" size="25" class="required email"/> </p> 33. <p> 34. <input class="submit" type="submit" value="Submit Form"/> </p> 35. </fieldset> 36. </form> 37.</body> 38.</html> 39.


58 of 62 3/25/2010 9:05 AM

Rules are quite customizable and can be expressed in JavaScript sections and not in the code markup.

form2.html


59 of 62 3/25/2010 9:05 AM

view plain print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1.

<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3. <title>A Forum to Illustrate Validation using the jQuery Validation Plugin</title> 4. <link rel="stylesheet" type="text/css" href="form.css"/> 5. <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.3.2.js" 6. type="text/javascript"> </script> 7. <script type="text/javascript" 8. src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js"> 9. </script> 10. <script type="text/javascript"> 11. $(document).ready(function(){ 12. var validation = $("#myForm").validate( 13. { 14. rules: { 15. name: { required: true, minlength: 2 }, 16. email: { required: true, email: true }, 17. url: { required: true, url: true } 18. } 19. }); 20. }); 21. </script> 22.</head> 23.<body> 24.<form id="myForm" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi"> 25.<fieldset> 26. <legend>A Form to Illustrate Validation using the jQuery Validation Plugin</legend> 27. <p> 28. <label for="name">Name</label><br/> 29. <input id="name" name="name" size="25"/> 30. </p> 31. <p> 32. <label for="email">Email Address</label><br/> 33. <input id="email" name="email" size="25"/> 34. </p> 35. <p> 36. <label for="url">URL</label><br/> 37. <input id="url" name="url" size="25" value="" /> 38. </p> 39. <p> 40. <input class="submit" type="submit" value="Submit"/> 41. </p> 42. </fieldset> 43. </form> 44.</body> 45.</html> 46.


60 of 62 3/25/2010 9:05 AM

form3.html


61 of 62 3/25/2010 9:05 AM

Copyright © 1998‐2010 David P. Heitmeyer

view plain print ?

$(document).ready(function(){ 1. var validation = $("#myForm").validate( 2. { 3. rules: { 4. name: { required: true, minlength: 2 }, 5. email: { required: true, email: true }, 6. url: { required: true, url: true }, 7. comments: { required: true }, 8. favnum: { required: true, number: true }, 9. favnum10: { required: true, number: true, min: 1, max: 10}, 10. color: {required: true}, 11. season: {required: true, minlength: 2}, 12. yourdate: { required: true, date: true } 13. }, 14. messages: { 15. season: { minlength: jQuery.format("Pick a minimum of {0} choices") } 16. }, 17. errorPlacement: function(error,element) { 18. if ( element.is("[name=color]") ) 19. error.appendTo( $('p#color') ); 20. else if ( element.is("[name=season]") ) 21. error.appendTo( $('p#season') ); 22. else 23. error.insertAfter(element); 24. } 25. }); 26.}); 27.

Table of Contents | All‐in‐One | Link List | Examples | Lecture Notes Home | CSCI E‐12 Home


62 of 62 3/25/2010 9:05 AM