ACES' JavaScript Sequence

 

Model-View-Controller. Wikipedia...

Model-view-controller (MVC) is a software pattern for implementing user interfaces. It divides a given software application into three interconnected parts, so as to separate internal representations of information from the ways that information is presented to or accepted from the user.
The central component, the model, consists of application data, business rules, logic, and functions. A view can be any output representation of information, such as a chart or a diagram. Multiple views of the same information are possible, such as a bar chart for management and a tabular view for accountants. The third part, the controller, accepts input and converts it to commands for the model or view.

MVC is a common strategy for organizing interactive software so it would be good practice for you to gain some familiarity with it. Exercise...

Thoughts on Binary Trees. Consider your responses to the following,

  1. A binary tree (BT) appears to the right. Formulate your own definition of a binary tree using a vocabulary that incorporates the terms: node, parent, and child.
  2. This BT has a height of 5. You can easily count the total number of nodes. In general, how many nodes are contained within a full BT with a height of h ?
  3. What is the maximum number of nodes on level n, where 0≤n<h ?
  4. Given three attempts under the strategy presented, it is clear that one only has a 70% chance of guessing the number. Using the same strategy, what three numbers would be missed if the numbers were, instead, between 1 and 10, inclusive?
  5. Draw the BT to support a search undertaken to find a number from within the first 16 natural numbers. How many attempts are required to guarantee any key element is located ?
  6. Given the considerations above and an ordered collection of N elements, formulate an expression for the maximum number of attempts necessary to identify the location of a key element within the collection.

Introduction to Recursion. Undertake the following exercises, all of which output to your browser's Javascript Console.

  1. Recursive Exercises
  2. Factorial Exercises
  3. Pascal's Triangle on Console

The Console.

Mouse Event-Handling

General: Adding an EventListener to an Element

Canvas: Getting Mouse Coordinates

 

Objects: Arrays.
  • Copy the file PixelPlay.html to the new page SierpinskiTriangle.html and edit the file to look like this. Here is the Sierpinski stamp image. Attach a function by the same name (as the button's value) to each of the buttons' onclick() event. No parameters required.
  • Unless you have already, add the utility function, randomInt(min, max) that returns a random integer on the asymmetric interval: [min,max).
  • Again, unless you have already, add the function, prepareCanvas(bgColor) that uses the parameter (eg. "#FFF") to set the background colour of the canvas.
  • Create Constructor functions for Point(col, row) and Color(r,g,b,a).
  • Review this brief Introduction to Arrays
  • Create the literal object Triangle from this UML diagram.
  • Using the resources above, provide responses to the exercise requirements provided in class.
  • Take a peek at how we'll do this next year...

 

 

Point = function(col,row) {
}

Color = function(r,g,b,a){
}

Vertex = function(point, color){
}

// Utility function returns a random integer between min and max
function randomInt(min, max) {
  return //...
}

// Clears the canvas background to the colour provided...
prepareCanvas = function(bgColor){
}
Canvas: Pixel Play
  • Create a web page entitled PixelPlay.html that has the look of the screen capture to the right (click to enlarge). You are free to assemble this page from scratch, adapt it from a previous effort, or modify BomShell.html.
  • Attach a function by the same name (as the button's value) to each of the buttons' onclick() event. No parameters required.
  • Review the use of the Math.random() function.
  • For each of the six exercises, the text for the bodies of the <fieldset>s and further instructions, will be provided in class.

Canvas Preview. To prepare for the graphic interpretation of the majority of projects ahead of you this year, you will enhance your QuadraticFunction.html assignment to include a rendering of the user-submitted function in the Canvas window.

This is will be a collaborative effort undertaken during our Wednesday and Friday classes. Missing these periods will set you back, so please do your best to ensure you are in your seat these days.

This weekend's assignment includes the mounting of the final version of this page on your website as well as a completed version of Monday's test.

Here's the top-level driver function for our Canvas object that could be called before or after updating your Console Panel...

function updateCanvas(){
	canvas = document.getElementById('myCanvas');
	// font parameter order: style variant weight size/height family
	font = "normal small-caps normal 8pt Arial";
	xMin = -10;
	xMax = 10;
	yMin = -10;
	yMax = 10;

    grid = new Grid('dot',0.5,'black');
	axes = new Axes('cartesian',xMin,xMax,yMin,yMax,1,1,'black',font);
    locus = new Locus('cartesian',quadratic, xMin, xMax, 'red',"italic normal 12pt Arial");
 	plot = new Plot(canvas,'white','cartesian',grid, axes, locus,null);
	plot.draw();
}

 

 

Objects: Constructed vs Literal. The first reference below offers a concise introduction to the two different strategies for object creation. The remaining links offer additional support.

In-Class Object Exercises

JavaScript Animation. The eReader Simulation was your first introduction to animation in JavaScript. For this second effort, you are asked to render more complex motion and interactions, exploring the use of layered <div>s in the process.

 

HTML Forms. HTML Forms are the obvious way user data can be collected through web pages. Online quizzes offer web pages containing form controls that users manipulate to communicate data. On submission, the data is sent to the server for processing. The screen capture to the right shows a number of different form controls (text, radio, and check boxes, buttons, drop downs, etc.) that appear on RSGC's Donation Page.

Task.

  1. Create a web page entitled Donation.html that duplicates the RSGC Donation page as closely as possible adding embedded CSS as necessary.
  2. Add a Submit button at the bottom of the page that invokes a script that will aggregate the user's data from the form's controls and, for now, present the data in a single alert box.
  3. If and when you acquire a domain name and ISP, start learning PHP and develop form-handling skills for your site. Let us know when you do (we may want ot invest in your startup).

HTML Tables

HTML DOM: Document Object Model (standardized)

 

 

 

BOM: Browser Object Model (non-standardized)
Browsers