IT 330 Exam 2 Review

Lakukan tugas rumah & ujian kamu dengan baik sekarang menggunakan Quizwiz!

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"]


Set pelajaran terkait

chapter 1: welcome to economics homework

View Set

Quadratic Transformations and Word Problems

View Set

Infection Control Chapters 25-28

View Set

ISTQB Foundation Extension Agile Tester Chapter 1: Agile Software Development

View Set

AD Banker life and health comp exam pt. 1

View Set

Learning Study Guide- AP Psychology

View Set

Georgia Real Estate Exam Review Part B

View Set

Exclusionary Rule and Good Faith Exception

View Set