270 test 2
Test information may change! Come to class to stay on top of details. READ the NOTES that are online and READ the assigned readings!
Test may NOT be "made up" without prior arrangements or VERIFIED EMERGENCY!

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!

Web Fundamentals

- internet 60s - web early 90s - SEO page rank 0-10 high rank -> free web traffic via google 'juice' other pages link to yours high page ranked sites are more valuable when they link to you, but are often 'nofollow' dofollow vs nofollow links twitter and facebook links are nofollow and don't pass 'juice' - http request response - DNS domain name server name to IP: IPv4 - 32 bit, IPv6 - 128 bit - web server vs client - publishing on clarion server

HTML Fundamentals

-html provides 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 <!-- comments to make clear purpose and author and date, etc... --> -html guidelines (follows xhtml transitional 1.0) use lower case quote attributes proper nesting - always close a nested tag before closing its container tag use self-closing tags ( <br /> ) -semantic tags - give meaning for screen readers and SEO header footer nav -Common tags comment <!-- --> html head meta title body div p h1-h6 (big to small) br hr pre a href=""(attribute) links within pages links to other pages within site links to other sites img src="" (attribute) alt="" (attribute) size correctly respect ownership lists: ol ul li span - inline (block starts new line) input type="" button, text, checkbox, radio, submit type is an attribute head meta charset="UTF-8" title body blocks: p, h1-h6, div span (inline) <span class="jbw">some text to style</span> <span style="quick & dirty css">some text to style</span> valid html gives some assurance of a predictable rendering by the browser de facto rules: lower case tags, quote attributes, always use end tag if available empty tags should be self closing: <br /> (hr br img meta link) - Special symbols (&) &copy; => © &lt; => < &gt; => > &#127968; => 🏠 - unicode characters &nbsp; => a space -Attributes (quote!) charset="" id="" style="" href="" class="" src="" alt="" type="" title="" (not the html tag, but attribute value displays on mouse hover) rel="" (relationship) "stylesheet" "shortcut icon" example: <link rel="stylesheet" href="../../CSS/mypage.css" /> -Validation: Input element type = text, password, email, tel, checkbox, radio, submit Pattern Placeholder Title can style input:valid{ } input:invalid{ }

CSS

formatting (style) appearance presentation -Comment /* for clarity, author, date, etc... */ -Location of CSS inline style - use style attribute - <div style="color:red;"> internal style sheet (head) external style sheet (.css file) -Syntax of style RULES rule = selector + declaration block selector classes .class{ } id #id{ } element <tag>{ } element.class{ } -- all elements of this type with this class ids id="xyz" javascript often uses this html hook attribute can also be styled #xyz{ } classes .abc{ } class="abc" can use multiple classes class="abc def ght" css often use this html hook attribute micro-class :pseudoclass(property: value) a:active{ } a:hover{ } input:valid{ } input:invalid{ } declaration block = { property: value; property: value; ... } property:value; color:red; font-size:large; -Common properties color background-color background-image font-size font-family font-weight text-align Centering an element ON THE PAGE margin: auto; margin: 10px auto; width: 100px; /* whatever size, but must be set */ width:50%' /* percent for responsive design */' overflow:auto; /* if a container for other elements only */ Center content WITHIN an element text-align: center; Box Model layout float MBPC: margin border padding content(width) width is CONTENT only ** USE THIS box-sizing:border-box; /* width includes padding & border */ height overflow:auto - container div expands height to enclose divs within shorthand (mbp) TOP RIGHT BOTTOM LEFT (TRBL) 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 and bottom 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 display "none" - not visible "" - visible block - starts new line inline - stays on same line z-index bigger # 'in front of'' smaller # -Colors names 6 digit hex R G B 2 digit hex pair per color 00-ff (0-255) 3 digit hex shorthand 77AACC-> 7AC rgba decimal 0-255 (00-ff hex) a is alpha - opacity : 0-1

DOM

- "document object model" - browser builds DOM on load hierarchy nodes parent, child, sibling used by JS to access elements -DOM manipulation allows dynamic page manipulation via JS getElementById id attribute of html elements innerHTML document.getElementById uses id attribute of html elements to find element returns reference to object innerHTML property can change content of elements change page content via DOM var o = document.getElementById("one"); o.innerHTML += "<h1>Hello</h1>"; inserting variables and HTML into DOM document.getElementById.innerHTML = '<p>' + i + '</p>'; change page style via DOM var o = document.getElementById("one"); o.style.color="#333"; o.style.backgroundColor="#333"; * all hyphenated properties become camel case in JS events click, mouseover, mousehover JS listeners document.getElementById("clear").addEventListener("click", clear); JScallback functions function "clear()" above

JavaScript Fundamentals

- variables 5 primitive data types: number string boolean null undefined everything else is an object including arrays and functions and objects scope by function assignment relational operators: < > >= <= != == identity operators: checks value AND type === !== - types vars have dynamic typing - type will get determined automatically while program is running Primitive types: boolean: true or false number: 64 bit IEEE 754 - includes NaN and +,- Infinity 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=[]; -Number Manipulation parseFloat() parseInt() isNaN(num) toFixed(n) toPrecision(n) toString(base) - cool!~ bases 2-36?? default 10 -Comment // /* */ -Input/ Output prompt var x = prompt("Enter"); input element alert document.Write innerHTML = ... -Branching: if if/else if/else if -Loops: while, do/while, for break, continue -Functions defining calling parameters function DoIt(x) { var el=document.getElementById("xyz"); for(var i=1; i<=x; i++ ) { if( i%2 == 0 ) el.innerHTML += i + "<br />"; } } -Callbacks and Listeners listener listens for the click event on the element with id of "thing" where should this go? (DOM loaded?) document.getElementById("thing").addEventListener("click", goThing); callback is a function called "goThing" -Arrays var ray=[]; ray[0] = 88; var fib = new Array(); fib[0] = 0; fib[1] = 1; length # of items in array fib[fib.length] = 99; // adds 99 to end of array -Array object methods pop, push, shift, unshift shift <-- | | --> pop unshift --> | beginning of array ...... end of array | <-- push splice removes items | | -Graphics operations requires canvas - html5 Canvas html tag height, width attributes requires graphics context getContext ctx = draw.getContext("2d"); // draw is reference to canvas draw fillRect, fillStyle lineTO, moveTo -Math library Math.abs() .round() .floor() .ceil() .min .max .pow(n,m) Math.random() 0 to <1 -Debugging firebug finding coding errors stepping thgrough javascript code web developer syntax errors

jQuery

Library Tested Browser neutral $ selects elements according to selector uses # with id $('#id').function() uses . with class $('.class').function() uses plain element $('element').function() 'ready' takes the place of window.onload $(document).ready(function() { ** your code to execute after DOM built }); // end ready html() html function behaves in a maner similar to how we use the innerHTML property $("#bottom").html("<h1>bottom!!!!!</h1>"); // jquery //read number from input and parse var num = +$("#number").val(); // + shortcut for parseInt

AJAX

Asynchronous JavaScript and XML Can update parts of a web page, without reloading the whole page. Request data from server and use response text to create new content: document.getElementById("demo").innerHTML = this.responseText;