All students need to complete some of the assignments listed on this page. Web-casts will initially cover two assignments per week. Consult syllabus for special course grading option.

H0 Permalink - Permalink working best with Firefox/Cyberfox, a permalink sets a permanent link to this H0 assignment . So if you web surf to canvas or another external location and click the back button, it will automatically open the accordion for this assignment. Just click H0 Permalink and see what happens in browser's address bar.

Complete the five steps at https://cim.saddleback.edu/~class/cimRoot/de.html

Watch a prerecorded Web-casts 1/24 4PM webcasts = details on Canvas to open Canvas web-casts right^click open in new windows.

Two biggest mistakes students make in this class:

1. Do not, try to complete all assignments at once, just work on one assignment at a time top down, complete this H0 assignment first, before starting H1. Both canvas (quizzes and videos) and assignment page are organized top down. Start at the top and work down. So on canvas intro quiz is listed first, intro webcasts are also listed first.
   
2. For the orientation webcasts we are looking at the entire semester, but after orientation stick with one assignment at a time work top down. Also looking forward, starting with assignment H3, you will have to complete an online journal notebook. From H3 forward make sure you complete essay questions. Increasing your vocabulary is one of the best ways to master new subjects.

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/~class/cimRoot/de.html
3. Complete the Questionnaire. You need to enter a non academic e-mail.
4. You may want to also sign up concurrently for 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 Canvas take quiz 0;

H1 Permalink - Click permalink so H1 will open when you surf back and forth.

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

Also start using Mozilla Firefox. Firefox was the first browser to integrate Firebug as the inspect element. To use firebug.next just Right^click select inspect. Other browsers have also integrated their own version of Firebug. For debugging JavaScript, first activate the Firebug copy-cat right^click inspect. The inspect panel's has the JavaScript console window, just click the console tab. The console tab will display errors with line numbers and also allows you to type JavaScript code.

You can add the Web developer add-on has three checks in upper left corner, they represent HTML, CSS and JavaScript syntax checkers. HTML5 validators are still considered experimental. Web developer syntax check icons will print an exclamation mark or x when syntax errors are present. Future assignment have Canvas videos on JavaScript console and using inspect (right^click inspect).

Refer to these Live Examples for help:

• Basic HTML Document
• Basic Link example
• Tips on using Firefox Developers Tools

Checklist

• Make sure you have a home page on cim
• Make sure you have a working FTP access to cim, (FTP doesn't work from laptops on campus)

Project Permalink

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 - react..js, vue.js, Bootstrap 4, and adobe Phone Gap may get popular.

Written Assignment: Create a web-based notebook journal web-page and briefly state your project. This is web-based notebook journal is just a web page. You can go back later an redefine your project.

We will be maintaining a web-based notebook journal, it is just a web page. You can also define, this page as a blog (aka Web-log). 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). 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.

Checklist

• Make sure home page has a link to your journal notebook - web page.

H3 Permalink

Watch HTML Canvas video and Web-casts. On canvas click Home tab, then click H3 and On Webcast Assignment Videos.

Traditional Reading Assignments:

• Gosselin Read part of Chapter 1 Intro to JavaScript on HTML or
• JavaScript Definitive Guide Preface

Answer questions 1..4 in your notebook journal web page....

1. Explain the difference between HTML, XHTML and DHTML. (Sample notebook journal with first two question completed)
2. Explain the difference between the following doc type definitions: (HTML doctype is HTML5), and XHTML4.01 Transitional. 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.
3. Why does HTML5, not have a corresponding XHTML standard?
4. Briefly define the following tags: p, strong, table, td, tr, div, span, body, head, title, html,ul, ol, li. (help page 6 textbook)

Your journal notebook needs to pass HTML 5.0 validation, once validated add the HTML5 validation icon. Note HTML5.0 validators are still experimental. But HTML 5.0 does have an official ICON. It is recommended you add Firefox Web - Developer add on for validating files. CIMW 140 CSS discusses Web-Developer add-on, Canvas has video taken from cimw140 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 fill in the other two columns. The file must pass HTML 5.0 validation, using web developer add on, click menu topic tools menu item validate HTML which accesses the Nu HTML Checker.

Live Table Examples:

• Tables(jsFiddle) | Tables(codepen.io) 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: jsFiddle | w style tag table headers,

Checklist

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

H4 Permalink - as usual Canvas has a recent webcast

Live Examples:

• JavaScript supports the standard escape sequences \n and \t; The escape sequence \n prints out a new line, \t goes to the next tab stop. In general the back slash \ (falls backward) escape the special meaning of the next character. Note double and single quotes have special processing (used to delimit strings), this examples illustrate back slash for printing ' and " inside a delimited string.
• The <pre> tag is the preformatted tag, it maintains the current formatting, example. In standard HTML formatting, multiple white spaces become a single space.
• Note jsFiddle is the most popular code playground, but doesn't support document.write, JavaScript hints and lacks console. You can use Chrome's console with jsFiddle, Firefox's console doesn't go to line number on errors. Another interactive code playground is codepen.io, has console and supports document.write, only problem with codepen.io you have to pay for more than 10 programs, previous example using codepen.io.

Journal notebook addenda

5. Good Article on JavaScript Engines. What are Spider Monkey and Chrome's V8.
6. Wikipedia article on API. What does API stand for and represent?
7. Compare two popular JavaScript API -and Google Maps API. With these two Java APIs Standard Edition, and one written by me Complex. Do you see any advantage to the consistent way Java does its API?
8. Review these two API documentation examples: document, or w3Schools document API. Then describe two methods and two properties for object document. Note Document with the capital first is the interface (aka a Class that is implement, just the definition), the document with the lower-case letter first is the object, it actually exists. The object document is based on the interface Document.

Web Page Assignment: Create an HTML file with Hello World (hello.html) and your initials using JavaScript. Add four more document.write lines after Hello World, they should print out lines illustrated below and end your your initials using big letter (note my initials are Professor Tom DeDonno (PTD), yours is something else). The document.write method is usuually avoided due to rewriting the DOM, however for an initial assignment document.write is a good stepping stone. Later on we will cover using both JavaScript getElement and jQuery sizzle selection to select an webpage element and then change its content. If you know how to select elements do this, if not just stick with the basic document.write.

      Hello World
        Hello CIMW 160
         Hello JavaScript
        Good
      Bye Brought to you by...
      
      

Checklist:

• Make sure you home page has a link to the Hello World w your initials
• Review your web-based journal notebook and make sure it has 8 entries.
• Nota Bene, document.write changes the DOM so we should avoid using it, will learn about this later on.

click H5 Permalink - watch the three Canvas Videos (use Firefox and right click^open in new window)

Read all of chapter 1 Gosselin or Definitive Guide - preface and chapter 1

Live Examples From Text-book 6th using student data files (zip file may be blocked, if so right^click open in new tab)
7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.

Introduction to JavaScript

• I will be using Adobe Dreamweaver to demo this examples, you can use Aptana, - Eclipse, - Komodo, - NetBeans, - NotePad++, or Sublime
  For Mac: Adobe Dreamweaver, - Aptana, - Eclipse, - Komodo, - NetBeans, - XCode, or TextWranger.
  
  
• Example page 12 Figure 1-2, Open Chapter01/Chapter/plants.htm and analyze file (browser view source);
  Author used single quotes for link attributes, may want to fix this to double quotes.
  Note that we use tingleyhand.css for display with only 999px max; tinley.css for displays with at lest 1000px
  Can use DW scrubber or Firefox Resize-->View Responsive Layouts not seeing much of a difference
  Notice author is using CSS for mouse rollover :hover
  Note author is using HTML5 semantic tags
  
  
• Page 19 Errata Scripting Language uses a script which is executed dynamically. Engine/Interpreter dynamically executes file
  Programming Languages use compilers to translate to an machine like intermediate language. The intermediate language file is later dynamically executed.
  
  
• Page 24 Add script to plants.htm
  1. save as plants1.htm
  2. Add script tag to inside tag article > figure > figcaption (not > is CSS selector for child; we often use space descendant)
     Best practice add type="text/javascript"
  3. Add document.write with "<p>Plant choices</p>"
  4. Notice Plant choices only appears in DW live view, not design view
  5. Modify document.write to display: Plant choices for hardiness zones 5a-6b as one paragraph line
  6. Add both multi-line /*.. */ and in-line comments // zones 5a-5b are Chicago and surrounding area
     
     
• salesTotal.html define three Variables and Illustration document.write extracted from page 35-37
• Want to set up a display image depending on which plant user clicks - first set Variables and Tag Location of Image
  1. Open your plants1.htm
  2. article > figure add image tag <img src="#" width="640" height="400" />
  3. add Script block in head block,add src variables pointing to three images...
     var blanket = "images/blanket.jpg"; var bluestem = "images/bluestem.jpg"; var rugosa = "images/rugosa.jpg";
     We also want to identify img tag using HTML id attribute set img id="plantImg"
  4. Save file, later on we will add the actual swap image on rollover
     
     

