All students need to complete some of the assignments listed on this page. Students shooting for an A Grade need to complete all 14 assignments, so in an 12 week course you need to shoot for 1 assignment per week. Web-casts will initially cover two assignments per week. Consult syllabus for special course grading option.

Complete the five steps at https://cim.saddleback.edu/de

Attend the first in-class session or watch one of the prior orientation Web-casts on blackboard.

Complete the XHTML video under Blackboard videos H0 intro.

Checklist...

1. Make sure school e-mail has been forwarded or will be checked
2. Watch the generic course intro videos at https://cim.saddleback.edu/de
3. Complete the Questionnaire. You need to enter a non academic e-mail.
4. You may need to take cimw115 Dreamweaver/WP remember prior preparation prevents poor performance, this class covers a lot of important material, students without proper preparation will not come close to getting the benefits of this course.
5. Login into Blackboard take quiz 0;
6. Watch the blackboard XHTML Video

Web Page Assignment: Create a default home page on cim.saddleback.edu, Canvas has Videoa on using either Dreamweaver or FileZilla with cim. You can start with this index.html page.

You may initially use the Home Page generator for creating your home page.

Also start using Mozilla Firefox and load the Web developer and Firebug add-on. For debugging JavaScript, activate Firebug (it is in the lower right hand corner), When scripts are not working the Firebug console window should break on the error line. Blackboard has video on using firebug - JavaScript debugger. We also be using Chrome which has addons for adroid and NetBeans debugging. The Web developer has three checks in upper left, they represent HTML, CSS and JavaScript syntax checker. HTML5 validators are still considered experimental. The will print an exclamation mark or x when one of them is generating errors. Blackboard has a video on Firebug, but you should wait til you are familiar with JavaScript before watching Firebug blackboard video. Tips on using Firebug. Note Chrome also has an itnernal JavaScript debugger (right^click to inspect). In Mozilla Firefox when you right^click a page, you can inspect with Firebug or with the internal Firefox Web Developer tools.

Refer to these Live Examples for help:

• Basic HTML Document
• Link

Checklist

