CS 177 Programming with Multimedia Objects Week 5 Recitation Slides

1
CS 177Programming with Multimedia ObjectsWeek
5Recitation Slides
2
Exam 1 Next Week

• When Thursday October 2nd 630p.m
• Where Wetherill Laboratory of Chemistry (WTHR)
  Rm 200
• Exam will cover chapters 1-7
• Previous exam posted on the website for reference

3
Exam Questions?

• Chapter 1 Computer Basics
• Hardware vs.. Software
• Internet and Web
• Chapter 2 HTML and Web Pages
• HTML tags and elements
• Text Formatting
• Hypertext links and images
• Lists and Tables
• Chapter 3 - The Internet and the Web
• Descendant of ARPANet
• TCP/IP protocols
• Packet switching / Distributed Networks
• HTTP Web protocol

4
Exam Questions?

• Chapter 4 JavaScript / Dynamic Web Pages
• Prompt and write statements
• Variables (loosely typed)
• Chapter 5 - Javascript Numbers and Expressions
• Data types (strings vs. floats)
• Prompting with numbers (parseFloat())
• Math library functions
• Errors and debugging (syntax, runtime, logic)
• Chapter 6 History of Computers
• Generations 0 - 5
• Chapter 7 Event-Driven Pages
• Event Handlers
• Buttons, text boxes, text areas, dynamic images
• User-defined functions

5
Note On Coding Standards

• Be sure to follow coding standards for labs and
  projects!
• Will facilitate reading of code for TAs to offer
  assistance and grade

6

• Other Questions?

7
Event-Driven Pages

• Interactive pages where the user can alter the
  web page dynamically
• e.g clicking the mouse or inputting information
  through a text box
• Event handlers - HTML element that can be
  programmed (using JavaScript) to respond to a
  users actions
• Example event handlers?
• Button
• Text Box / Text Area

8
HTML Buttons

• Button is an HTML element that can run Javascript
  code when a user acts on it
• General form of a button
• ltinput type"button" value"BUTTON_LABEL"
  onclick"JAVASCRIPT_CODE"/gt
• Type identifies the html element as a button
• Value specifies the text to be displayed on the
  button
• onclick specifies the JavaScript code to run if
  the button is clicked
• The order of the attributes is not important.
  Most common order begins with type"button.

9
Button Example

• Given this button definition

ltinput type"button" valueClick For My Favorite
Number" onclickfavNum Math.floor(Math.random
()1000)1 alert(My favorite number is
favNum)" /gt

• What text will be displayed on the button when
  viewed in the browser?
• Click My Favorite Number
• What will happen when the button is clicked?
• A window will popup in the browser displaying a
  random number between 1-1000.

10
HTML Text Box

• Event handler used for displaying text
• JavaScript code can be used to read from or write
  to the text box
• General form of a text box element
• ltinput type"text" id"BOX_NAME"
  size"NUM_CHARS" value"INITIAL_TEXT" /gt
• type identifies the html element as a text box
• id provides an identifier so that it can be
  referenced
• size specifies the size of the box (number of
  characters)
• value specifies the default text to appear in the
  box

11
Displaying Text In a Text Box

• How can you specify what text should be put into
  a text box?
• Use Javascript to assign some text to the value
  attribute
• General form for text box assignment
• document.getElementById('BOX_NAME').value
  VALUE_TO_BE_DISPLAYED

12
Retrieving Text From the Text Box

• Similarly, you can retrieve text from a text box
  to use within your JavaScript code
• VARIABLE document.getElementById('BOX_NAME').val
  ue
• What data type will VARIABLE be?
• document.getElementById('BOX_NAME').value will
  always return a string type
• What if you want to retrieve a number? What
  JavaScript function should you use?
• parseFloat() converts a string to a number to
  perform numeric calculations
• Remember, you only need parseFloat() if you want
  to convert to a number. You will not want to use
  it for a case like
• lastname document.getElementById(lastNameBox)
  .value

13
Lets Make A Text Box Example

• Goal Write JavaScript to Double a Number when a
  button is pressed and write the result back to a
  text box