Understanding Events - jQuery Version

• codepen.io Event example salesTotals - use inspect console look for error and repair, event="event-handler JavaScript code"
• Better version of salesTotal1.html with events, and no document.write, using getElementById( );
• Add onclick event to aside ul li each element
  1. Open plants1.htm
  2. add event attribute onclick="document.getElementById('plantImg').src = blanket;" to blanket Flowers
  3. onclick="document.getElementById('plantImg').src = rugosa;" to Hedge Rose
  4. onclick="document.getElementById('plantImg').src = bluestem" to Little Bluestem
  5. Save and Test file
  6. Move Images variable to right before ending body tag,
     
     
• Best Practices:
  • minimize JavaScript code inside body,
  • Best places: head block preferably as separate file, or right before </body>
  • avoid document.write, use element pointers
  • use jQuery version
    salesTotal2.html - don't worry about learning jQuery now, we will cover it later, best way to learn jQuery is to first learn JavaScript, basics matter - 2017 Super Bowl
    

Structuring JavaScript behavior/actions in separate file, modernizer

• Create separate JavaScript file for plants1.html
  1. Create plants.js
     Add descriptive comment like:
     ./* JavaScript 6th Edition 2 Chapter 1
     Tinley Xeriscapes 6
     Author: Professor Tom DeDonno
     Created 7/17/2017
     */
  2. - 4. Get JavaScript variable declaration code from plants1.html and paste into plants.js
     Short-cut Keys Ctrl^A select, Ctrl^C copy, Ctrl^X cut, Ctrl^V is paste, or right^click
  3. Save as plants.js
  4. Add script src tag before </body>
     <script src="plants.js"></script>
  5. Save as plants1.htm
     
     
• Libraries - provide code that everyone needs, jQuery easier to select and act on XML elements, modernizer feature detection and modernize some browser for HTML5
• Add and use modernizer library to plants1.htm
  1. Test plants1.htm inside IE prior IE8 - will use netRendering, Note Juno, AOL, and Illuminate use IE7 no HTML5.0 support save as plants2.htm
  2. In head block add a local customized version of modernizer
     <script src="modernizr.custom.05819.js"></script>
  3. Validate Web Page plants2.htm using either Dreamweaver (bottom icon) or go directly to W3C Validator
     Instead of using device-min-width, use viewport min-width and max-width
     Add water-wise h3 headers first child of article tag.
     

Web Page Assignment:

1. Complete hands on project 1-1 page 65-66 - student data files
2. Complete hands on project 1-2 page 66-67
3. Make sure you home page links to both assignments

Journal notebook addendums (all answers are in textbook )

9. What is a URL?
10. What does W3C stand for, what do they do?
11. What is a 3 Tier Client/Server system?
12. What is ECMAScript, why was it created?
13. How do you create a single-line comment in JavaScript?
14. How do you create a multi-line comment in JavaScript?
15. What is an identifier?
16. What is an event handler for?

Complete Canvas Quiz 1 Intro JavaScript ( Gosselin Chapter 1, or JavaScript Definitive Guide Preface and Chapter 1)

click H6 Permalink and watch Canvas Webcast(right click^open in new window)

Traditional Reading Assignments:

• Gosselin, First half of Chapter 2 Functions, Data types and Operators or
• JavaScript Definitive Guide: Chapter 2: Lexical Structure, Chapter 3: Variables and Data Types chapter 4: Expressions and Operators
  Second Edition of Definitive guide JavaScript Data Types Chapter 2 Online,
  

Working with Functions:

• 7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.
• Basic Functions, notice you can execute calculateSquareRoot( 16.0 ) from console. (current version jsFiddle doesn't have console)
• Page 77 Chapter 2, (Update totals on a web page depending on form selections)
  1. Open estimate.htm
  2. Update author/date header save as estimate1.htm
     
  3. scroll through and analyze document
     Copied File to new folder, you need copy all local files to new location
     
  4. Test document notice forms don't update totals
  5. Make form changes -
  6. hit refresh/reload button (shift F5) values may or may not update
  7. open ft.js save as ft1.js (add link before </body> in estimate1.htm )
  8. Add this code:

     
                // sets all form field values to defaults 
                	function resetForm() { 
                	 document.getElementById("photognum").value = 1; 
                	 document.getElementById("photoghrs").value = 2; 
                	 document.getElementById("membook").checked = false; 
                	 document.getElementById("reprodrights").checked = false; 
                	 document.getElementById("distance").value = 0; 
     			}
     			

  9. Add link to ft1.js before </body> (Will link to resetForm next)
  
  
• Test function calls, and passing arguments.
• Chapter 1 salesTotal example, Handling events,
• SalesTotal3.html Can put all JavaScript code in one location, using element.event=event-handler where event-handler is JavaScript code (e.g., function call)
  note also use element.addEventListener( "event", function, true|false);
• In jQuery we add a listener (e.g., salesTotal2.html).
• Add Event handler to call resetForm
1. Open ft1.js
2. add on load listener, document.addEventListener("load", resetForm, false);
   Nota Bene,
   • JavaScript is a single pass interpreter it is not a multi-pass compiler.
   • The second problem is that  both unload and load event may be deleted by browser.
   • so for your final version don't use..
   • document.addEventListener("load", resetForm, false);
   • //instead we will put
   • resetForm( );
   • // at the end of the javascript code.
     
     
   • //for jquery we are alway using $(document).ready( function() {...}
   • /at the end of the javaScript code.
3. Save all and test estimate1.htm
4. Call resetForm using the inspect/console window
5. Delete closing brace for resetForm function, can you find error with the (right^click inspect console tab ) console window.
   "use strict"; directive tell system to use strict JavaScript, must declare variable etc. Dreamweaver lint turn it off
• Default functions return 1 value, averageNumbers returns average of three number,
• Variable scope, always use var first time you declare a variable, variable exists only in block it is declared in, outside block its global -averageNumbers
• NaN is a type, jsBin has more detailed console - better practice version - Note for PTD, with jsBin make sure you clone and delete (it kills original)
• Variable Masking
• Add Global Variables to ft1.js
  1. Open ft1.js
  2. // global variables
     var photographerCost = 0; var totalCost = 0;
  3. Save and verify global variables exist using inspect console
• Use built in Console input, type slow, look for built-in "intrinsic" JavaScript functions: eval( JavaScript Code ), parseFloat( String ), isNaN( number ); parseInteger( String );

Working with Data Types page 91

• A variable, has a name "identifier", value, the value is of a specific data type, a data type is dependent on the language primitive types.
• JavaScript has the following primitive types: number, Boolean, string, undefined, null - basic loosely typed example
• JavaScript is dynamically typed (aka loosely typed) types is set when variable is set,
• Programming languages are strongly type, or static typed, types are set at compile time, when we first declare a variable.
• JavaScript uses 54 bits for numbers, it mixed both integer 253 to -253and floating pointing.
• Wrapper class Number has all constants Number.MAX_SAFE_INTEGER = Number.MIN_SAFE_INTEGER, use console explore Number Class - also try out 2/0.
• Primitive primary JavaScript data types String, Number, and Boolean.
  
  
• Check box return true or false, checked or not checked. Add two boolean variables to ft1.js
  1. Open ft1.js
  2. below var totalCost=0; add....
     var memoryBook = false;
     var reproductionRights = false;
  3. Inside resetForm( ) update check box defaults with global variables just defined.
     document.getElementById("membook").checked = memoryBook;
     document.getElementById("reprodrights").checked = reproductionRights;
     
• String - often array of characters we begin and end Strings with double quote ". Notice + is either plus or String catenation.

Using Operators to Build Expressions.

• Arithmetic Operators ( +, -, *, / and % ) example.
• JavaScript will translate string to number automatically, but when it sees a string default operation is String catenation.
• Auto Increment, Auto Decrement ++n same as n += 1 same as n = n + 1;
• Assignment Operator "=", calculate right hand side or equation, and set left hand value to it.
  Assignment variable often used in equation, so n = n - 2; is written as n -= 2; using compound operator
• Add function to calculate cost of hiring Photographer
  1. Open ft1.js
  2. Add function calcStaff() { .. }
  3. Inside function...
     var num = document.getElementById("photognum");
     var hrs = document.getElementById("photoghrs");
  4. totalCost -= photographerCost; //clear out previous cost
  5. photographerCost = num.value * 100 * hrs.value;
  6. totalCost += photographerCost;
  7. document.getElementById("estimate").innerHTML = "$" + totalCost;
  8. add calcStaff() to end of resetForm() when we load page we need a new calcStaff
  9. Add Listeners so when we change a value we get a new total
     function createEventListeners() {
     document.getElementById("photognum"). addEventListener("change", calcStaff, false );
     document.getElementById("photoghrs"). addEventListener("change", calcStaff, false );
     }
  10. Add createEventListeners to resetForm
  11. Save Changes ft1.js
  12. Test estimate1.htm (verify it works)

Journal notebook addendum:

17. What is the difference between a named function and anonymous function.
18. Why do we use anonymous functions?
19. How do you check JavaScript errors in a browser?
20. JavaScript tutorial Data Types. What are the primary, composite and special JavaScript data types?

Web Page Assignments:

1. Complete digital.htm on pages 94-96 or complete estimate1.htm done is this example
2. Complete Hands on Project 2-1 pages 138-140
   You can consider using Math.toFixed(), Bonus points add kelvin to table.

H7 Permalink and watch Canvas Webcast(right click^open in new window)

Traditional Reading Assignments:

• Gosselin, First half of Chapter 2 Functions, Data types and Operators or
• JavaScript Definitive Guide: Chapter 2: Lexical Structure, Chapter 3: Variables and Data Types Chapter 4: Expressions and Operators
• 7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.

Refer to possible browser incompatibilities listed at end

Comparison and Conditional Operators

• Comparison or Relational Operator compares to values returns true or false
• Conditional Operator, condition ? trueExpressionToExecute : false Expression;
• Update total Cost when user select memory book or reproduction rights
  1. Open ft1.js
  2. add...
     function toggleMembook( ) {
     (document.getElementById("membook").checked === false) ? totalCost -= 250 : totalCost += 250;
     document.getElementById("estimate").innerHTML = "$" + totalCost;
     }
  3. add...
     function toggleRights() {
     (document.getElementById("reprodrights").checked === false) ? totalCost -= 1250 : totalCost += 1250;
     document.getElementById("estimate").innerHTML = "$" + totalCost;
     }
  4. Add two more listeners to createEventListeners...
     document.getElementById("membook"). addEventListener("change", toggleMembook, false);
     document.getElementById("reprodrights"). addEventListener("change", toggleRights, false);
  5. Save all work, test estimate1.htm (450 + 1250 = 1700);
     
• falsy types are types translated to false when used as boolean. All other dynamic types become true, best practice we don't mix types, but programmers use short-cuts all the time. For languages not enforcing type-checking, aka scripting, In general 0 is false non-zero true.

Operator Precedence

• Understanding Operator Precedence: parenthesis, methods, Grade school math * / + - , =
• Modify calcStaff() to include mileage charges
  • Open ft1.js
  • in calcStaff() Modify photographerCost to include distance.value * num.value;
    var distance = document.getElementById( "distance" );
    photographerCost = num.value*100*hrs.value + distance.value*num.value;
  • Add another listener to createEventListeners
    document.getElementById("distance"). addEventListener("change", calcStaff, false);
  • Save ft1.js and test estimate1.htm; change hours from 2; enter distance 50 (should see change of $100)
    

jQuery update of estimate.htm

1. first copy over estimate1.htm to estimatejQuery.htm
2. Cleanup HTML, get rid of aside by moving id="estimate" right after form
3. Optional Best Practice: Set all HTML elements with default values, add reset button, drop reset false variables
4. Load jQuery cdn <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> before modernizer
   Load link to ftjQuery.js before </body>
   remember cim is not an https server you need to use http on cim
5. copy ft1.js to ftjQuery.js
6. Test your new estimatejQuery.htm
7. Best Practices: translate negative to positive, if( x ) is better than if( x == false ) or if( !x )
8. Translate document.getElementById( "xyz" ) to $( "#xyz" );, when possible simplify to fewer variables
9. Translate .val to chaining methods $("#xyz").val();
10. Update .innerhtml to the jQuery method $("#id").html( string );
11. Can use .is( ":checked" ) or JavaScript code on conditionals
12. Drop resetForm code
13. Move addEventListener calls to on ready callback $(document).ready( function () { ... } );
14. Change all addEventListener to $( selector ).change( event-handler );
15. Combine selectors
16. Move all once use functions into anonymous functions

Notebook Journal Addenda

21. What is a comparison operator? What kind of values does it return?
22. How is the expression 5 + 2 * 8 evaluated? Explain your answer.
23. With jQuery how do you select more than one single ID element at a time?
24. From web page assignment, give and briefly describe an example of jQuery chaining.
25. How do you avoid using document.write on a web page?

Web Page Assignments

1. Complete the estimate1.htm as done in webcasts and in book
2. Rewrite estimate1.htm to jQuery on your own or as done in webcast (steps outline at end of this assignment)

Possible Browser Incompatibilities

document.addEventListener'(load',....) does not refresh the form on page reload in Firefox. It does in Chrome and Opera. So instead I am using window.addEventListener("load", resetForm, false) in ft.js. This works with Firefox, Chrome and Opera. 