• Make sure you have a home page on cim (cim student search)
• Make sure you have a working ftp access to cim, (ftp doesn't work from labtops on campus)
• Make want to skip ahead to the Videos covering JavaScript debuggers.

Project Depending on What you do it Counts for 1 to 3 Homework Assignments

Reading Assignment: Review Project Web Page, you may want to ask questions in class about projects.

Try to decide on a class project - - Have added some new projects titles - jQuery Mobile and adobe Phone Gap may get popular.

Written Assignment: Create a log file (aka class Journal w dates) and briefly state your project. You can go back later an redefine your project.

A log file is a file with a date followed by a note, they normally have multiple entries. A web-based log file created by a user is called a Web-log (aka blog). You can also define a log file as a Journal. In the log file assignments, you have one HTML page, enter the current date then answer then complete the written assignment portion. Application programs often maintain log files. On CIM multiple programs maintain log files. For example, Apache (CIM's Web Server) writes to log files whenever a Web page is accessed. You can view CIM web page statistics, the link just illustrated was created using Webalizer on Apache's log files.

For the homework assignments a log file, just enter the current date, then enter the content.

Checklist

• Make sure home page has a link to your log file

Reading: Watch XHTML blackboard video and Web-casts, then Read Chapter 1 and/or review XHTML Tags (you can re watch blackboard video) - Note HTML5 is XML.

Written: Add the following to your log file briefly explain the difference between HTML, XHTML and DHTML. Also explain the difference between the following doc type definitions: (HTML doctuype is HTML5), HTML5, HTML4.01 Transitional, HTML4.01 Strict, and HTML4.01 Frameset. Nota Bene, when HTML4.0 came out it had a few bugs so they quickly released the standard HTML4.01, which fixed the bugs. Therefore, the fourth version version of HTML is referred to as HTML 4.01. It is typical for software to do this. What is the difference between the previous three DTDs and the corresponding XHTML versions (i.e., XHTML1.0 Transitional, etc). What are Quirk Mode and XHTML mobile DTD. Why does HTML5, not have a corresponding XHTML standard?

LOG file addendum: briefly define the following tags: p, strong, table, td, tr, div, span, body, head, title, html,ul, ol, li.

Your log file needs to pass one of the three XHTML or HTML 5.0 validation mode, make sure it validates and add the appropriate validation icon. Note HTML5.0 validators are still experimental. It is recommended you add Firefox Web - Developer add on for validating files. CIMW 240 CSS discusses Web-Developer add-on, Blackboard has video taken from CIM272 about Firebug.

Web Page Assignment: Create an HTML file, that has a table with three columns, column headers are: Extensions, Full Name, and Synopsis. The first column data should have the extensions (.css, .html, .htm, .js, .php, .sql). You will need to file in the other two columns. The file must pass strict XHTML 1.0. Note in current Web development passing HTML 4.01 transitional is a okay.

Live Examples:

• Basic Paragraphs, paragraphs just use the <p> tag.
• Tables, tables start with the <table> tag, each row has a <tr> table row tag, each table cell has a <td> table data tag.
• Example adding table headers <th> a td tag that is bold and centered: table headers,

|Checklist

• Make sure you are familiar with HTML before continuing, review this assignment/video a 2nd time if needed.

Reading: Review Chapter 1 examples,Watch Blackboard Web-cast, API, JavaScript Engine

LOG file addendum: Briefly contrast Spider Monkey, Trace Monkey and Chrome's V8. What type of performance gains does one get from JavaScript using JIT and how did performance increase on Java with Java Hot Spot.

LOG file addendum: What is an API? Compare and contract these APIs: DevGuru (make sure you click on the colored buttons Functions,..Object), MDN Google Maps JavaScript API, ArcGIS, Can you see any advantages with Java APIs: Standard Edition, TicTacToe, and JOGL what did this guy do with his JavaScript API. Briefly discuss the JavaScript Object Document, list and describe three or more methods and one or two properties.

Web Page Assignment: Create an html file with Hello World JavaScript snippet. Add four more document.write lines after Hello World, they should print out (indents matter)...

      Hello World
        Hello CIMW 160
         Hello JavaScript
        Good
      Bye
       

Hints...

• JavaScripts support the standard escape sequences \n and \t; Uses a back slash (falls backward) to escape the special meaning of the next character. Note double and single quotes have special processing (end and start strings), but you can escape this meaning using the back slash, example. The escape sequence \n prints out a new line, \t goes to the next tab stop.
• The <pre> tag is the preformatted tag, it maintains the current formatting, example. In standard HTML formatting multiple white spaces become a single space.

Refer to these live examples for help...

• document.write Example - document Object - nota bene always start all JavaScript blocks with <script type="text/javascript">
• Little advance for Second Example, but you can review this change html element example, - getElementbyid documentation (will see getElementbyid in h9)

Checklist...

• Complete blackboard chapter 1 Quiz
• Make sure you home page has Hello World
• Review your Log File

Reading: Chapter 2 or, JavaScript Data Types, short summary of JavaScript DataTypes, Watch Blackboard Chapter 2 and Assignment Web-Cast.

LOG file addendum: What are the primary, composite and special JavaScript data types. How do you define identifiers in JavaScript. What is the difference between Number function, and Number Object. What are some key Number properties.

Web Page Assignment:Web page that sets three variables in the header: a string with your first name, a date with the current date and your favorite number. Your Web page should use all three variables in the body of its Web page. For example...

Welcome My Name is My favorite number is lucky 7.

Refer to these Live Examples for help...

• Create and Write a String Variable.
• Date live view example - may want to use the JavaScript console to check error messages.

Checklist...

• Complete blackboard chapter 2 Quiz
• Verify you have taken both blackboard quizzes by clicking the blackboard quiz grade tab
• Make sure you home page has the h5 assignment
• Review your Log File

Reading: Chapter 3 or Array, Flow Control.( only need to know for, if, while and case). Watch Blackboard Chapter 3 Web-cast.
Important watch Firebug and JavaScript Debuggers Video..

LOG file addendum: Briefly describe the Array object, discuss four of its methods and two of its properties. Briefly discuss the looping flow control structures (for and while). Briefly define the branching flow control structures if, if else and case statement.

Web Page Assignment: Create a program that creates a 10 element array consisting of 10 random numbers. Print out the 10 random numbers, then sort the Array using method sort, then print the sorted values.

All programming language have a random method/functions that returns a random number from 0 to less than 1.0. JavaScript uses Math.random(). If one wants random numbers from 0.10, just multiple Math.random()*10 this would give a floating decimal number between 0 to 9.999, to make them easier to read just use Math.floor, (i.e., Math.floor( Math.random()*10) ). Therefore you would have a whole integer number from 0..9. For this assignment I would translate random number to integers they are easier to visualize.

Live Examples....

• Random Number discussed above
• Typical for loop, use the example and try to write a for loop to print 10 random numbers, that are also stored in an Array.
• Function Call.
• Sort Array First example, lexicographically Further down example on numeric sort by passing a compare function.

Checklist...

• Complete blackboard Chapter 3 Quiz
• Make sure your flow control example h6 is working and has a home page link
• Review your Log File

Reading assignment: Chapter 5, analyze the first few Chapter 5 Examples or Alternate reading HTML Forms. HTML forms are a basic building block of JavaScript. If you understand HTML forms jump ahead and finish the log file. Else I would re watch chapter 5 and assignment blackboard Web-cast videos. You can also watch these YouTube videos, (once again HTML forms are critical building block in using JavaScript). Don't leave this assignment until you understand HTML forms.

Log File Addendum: What is a form block? What are the HTML form attributes action and method? What does this link do? How is this one different? Briefly define the following form attributes: name, placeholder ,required, title, and type. Note title is a core attribute, it is available for all HTML tags.

Web Page Assignment: Create a form block that allows the user to enter name, e-mail, zip code, birth date, phone number and has a user selection element to determine if person works: full-time, part-time or focus is college (both radio button groups and drop down selection boxes will work). Send the form output to either formData.php or formTable.php. Make sure your form block has both a submit and reset button.

Live View Examples (for these examples add a submit button and set the action to one of jstudent formData links).

• General HTML Form Info
• Basic Text Field
• Basic Radio Button Group
• Drop down List Box
• HTML5 Placeholder,
• HTML5 required attribute, note title attribute will pop-up help on rollover, or on submit.
• HTML 5.0 datalist used for code completion; HTML 5.0 also has keygen for public/private keys creation. Note HTML 5.0 output can be done w JavaScript.
  

Checklist...

• Complete blackboard Chapter 5 Quiz (will cover chapter 4 browser object model in a future assignment)
• Make sure you form assignment working
• Check all quiz grades, just click the quiz grade tab on blackboard.

Reading Assignments: Watch chapter 5 and assignment blackboard web-cast. Check out a Linux GREP, note all modern regular expression syntax is based on GREP. W3 Schools regexp tutorial is not that good use this tutorial instead. Check out HTML event attributes Important events are focus (had keyboard focus), change (use has changed contents), click (user has clicked element) and load/unload (user has loaded or leaving page). OnSubmit event is generally handled by the submit button.

Log File Addendum: Do many programming language support regular expressions? What do these regular expression symbols mean: ^, $, \d, \s, \w, [0-9], [a-zA-Z], |, ?, . (dot), *, {3,5}. You may want to use this regexp or short regexp cheat sheet. Briefly explain these three JavaScript regular expressions...

• /^\d{3}[ -]?\d{2}[ -]?\d{4}/ Hint and regExp Tester
• /^(?!000|666|999)d{3}[ -]?(?!00)\d{2}[ -]?(?!0000)\d{4}/ Hint and regExpTester
• /[a-z]{2,}\d*@(saddleback|ivc)\.edu/ and regExpTester

Note on JavaScript regular expression you can use the REGEXP object or delimit the string with forward slashes. PS regular expression are declarative programming,standard JavaScript is a procedural and object oriented programming language.

Briefly define these HTML events: onclick, onsubmit, onfocus, onmouseover. Mouse Over here what is happening? Can you get an automatic A using the form block below, if not why? To analyze the form block use Web developer menu Forms --> Display Form Details or use the Firebug code inspect icon (2nd upper right most icon).

Log File Addendum: With Creative Cloud Adobe dropped Spry Framework, with Spry you had canned validation scripts, but if you wanted to write your own you had to use the Spry syntax, not the standard REGEXP syntax, was this a mistake? If you have CS6 Dreamweaver, you add Spry validation by clicking the input item - then the insert->spry Spry Text Field Validation - YouTube - Detailed Description ). jQuery has a standard jQuery validator - you need to add class rules, and adding RegEXP is a kludge. However with HTML5, the Pattern attribute makes most JavaScript validation obsolete. Comment on this very large collection of Regular Expressions. With Creative Cloud Dreamweaver, implement the extended HTML 5.0 type names, you can view these uisng insert --> Form, which list then new input tags with the extended form type attribute name. Instead of type="text" we use type="month", etc. the only catch is you still need to implement the pattern to do any validation checks. So this is just a typical example of application bloat. Try out this form block...

Web Page Assignment: Modify your previous form block so that when first name text field loses the focus is pops up an alert box with come back. Also modify your previous Web Page form box elements with validation. For validating you can use Spry, your Own Regular Expressions, HTML 5.0 pattern attribute, another Framework, solution found with Adobe Widget or a regular expression found on the Web. It is recommended you use HTML 5.0 pattern attribute, you should also have a title attribute (completion hint) and the required attribute. For example,....

You should have one Web page for both h7 and h8.

In the previous assignment attribute discussion briefly define the dataset tag, and form attributes pattern="REGEXP". You previously defined name, placeholder ,required, title, and type.

Live Examples:

• Review Validation - not you can select the first form element using either document.forms["myForm"]["fname"] or document.forms[0].fname where myForm is name of first form tag and fname is name of input element inside of first form block.
• Review Chapter 5 Examples
• HTML 5.0 pattern attribute example, its just pattern="REGEXP" note you also have to state the attribute required, in order to prohibit empty data.
• HTML 5.0 the multiple values for type is bad enough, but what is even worse is all the other new attributes, only other new attribute I would consider is autofocus.

Checklist

• Make sure you understand validation,
• Check log-file and home page both form and form/validation assignment
• make sure you understand HTML 5.0 placeholder, required and pattern attribute.

Reading Assignment: Brief intro to jQuery JavaScript framework, watch blackboard assignment Web-cast, JavaScript Library, Frameworks. Note the default JavaScript library (aka API) is not extensive enough to cover the building of Web applications, therefore users have created library and frameworks which have predefined functionality and classes to help in the development of Web applications.

Log File Addendum: Briefly contrast JavaScript snippet, library and frameworks. Comment on top sites used to download JavaScript snippet. Identify the JavaScript snippet used here, where did it come from. This site illustrates various JavaScript snippets. Try out a few of the snippets including the print example. Most of my class sites also have a print button, how do you set up the JavaScript for this print function? The CSS is relative easy simply have a style sheet set to media="print" (you can also use the @media annotation).. Briefly define a JavaScript framework and comment on this comparison. A JavaScript framework provides you with additional libraries/classes to automate regularly used procedures (e.g., form validation). The User Interface (UI) is a library built onto of the framework to supply a rich user interface. Briefly comment on this comparison of User Interface (UI) Frameworks, P.S. jQuery has become very popular recently, but JavaScript over all is a lot more popular. The UI site for jQuery is jQuery UI. JavaScript Framework job comparison...

jquery,dojo,mootools,gwt,yui,prototype,ext js,scriptaculous Job Trends Jquery jobs - Dojo jobs - Mootools jobs - Gwt jobs - Yui jobs - Prototype jobs - Ext Js jobs - Scriptaculous jobs	jquery,prototype, javascript, c#, java, sql, xml Job Trends Jquery jobs - Prototype jobs - Javascript jobs - C# jobs - Java jobs - SQL jobs - XML jobs

Web Page assignment: Create a Web page with three JavaScript special effects:

1. Your first JavaScript special effect needs to be the wheel discussed above, but modify it so that it steps through your assignments, (it currently steps through the classes).
2. The Second one is of your choosing, you can use any special effect snippet or preferably UI Framework effect. For example, use a popular snippet, Google Web Toolkit special effects, GWT-fx, or DW Spry behavior, (DW Spry Window--> Behaviors(Dialog Panel), Select Age Behaviors, + Menu Has Many Effect (swap image), extra options sub menu Effects & More Effects)
3. Third review the live examples below, and try to write your own modeled after the live examples.
   • Alert Box pop up
   • Prompt window with document.write
   • Button with onclick event to display date.

Checklist

• Make sure log file and assignments are up to date (no new quizzes this time)

Learning Objectives:

• Become familiar with XML (XML is everywhere, HTML5, Microsoft Office, Open Office, etc)
• Understand basic types of image viewers
• Create an XML file that interfaces to snapShot

Reading: Attend class and/or watch the snapShot Blackboard Web-cast, review the snapShot Web Page, try out different image viewers.

Log File Addendum: What is pixastic? Note snapShot currently does minimum Image processing however I should write additional ImageMagick or GD filters. Why should I use GD/ImageMagick instead of pixastic?

What is xmllint, and JSlint (too picky). The snapShot validator is using xmllint to validate an XML file. How is this snapshot generated? What are Kernow , Saxon and DTDGenerator? On CIM I'm using xsltproc.
Which Java Script frameworks does the original lightbox use. What input format do these Flash Viewers use and why?

What input format does snapShot use? How does each snapShot image viewer know which XML file to read (hint URL encode variable)?
Analyze snapshot definition (DTD), (note * in a DTD is a regular expression symbol) and use disney.xml for help. Look at a XSD (XML Schema) for snapShot.xsd, Note this format uses an XML specification (DTD) to define the DTD of snap shot files. When you display XML in a browser, the ending tag is dropped and replaced with /> instead of </file>. Also just like with HTML the header lines are not displayed. A default header for a snapShot input configuration file is....

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type='text/xsl' href='https://cim.saddleback.edu/~tdedonno/snapShots/xsl/flowLayout1.xsl' ?>
<!DOCTYPE files SYSTEM "https://cim.saddleback.edu/~tdedonno/snapShots/config.dtd" >

The second line style-sheet is optional, you can use either CSS or XSLT to render an XML document, (Nota Bene HTML5 is XML based.). XSL transformation sometimes require the help of an XSLTProcessor, snapShot has this capability. Note XSL quickly became XSLT which is super charged CSS and transformation language. You can apply CSS to XML nodes, id and classes the exact same way we apply CSS to a XHTML document.

Note XSD is a lot more complicated than DTD, but meets a XML Schema defintion. With XSD we usually specify the XSD file, with the root node,
(i.e., <files> for snapShot), a typical config file would look like...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE files PUBLIC  "-//tdedonno//cim snapshot//EN" "https://cim.saddleback.edu/~tdedonno/snapShots/config/config.dtd" >
<?xml-stylesheet type='text/xsl' href='https://cim.saddleback.edu/~tdedonno/snapShots/xsl/flowLayout1.xsl' ?>
<!-- may be best to leave out XSL if you want to view the XML Contents as nodes -->
<files
    xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance'
    xsi:noNamespaceSchemaLocation='https://cim.saddleback.edu/~tdedonno/snapShots/config/config.xsd'
    large="Absolute URL to the large folder" medium="absolute url" small="absolute url">
    <file icon="image Location Relative large,medium and small folders" author="" 
          press="" rollOver="" useAuthor="false"></file>
 ....
</files>

You must use absolute URL (aka full path with server) for your small, medium and large attributes values

Web Page Assignment: Pick one or more of the Java Script viewers on snapShot (jquery, lightbox, or spry), Create a local XML file that points
to your local image set. Make sure it passes the snapshot (DTD) using snapShot validator.

This assignment is not that hard even Minnie Mouse has an XML configuration file, XML has passed DTD validation and a sample viewer. But she some of her images are not working and she has only one image size folder,you should have three separate folders: thumbnail small images (60x60), medium images (200x200) and large images 640x480 or larger. However, Minnie is kind enough to give you the following tips:

1. Create or get a set of images, System supports three image sizes, both Fireworks or Photoshop can batch auto scale images. Blackboard snapShot web-cast should demonstrate how to batch images using Fireworks.
2. Create a config XML file make sure if passes the snapshot (DTD), mine does using both CIM Validator and also W3C engine.
3. The location of your images must have a full CIM path, aka /~mmouse0/images/minnie.jpg worked for me.
4. The config variable values must be a absolute Web address, aka https://cim.saddleback.edu/~mmouse0/images/config.xml
5. You may want to add extra tags and mistakes and see what happens with validator. Remember a well-formed document passes XML syntax verification, a valid document meets its DTD. For XML 1.0 files the first line has to be....
   

   <?xml version="1.0" encoding="ISO-8859-1"?>

6. Please note both CIM Validator and also W3C engine, notice the variable config=value and uri=value, these values are generally URL encoded. With URL encode special characters are translated to a URL code. For this assignment you don't have to create an URLencode. But you should be aware of them, for example, if config=http://ab c/ the URL encode is config=http%3A%2F%2Fab%20c%2F%0A, Meyer's site has an URL encoder/decoder.
7. Determine the URL of the javaScript viewer you will be using, I'm using slideShow.php, just use snapShot, and copy the URL.
8. Set the URL config variable to the absolute path of your snapShot XML file.
9. To integrate snapShot into a Web page you can investigate using an iframe.
10. Make sure your cim269b home page, has a link to your completed assignment.

Extra Credit: Find a JavaScript viewer that is currently not implemented on snapShot and add it to the system. Make sure the image viewer uses an XML configuration file, then just modify its input so that it works with the current Snapshot DTD. If the program doesn't use an XML configuration file, you will have to write a PHP file that converts snapshot DTD to its required DHTML format, I had to do this with nivoslider (check the DHTML generated output).

Extra Credit: Write a GettyImages.com or a Nasa Image API or an interior National Oceanic and Atmospheric Administration API interface to snapShot. I did this with flickr. This is relatively straightforward. First you need to find the flickr API. All major sites have a corresponding API, which allows a Web Programmer to extract XML or JSON based data, NOAA has good API documentation. Using the flickr API.I, I created a routine to extract flickr XML data, then using XSLT, I translated the the flickr XML format to the snapshot (DTD) XML format. You can also considering do this with some other picture site.

Checklist...

• Make sure h11 is done. Considering putting it inside of an IFRAME within a Web page..

Reading assignment: Chapter 4 or BOM, DOM, GetElement Examples, Watch blackboard assignment Web-cast. Difference between DOM and BOM. Style Example.

Log File Addendum: What is a rendering engine? Do rendering engines have a DOM model? Can one change the rendering (CSS styles) after a Web Page has been rendered, if yes how (hint) ?

What Java Script object represents BOM, which object DOM? What are the three basic Java Script object Window dialog panels (Hint look under JavaScript Window object for alert box and two basic input dialog panels)? Java Script has no forward referencing, therefore you cannot access a Web Page element in Java Script until you have processed (or read) it. Briefly explain the document (aka DOM) methods: getElementById (standard), others added over time getElementsByClassName(), and getElementsByTagName(). Why are two of them plural (i.e., Elements or Element).

What is this World Bank and Google Geocode Returning? Why does Google Geocode have to be opened in a new page (note you get blank page in Geocode current iframe)?

Use Firebug, look at the DOM tab, analyze the document object, is the DOM tab appropriately labeled?

To get data one would look for a MySQL Database, or a XML/JSON file, (e.g., World Bank) or a Web Services Feed (e.g., Google Geocode). A database has a fixed schema (format), it is very good for server side access and when you are dealing with fixed number of fields. In many situations a Web Services will access a database and return an XML stream. XML is ideal for small to medium size flexible data sources. For example the countriesFinal.xml file is medium size file with missing fields for many entries, (some entries have city and language others don't. For example the DTD line country (city | language)*, implies each country node can have zero or more city and/or language children. Also, one would use an XML file, when they need to use the entire data set each time (e.g., creating the country select box in countries.html). If you are only making calls to get random data occasionally, you would use a Web Service (aka stock quotes) or maybe to map from a ISO country code to a latitude/longitude. I decided to add latitude, longitude and ISO codes to our original countries.xml file. XML Reference Book includes full descriptions of Java DOM, SAX, XSLT, XSD, DTD and XPATH. In assignment H11, we will discuss XML and related XML technologies in more detail.

• Basic html element example, changed by getElementbyid documentation
• Examples DOM GetElementById in a form
• JavaScript window object - represent BOM, document is a subset of DOM, H1 Tag illustrates reading DOM and setting window.alert
• Intro to XML DOM Traversal, more specific getElementsByTagName using JavaScript get Function on a XML DOM Object containing the data books.xml.

Web Page assignment: Given countries.html, it uses this DTD, and this XML file ( you may be able to link to /~jstudent0/map/countriesFinal.xml ). You need to finish countries.html, snapshot image of final assignment (including Weather extra credit Mashup). To finish countries.html, follow these step...

Checklist...

• Complete blackboard Chapter 4 Quiz
• All quizzes on blackboard (except jQuery) should be completed, use blackboard quiz grade to verify this.
• Make sure assignments h0..h11 are on your home page.

Reading: What is jQuery, wikipedia intro, specific W3C selectors, consider adding the plug-in Wappalyzer or Alexa; Read through installing jQuery and minify. Read through jQuery Intro stop before jQuery Events. Read about selector engine sizzle - how jQuery selects elements. Take a look at this jQuery testing site, it uses jsLint.

jQuery API - css Methods, This method is relatively easy, you select the element, then use element.css( cssPropertyName, Property value). You can pass multiple values using JavaScript property key, value pairs Read answer 162, (or property name : property value ); elementt.css( { "name":"value", "name":"value" } ), note css Method inappropriately refers to it as a map.

Recommended Reading: Sam Teach Yourself JavaScript, hour 19-21;

Log File Addendum: Should you download jQuery or use a CDN? Comment on Stack-flow discussion minify versus gzip.?

Live Examples...

• jQuery selector examples
• W3C jQuery Selector Test (can paste your Web Page test area, to get selectors working)
• jQuery examples setting CSS using element.css( "cssPropertyName":"cssPropertyValue" );

function( att ) {
         x = document.getElmentsByTagName( "input" );
         for( i=0; i < x.length ; i++ ) {
            var y = x[i].attributes; //... you need to finish this
         }
          

function xxx( arg1 ) {
         x = document.getElementsByTagName( arg1 );
         y  = Array( );
         for( i=0; i < x.length; i += 2 )
              	y[ i/2 ] = x[ i ];
         return y
         }
         

Web Page Assignment: Create a web page with a link to a jQuery CDN and then complete the above jQuery Selector Table, I have completed the first selector #story1, all code is inside the table. Using Firefox, click and drag slightly before the table and into this paragraph, then right^click copy selection or click this link (and save page). This will give you the table which includes two JavaScript functions myInvert and myHighlight. For both of these functions (myInvert and highlight) add comments to each line of code.

Checklist...

• Make sure all Java assignments are done (h0..h11)
• Make sure all Blackboard quizzes are done, click the my grades button on blackboard.

Objectives: Introduce events, anonymous callback functions, and review selectors.

Reading: jQuery API Events and W3Schools jQuery Events
Look over the 20 useful jQuery methods;

More Specific jQuery samples..

• html method, set html content of element
• Page selector and onLoad/Ready example
• ID Selector with ready event. - as soon as page is loaded the ready event handler is called
• Event Click on p tag (note don't need the ready event first)
• Event mouseenter on p tags
• jQuery $(document).ready( event Handler )

Web Page Assignment Complete the event Table.html , you need to complete all 4 columns.

Reading: If you have prior experience with Dreamweaver CS6 has access to jQuery using DW exchange, with Creative Cloud jQuery is integrated on the insertion panel, jQuery UI category. If familiar with DW try drag and dropping various jQuery UI components. Then read the first page of jQuery UI API, jquery UI is very extensive you can divide it up into the following categories::

• Effects -specific effects such as blind effect - good effects demo page.
• Core Effects - core methods used in the effects category toggle
• Interactions - drag, sort or resize widgets, note HTML5 and CSS3 have deprecated many of these.
• Widgets - accordion this assignment page, Menu Widget office hours.
• ThemeRoller used to add CSS theme to a Widget, (this assignment page accordion uses different themes)
  • Icons - DW will let you complete class names once you set the CSS link

jQuery Tools the missing UI library for jQuery UI, they support RWD.

Web Page Assignment: complete jQueryUI.htm Web page. I'm using the le-frog theme-roller, you should use a different theme roller (click gallery tab).

Reading: AJAX -Asynchronous JavaScript and XML. - CIM Student Search and Google Suggest -
check out the AJAX response against the pop up list box using FireBug net tab, on the net tab check out the GET request and the response.

All browsers have an XMLHTTPRequestObject, on a standard HTTP request a new page is sent, on an XMLHTTPRequest, we put only data.

Browser XMLHttpRequest Object Has Methods:

• open( "[GET | POST]", URL [, async ] [, username] [, password] ); Opens a Connection to the URL
• send( [ data ] ); sends the URL to the Connection specified by open, the data can be a javaScript map or URLEncode format "Number=3";

XMLHttpRequestObject Has Properties:

• readyState one of four values UNSENT, OPENED, LOADING or DONE, which equal 1,2,3 and 4 respectively
• responseXML HTTP status 200 Okay; 404 Not Found;

Has Events

• onReadyStateChange
• Example - XMLHttpRequest

jQuery AJAX Methods.

• ajax([javascript map] ); can specify URL, data, datatype and callback functions.
  For example: $.ajax({url:"demo_test.txt",success:function(result){    $("#div1").html(result); }
  Load the contents of the file demo_test.txt into the id #div1
• You do have an error JavaScript map key, but on errors get use to check the browsers inspect element net and console tab.
  
• You can also chain methods to the $.ajax
• Note load, put, get and getScript are ajax short-hands, load( url [, data] [, success ] ) load HTML data
• get( url [,data ] [, success ] ) - URL string, data is map or string sent to server, success is function to call on success
  get( url, "number=3", showMessage ); or map { number:3 }
• getScript( url [,success callback] ) get and evaluate a JavaScript - jQuery shorthand $.ajax( { url: url, dataType: "script", success:success } );

jQuery traversing and other helper methods

• $.each( collection, callback ) Collection is an ojbect or an array, we call function callback on each enumeration
• DOM traversal - all XML documents are trees with a root node and children/siblings. In HTML the root is <html lang="en"> the first two children are <head> and <body>; <head> and <body> are siblings.

Log File addendum: Document the jQuery AJAX method by documenting seven JavaScript map arguments.

Web Page assignment: Create a Web page that allows the user to enter a number, your JavaScript program should output information about the number. You have to make an AJAX call to Minnie mouse's about number, her file will tell you if your number isGermainPrime, and isFermatPrime (all Fermat numbers are prime). You also have create a JavaScript file with five more number sequence tests. You may not hard code the numbers into your program, you must have an isFunction, that returns true or false. Load you JavaScript file using $.getScript, do not use a script tag with a src attribute. You can also use the standard jquery AJAX w contentType: "Script" and use an eval in the success function. Your five number sequence types can be chosen from....

1. Triangular Number t = { n( n+1) } / 2 where n = 1,2,3... refer to the isFermat script for help.
2. Pentagonal Number p = { ( 3n 2 -n ) } / 2 where n = 1,2,3... refer to the isFermat script for help.
3. Perfect Square, 25 is a perfect square 5*5 = 25
4. Prime - divisible by only 1 and itself - write your own isPrime function, don't cut and paste Minnie's code.
5. isEven - you man want to try out bitwise operators, Minnie has special code for isDivisibleByThree.
6. isOdd
7. isDivisibleBy5
8. isMultipleOfTen
9. Palindrome - reads the same backward as forward (e.g. 101, 121)
10. Mersennie Prime ( 2P - 1) Nota Bene Gremain is 2*n +1 )
11. Palindromic Prime
12. Triangular Prime
13. Fibonacci number (sum of previous 2; 0 1 1 2 3 5 8 13 21)
14. Two sites with lots of sequences: OEIS Search - Project Euler - you may pick your favorite sequence.

You must validate correction execution of your JavaScript number sequence file using unit testing; Goofy did this for Minnie Mouse.

Nota Bene, we are not supporting CORS (Cross OriginResource Sharing), so you have to run all tests using the CIM server, or if you have XAMPP, you can test everything locally. If you can get your .htaccess file working on cim, I will give you bonus points.

Details on Minnie Mouse's Assignment....

Once again Minnie Mouse has started this assignment so it is not that hard. In additon, Minnie Mouse gives you access to an file that tests for Germain Primes and Fermat numbers. You simply send the request https://cim.saddleback.edu/~mmouse0/aboutNumber/aboutNumber.php?number=17 where number is the number you want to test, output iis in the aboutNumber.xsd. schema. Minnie has the following files:

• aboutNumber.html (Partially completed assignment) - Nota Bene CSS/XML is not working with current Chrome version.
• Optional, If you have taken PHP you may write your own PHP AboutNumber.php file, your output will need to be in XML format using aboutNumber.xsd. schema, Minnie wrote a Java program to caculate 16 bit Germain Primes and 32 bit Fermat numbers, you may use her XML code. You will have to use View source to see the actual PHP program. You also have to write a JavaScript script for any numbers you create in your PHP program, see file in next bullet. If you have take cimw 245 you may also translate your numberInfo assignment to output XML data using the aboutNumber.xsd. schema.
• You need to unit test your JavaScript about Number functions. Look below Goofy did unit testing for Minnie.
• It turns out Minnie was not smart enough to write the aboutNumber functions, however, she was smart enough to enlisted help from Goofy, Goofy was not only smart enough to write the aboutNumber functions, but also included unit testing.

Java Programmers you can use Java Class, from JavaScript or you can test JavaScript using Java. We have an AboutNumber assignment in CS4B.

But a jQuery
$( '#aboutNumber' ).post( "https://cim.saddleback.edu/~mmouse0/aboutNumber/aboutNumber.php", { number : formNumber.val } )

This will work if CORS is enabled in Minnie's folder. Currently CORS is not enabled for Mnnie's folder.

Whats hot, Best Practices and Whats Not Hot But Should be Hot - Assignment Link

Basics matter, first master JavaScript, then move on to the framework, even jQuery has a lot less hits on indeed.com than basic JavaScript.

Note GitHut list JavasScirpt first.

However some hot "fast growing" technologies are:

• Angular.js, and node.js - breaking out on stack overflow
• MEAN stack (mongo/mongoose, express, angular, and node).
• A lot of ype around React.js - 2015 Libraries to Watch
• embed.js
• Bootstrap
• Backbone.js
• Moderizr
• Data Drive d3.js

Whats not Hot but Should be...

• jQuery Tools is clearly the missing Userinterface.
• Develop Once Platform Neutral Web Apps
  • Flash ActionScript 3.0
  • javaFX
  • JavaScript ( Bootstrap, anguar, ember ), HTML5 canvas and node.js server end. (Overhead heavy client)
  • Client Bootstrap, HTML5, server Java EE
    
    
• PhoneGap - JavaScript Framework for access to native functionality: sencha, phone gap,
• jQuery Mobile git

CIM with XML

Query Assignment Titles (1 is complete, 2 is rough, plan to add 2+ more by Fall/2013)..

1. jQuery Selector
2. jQuery Events/Methods/Animation
3. jquery UI User Interface ]
4. jQuery DOM Tranversal skipped
5. AJAX/jQuery Unit testing example
6. may create simple essay on phonegap, sencha, and jquery mobile w example on cim
   
   
7. RWD example
8. Google is using angular JS at the front end.
9. Calendar: jQuery - server side
11. using gmaps.js, take a look at mapbox
12. jQuery Amazon API (books) w xml class list E-Commerce mashup
13. skip Adobe Edge jQuery RAD Animation
14. Flash do it once run everywhere environments: adobe air, flex
15. Netbeans or JavaScript debuggers - jsPerf site
16. Advance JavaScript Web Application RAD tool most likely wavemaker - dojo Framework

• Blackboard Quizzes maintain final due dates
• Make sure you have both Blackboard posts
• Make sure you have completed all Blackboard quizzes
• Refer to syllabus make sure you have completed to assignments you need for the grade you want.
• Reminder Blackboard announcements are used to inform students of course updates.

Thanks for taking the class, cimw 280 Portfolio, cimw 240 CSS/RWD and cimw 245 Intro PHP, CMS WordPress and E-Commerce are good classes to take next.