• Steps
• Define HTML event handlers (i.e ltinput
  typebutton /gt and ltinput type"text /gt
• Create JavaScript for button handler
• Retrieve the text from textbox containing the
  original number and store in variable
• Call parseFloat() to convert to number
• Multiply the number by 2
• Send the result to the same text box that the
  user typed in the original number

14
Solution To Text Box Example
15
Text Areas

• Text area is similar to a text box but can hold
  multiple lines of text
• General form of a text area element
• lttextarea id"TEXTAREA_NAME" rowsNUM_ROWS
  colsNUM_COLS wrap"virtual"gt INITIAL_TEXT
  lt/textareagt
• id provides an identifier so that it can be
  referenced
• rows specifies the height (number of lines) of
  the area
• cols specifies the width (number of characters)
  of the area
• wrapvirtual ensures that the text will wrap
  from one line to the next
• Unlike buttons and text boxes, text areas DO NOT
  use the
• ltinput /gt tag.
• Text boxes are specified with their own tags
  primarily to accommodate the potentially large
  initial text.
• lttextareagtInitial Textlt/textareagt IS NOT equal
  to ltinput typetextareagt

16
Dynamic Images

• Images can be dynamically altered in the same way
  a text box or text area can
• To change an image, simply reassign its src
  attribute (similar to how a text box is altered
  by reassigning its value attribute)

17
Dynamic Images Example

• An image defined as
• ltimg idtimeofday" srcsun.jpg" altSun is
  Out" /gt
• Can be changed to a night picture at the press of
  a button with the following code
• ltinput type"button" valueClick To Change Time
  of Day" onclick
• document.getElementById(timeofday).srcmoon.jp
  g /gt

18
Heres A Neat Trick With Images

• Preloading an image can speed up the display of
  an image when it is swapped in and out
  dynamically
• In the previous example, we can preload the
  moon.jpg image so that it will display
  immediately when the button is pressed by adding
  the following code between the ltheadgtlt/headgt
  tags

19
User Defined Functions

• The programmer can define their own functions to
  execute multiple JavaScript statements
• Function definition should be within the
  ltheadgtlt/headgt tags of the HTML document
• General form of function
• Great means to simplify handling of button events
  when you want to execute more than one or two
  lines of code!!
• Will discuss in detail when we cover Chapter 9

20
History of Computers

• Calculating devices have been around for
  thousands of years
• Modern computing traces its roots back to around
  the 16th-17th centuries
• Computer technology is categorized by
  generations

21
Generation 0 Mechanical Computers

• 1642 Pascal built a mechanical calculating
  machine
• 1805 Jacquards loom is the first programmable
  device
• wove elaborate tapestries with programmable
  patterns (punch cards)
• mid 1800's Babbages analytical engine design
• Programmable like Jacquards loom (punch cards)
• never completed due to technology constraints of
  the time
• 1890 Holleriths tabulating machine (Company
  would become IBM)
• designed for tabulating 1890 U.S. Census data
• Completed census tabulation in 6 weeks (vs.. 7
  yrs for 1880)
• 1930's several engineers independently built
  "computers" using electromagnetic relays
  (physical switch opened/closed with current)
• Punch-cards served as memory to store programs
• Zuse (Nazi Germany) his machines were destroyed
  in WWII
• Atanasoff (Iowa State) built a
  partially-working machine with his grad student
• Stibitz (Bell Labs) built the MARK I computer
  that followed the designs of Babbage
• Very limited by todays standards but 100x faster
  than previous technology

22
Generation 1 Vacuum Tubes

• mid 1940's vacuum tubes replaced relays (light
  bulb with vacuum to speed electron flow)
• No moving parts -gt faster than relays
• invented by Lee de Forest in 1906
• 1940's hybrid computers using vacuum tubes and
  relays were built
• COLOSSUS (1943)
• First electronic computer (based on Alan Turing
  designs)
• Top secret computer built by British govt to
  decode Nazi communications during WWII
• ENIAC (1946)
• first publicly-acknowledged electronic computer
  (Eckert Mauchly from UPenn
• contained 18,000 vacuum tubes, 1,500 relays,
  weighed 30 tons, and consumed 140 kwatts
• Neither COLOSSUS nor ENIAC were general purpose
  (had to be reconfigured for different
  computations

23
Generation 1 Vacuum Tubes (cont.)

• 1946 - von Neumanns "stored program" computer
• Modern computer components memory for data and
  program, CPU, I/O devices
• Programming for these machines was painful
• each machine had its own language with 0s and 1s
  corresponding to physical components
• 1950's - assembly languages replaced 0's 1's
  with mnemonic names (e.g., ADD instead of
  00101110)

24
Generation 2 Transistors

• mid 1950's transistors began to replace tubes
• Most Important Invention of 20th Century
• smaller, faster, more reliable, and cheaper than
  vacuum tubes
• invented by Bardeen, Brattain, Shockley in 1948
  (1956 Nobel Prize in physics)
• high-level languages make programming more
  natural
• FORTRAN (1957, Backus at IBM)
• LISP (1959, McCarthy at MIT)
• BASIC (1959, Kemeny at Dartmouth)
• COBOL (1960, Murray-Hopper at DOD)
• Computers become more commercial with reduced
  costs
• Businesses can buy and use computers
• Eckert-Mauchly (1951), DEC (1957)
• IBM became market force in 1960's

25
Generation 3 Integrated Circuits

• mid 1960's - integrated circuits
• Noyce and Kilby independently developed
  techniques for packaging transistors and
  circuitry on a silicon chip (Kilby won 2000 Nobel
  Prize in physics)
• made possible by miniaturization improved
  manufacturing allowing mass-production of useful
  circuitry
• 1960's - rise of Operating Systems
• operating systems enabled time-sharing (users
  share a computer by swapping jobs in and out)
• specialized programming languages were developed
• Pascal (1971, Wirth), C (1972, Ritche)
• 1971 Intel marketed the first microprocessor,
  the 4004, a chip with all the circuitry for a
  calculator

26
Generation 4 VLSI

• late 1970's - Very Large Scale Integration (VLSI)
• hundreds of thousands of transistors w/ circuitry
  on a chip
• resulted in mass-produced microprocessors and
  other useful Integrated Circuits (IC's)
• computers could be constructed by simply
  connecting powerful IC's and peripheral devices
  (easier and cheaper)

27
Generation 4 VLSI (cont.)

• Rise of personal computing
• 1975 - Bill Gates Paul Allen founded Microsoft
• 1977 - Steve Wozniak Steve Jobs founded Apple
• 1980 - IBM introduced PC
• 1984 - Apple countered with Macintosh
• introduced the modern GUI-based OS
• 1985 - Microsoft countered with Windows
• 1980's - object-oriented programming began
• represented a new approach to program design
  which views a program as a collection of
  interacting software objects that model
  real-world entities
• New Object Oriented Languages
• Smalltalk (Kay, 1980)
• C (Stroustrup, 1985)
• Java (Sun, 1995)

28
Generation 5 Parallelism/Networks

• No new switching technologies, but changes in
  usage have occurred
• Most computers today are networked (Advent of
  Internet and WWW)
• high-end machines (e.g. Web servers) can have
  multiple CPU's
• Mutli-core CPUs become prevalent in the early
  21st century

29

• FINAL QUESTIONS?