In ftjQuery.js, after converting the code to jQuery, I find that I have to use resetForm() to refresh the form on page reload in Firefox - inside document.ready(). So I have not removed the code for resetForm().

JavaScript is a single pass interpreter it is not a multi-pass compiler.
The second problem is that  both unload and load event may be deleted by browser.  so we will not be using statements like this...

 //document.addEventListener("load", resetForm, false);
//instead we will put:
resetForm( );
// at the end of the javascript code.

// for jquery we are alway using $(document).ready( function() {...}
// at the end of the javaScript code.

Checklist:

• Complete Canvas Quiz 2 Data types and Operators
• Verify you have taken both Canvas quizzes by clicking the Canvas quiz grade tab
• Make sure you home page has links to assignment page
• Review your Notebook file it should have 26 entries

H8 Permalink and watch Canvas Webcast

Traditional Reading Assignments:

• Gosselin Chapter 3 Building Arrays and Controlling Flow or
• JavaScript Definitive Guide: Chapter 5: Statements; Chapter 6: Functions; Chapter 8: Arrays
• 7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.

Arrays

• Basic Array Example
• Advance Students JavaScript array is an Object, we can use new Array(6), the array is both a queue (shift) and stack( push/pop ).
• Setup August Schedule for Tipton Turbines
  1. Open Chapter03/Chapter/calendar.htm save as calendar1.htm
  2. Analyze document structure, note ids 8-1
  3. Make sure calendar1.htm passes validation replace device-width with min-width (best practice use viewport not device)
  4. Use either DW or Browser Inspect to verify responsive design modes.
  5. Create file tt.js, add link right before </body> tag
  6. using Analyze arrays,
     1. Analyze code
     2. With jsBin console verify length of each array & test the lines below
     3. var list = document.getElementsByTagName("li"); return and why?
     4. for( i=0; i < list.length ; ++i ) list[i].innerHTML = daysOfWeek[i]
     5. add all three arrays to tt.js.
  7. Save and upload calendar1.htm (tt.js)

Flow Control Repeating Code

• Add Column Headers for Weekday names to Calendar Header
  1. Analyze this while loop
     copy AddColumnHeaders to clipboard
  2. Add addColumnHeaders function to tt.js
  3. add Listener to call addColumnHeaders on load
     window.addEventListener("load", addColumnHeaders, false);
     
     
• Add days of month 1..31 to calendar
  1. Analyze this do while Loop - Same code in standalone daysOfWeek web page. (Console easier to work with in webpage)
  2. Get addCalendarDate function add to tt.js
  3. Create function setUpPage( ) {
     addColumnHeaders();
     addCalendarDates();
     }
  4. Call setUpPage just one alter previous, window.addEventListener to call setUpPage().
     Note you don't need the object window, everything is already tied to window
     window describes the entire web page, it has the object window.document.writeln(..);
     
     
• Add for loop for adding gameInfo
  1. Analyze this for loop
  2. Add addGameInfo function to tt.js
  3. Add call to addGameInfo in setUpPage( );
• Add @ before aways games, and vs for home games
  1. Analyze this if statement
  2. Add the new addGameInfo function to tt.js
• example, switch( integer or string ) find matching case statement.
• Previous example daysOfWeek web page. had conditional operator
  
  
• Translate tt.js to ttjQuery.js
  1. Save calendar1.htm as calendar1jQuery.htm update link to ttjQuery.js
  2. Add jQuery CDN like last time <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  3. translate all getElementsByTagName to $( "tagName" ) - using standard CSS node selector, sizzle selector
  4. Replace innerHTML with jQuery .text method, we use .append to add text and .html for HTML code.
  5. Comment out event Load, tests three modules
  6. Add more sizzl;e selectors: space is descendant, #id, "#id p:nth-child(2)" select the 2nd p tag inside #id
  7. Test all three methods
  8. Best Practice use for loops over do while, and also while with incrementing.
  9. Try out each method with addColumnHeaders
     $("th").each( function( index ) { $(this).text( daysOfWeek[index] ); } );
     
  10. make setUpPage $(document).ready( function() {...} );
  11. Can combine addCalendar dates inside the gameInfo as the first item under loop
  12. Can make all functions anonymous functions
  13. Consider Conditional operator string to replace switch statement

Web Page Assignments

1. Complete calendar.htm as done in book and webcast (optional case vs if statement).
2. Translate calendar.htm to jQuery calendarjQuery.htm, ttjQuery.js

