210 likes | 330 Views
CS110: Computer Science and the Internet. More JS/JQ Boolean IF/IF ELSE. HW 4 Office hours Really well on the quiz Mid-term review JS/JQ survey poll (anonymous). How to decide what should be dynamic?. Alert you to a common error. http://cs.wellesley.edu/~cs110/darakhshan/ TwoColumn.html
E N D
CS110: Computer Science and the Internet More JS/JQBooleanIF/IF ELSE
HW 4 • Office hours • Really well on the quiz • Mid-term review • JS/JQ survey poll (anonymous)
Alert you to a common error • http://cs.wellesley.edu/~cs110/darakhshan/TwoColumn.html • Try using jQuery to write text anywhere
When it needs jQuery, you need to tell it: “use jQuery” <body> <html> <!-- HTML here --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script> /* your JavaScript/jQuery code here */ </script> </body> </html>
Exercise on election day reminder • Scott’s notes (from last lecture)
Your questions • Scott’s lecture notes (today’s lecture)
Boolean • Try in firebug • Not (like – in precedence) • && (like * in precedence) • || (like + in precedence) • Always use parenthesis when using many conditional operators
CASCADED IF • How do we grade you?
Let’s create Objects • var person1 = {name: "Alice", gradYear: 2013, going: "yes"}; • Object-literals • Firebug • http://cs.wellesley.edu/~cs110/lectures/JSDatesEtc/#js_object_literals
http://cs.wellesley.edu/~cs110/scott/L07-color-and-images/color-and-images.shtmlhttp://cs.wellesley.edu/~cs110/scott/L07-color-and-images/color-and-images.shtml
Hexadecimal Colors # 94 00 D3 RGB Using hexadecimal colors in CSS: blockquote { color: #9400D3; background-color: #E6E6FA; }
38 pixels high 44 pixels wide Digital Images Images are often represented in a computer as a 2-dimensional (2D) array of pixels
Image Representation RGB color for each pixel is stored in 24 bits (3 bytes) How much memory is needed to store a 300x500 pixel image? • Problem: large image files can take a long time to download! • Example: On a 300 kbps (300k bits per second) cable modem, a 450 kB image takes about 12 seconds to download • Solutions: • Downsampleimages to make them smaller (fewer pixels) • Compress the images, using “lossless” compression (no information is lost) or “lossy” compression (less important information is lost) techniques
Indexed Color image image contents color palette • How large is a file that stores a 300x500 pixel indexed color image with 4 colors, and its color palette? • 300x500 pixels, with 2 bits per pixel (why?) • 300 x 500 x 2 = 300,000 bits • (2) 4 colors, with 24 bits per color • 4 x 24 = 96 bits • ~37.5kB (compared to the 450kB uncompressed file!) 2 bits per pixel 24 bits per color
Indexed Color • How large is a file that stores a 300x500 pixel indexed color image with 16 colors, and its color palette? • What is the number of bits used to store the image pixels? • (2) What is the number of bits used to store the color palette? • Total file size (in bytes): “bits per pixel” is also called the “bit depth” bit depth must be large enough to store all the colors
GIF Indexed Color The GIF file format is an indexed color format that allows 256 colors (out of a possible 16 million colors!) • Computing the file size for a GIF image, in bytes: • number of bytes to store the image pixels: • (width * height * bit-depth) / 8 • (2) number of bytes to store the color palette: num_colors * 3 • (3) total number of bytes*: • (width * height * bit-depth) / 8 + 3 * num_colors • (4) divide by 1,000 or 1,000,000 to convert to kilobytes or megabytes
More Objects • Recap on Date Objects (lecture notes from last time, Firebug) • Multiple Date Objects • Object literals • Using object literals with jQuery
IF FlowChart • if ( your_name = “Stella”) { alert (“Hi ” + your_name + “ !”); }
Simple IF/ELSE • if ( number % 2 == 1) { alert ( “I am even”); } else { alert (“ I am odd”); }