CS 177 Recitation

1
CS 177 Recitation

• Jan 26, 2007 Week 3

2
Static vs. Dynamic Pages

• What is a static web page?
• A static web page looks the same and behaves in
  the same manner each time it is loaded into a
  browser.
• We use HTML to produce static web pages.
• What is a dynamic web page?
• A dynamic web page changes over time or in
  response to a users actions.
• We use JavaScript to add interactivity to web
  pages.

3
JavaScript

• What is JavaScript?
• JavaScript is a programming language (a language
  for specifying instructions that a computer can
  execute) designed to add dynamic content to web
  pages.
• Recall HTML is a mark-up language that describes
  the structure and format of a web page. It gives
  advisories to the browser, rather than executable
  instructions to the computer.
• Java and JavaScript are NOT same
• Java (created by Sun Microsystems) -
  general-purpose programming language
• JavaScript (created by Netscape) - designed
  specifically to add dynamic content to web pages.

4
Simple Dynamic Page

• How can I add javaScript to an HTML page?
• The HTML tag is used to insert a
  JavaScript into an HTML page. It can be inserted
  into both head and body sections.

5
Assignment Statement

• What is an assignment statement?
• An assignment statement asks the user for input
  and stores that input, e.g. prompt.
• What is the form of prompts?
• VARIABLE prompt("PROMPT MESSAGE", DEFAULT
  VALUE")
• e.g. firstName prompt("Please enter your
  name", "")
• animal prompt("Enter a kind of animal",
  "cow")
• The variable here is used to store the text
  entered by the user.
• The default value string can be omitted.
  Otherwise, the default value will appear in the
  prompt box when it appears.
• The text entered in the prompt box will be
  assigned to the variable once OK is clicked.

6
Write Statement

• What is a write statement?
• A write statement writes text into the HTML page.
  
• The message specified in the statement can be
• a string literal text enclosed in quotes
• a variable
• a combination of strings and variables, connected
  via '
• e.g. document.write("Hello " firstName ",
  welcome to my Web page.")
• When a variable is encountered, the browser
  substitutes the value currently assigned to that
  variable, and then displays the message.

7
Write Statement (cont.)

• What is the general form of a write statement?
• document.write(MESSAGE TO BE DISPLAYED)
• document.write("MESSAGE TO BE DISPLAYED "
  VARIABLE " MORE MESSAGE" ...)
• document.write(string) puts that string into the
  HTML file as if someone has typed it.
• the beginning and ending quotes of a string must
  be on the same line, but the write statement can
  be broken across lines.
• Important some special characters like double
  quote(), single quote() and back slash(\) can
  be displayed if they are preceded by a back
  slash(\) in the string (see next page for
  examples).

8
Display Special Characters in String

• Example1
• Display prompt message Are you now at
  D\cs177\rec3?
• directoryprompt(Are you now at
  D\\cs177\\rec3?, )
• Example2
• Write a message Have you heard of Wikipedia?
• document.write(Have you heard of
  \Wikipedia\?)
• document.write(Have you heard of Wikipedia?)
• Note in JavaScript, both and encapsulate
  a string. When you quote or , the back slash
  can be omitted as long as the inner quotes are
  different from the outer quotes of the string.

9
Formatted Output

• The string in document.write(string) could
  contain HTML tags
• The string is written to the HTML file as if
  someone has typed it.
• The browser will interpret the tags and format
  the text accordingly.
• Examples
• document.write()
• document.write("Hello " firstName
• ", welcome to my Web page.")

10
Syntax Errors

• Will JavaScript syntax errors generate an error
  message?
• Yes! Most syntax errors do. But the browser may
  ignore some of them, e.g., misspelling an HTML
  tag name.
• How can I view error messages on web browsers?
• Internet Explorer go to Tools -Internet Options
  - Advanced tab -Browsing heading, check the
  option "Display a notification about every script
  error".
• Mozilla Firefox go to Tools -JavaScript Console

11
JavaScript Variables

• What are the naming rules for variables?
• A variable name can be any sequence of letters,
  digits, and underscores (but must start with a
  letter or an underscore).
• valid courseName, _score, weight1,
  sum_of_arrary2
• Invalid 3room, salary, two words,
  weather_today
• Variable names shouldnt use the reserved words
  like break, delete, double, public, etc.
• Variable names are case sensitive, so Sum and SUM
  are treated as different variables.
• But NEVER use variable names that are homonyms
  (like Sum, SUM, and sum)! Otherwise, you will get
  confused pretty soon!

12
Memory Cell

• What is a memory cell?
• A specific location in memory associated with
  each variable to keep track of the values that
  the variable represents.
• The value entered by the user
• is stored in the memory cell.
• Any future reference to the variable
• name evaluates to the value stored
• in its associated memory cell.
• If values are repeatedly assigned to the
  variable, only the most recent value is retained
  in the memory cell.
• Example
• firstName prompt("Please enter your name", "")

13
Reusing Variables

• Recall values can be assigned repeatedly to
  variables.
• food prompt("What is your favorite food?", "")
• document.write("Your favorite food is " food
  "
  ")
• food prompt("What is your least favorite
  food?", "")
• document.write("Your least favorite food is "
  food "
  ")

14
Reusing Variables (cont.)

• Another example
• flexibleprompt(What day is it today?, )
• document.write(Today is flexible.)
• If the user inputs Friday, then the string
  Friday is stored in flexible and Today is
  Friday. will be shown on the HTML page.
• flexible20
• document.write(There are flexible
  students.)
• This time we assign a number to the same
  variable and
• There are 20 students. is displayed.
• We can see from this example that information
  stored in a variable can be flexible. JavaScript
  is NOT a "strongly typed" language (like Java, C,
  and C), so a variable can hold a string one
  minute and a number the next.

15
Localizing Changes

• Variables can be utilized to store values that
  change frequently in a page.
• Example
• sports basketball"
• document.write(I like sports best.
  )
• document.write(And I know Bryan also likes
  sports a lot.
  )
• document.write(But Sam doesnt like sports
  at all.
  )
• Now we want to change basketball to football.
• sports football
• If sports is settled and no change should be made
  afterwards, then it is usually written in all
  caps like SPORTS. It is typically called
  constants in most programming languages.
• const SPORTS basketball

16
The Internet

• Recall What is the Internet?
• The global interconnection between computers
  (network) that supports communication.
• An alternate explanation is an abbreviation for
  Interconnected network of networks
• What is the Internet Society (ISOC) and what does
  it do?
• an international nonprofit organization (founded
  in 1992)
• it maintains and enforces standards, ensuring
  that all computers on the Internet are able to
  communicate with each other
• it also organizes committees that propose and
  approve new Internet-related technologies and
  software

17
Centralized vs. Distributed Network

• What happens if the connection between A and B
  fails?
• Large portions of the network become isolated
• This is the main problem in a centralized network

18
Packet Switching

• How are messages exchanged in a packet-switching
  network?
• Messages are broken into small pieces (called
  packets) and sent across the network
• What advantages does this have?
• Efficient use of connections (fair)
• React to network failures or congestion
• Improves reliability

19
Protocols and Address

• Recall What is a protocol?
• The rules that govern communication between two
  or more computers on a network (e.g. the
  Internet)
• What two central protocols control Internet
  communication?
• Transmission Control Protocol (TCP)
• Internet Protocol (IP)
• For this class, can simply think of them as one
  protocol, TCP/IP

20
TCP/IP

• What is an IP address?
• an IP address is a number, written as a dotted
  sequence such as 147.134.2.20
• each computer is assigned an IP address by its
  Internet Service Provider (ISP)
• What is a domain name?
• hierarchical names for computers (e.g.,
  www.cs.purdue.edu)
• they are much easier to remember and type than IP
  addresses
• Every entity on the Internet MUST have an IP node
  number (like 128.10.2.28) most nodes have a name
  like ocean.cs.purdue.edu NOT required but used
  for convenience.

21
Routers and DNS

• What is a router?
• computers that receive packets, access the
  routing information, and pass the packets on
  toward their destination.
• What is a DNS?
• Domain Name Server
• Domain Name Servers translate the names into
  their corresponding IP addresses

22
Caching

• How does caching work for the internet?
• to avoid redundant downloads, the browser will
  store a copy of a page/image on the hard drive
  (along with a time stamp)
• the next time the page/image is requested, it
  will first check the cache. If a copy is found,
  it sends a conditional request to the server
• essentially "send this page/image only if it has
  been changed since the timestamp"
• if the server copy has not changed, the server
  sends back a brief message and the browser simply
  uses the cached copy

23
Next Week

• May want to look ahead for lab next week
• Chapter 5 JavaScript Numbers and Expressions
• Project 1 already posted. Evening Consultation
  hours next week. Schedule available on the
  website.

24
Questions?