Journal Notebook Addenda

26. How do you access an individual element in an array?
27. What property do you use to determine the number of elements in an array?
28. How do you use a browser to check the value of a specific array element?
29. Briefly describe the Array object, discuss four of its methods and two of its properties.
30. Briefly discuss the looping flow Control structures (for, while and do while).
31. What are the differences between a while and do/while statement?
32. Which repetition statement allows you to initialize a counter variable as part of its syntax?
33. Briefly define the branching flow control structures if, if else and switch/case statement.

Checklist:

• Complete Canvas Quiz 3 Functions, Events and Control Structures
• Make sure your home page has assignments up to H8 completed and linked.
• Review your Journal Notebook

H9 Permalink and watch Canvas Webcast

7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.

Web Page Assignments - but you must complete H8 first before you can get credit for H9 - H11 will have two sets of assignments for both novice and programmer

• Complete hands On Project 3-1 Page 205, error in book (aka errata) on page 206 Item 7we need to use typeof method,
• So item 7 becomes:

              if (typeof submitButton.addEventListener === "function" ) {
  			submitButton.addEventListener("click", calcTotal, false);
             } else if (typeof submitButton.attachEvent === "function" ) {
  
             submitButton.attachEvent("onclick", calcTotal);
  
             }

  PS attachEvent has been deprecated, so we only need the one line
  submitButton.addEventListener("click", calcTotal, false);
• 
  
• Complete hands-on Project 3-4 Page 209 - Canvas has a 10/26/22 webcast

Bonus points translate Project3-1 and 3-4 to jQuery, Add to items to the menu items in Project 3-1.

H10 Permalink and watch Canvas Videos

Traditional Reading Assignments:

• Gosselin Chapter 4 JavaScript Debugger and take Canvas Chapter 4 quiz.

Watch the Canvas Video on JavaScript Debuggers

You should be able to do assignment and journal after Canvas video, if you need more help these Live Examples will help....

• JavaScript W3Schools Date, once again they may move the Date live view example - may want to use the JavaScript console to check error messages.
• Review HTML element example, - getElementById documentation (will see document.getElementById in h9).
• 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.

Web Page Assignment

Create a program that creates a 11 element array consisting of 11 random integer numbers between 0 and 1000 inclusive. Print out the 11 random numbers, then sort the Array using method sort, then print the sorted values.

Bonus print out the average and median 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.

Journal Notebook Addenda

34. How is window.alert useful in debugging?
35. What is console.log Object and Method?
36. Using Chrome, Firefox web Developer and Dreamweaver briefly outline ways to test RWD designs?

Checklist

• Complete Canvas Quiz 4 JavaScript Debuggers
• Review your Journal Notebook

H11 Permalink

WIP

H12 Permalink

WIP

H13 Permalink and watch Canvas Webcast

Traditional Reading Assignments:

• Gosselin 6th Edition - Chapter 6 Enhancing and Validating Forms
• or JavaScript Definitive Guide Chapter 17 Form and Form Elements

Watch webcast on Canvas.

Introduction to Basic Forms

jsBins are working on edge, on FireFox some of the were going infinite loops

---

jsBin For the above code, notes:

1. right^click open in new window
2. clone, disable auto run js,
3. you have live preview, can set editor to VIM
4. 7th edition datafiles are on canvas, you may complete any 7th edition example in chatper 1 in place of this 6th edition.

Using JavaScript with Forms - Explore Basic Form Document

1. Open Chapter06/Chapter/snoot.htm save as snoot1.htm (I also copied over the local files snoot.css and modernizr.custom.65897.js)
2. Basic jsBin Example w input type="checkbox" and textarea of snoot.htm
3. In Dreamweaver goto Live Preview to test forms
4. Standard for checkbox one or more can be right, each one selected independently.
5. For tags input, types can be: checkbox, hidden, password, reset, radio, submit, slider, or text
   radio only one in group is active/right, password hides text, hidden not displayed to user.
6. Radio button, required, method="post" jsBin example.
   
7. Delivery Date Analysis select Data HTML jsFiddle or jsBin, my jsBin for this are going into infinite loops.

Improving Form Usability

• Add assistive function, assist the user in entering accurate data.
  For example, on Select country, if user selects USA, add drop down for states.
• I deleted all default selected options by setting selectedIndex=-1
  1. Create snoot1.js
  2. Add comment annotations for @author, @date
  3. "use strict"; //strict interpretation of syntax
  4. jsFiddle Code| Analyze jsBin code, note Selected attribute, Use JavaScript to set all selectedIndex to -1, none.
  5. Add above functions to snoot1.js
  6. Optional, Add code for listener, IE didn't support addEventListener until IE8
     

     
                  /* run setup function when page finishes loading */ 
                  if (window.addEventListener) {
                  	
                     window.addEventListener("load",removeSelectDefaults, false);
                   } 
                  else if (window.attachEvent) {
                  	 window.attachEvent("onload",removeSelectDefaults);
                  	 }
                  

  7. Add years 2020-2022 to code, can add SELECTED attribute to current year.
  8. Add <script src="snoot1.js" ></script>
     to snoot1.htm at end, and test (F5 reload)
     
     
• 
  
• III) IE7 Support - optional
• Analyze HTML5.0 added whole slew of input types email, month, tel, year, and week (Dreamweaver Insert forms) and also new attributes: required, placeholder, pattern.
• Chrome and Webkit rendering engine are good at new input types. IE11, Firefox 54 lame support.
• IE8 doesn't support placeholder - test page on IE7, can use AOL's, Juno's, or Illuminate's Browser.
• Analyze HTML5.0 again, then add code to snoot1.js remember generatePlaceholder() is part of setupPage.
  
  
• IV) Want checkbox checked when user adds custom text.
• Analyze code htmlForms2.htm - get code right^click view page source
• Add code to snoot1.js, adding function autoCheckCustom and add lines to createEventListeners
  Test snoot1.htm Selects should be empty, Date should set days by month, TextArea set checkbox on blur.
  
  
• Page 390 V) Billing Address same as Delivery Address Option (Usually other way around)
• jsFiddle Code | First Analyze jsbin.com get code
• then add function and code to createEventListeners - test snoot1.htm

Journal Notebook Addenda

37. Briefly describe the two form attributes action and method.
38. Briefly describe seven type attribute values for tag input?
39. Briefly describe the attributes required, placeholder, value, name, and id.
40. What are the other two tags besides input for getting user input?
41. Will we always have version of IE7 floating around (hint consult webcast)?

Web Page Assignment

• Complete the example in the webcast checklist points roman numerals I..V.
  Make sure you test each step as you go along, you may need to use console.log or an IDE that displays error message. Problem with JavaScript a single error can kill an entire page.
• As alternative may complete the book example up to page 393 (they are the same).
  

Checklist:

• Complete Canvas Quiz 6 Forms
• We are skipping chapter 5 quiz.
• Make sure you form assignment is working

H14 Permalink and watch Canvas Webcast

HTML5 pattern="RegEx"

• The current Regular Expression (REGEX) was set by the Unix GREP command in the 1970s. Since it was a well though out standard, all modern day programming languages support it. Optional tutorial, for this class you need not learn RegEx. Canvas has an sort webcast/video on RegEX.
  
  
• HTML5.0 is actually an API not just another XML markup language. As an API it supports the pattern attribute for all form input elements.
• Example enter first name and last name, first letter is upper case for first name all other letters are lower-case. In RegEX [a-z] is a range, lower case letters a to z.
  
  
• Modified example, first name and last name, last name also supports these dual upper case DeD DiD McD and accent O'reilly. Note Bene, you should capitalize second word of Di, De (of) and Mc (son of), but not O'name. Oriental names also have hyphen and two upper case, but our RegEX doesn't support this.
  
  
• Zip codes example, type=number allows a min and max attribute, but pattern is disabled. Cannot set fixed sizes on input fields put on values.
  
  
• JavaScript regexp tester, JavaScript uses '/regexp/option'.method -/ \w+@[a-z]{1,63}\.[a-z]{3}/ \w variable identifier word numbers letters _
  The {2} Implies 2 times; {1,63} implies 1 to 63 letters note domain names can have up to 63 letters.
  
  

• Advance Age Form Example
  
  
• jQuery Form example - jsBin version.
  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.

Importance of Using Existing Standards

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. 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 RegEX is a kludge. Nota bene, both jQuery validator and Spry made the same mistake by not supporting RegEX If a standard exists, it is always prudent to incorporate it.

During it the right way HTML5, added the Pattern attribute. Pattern the value is just a RegEX, this also makes a lot JavaScript validation obsolete. .With Creative Cloud Dreamweaver, implement the extended HTML 5.0 type names, you can view these using insert --> Form, which list then new input tags with the extended form type attribute names. 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. In some cases, browser will do automatic pattern checking dependent upon the type value. In some cases, the browser will added extra input fields, try the form block out below in various browser, in Chrome Month field gives you a calendar.

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.

