ACES' JavaScript Sequence Exercises

 

Animated Gif: Canvas Capture and Creation. The ability to capture a frame-by-frame canvas activity to an animated gif is extremely useful, but somewhat convoluted, process (the HTMLCanvasElement is not quite there yet; maybe in ES6). Here's a sequence that will enable you to accomplish it today.

  1. Open your SearchAlgorithms.html page in Chrome and right-click on the canvas. Is there a Save Image As... option ?
  2. Try the same thing in Firefox and Safari. Any difference ?
  3. Using Chrome, test drive Geary's Example 1-11 (an explanation can be found on pp. 46-50 of your textbook)
  4. Data URI (Uniform Resource Identifier)
  5. HTMLCanvasElement: toDataURL() function and Example: Getting the data-url for a canvas
  6. Add this Example's test() function to a button's onclick() event in your SearchAlgorithms.html page and confirm it.
  7. Read this blog: http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/.
  8. Prepare the downloaded resources for use with your BoM pages by placing them in a referenceable folder.
  9. Save your SearchAlgorithms.html to SearchAlgorithm2AnimatedGif.html and follow along with the edits.

Note 1. Be sure to have your browser's pop-up blocker disabled for this to work. Manage pop-ups or Pop-up blocker settings

Note 2. Chrome had trouble delivering on the toDataURL() function whereas Firefox executed as expected.

In Class Assignment. Model-View-Controller.

  1. Create a BoM page entitled MatrixMVC.html.
  2. Read Wikipedia's brief description. Cite this reference and format its opening text into the Description panel.
  3. Read this explanation of how to dynamically popluate a select box.
  4. Assemble the content for the last line in the Description Panel. From the body's onload event handler, call the function populateSelect() among other setup duties, that will add an option for each factor of the width of the canvas.
  5. Since our goal is to present a simple checkerboard pattern with squares of selected dimension, the onchange event handler of the select control (controller) should create a new matrix (model) of requested size (recall a matrix is simply an array of arrays: reference), somehow (your decision) ensuring the matrix can be used to immediately update the view. To this end, add two new functions (updateModel and updateView could be possible names).

    To be scalable for future projects, this model should be a matrix of objects of, say, the type Cell. For simplicity, Cell objects need only have a background color property for this exercise. For the curious, Becker chose the default colours #4B964B and #D3D3D3 to model his City view.

Finally, I stumbled across a Matrix Rain animation I thought was compelling...

Root Finding. Here's a simple strategy for finding (some of) the roots of a continuous, smooth function within a given interval of its domain.

Start at the left endpoint of the interval. Using a small increment (blue dashed arc), step through the interval, testing the sign of the range as you go. Whenever consecutive range results differ in sign (±), you can conclude the subinterval contains a root (remember, this is a continuous, smooth function). A binary search can be undertaken to locate the root, before resuming the search until the right endpoint of the interval is reached (or thereabouts).

In Class Assignment. Recursive Binary Exercises.

  1. Create the BoM page: RecursiveBinaryExercises.html that mimics the page to the right. Obtain the thumbnail image and it's larger linked image from our course page and place them in your images folder.
  2. Implement the function constrain (value, from, to) that returns a value no less than from and no greater than to. If you want a challenge, see if you can achieve the result in one expression. Note: This is a useful function than should go into your utility.js library if you have one (a similar function is offered by the Arduino language).
  3. Implement a <body onload=""> handler that populates the input box of Exercise 1 with a random value between 0 and 1023. In addition, for Exercsie 2, it populates a global array with 10 random 2-digit integers in ascending order. The contents of the array are to be presented, at startup, centered in an Exercise 2 <div> element as shown. One of the values of the array, the key, chosen at random, is also placed in the text box at startup.
  4. Exercise 1. 10-bit Recursive (Arithmetic) Binary Conversion. Develop an <input onclick=""> button handler function that uses a recursive helper function to return the 10-bit binary representation of the (constrained) user-entered value between 0 and 1023. Use the information presented in the graphic as a basis for your code decisions. The resulting value replaces the ? as the inner HTML of the adjacent <span></span> element.
  5. Exercise 2. Binary Search. Develop an <input onclick=""> button handler function that uses the recursive helper function, binarySearch(low,high) to determine the position of the key within the array. A result of -1 will appear if the key is not found.
  6. The sequence of indices encountered in searching for the key, needs to be recorded for later presentation. Create the array, sequence, prior to undertaking the binary search, and populate it with the mid locations encountered as the recursive method executes. On completion, place the contents of the sequence array within the centered <div> element.

