377 test 1
Test may NOT be "made up" without prior arrangements or VERIFIED EMERGENCY!
Make-up tests will be different, will be given the following morning at 6:30am and require a medical excuse.

Make a CAP!
This guide is not a "promise" of what will be on the test, but is simply an outline of topics that MAY be on the test that I provide to be helpful to you. Other topics not listed may also sneak onto a test from time to time.

Understand that a test is a SAMPLING and can not possibly cover all information from class. The idea, however, is that you must study all the information since you don't know for certain what questions will show up. This is for your benefit as it motivates you to learn more!


HTML, CSS & DOM Fundamentals


HTML Fundamentals

-structure ("scaffolding") holds content -separate structure(html) from presentation(css) from behavior(js) - Document type <!doctype HTML> html 5 should be FIRST THING in file - id attribute is a hook for JS DOM manipulation

CSS Fundamentals

formatting (style) appearance presentation -Comment /* */ -Location of CSS inline style internal style sheet external style sheet -Syntax of styles rule = selector + declaration block selector classes .class{ } id #id{ } element <tag>{ } element.class{ } :pseudoclass(property: value) a:active{ } a:hover{ } input:valid{ } input:invalid{ } declaration block = one or more property:value pair property:value; color:red; font-size:large; classes .abc{ } class="abc" can use multiple classes class="abc def ght" css often use this html hook attribute micro-class ids id="xyz" javascript often uses this html hook attribute can also be styled #xyz{ } -Common properties color background-color background-image font-size font-family font-weight text-align display "none" - not visible "" - visible z-index bigger # in front of smaller Box Model layout float MBPC or MBPW margin border padding content(width) shorthand: TRBL width is CONTENT only box-sizing:border-box; /* width includes padding & border */ height overflow shorthand (mbp) TOP RIGHT BOTTOM LEFT padding: 10px 5px 7px 12px; border: solid red 5px; margin:25px 50px 75px 100px; top is 25px right is 50px bottom is 75px left is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px -Colors 6 digit hex RGB 2 digit pair per color 00-ff (0-255) 3 digit hex shorthand 77AACC-> 7AC names rgba decimal 0-255 (00-ff hex) a is alpha - opacity : 0-1 -Center a div margin: auto; width:50%; overflow:auto; /* if a container for other divs only */ - Fill a div float:left; or float:right;

DOM

browser builds DOM on load hierarchy nodes parent, child, sibling used by JS to access elements document.getElementById uses id attribute of html elements innerHTML using DOM to change pages var o = document.getElementById("one"); o.innerHTML += "<h1>Hello</h1>"; events click onload JS inserting variables and HTML into DOM document.getElementById.innerHTML = '<p>' + i + '</p>';

JavaScript Fundamentals

-Variables var numbers string boolean objects null undefined scope by function assignment math operators + - / % * relational operators: < > >= <= != == identity operators: checks value AND type === !== types vars do NOT have a type, but their value DOES: Primitive types: boolean: true or false number: Any integer or floating-point numeric value string: One or more characters in quotes null: null (not undefined - there is a difference) undefined: value assigned to a variable that's not initialized EX: var x = 9; // value is a num var y = 12.345; // value is a num var s = 'hello'; // value is a string var t = "bye"; // value is a string var b = true; // value is a boolean var z; // value is undefined Reference types (Objects): object: var o={}; function: function f(){ } array: var ray=[]; -Comment // /* */ -Input/ Output prompt var x = prompt("Enter", default); alert document.write innerHTML = ... input element -Branching: if if/else if/else if -Loops: while, do/while, for break, continue -Functions defining calling parameters function $( id ) { return document.getElementById( id ); } -Arrays - creation var fib = new Array(num); OR var fib = []; - assign values dynamically sizes fib[0] = 0; fib[1] = 1; delete fib[0]; -Array object methods pop, push, shift, unshift shift <-- | | --> pop unshift --> | beginning of array ...... end of array | <-- push splice removes items -Math library Math.abs() .round() .floor() .ceil() .min() .max() .pow(n,m) Math.random() 0 to <1

Canvas Fundamentals