Optional HTML Form review - Make sure you understand form basics...

Web-based reading assignments: 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 Canvas 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. You can watch this 25-minute HTML form Video or this shortr fFive Minute YouTube Video.

Journal Notebook Addenda

42. Can you figure out how this works
43. Do many programming language support regular expressions?
44. What do these regular expression symbols mean: ^, $, \d, \s, \w, [0-9], [a-zA-Z], |, ?, . (dot), *, {3,5}. You may want to use this RegEX or short RegEX cheat sheet.
45. Also Comment on this very large collection of Regular Expressions.
46. Briefly explain these three JavaScript regular expressions...
    
    • /^\d{3}[ -]?\d{2}[ -]?\d{4}/- RegEX Tester
    • /^(?!000|666|999)\d{3}[ -]?(?!00)\d{2}[ -]?(?!0000)\d{4}/ Hint and preregister
    • /[a-z]{2,}\d*@(saddleback|ivc)\.edu/ and regExpTester
    Note on JavaScript regular expressions you can use the RegEX object or delimit the string with forward slashes. PS regular expression are declarative programming,standard JavaScript is a procedural and object oriented programming language.
47. Briefly define these HTML events: onclick, onsubmit, onfocus, onmouseover
48. Mouse Over, what is here happening?
49. 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 right^click inspect.
    
    Enter Your Name On successful Submit (i.e., Action Executed) You get an Automatic A

    Enter Your Name

50. What form types are listed below, does chrome provide automatic pattern checking:
    
    Number: Month: Email:

Web Page Assignment

Create a web page containg the following form element each one has special RegEX requirements (nota bene examples bove cover the form elements below)::

1. first name, (example Upper case Letter), For first name we want one upper cases letter then 1 or more lower case letters. When first name, loses the focus, add a message that says Hello XXX, make sure complete the entire form. Where XXX is name just entered.
2. last name, (fancy pattern for last name - Even more fancy jsbin), for last name we will support two capital letters as in Mc, Di and De, and also one accent after first letter O'neil.
3. email (pattern="\w+@\w{1,63}\.[a-z]{3}"), email twice, (check two words matching;), For email, you need @ and two word domain. As soon as the second email entry is finished you need to make sure both emails match.
4. zip code (zip code & zip code plus 4 example),
5. age, For age no one over 140 or under 12 is allowed (this is just type=number min=12, max=140).
6. phone number Phone number must be 3 digit area code, then 7 digit phone number. RegEX: \d{3}[ -]?\d{3}[ -]?\d{4}, modify the previous regex to make 1 before area code as optional.
7. User-selection element full-time, part-time or full-time student, you can use either a radio button group or drop down selection box.

Checklist

• Review you journal notebook you have 51 entries.
• Make sure you understand HTML 5.0 placeholder, required and pattern attribute.
• Make sure you have completed the chapter 6 quiz.

H15 Permalink and watch Canvas Webcast

Customized Browser Based Validation

• HTML5 added input types usually have automatic data type validation -
• On previous example try entering text for zip/phone number and also try submitting blank document noticed required attribute.
  For HTML5 only required attribute name is needed, but for XML is always name value pair required="required"
• Test your current snoot1.htm notice it loads results.htm - most of the time we send data to server for processing aka formData.php.
  
  
• Best practice minimize user input friction, not want user to enter same data twice on error, or make it difficult to enter data.
• You don't need to have pages 404 and Up as part of your assignment - just follow my next two examples.
• Example - analyze form...
  • attributes novalidate stops default browser validation;
  • onsubmit="javascript code;" executes confirm window before calling the action return true continues processing
  • event.preventDefault() prevents the default form action to occur
    
    
• Way author has written this example, especially his validation is not good, my example is better.
• In general with validation use HTML5 API as much as possible, i.e., Pattern, Required, minimize form Validation w onsubmit and onblur.
• formValidity.htm
  • Validate that both passwords match page 425
  • Validate credit card number and credit name selected.
  • Later on Validate credit card number relative to credit card selected.
  • Modify snoot1.htm form block with onsubmit
  • Modify snoot1.js with new JavaScript code.

jQuery - Best Practice Version

1. Save snoot1.htm as snoot1jQuery.htm, save snoot1.js as snoot1jQuery.js.
2. Add jQuery CDN <script src="https://code.jquery.com/jquery-3.6.0-min.js"></script> and also update src link at </body>
   
   
3. Use HTML5.0 API take advantage of Pattern and Required attribute.
   Toss up consider using HTML5.0 placeholder attribute and specific types month, number, zip, email, etc.
   Pair specific types with pattern e.g., type="zip" pattern="\d{5}[- ]?\d{4}"
   In general, w HTML5.0 specific types have browser based patterns, validation will flag whenever you mix a specific type like "zip" with a pattern.
   Chrome and Webkit rendering engine are good at new input types. IE11, Firefox 54 lame support. - Browser Usage -
   Support Table - just because it is supported doesn't mean it displays well, not type w pattern may not gain anything on Firefox.
   QA and test engineers matter. Will mix new types w pattern and test in Webkit (DW internal) and Firefox.
   
   
4. Cleanup HTML code, in HTML get rid of both long option month, day, year and state. Will be writing JavaScript code to do this.
5. Cleanup JavaScript code, author's version of updateDays, setupDates stinks. jsbin Example, or jsFiddle Example. Will use jQuery append to populate all Month, Day and Year.
   Remember in good code design if you do something twice it should be a function. Instead of repeating months each time as long options chains we will have a single array of months and use JavaScript to populate all options in both month drop down list boxes. For Day and Year we can use a simple array iteration.
6. Make sure you simplify HTML code after JavaScript code cleanup.
   
   
7. Make states an array, use .each chain method for copying values, and setting all select statements, jsBin Example. | jsFiddle Example
8. Translate document.getX to jQuery Sizzle selectors
9. Move all createEventListeners and setupPage to Standard $(document).ready( handler...
10. Remove IE7 support, note we are using jQuery 1.12.4 last version to support IE6 and 7. Later jQuery versions dropped IE8 and before support.
11. JavaScript .style property become .css chained method, can set two properties argument 1 is CSS class name, 2 is property value, or use array map.
    
    
12. Can leave zeroPlaceHolder, generatePlaceHolder and checkPlaceHolder() along.
13. Bonus set date, to two after current date, except for Friday which is three days in the future. You may want to set the dates as Amazon does, give the user three options for delivery. Set default location using HTML 5.0 API geolocation

• Add customized browser based validation to your H13 assignment
  
• Implement a jQuery version of H15.

Checklist:

Make sure you have completed Canvas Quiz 6 Forms
Also check your current Canvas quiz grades

H16 Permalink

WIP

J1 Permalink and watch Canvas Webcast

Traditional reading assignment:

• Read Chapter 12 Introduction to jQuery
  

Implementing jQuery

• Setup jQuery CDN link
  1. open Chapter12/Chapter/rocks.htm save as rocks1.htm
  2. Create a valid HTML5.0 starting point. Find replace ' with " also change device to viewport only
  3. Book is using a local jquery-1.11.1.js, we will be using a jquery-3.6.4.min.js CDN.
     CDN can provide better download performance and once you download a specific jQuery it will be part of you JIT cache.
     Add jQuery minified CDN link to rocks1.htm before </body>
     Minified whitespace have been eliminated and shorter variable names.
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>jQuery UI 1.13 supports 3.6 so will used latest supported jQuery.
     
     
• Make sub-menus visible using ul and class selectors
  1. Analyze HTML notice nav tag with ul/li tags. Notice the descendent's of ul.mainmenu, and the ul children.
  2. Create script1.js add author and date comments
  3. Make sub menus visible for cruises, rates & directions visible always for now, note class .show has CSS display:block
     $("ul.mainmenu li").children("ul").addClass("show");
  
  
• Add event listeners so sub menus only show on hover,
  1. jsBin example using .hover( mouseenter, mouseleave );
  2. Add code to script1.js make sub menus only visible on mouse over.
  
  
• Need to be specific per menu item, pass event and use event.currentTarget
  1. Page 826.add event argument to display/hide and/or to your anonymous function. add just hide,show()
  2. Page 827 Animation, experiment with slideDown() instead of show()

Journal Notebook Addenda

51. What is the difference between the object jQuery and $?
52. List and describe three jQuery methods used to traverse the DOM. - jQuery API.
53. List and describe three jQuery DOM manipulation methods - ECMA6/7 have same methods as jQuery.
54. List and describe two jQuery animation methods. - jQuery API Effects
55. Class was using jQuery 1.12.4 because it was supported by jQuery UI 1.12, But jQuery UI 1.13 is supported jQuery 3.6.1 Why was jQuery 2.x skipped over?
56. Compare and contrast methods: addClass(), show(), and css( "display","block")?

Web Page Assignments

• Complete the books rocks1.htm example.
• Complete textbooks page 834-836 Hands-on-project 12-2

Checklist:

• refer to syllabi's grading criteria and count how many assignments you currently have and need.
• check Canvas quiz grades make sure you have taken Chapter 12 quiz
• make sure you home page links to all your assignments and your Journal notebook

J2 Permalink and watch Canvas Webcast

Prerequisites basic knowledge of JavaScript assignments h0..h8.

Optional Online reading assignment:

• PDF sample Pages from: Quickstart jQuery and JQuery UI, VisualGuide by Jay Blanchard, Valore has book for less than $10, not that impressed w book.
  
  
• Will review Class Notes during webcasts its a good review, will expand on minify, libz and compiler closure.
  
  
• or Sam Teach Yourself JavaScript, hour 19-21;
• Amazon does have some 4 start jQuery UI books.

jQuery chaining and CSS method

With the use of chaining you can apply a method to the selected HTML DOM element. The method css, will set the CSS for the selected element.

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 ); element.css( { "name":"value", "name":"value" } ), note css Method inappropriately refers to it as a map.