In Class Assignment. Introduction to Recursion: Pascal's Triangle On Console.

Task.

  1. Create the BoM page: PascalsTriangleOnConsole.html.
  2. Fashion the contents of the Description Panel similar to the example, replacing the dummy Latin text with your words on the biography of this important mathematician. (image)
  3. With the assistance of recursive functions where possible, populate a new array with the elements for each of the requested number of rows of Pascal's Triangle and display the array to your brower's JavaScript Console.
  4. Mount your page on your site by Thursday night (January 30).

Introduction to Recursion: Factorial Exercises. Factorials play a significant role in mathematics. Completion of these exercises will give you a greater understanding of their origin and exposure to some practical applications.

  1. Click on the adjacect image to enlarge.
  2. Create a page entitled FactorialExercises.html.
  3. Proceed through each of the four exercises, implementing the context for each in the Description Panel and developing button event handlers that exploit recursive functions to determine each result.
  4. Display the result in your browser's JavaScript Console, incorporating String substitutions within the console.log() method to make the output as meaningful as possible.

Introduction to Recursion: Recursive Exercises.

  1. Click the adjacent image to enlarge.
  2. Create a page entitled RecursiveExercises.html.
  3. Proceed through each of the six exercises, implementing the context for each in the Description Panel and developing button event handlers that exploit recursive functions to determine each result.
  4. Display the result in your browser's JavaScript Console, incorporating String substitutions within the console.log() method to make the output as meaningful as possible.
Console Exercises.
  1. Click on the capture to the right to enlarge
  2. Create a BoM page entitled ConsoleExercises.html and develop a passive implementation of the Description Panel. Embed <img> elements using src links to ConsoleSquare.gif and ConsoleTriangle.gif. Borderless tables are effective ways to align content elements.
  3. Complete Exercise 1. Note. Prepending a '+' to an expression overrides that use of the symbol as a concatenation operator.
  4. Complete Exercise 2. Note. The goal here is to use for loops to populate arrays and display their contents in the Console.

Objects: Standard Form of First-Degree Relations.

  1. Click on the image to the right to enlarge and review the content of the Description and Console panels.
  2. Create the file StandardFormFirstDegreeRelation.html and implement the content of the Description panel.
  3. Using either the constructed or literal object strategy, develop an object definition to define the standard form of a linear relation that will encapsulate the necessary data and provide methods inferred by the content of the Console Panel to achieve the indicated results. Formatting options for Number objects can be found here.
  4. Imagine what the content of the Canvas panel could contain...

Objects: Constructed vs Literal. Finite Arithmetic Sequence. For your first JavaScript Object exercise, you are asked to rework the script from last week's Finite Arithmetic Sequence example to demonstrate your understanding of the two different strategies for JavaScript Object creation.

Task. (Constructed Object)

  1. Save the file FiniteArithmeticSequence.html as FiniteArithmeticSequenceConstructedObject.html.
  2. Using the Constructed Object strategy, reconfigure the script to instantiate an object that corresponds to the adjacent UML diagram. The method (function) term(i) returns the i'th term in the sequence. The toString() method uses the term(i) method to assemble and return the full String version of the sequence.
  3. Verify!

Task. (Object Literal)

  1. Save the file FiniteArithmeticSequenceConstructedObject.html as FiniteArithmeticSequenceObjectLiteral.html.
  2. Reconfigure the script to employ the Object Literal strategy to instantiate the arithmetic sequence using the name:value pairs defined by the UML diagram. The role of each method remains unchanged.
  3. Verify.

DOM: Document Object Model. We'll explore HTML DOM Methods using this page and Chrome Developer Tools (split screen) together. Open the Console tab and undertake the following,

  1. display the title of the document
  2. display the anchors on the page
  3. display the first anchor
  4. display the name of the first anchor
  5. display the images
  6. display the number of images
  7. display the last image
  8. display the src of the first image
  9. display the width of the first image
  10. display the number of links

BOM: Browser Object Model

Create the web page OpenSSDBanner.html that includes a button with the text, Open and Center SSD Banner. When pressed, the script opens a 1020 by 120 window in the screen, centered both vertically and horizontally, with features reflecting the capture below.