-Graphics operations requires canvas - html5 Canvas html tag height, width attributes - NO CSS for dimension requires graphics context getContext // myCanvas is the id of the canvas element ctx = document.getElementById("myCanvas").getContext("2d"); draw fillRect, fillStyle lineTo, moveTo function boxArc() { var x = Math.random() * 300; var y = Math.random() * 350; ctx.strokeStyle="black"; ctx.lineWidth=3; // draw rectangles ctx.beginPath(); ctx.fillStyle=randomRGBA(); ctx.rect(x,y,50,50); ctx.stroke(); // outline ctx.fill(); // fill in ctx.beginPath(); ctx.fillStyle=randomRGBA(); ctx.rect(x+25,y+25,50,50); ctx.stroke(); ctx.fill(); // draw circles ctx.beginPath(); ctx.fillStyle=randomRGBA(); ctx.arc(x-5, y-25, 30, 0, Math.PI*2, false); // 2 PI rads = 360 degrees ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.fillStyle=randomRGBA(); ctx.arc(x+75, y+75, 30, 0, Math.PI*2, false); ctx.stroke(); ctx.fill(); } function randomRGBA(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); var a = Math.random() + 0.2; // + .2 to see // create string + random values inserted var c = "rgba(" + r + "," + g + "," + b + "," + a + ")"; return c; }

Listeners and Callbacks

wait until DOM is built... window.onload=function() { //listener document.getElementById("getNum").addEventListener("click", doIt); } // callback function doIt(){ var userNum = getNumLoop(); document.getElementById("getNum").innerHTML += ": " + userNum; } //function loops until good input function getNumLoop() { do { // if the user enters "doggy", parseInt returns isNaN // as true (means it is NOT a Number) var num = parseInt(prompt("Enter number (1-50)", 15)); // keep looping while the input is NaN // OR if it is too small OR too big } while( isNaN(num) || num<1 || num >50 ); return num; }

Trig

function trigs() { var a; // angle var offset = Math.floor(Math.random()*200)+50; // move it // sin is y on unit circle - red ctx.fillStyle="#f00"; // 3 waves, 3 circles each 2pi rads, by.2 for(a=0; a < 3*(Math.PI*2); a+=0.2){ ctx.fillRect(a*20, offset + Math.sin(a)*20, 3, 3); } // cos is x on unit circle - green ctx.fillStyle="#0f0"; for(a=0; a<3*(Math.PI*2); a+=0.2){ ctx.fillRect(offset + Math.cos(a)*20, a*20, 3, 3); } }

Cellular Automata - 1d: Sierpinski Gasket

From Wolfram on additive cellular automata: "An additive cellular automaton is a cellular automaton whose rule is compatible with an addition of states. Typically, this addition is derived from modular arithmetic. Additive rules allow the evolution for different initial conditions to be computed independently, then the results combined by simply adding. The results for arbitrary starting conditions can therefore be computed very efficiently by convolving the evolution of a single cell with an appropriate convolution kernel (which, in the case of two-color automata, would correspond to the set of initially "active" cells)." Can write arrays that are generated in code to the canvas as an image. The arrays are simply the pixels that make up the image expressed as 4 bytes (RGBA).

2d Arrays of Objects: Cellular Automata - 2d: GOL

GOL is a 2d cellular automata B3/S23: means dead cells reborn with three neighbors alive alive cells survive with 2 or 3 neighbors // a possible data structure for GOL var a=[]; // simply an array var EL=100; var colors=["black", "white"]; // an array with two elements // 'a' becomes a 2d array of objects function dataStruct() { for(var i=0; i<EL; i++) { a[i] = new Array(EL); for(var j=0; j<EL; j++) { a[i][j] = {}; a[i][j].x = i; a[i][j].y = j; a[i][j].current = 0; // alive (1) or dead (0) a[i][j].future = 0; // alive (1) or dead (0) // color dependent on current and can be derived rather than stored a[i][j].color = colors[ Math.floor(Math.random()*colors.length) ]; // callback to report pixel info a[i][j].z = function(){ $("rep").innerHTML="I am pixel at: " + this.x + " " + this.y + " " + this.color; } } } } Counting neighbors can be easy if data is set up right: // check 8 neigbors: function countNeighbors (row, col) { var numberLive = gol[row-1][col-1].alive + gol[row-1][col].alive + gol[row-1][col+1].alive + gol[row][col-1].alive + gol[row][col+1].alive + gol[row+1][col-1].alive + gol[row+1][col].alive + gol[row+1][col+1].alive; return numberLive; } //!

Image Processing

Access the pixel data to change image and then rewrite to canvas // put data array into 2d array of objects function formatData() { // imgData gets rgba for all pixels from image // each data element is 1 byte imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var arrayIndex = 0; // use to inde into image array // 2d array of objects that stores RGB data that is in imgData.data array imgDataObj = new Array(W); for(var i=0; i<W; i++) { imgDataObj[i] = new Array(H); for(var j=0; j<H; j++) { imgDataObj[i][j] = {}; imgDataObj[i][j].r = imgData.data[arrayIndex++]; imgDataObj[i][j].g = imgData.data[arrayIndex++]; imgDataObj[i][j].b = imgData.data[arrayIndex++]; imgDataObj[i][j].a = imgData.data[arrayIndex++]; } } } //!