Summary: jQuery adds a single jQuery object identified by the $, it has one DOM selector argument. The selector argument is either JavaScript object (e.g., document event, this ) or a CSS3 selector string. For example...

• $( "css selector").method. css Selector: tag, #id .class, or CSS3 functions
• jsFiddle Basic Color Example
• More advance jsBin with Toggle function.
• Can Click the CSS Strings:
  1. $( "#jQuerySelectors strong" ).css( { "color":"lime", "background-color":"black" } ); //invert assignment
     //Space is descendant, looking for a inside of #jQuerySelectors
  2. $( "#jQuerySelectors a" ).css( { "color":"orange", "background-color":"black" } );
     
     
  3. //CSS3 DOM selectors pseudo classes nth-child(),
     //note space descendant children, grand children, ...
     // > selects only children can use space or > here
     $( "#jQuerySelectors ol>li:nth-child(odd)" ).css( "background-color", "lime" ); //odd span tags in this assignment
     
     
  4. //CSS3 DOM selectors pseudo classes
     $( "#jQuerySelectors ol>li:nth-child(even)" ).css( "background-color", "skyblue" ); //odd span tags in this assignment
  5. $("#jQuerySelectors .webBasedReading" ).css( {"font-size":"larger", "border":"2px solid blue" } );
     Click here or F5 to reload page, F5 should reset the above changes
     
• jsBin of above examples.

Optional Web-based reading assignment:

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.

Journal Notebook Addenda

57. What is the difference between the jQuery DOM manipulation methods prepend and append.
58. Using jQuery sizzle how would you select the first and last paragraph element on a page.
59. What is minify, and closure compiling?
60. Should you download and use a local copy of jQuery or use a CDN (list advantage of CDN)?

Web Page Assignment

• Complete this selectorTableEasy.html web page, corresponding jsFiddle. and jsBin

J3 Permalink and watch Canvas Webcast

Learning Objectives: Introduce CDNs, jQuery Object and CSS method, go in depth on jQuery Selectors, review of JavaScript functions and jsFiddle.

Reading Assignments:

• Chapter 1 Notes Visual Start jQuery - we are only covering the introduction and chapter 1.
  jQuery and JQuery UI, Visual Quickstart Guide by Jay Blanchard, Publisher: Peachpit Press; 1 edition (December 13, 2012), ISBN-10: 0321885147 PDFsample Pages. - Introduction Class Notes. - Valore has book for less than $10, can get international version.

Notebook Addenda:

61. Comment on Stack-flow discussion minify versus gzip?
    Note some developers also use code obfuscators: http://javascriptobfuscator.com/

Web Page Assignment:

• Complete this jQuery Selector assignment Table, it uses the JavaScript file: selectorTable.js, The table also connects to a jQuery CDN.
• You can use jsFiddle below for help, (make sure you have your JavaScript Console window is open, to do this click the third leftmost icon of the Web Developer add on or use right^click inspect element console). Each jsFiddle has completed some of the assignment table. All four jsFiddles are already built into the assignment table.
  Nota Bene, in jsFiddle we need to set all function names to variables, so we use myInvert = function( str ), not myIvert( str ).
• jsFiddle1 - of entire assignment,
• jsFiddle2, specifically for testing span selection
• Pseudo JavaScript jsFiddle3 functions.
• jsFiddle4, simplified table for testing table selectors
  

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" );

Checklist:

• Make sure all JavaScript core assignments are done (i.e, h0..h8).
• Make sure all Canvas quizzes are done, click the my grades button on Canvas.

J4 Permalink and watch Canvas Webcast

Leaning 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 eventTable.html , it it uses the files: eventTable.js, eventTableDaylight.css, eventTableMidnight.css, and eventTableTwilight.css.
Assignment has several jsFiddle built into eventTable.html , some of the jsFiddles complete additional parts of assignment.

Journal Notebook Addenda:

62. List and briefly describe five jQuery/JavaScript events
63. List and briefly describe four jQuery animation methods (this was done previously)

J5 Permalink and watch Canvas Webcast

Web-based Reading Assignment:

If you have prior experience with Dreamweaver (DW). Creative cloud 1017 and up Dreamweaver has access to both bootstrap and jQuery. To access jQuery Select Insert --> jQuery x, the current creative cloud has three new categories: Bootstrap Components, jQuery Mobile and jQuery UI. With DW simply drag and dropping various jQuery UI components. DW creates a local version of jQuery and jQuery UI. CC 2017 and up is currently integrating jQuery UI legacy 1.11.1.

General introduction read the first page of jQuery UI API. We don't need jsBin, the jQuery UI API has good examples and an excellent interactive demo section. In general jQuery UI is very extensive, but it can divide it up into the following categories:

• Effects -specific effects such as blind effect - good effects demo page.
  CSS3 has animation but its a pain to implement.
  
  
• 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 - datapicker is nice but type='date' works well in chrome, slider HTML5.0 - comparison file.
  Demos menu, - tooltip (note you vary arguments w side example) - tabs - dialog (customizable confirm)
  My favorite accordion this assignment page, Menu Widget office hours, tabs, tooltips is nice but hitting incompatibilities
  
  
• ThemeRoller (this assignment page selects a new UI theme based on the student design) - use new design to change theme.
  
  
• Icons - DW will let you complete class names once you set the CSS link, I prefer HTML entities. Once in DW using code view just pause after the & (note & is an HTML entity &amp;).

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), the links to the foller are in the CDN file jQueryUI.htm,. Corresponding jsFiddle (not working probably older version of jQueryUI) - jsBin version (jsBin loaded jQuery 3.1 w jQuery UI 1.12).

Notebook Addenda:

64. List and briefly describe three new jQuery UI effects that standard jQuery doesn't have.
    Basic jQuery effects are slide, fade and animate either slideUp, slideDown and slideToggle.
    
65. Which language is the theme roller written in and why?
66. Why did I not use a code playground for the examples under web based reading assignments.
67. Whats wrong with jQuery Tools - accordion example, github may help. - can compare with jQuery UI github.

J6 Permalink and watch Canvas Webcast

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 Canvas 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 definition. 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 easy even Minnie Mouse has done it twice, first on her home page at the bottom and
then on this stand alone page.

For stand alone page, 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. Canvas snapShot web-cast should demonstrate how to batch images using Fireworks.
2. Create a config XML file make sure if passes the snapshot (DTD), Minnies 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, Minnie is using lightbox, just set the config to your configuration file.
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 cimw160 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..

Ajax1 Permalink and watch Canvas Webcast

Nota Bene,
Assignment description has renamed xmlDOC to countriesData, but 12/2021 video is using xmlDOC. The console window is auto completing xmlDOC to xmlDocument, so you can no longer use the variable name xmlDOC.

Reading Assignment

• Gosselin 6th Edition  Chapter 11 AJAX
• Quiz for Chapter 11 is Extra Credit

Ajax Basics

• AJAX: Asynchronous JavaScript and XML, but data sent can be JavaScript code, XML or JSON.
• In general we use the browsers built-in XMLHttpRequest (XHR) object to request additional data from server, and the use JavaScript "eval" and HTML DOM to display data.
• Goal: Update part of web page without rewriting the entire page. It is very inefficient to go back to server if we only need a little more information.

Ajax in Action Samples:

The student search page, was written before jQuery. When you type in the dialog search box, it does an AJAX call to the file search.php which searches a student database on cim, returning the first 10 matches. In your browser, use right^click inspect network, and noticed that JavaScript is sending a request to the file search.php?q=a;, In network window, click that file and look for response to the right. You will see it creates an array with a call showQueryDiv. The PHP program search.php searches the database and creates a JavaScript script with showQueryDiv function call. The original program does an eval on the response from search.php, which displays the first 10 matches beneath the input dialog panel. Search.php returns JavaScript, rather than passing JSON or XML back and forth. Both JSON and jQuery became popular several years after program was written.

