IT 330 Exam 2 Review
T/F A Javascript event is an action that can be detected by Javascript
True
T/F A Javascript function may have a function as a parameter
True
T/F JavaScript is a dynamically-typed language
True
T/F JavaScript is case sensitive
True
T/F The $( ) function always returns a set of results
True
T/F You can combine CSS selectors with the $( ) notation to select DOM objects that match CSS attributes
True
T/F You may change the DOM object's content and style
True
T/F resizing any image always reduces its quality
True
*---QUIZZES OVER JAVASCRIPT---*
*---QUIZZES OVER JAVASCRIPT---*
*---WEB MEDIA---*
*---WEB MEDIA---*
Positioning context examples
*1) Places caption over the figure* figure{ ... position: relative; //creates positioning context } figcaption{ ... position: absolute; //does the actual move } *2) Hiding an overlayed image* <figure> ... <img src="images/banner.png" alt="" class="overlayed" /> </figure> .overlayed{ ... display: none; } *-OR- (preferred)* <figure> ... <img ... class="overlayed *hide*" /> </figure> .hide{ display: none; }
jQuery( ) function alias
$( )
*---Advanced CSS: Layout---*
*---Advanced CSS: Layout---*
*---JAVASCRIPT FUNDAMENTALS---*
*---JAVASCRIPT FUNDAMENTALS---*
*---JQUERY---*
*---JQUERY---*
codec
*co*mpression/*dec*ompression used to encode media
What is the value of 'index' for the following JavaScript code? var a = 5; var index = 0; while(a){ if(a > 0 && a < 3) continue; else if(a <= 5) break; index++; } alert(index);
0
Inline, Embedded, and External JavaScript
-*Inline:* including JavaScript code directly within certain HTML attributes <a href="*JavaScript:OpenWindow();*">more info</a> -*Embedded:* placing JavaScript code within a <script> element *<script type="text/javascript">* // A JavaScript Comment alert("Hello World!"); *</script>* -*External:* typically contain function definitions, data definitions, and entire frameworks <head> *<script type="text/javascript" src="greeting.js"></script>* </head>
Positioning elements
-Absolute: element is removed from normal flow and positioned in relation to its nearest positioned ancestor -Fixed: element is fixed in a specific position in the window even when the document is scrolled -Relative: element is moved relative to where it would be in the normal flow -Static: element is positioned according to the normal flow. This is the default.
Block-level elements & Inline elements
-Block-level: <p>, <div>, <h2>, <ul>, <table>, contained on their own line, by default fills entire width of parent, can contain other block-level elements -Inline: <em>, <a>, <img>, <span>, do not form their own blocks but instead are displayed within lines, laid out horizontally (left to right) within its container, "reflowed" as width changes
color relationships
-Complimentary: opposite ends of the wheel -Analogous: adjacent to one another -Split Complimentary: colors adjacent to the complimentary color -Triad: 3 colors in an equilateral triangle -Tetradic: rectangular, combines 2 sets of primary colors
Audio Support
-MP3: container & a codec, requires licensing, .mp3 -WAV: container & a codec, .wav -OGG: container w/ Vorbis audio, open-source, .ogg -Web: container w/ Vorbis audio, open-source, .webm -MP4: Container w/ AAC audio, requires licensing, .m4a
Color Models
-RGB: "additive colors", all colors combine to make white, gamut of colors is > CMYK -CMYK: "subtractive colors", all colors combine to make black -HSL: hue, saturation & lightness
Problems with absolute positioning for creating columns
-floated elements leave behind space for them in the normal flow (can fix with clear property) -absolute positioning takes element out of normal flow, so elements may overlap (clear property has no effect)
Advantages of JavaScript/ Client-side scripting
-processing can be offloaded from server to client machines, reducing the load on the sever -browser can respond more rapidly to user events than a request to a remote server, improving user experience -can interact with HTML in a way the server cannot, creating an experience closer to desktop software than HTML
reference types and primitive types
-reference: objects (arrays) -primitive: simple data (boolean, number, string)
Using Flexbox for columns
.media{ display: flex; align-items: flex-start; } eliminates need to float and margin the body to compensate
creating an object (constructed form)
// first create an empty object var objName = new Object(); // then define properties for this object objName.name1 = value1; objName.name2 = value2;
What value will be displayed as a result of the following code snippets? var val=5-3+2; alert(val); var val=4+6/3*2*(2+1); alert(val); var val=1+2+"3"+4+5; alert(val);
4; 16; 3345
What is the value of 'count' after execution of both of the following code snippets? var index = 5, count = 0; do{ index--; count++; } while(index > 0); var index = 5, count = 0; while(index > 0){ index--; count++; }
5; 5
Using <audio>
<audio id="example" controls preload="auto"> <source src="example.ogg" type="audio/ogg"> <source src="example.wav" type="audio/webm"> <source src="example.webm" type="audio/webm"> <p>Browser doesn't support the audio control</p> </audio>
Absolute Positioning Example:
<p>blah blah..</p> <figure> <img src="image.jpg" alt="picname" /> <figcaption>Blah</figcaption> </figure> <p>blah blah..</p> figure{ .... position: absolute; top: 150px; left: 200px; } figcaption{ .... position: absolute; top: 150px; left: 200px; } Result: Image is removed from normal flow so there is no space between the two texts, pic is moved down and right from the top left of its container block (the window) and the caption is moved down and right from the top left of nearest positioned ancestor container (the image)
Relative Positioning Example
<p>blah blah..</p> <figure> <img src="image.jpg" alt="picname" /> </figure> <p>blah blah..</p> figure{ .... position: relative; top: 150px; left: 200px; } Result: Picture was originally between the two texts, now moved down 150px and to the right 200px relative to initial position, and overlaps text. Space where the photo was originally is preserved.
Positioning context
Absolute positioning move, solves the problem above.
What is the output of the following javascript? var price = 30; switch(price){ case 70: console.log("Very Expensive"); case 50: console.log("Expensive"); case 30: console.log("Fair"); case 35: console.log("Still Fair"); default: console.log("N/A"); }
Fair Still Fair N/A
File formats
JPEG: 24-bit true-color, ideal for photographic images, lossy compression (loses pixels with each save), can create artifacts (blotches & noise at edges or flat colors) GIF: 8-bits or less (256 colors), lossless compression (pixels arent lost), ideal for vector-based art/logos, colors can be made transparent, can be animated PNG: lossless compression, 8-bit (or 1, 2, and 4-bit) color AND 24-bit (higher depths supported), 1-8 bits of transparency SVG: scalable vector graphics, dont lose quality when resized TIF: cross-platform, lossless, multiple color depths, 8-bit transparency, layers/color channels, CMYK & RGB color space
css( ) example
One version gets the attribute, the other sets the attribute var color = $("#element").css("background-color"); // get the color $("#element").css("background-color", "red"); // set color to red
Vector vs Raster images
Raster becomes pixelated as it is enlarged, Vector does not
T/F Almost all values in JavaScript are truthy
T
T/F jQuery filter selections are case sensitive
T
What is the result of the following Javascript when the page is loaded with regard to <h1>? <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> <meta charset="utf-8" /> <script> document.getElByID("myheader").style.color = "red"; </script> </head> <body> <h1 id="myheader">My Header</h1> </body> </html>
The color has no effect because the script comes before the creation of h1
Problem with float
When floating multiple items side by side, as the window resizes, content in the containing block will try to fill space available to the right/left of floated elements. This results in constant rearranging of content.
wrap( )
Wraps all elements matched by a selector within a new element $(".gallery").wrap('<div class="galleryLink"><div>');
attr( )
can set and get an attribute value Examples: *// link is assigned the href attribute of the first <a> tag* var link = $("a").attr("href"); *// change all links in the page to http://funwebdev.com* $("a").attr("href","http://funwebdev.com"); *// change the class for all images on the page to fancy* $("img").attr("class","fancy");
Dithering
creating an illusion of more colors with a diffuse pattern of available colors; more obvious on screen than on paper
Z-Index
determines stacking order: larger z-index value = closer to the viewer -if descendant is nested within the parent, it will still appear in front of the parent if parent has a higher z-index UNLESS desc z-index is <0 and parent z-index is >=0 -if parent z-index is <0, all descendants move below normal flow content
'display' vs 'visibility'
display: auto; //displays element normally display: none; //does not display the element and space for the element is removed visibility: hidden; //does not display the element, but the space for the element remains
Float property
element can be placed to the far left or far right of its containing block. The rest of the content is "reflowed" around the element. Width should be specified. figure{ .... width: 150px; float: left; margin: 10px 0; //10px padding on top/bottom, none on sides }
falsy values
false, null, "", ' ', 0, NaN, undefined
clear property example
figure fig1{ ... float: left; } figure fig2{ ... float: left; } .first{ clear: left;}
Fixed Position example:
figure{ .... position: fixed; top: 0; left: 0; } Result: image is permanently fixed in the top left of its block container (the window) even when scrolling
Raster images contain a ____ number of pixels, so when they are resized, the program must ____ (add pixels)
fixed; interpolate
Normal Flow
how the browser will normally display block-level elements and inline elements from left to right and from top to bottom
gradient examples:
linear-gradient(to top left, startcolor 50%, endcolor); //makes a diagonal gradient where start color doesn't stop until halfway repeating-linear-gradient(angle, frstcolor 0, frstcolor .75em, scndcolor 0, scndcolor 2em); //makes stripes radial-gradient(shape, insidecolor, outsidecolor); //shaped gradient
Color depth
maximum number of possible colors an image can contain (true color = 24 bits - 8 each for r,b,g)
prop( )
preferred way to retrieve and set the value of a property Example: <input class="meh" type="checkbox" checked="checked"> var theBox = $(".meh"); theBox.prop("checked"); // evaluates to TRUE
container formats
specifies how info is stored in a file and how different info within it is synchronized -(MPEG-4) MP4 container, H.264 vid, AAC audio: powerful, patented, .mp4 or .m4v -WebM container, VP8 vid, Vorbis audio: created by google, open-source, royalty-free, .webm -Ogg container, Theora vid, Vorbis audio: open-source, royalty-free, .ogv
Clear property
stops elements from flowing around a floated element. -left: left edge of the element cannot be adjacent to another element -right: right edge... -both: both left & right edges... -none: element can be adjacent to other elements (can also set overflow to 'auto' //overflow: auto; to solve this problem)
What are the equivalent jQuery selections for this JavaScript? var node = document.getElementById("here"); var link = document.querySelectorAll("ul li");
var node = $("#here"); var link = $("ul li");
creating an object (literal notation)
var objName = { name1: value1, name2: value2, // ... nameN: valueN };
Anti-Aliasing
visual "smoothing" of diagonal and contrast edges; makes transparency difficult for GIF images
Another problem with floats
when an element is floated within a containing block that contains only floated content, the containing block essentially disappears
Basic jQuery selectors
• $("*")—Universal selector matches all elements (and is slow) • $("tag")—Element selector matches all elements with the given element name • $(".class")—Class selector matches all elements with the given CSS class • $("#id")—Id selector matches all elements with a given HTML id attribute.
Accessing an object
• objName.name1 • objName["name1"]
