Images file sizes js objects literals boolean if if else cascaded ifs
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

Images, file sizes JS Objects Literals Boolean IF/IF ELSE CASCADED IFs PowerPoint PPT Presentation


  • 51 Views
  • Uploaded on
  • Presentation posted in: General

CS110: Computer Science and the Internet. Images, file sizes JS Objects Literals Boolean IF/IF ELSE CASCADED IFs. HW 4 Office hours (leaving Thursday) Really well on the quiz Project Design document. http:// cs.wellesley.edu /~cs110/ scott /L07-color-and-images/color-and- images.shtml.

Download Presentation

Images, file sizes JS Objects Literals Boolean IF/IF ELSE CASCADED IFs

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Images file sizes js objects literals boolean if if else cascaded ifs

CS110: Computer Science and the Internet

Images, file sizesJS ObjectsLiteralsBooleanIF/IF ELSECASCADED IFs


Images file sizes js objects literals boolean if if else cascaded ifs

  • HW 4

  • Office hours (leaving Thursday)

  • Really well on the quiz

  • Project Design document


Images file sizes js objects literals boolean if if else cascaded ifs

http://cs.wellesley.edu/~cs110/scott/L07-color-and-images/color-and-images.shtml


Images file sizes js objects literals boolean if if else cascaded ifs

Hexadecimal Colors

# 94 00 D3

RGB

Using hexadecimal colors in CSS:

blockquote {

color: #9400D3;

background-color: #E6E6FA;

}


Digital images

38 pixels high

44 pixels wide

Digital Images

Images are often represented in a computer as a 2-dimensional (2D) array of pixels


Images file sizes js objects literals boolean if if else cascaded ifs

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

Indexed Color


Images file sizes js objects literals boolean if if else cascaded ifs

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


Images file sizes js objects literals boolean if if else cascaded ifs

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


Images file sizes js objects literals boolean if if else cascaded ifs

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

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 FlowChart

  • if ( your_name = “Stella”) {

    alert (“Hi ” + your_name + “ !”);

    }


Simple if else

Simple IF/ELSE

  • if ( number % 2 == 1) {

    alert ( “I am even”);

    } else {

    alert (“ I am odd”);

    }


Cascaded if

CASCADED IF

  • How do we grade you?


Questions

Questions

  • When would we use if/else in our websites?


Boolean

Boolean

  • Try in firebug

  • Not

  • &&

  • ||

  • Always use parenthesis when using many conditional operators


Questions you asked

Questions you asked

  • Logical operators can be used with more than two choices but those choices must be true or false statements, or?

  • do we need to memorize this code?


Exercise on election day reminder

Exercise on election day reminder

  • Scott’s notes


  • Login