Google suggest search has a similar mechanism it searches a database of all search requst and also list your your current request. Google search also uses a program called search which returns JSON. Notice the response in inspect --> Network and the popup dialog panel beneath the input box. If your are reading this during trading hours - goto a finance sites and notice how AJAX is used to maintain real time quotes.

In the samples above the servers, are providing a Web Services. Web services provide data upon an XMLHttpRequest. On cim search.php is a web services which searchs the student database.

Ajax Examples

• countriesEasy.html note you can access jStudent's countriesFinal.xml Files from cim.saddleback.edu, but locally its best to have it in the same folder.
• Use right^click Inspect Network, and notice the XML loaded as a response from AJAX call to countryFinal.xml

Translate to jQuery.

1. rename countriesEasy.html to countriesEasyjQuery.html.
2. Modify console.log with a counter, first console.log output is 1 with comment, then 2 with comment, etc. this makes it much easier to detect where a script is failing.
3. Add standard cdn <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
   Remember on cim all requests are https. Use Inspect to make sure jQuery is being loaded.
4. Save a local copy or countriesFinal.xml, right^click save. Both cim.saddleback.edu and www.saddleback.edu for security purposes are on a DMZ and prohibit CORS (Cross Origin Request Sharing). A server or a server's folder/file needs to allow CORS, in order for a program on another server to access its data when using an Ajax XMLHttpRequest.
   
   
5. Update all getX to $('sizzle Selector'); Attributes access becomes chained event .attr( "name" ), - Use this jsBin example, to update newCountry function, use name as the search/find not code. The jsBin is using a drop down list box with code, we have one with country names.
6. Test to make sure div blocks with id name and quickFacts is updated after a country is selected in the drop down list box.
   
   
   
7. The AJAX code at the top docuement we will be replaced with a jQuery $.ajax call. jQuery has two short-cut AJAX calls $.post and $.get( url, function(data, status) { ...} ); where data is URL response. But we will be using $.ajax() call instead.
   
   
8. You can load XML documents form a different site but this can cause CORS request problems which we will be skipping, make sure you have countriesFinal.xml. in the same folder as your countriesEasyjQuery.html. Nota Bene, all jsBin has the code built in as an xmlDOC string. We set the AJAX response to the memory string xmlDOC.
   
   
9. Make sure you drop down list box is being populated. jQuery AJAX version populates list box and has chaining on the AJAX object., not it sets the vairable xmlDOC;
   Analyze this code, then add it to the end of your document, delete all the original JavaScript AJAX code in the header, you should just have this AJAX code and newCountry in your countriesEasyjQuery.html
   
   
10. Ajax calls can become long associative array $.ajax( { url: "urlString", success : function( result, status, xhr ){ ... } , error: function( result, status, xhr ) { ... } } );
    • Alternative to long associative array is to use chaining off this as was done with jQuery AJAX version.
    • result is the resulting data from the ajax call; status is status of the call 200 okay; xhr is XMLHTTPRequest object, it contains status and the ajax response.
    • About number in AJAX3 has detailed AJAX examples.
      
      
11. Best Practices
    • When using Array maps, and anonymous functions, write just a little code at a time one missing parenthesis or brace can ruin your whole day.
    • Remember in a scripting language like JavaScirpt you can test all code in console window one line at a time.
    • Remember Ajax is asynchronous so its best to set all data in the success function. Remember XML data may or may not be available when you execute another method.
    • You also have an option error:function( result, status, xhr) which is good to implement.
      
      
12. If you run into troubles just use countriesEasyOptions.html (aka. jQuery AJAX version.), add this jsBin for newCountry function, modify program to use name, and add the two div blocks id name, and id quickFacts.

Web Page Assignments

• Complete a jQuery version of countriesEasy.html.

Notebook Addenda

68. How do you use a browser to view and identify an Ajax call and its response?
69. List and describe three basic options url, success and error of $.ajax?
70. What is an XMLHttpRequest?
71. Why do we use Ajax? (especially w smartphones)

Checklist:

• If you did this assignment make sure you take the Ajax Extra Credit quiz.
• Assignments ajax2 and ajax3 should be a lot easier after completing this assignment

Examples

1. If you ran into troubles in AJAX1, just use countriesEasyOptions.html (aka. jQuery AJAX version.), add this jsBin for newCountry function, modify the code to use attribute name instead of attribute code, and add the two div blocks id name, and id quickFacts.
   
   
2. When the user selects United States add a states drop down menu. You will need add an AJAX call to states.xml.
   • This jsBin will set state select box when US code is selected.
   • You just need to add the 2nd Ajax calls to states.xml to set xmlStates.
   • To just load an XML file one just needs:
     $.ajax( { url:"states.xml", success:function( result ) { dataStates = result; /*can add parseXML */ } } );
     Best practice set the data as soon as it is read, don't rely on a function later on that assumes dataStates is set. Remember this is an asynchronous event handler.
     
   • However, in this case you can just set the states select box options, you don't need to save the xml states file.
     $.ajax( { url:"states.xml", success:function( result ) { $( result ).find( "state").each( ... refer to previous jsBin ); } );
     
     
3. This file currencies.html illustrates using basic console commands on currencies.xml, All the commands you need to add currency.xml to your AJAX1 assigment are in the file currencies.html.
   
   
4. AboutNumber has more advance AJAX examples.

Web Page Assignment

• Add both currency.xml and states.xml to your jQuery countries.html file created in AJAX1.
• Add a div blook with currencyFacts, and a drop down list box with states when United States is selected.

Notebook Addenda

72. In the previous console test file currencies.html, what does the jxhr return value of $.ajax represent.
73. If jQuery is not available after making a CDN call, what two things should you do?

Bonus

• Add flag images, using flagcdn.com, it is not that hard, they use the two country codoe letters. For example, Brazils 2 letter code is br, so the flag is just https://flagcdn.com/br.svg.
• Add Time Zones, by using an eval with the country name.
• Add a call to either the National Weather Service API or weather channel API mashup or Google's secret Weather API. These API may not work on countries only cities/state, but note you do have cities and Longitude/Latitude. You can use darksky api.
• Complete books Ajax example they are using darksky api.

Ajax3 Permalink and watch Canvas Webcast

Not updated, but you can use the jQuery file you created in Ajax1, you will need to add additional div blocks, and fill these div blocks with content from other sites, content is dependent on country selection. By completing Ajax1 first this

Traditional Reading Assignment:

• Gosselin 6th Edition Chapter 6 DOM and Chapter 11 Ajax

Optional Web-based reading assignment:

BOM, DOM, GetElement Examples, Watch Canvas assignment Web-cast. Difference between DOM and BOM. Style Example.

Java Script has no forward referencing, therefore you cannot access a Web Page element in Java Script until you have processed (or read) it. For navigator, a DOM structure already read JavaScript supplies the following document methods: getElementById (standard), getElementsByClassName(), and getElementsByTagName(). Note both ClassName and TagName return an array of objects, an single element would be an array of size one. Note with jQuery, the sizzle selector engines does all DOM selection using the three basic JavaScript document method calls.

Notice Google Geocode has to be opened in a new page (note you get blank page in Geocode current iframe).

Use Inspect element, look at the DOM tab, analyze the document object, notice it follows standard DOM/XML model.

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.

Log File Addendum:

1. What is a rendering engine (aka Web Browser Engine)?
2. Can one change the rendering (CSS styles) after a Web Page has been rendered, if yes how (hint)/and assignment on j2 events?
3. What is this World Bank and Google Geocode Returning?
4. 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)?

• 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 Canvas Quiz 5 BOM/DOM.
• All quizzes on Canvas (except jQuery) should be completed, use Canvas quiz grade to verify this.
• Make sure assignments h0..h11 are on your home page.

Ajax4 Permalink and watch Canvas Webcast

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
• jQuery AJAX example Table for AboutNumbers.
  
  
• 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 object 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 XML about number, her file will tell you if your number isGermainPrime, isFermatPrime (all Fermat numbers are prime) and isFibonacci. 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. Prime Pairs (5 & 7, 11 & 13 )
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. Goofy also wrote a file that uses CSS and AJAX to display AboutNumber XML output.

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 addition, 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 is in the aboutNumber.xsd. schema. Minnie has the following files:

• aboutNumber.html (Partially completed assignment).
• Optional, If you have taken PHP you may write your own PHP AboutNumber.php file, your output will need to be in XML format meeting the aboutNumber.xsd schema, Minnie wrote a Java program to calculate 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 need to unit test your JavaScript about Number functions. Goofy did this for Minnie Mouse see next bullet.
• 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 he is also smart enough to include 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.

X1 Permalink and watch Canvas Webcast

Stack Overflow Trends looks like User Interface Frameworks (react.js (FaceBook)) and Server scripting using JavaScript (i.e., node.js ) are popular. Vu.js is not showing a lot of interest on stack overflow trends, but is the 2016 JavaScript award winner and is leading on github star. Nota Bene, not all projects use github. Also, over time since all questions have been answered, popular language have fewer new post. So you cannot use stack overflow trends to determine which languages are still popular. In the framework graph jQuery has fewer new posts, which makes sense its been around since 2007. In addition jQuery UI is popular, but we drag and drop and API is very good, so it a low number of posts.

Can rollover tag name to get specific tag graph in the Overflow Trend graph.

To determine whats hot we will look at Web Page Hits, CDN popularity, W3Schools, Stack Overflow, GitHub usage, tiobe.com, job site interest...

• Web Page Hits: Wappalyzer (jQuery, modernizer, jQuery UI, note react)
• CDN
  Frameworks lists on google.apis: AngularJS, Angular Material, Dojo, Ext Core, jQuery, jQuery Mobile, jQuery UI, MooTools, Prototype, script.aculo.us, SPF, SWFObject, three.js (3D Graphics), Web Font Loader.

  W3Schools: Bootstrap, jQuery, jQueryMobile, AppML (Application Modeling Language; Bring Data to HTML), Angular.js,

• Note GitHut list JavasScript first( JavaScript, Java, Python, CSS, PHP) (Doesn't break JavaScript down into frameworks)
  
  
• stack overflow - (2016 most popular technologies JavaScript 55.4%, SQL 491.% Java 36.3%, C# 30.9%, PHP 25.9% Python 24.9%, C++, c, Node.js 17.2%, AngularJS 17.9%) (2015 JavaScript 54.4%, SQL 48%, Java 37.4%, .C#, PHP, Python, .C++, C, Node.js 13.3%, AngularJS 13.3%, Ruby, Objective-C)
  
  
• Basics matter, first master JavaScript, then move on to the framework, even jQuery has a lot less hits on indeed.com than basic JavaScript, Indeed.com JavaScript is coming up third in terms of programming languages.
  
  
• Tiobe JavaScript is 4th, (Java, C, C++, Python, C#, JavaScript, PHP) - note Go is the next big language, Objective-C is slipping because of swift

A lot of hype around React.js - 2015 Libraries to Watch (React.js, Rendr, Meteor)

Top Languages are Clearly: SQL (note Tiobe/githut don't list SQL it is a declarative language), Java, JavaScript, C's; Others have drop offs.

However some hot "fast growing" technologies are:

• JavaScript, framworks will come and go, but they are all based on JavaScript.
• jQuery, still in its early stage, (Bootstrap is based on jQuery), 1 is not upward compatible, 2 doesn't support IE7
• Framework 7 - android/IPhone framework
• jQuery Mobile, well integrated in DW, but is not that clean, I have a thumbs down for it.
  
  
• AngularJS, is just a JavaScript Expression language extension, lots of hype but have only bumped into two sites using it. W3C examples. - AngularUI
• Node.js - Serverside JavaScript, can be used for small devices? Java been used with small devices since 1989.
• Next generation of JavaScript is ECMAScript 6 ES6. due out soon, but shows limited support.(FF Firefox 8/15 version is 38 and 39). Since IE11 doesn't support it you have to wait until at least IE12/13. In recent years IE has gotten much better at supporting JavaScript, current *avaScript is ES5, support.
• Backbone.js Serverside *avaScript, Node.js competitor
  
• embedJS *avaScript framework for embedded devices.
  
  
• Bootstrap - HTML, CSS and *avaScript Framework, - W3C
• Modernizr - CSS3/HTML4 feature detector for browsers.
  
  
• Data Driven d3.js - lots of graphs couldn't find a line with square blocks.
• AppML not another expression language used to simplify AJAX/DOM traversal.
  
  
• jQuery Tools the missing User interface, supports RWD but doesn't have the equivalent jQuery UI themeRoller. Click samples, then standalone for code. Automatically loads jQuery. Note recent jQuery tools support ie6+, current jQuery UI has support ie8+. Accordion. Nota bene, jQuery tools 1.2 was way ahead of its time (2010-2012) release, but I cannot find out much about jQuery Tools 2.0, it may be a dead release.
• ember for Web Applications.
• MEAN stack (mongoloid/mongoose, express, angular, and node) - seems to be a popular bootcamp stack.; Express is a framework for node.js
• Apple swift, new language, replacing some Objective-C
• Grunt is a popular JavaScript task runner

Whats not Hot but Should be...

• Develop Once Platform Neutral Web Apps
  • Flash ActionScript 3.0
  • javaFX - Java Android development has increased Java interest. In terms of javaFX its too new t tell.
    Note a lot of embedded controllers use Java as the main code (blue ray player) and scripting language like lua/python for interface (car GPS).
    
  • 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

Response to "added a 16th assignment to my JavaScript class on what is hot" from Two Professional JavaScript consultants...

.

Web Page Assignment.

Watch 5/13/3015 Web-casts, take notes and comment on your findings. Then identify what you feel are the five most significant JavaScript libraries and why. You summary should at least 250 words long, you may want to include examples of each library in your summary. Bootstrap and jQuery should be relatively easy to use at this stage.

X2 Permalink and watch Canvas Webcast

Tentative Bootstrap Book

• Series: Sams Teach Yourself Bootstrap
  
• Paperback: 432 pages
• Publisher: Sams Publishing; 1 edition (November 14, 2015)
• Language: English
• ISBN-10: 0672337045
• Valorebooks.com $20 | Amazon $20 also

Basics Matter! I have seen so many students in the last 2 years fooling around with Bootstrap, and running into major problems because they don't have the basics. Basics matter, if you have not taken cimw115 take it. If you are not sure about Dreamweaver's site definition, files and/or folders make sure you re-watch the entire cimw115 cim-dreamweaver video set.

• 2014 Best Frameworks
• Wappalyzer Bootstrap - ASP.net - INK - Foundation; Problem more Server Side (RoR) and are not RWD. INK is part of Foundation and ASP.net is MVVC not really an RWD.

Modern day RWD (Responsive Web Design) CSS frameworks fall into two groups lightweight and heavyweight. Lightweight frameworks provide the skeleton (aka 2by4 framework) for an RWD site, they have little if any JavaScript, and have a streamlined CSS file. Since they are lightweight, its easy to comprehend the code. Lightweight systems don't provide default formatting of your content. In addition you can load your own JavaScript libraries. However, the JavaScript libraries may or may not be RWD. The most popular lightweight systems are...

• Skeleton simple light weight
• Simple Grid lightweight
• Pure.css - Yahoo CSS Framework

In order to maintain compatibility with jQuery UI components and all the CSS design students have written the future cimw160 website will be based on Skeleton.

Heavyweight RWD frameworks, provide not only the RWD framework, but also entire JavaScript frameworks, JavaScript user interface components, and content formatting. The most popular heavyweight RWD frameworks are...

• Foundation geared for Web Applications
• twitter Bootstrap most popular mobile first RWD framework

If you are starting brand new project then heavyweight framework may be the best tool for the job. However, if you already have a lot of custom CSS code and JavaScript then lightweight is probably the best path to take. Latest version of Dreamweaver cloud provides full support for Bootstrap, Bootstrap provides an RWD framework, and its own set of user interface tools (DW Bootstrap components) very similar to jQuery UI. Nota bene, Bootstrap is a heavy weight system you have to be good with a powerful IDE like Dreamweaver in order to use.

Web Page Assignment

For this assignment chose one of the frameworks above and redesign you home page using it. Make sure you home page has links to your assignment. Also include a short narrative why you chose that framework. You may start with this canned bootstrap file.

Notebook Addenda

74. What is the key difference between a lightweight and heavyweight RWD framework.
75. Why would you use a lightweight over a heavyweight framework.

CIMW140 CSS/RWD discuss the grid system layouts of the above RWD frameworks. The problem with these frameworks, they don't balance content size. CIMW140 also covers a more modern layout, called Flexbox.

Bootstrap has deprecated jQuery Mobile and Fluid Grid.

Query Assignment Titles (J4 not updated to Bootstrap yet, x2 WIP)..

1. jQuery Selector J1
2. jQuery Events/Methods/Animation J2
3. jQuery UI User Interface J3
4. jQuery AJAX and DOM intro.J4, J5
5. Whats HOT X1
6. Bootstrap RWD X2
   
   
7. may create simple essay on phone gap, sencha, and jQuery mobile w example on cim
   
8. RWD example
9. Google is using angular JS at the front end.
10. Calendar: jQuery - server side
    
    
11. using gmaps.js, take a look at mapbox
12. jQuery Amazon API (books) w XML class list E-Commerce smashup
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 wave-maker - dojo Framework

Updated laster to jQuery plug Ins. Could add geolocation to h15

Web-based reading assignment: Brief intro to jQuery JavaScript framework, watch Canvas 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 J query 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)

• Canvas Quizzes maintain final due dates
• Make sure you have completed all Canvas quizzes
• Refer to syllabus make sure you have completed to assignments you need for the grade you want.
• jQuery Assignments are not that hard.
• Reminder Canvas announcements are used to inform students of course updates.

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