Intro To Computing Final

Front 1

Different parts of URL
http://facweb.cs.depaul.edu/eschwabe/junk/SomeDude.html

Back 1

Uniform Resource Locator

http:// : protocol
facweb.cs.depaul.edu : name of the server
/eschwabe/junk/ : path of directories
SomeDude.html : name of the web page

Front 2

Hypertext Transfer Protocol

Back 2

-Browser creates an HTTP request for a server
-Request includes server name (not the IP address), path to some directory, name of requested file
-Server creates an HTTP response for a browser
-Response contains header information (includes time stamp, error codes, etc.) and contents of requested file
-TCP/IP is used to send requests and responses

Front 3

Web server

Back 3

A program running on a computer that stores web pages.
-receives requests for web pages
-sends them to the requesting computer

Front 4

Web browser (client):

Back 4

A program that requests and displays web pages.
 -issues requests for web pages
 -interprets and displays the received web pages

Front 5

WORLD WIDE WEB – WWW

Back 5

 -A system for sharing documents, built on top of the Internet
 -Tim Berners-Lee, 1989:
 -Documents stored on computers (“web servers”)
 -Documents can be linked to each other (“web pages”)
 -Computers can request and receive copies of documents stored elsewhere (“web browsers”)
 -WWW = servers + browsers + pages
 -First browsers in 1990 (text only) and 1993 (graphical)

Front 6

IP – Internet Protocol

Back 6

 -Delivers small, fixed-sized messages (about 1,500 bytes) through the Internet
 -Every computer on the Internet has a unique four-byte IP address
(e.g., www.amazon.com is 207.171.166.102 = 11001111.10101011.10100110.01100110)

Front 7

how to write hyperlinks

Back 7

<a href ="document location"> hyperlink text</a>

<a href =URL> hyperlink text</a>


how to insert an image

<img src=“path/filename.{jpg,gif}” alt=“alternate text />

Front 8

INTERNET HISTORY

Back 8

 1969: ARPANet (Department of Defense)
4 computers
 mid-1980’s: Universities, National Science Foundation (NSF), “Internet”
~5,000 computers
 mid-1990’s: Privatized (MCI, Sprint, etc.)
~15,000,000 computers
 Now over 990,000,000 computers

Front 9

PROTOCOLS

Back 9

Rules that govern how computers exchange information
 In order to communicate, two computers must run the same protocol
 Internet uses two main protocols:
 IP: Internet Protocol
 TCP: Transmission Control Protocol

Front 10

TCP (TRANSMISSION CONTROL PROTOCOL)

Back 10

Breaks messages into packets, each labeled with destination and position in message (e.g., “6 out of 10”)
 Delivers packets independently using IP
 Re-assembles labeled packets at destination
 Internet = Computers + Network (+ TCP/IP)

Front 11

Web Pages

Back 11

Written in Hypertext Markup Language (HTML)
May also involve CSS, Javascript…
Contain both text and formatting information
May contain “hyperlinks” to other pages
May also contain embedded images, sound clips, video, programs

Front 12

HTTP

Back 12

Hypertext Transfer Protocol
Browser creates an HTTP request for a server
Request includes server name (not the IP address), path to some directory, name of requested file
Server creates an HTTP response for a browser
Response contains header information (includes time stamp, error codes, etc.) and contents of requested file
TCP/IP is used to send requests and responses

Front 13

IN-LINE STYLING

Back 13

<elementname style=“property:value”>

properties of style attribute:
 bgcolor=color à style=“background:color”
 text=color à style=“color:color”
 align=algnmnt à style=“text-align:algnmnt”
 valign=algnmnt à style=“vertical-align:alignmnt”
 height=height à style=“height:height”
 width=width à style=“width:width
Fonts:
“font-weight:bold” makes text boldfaced
“font-style:italic” makes text italicized
“font-family:family” lets you choose the font
“font-size:size”

Front 14

INTERNAL STYLE SHEETS

Back 14

<style type=“text/css”>
p { color : red }
td { text-align : center}
</style>

Front 15

EXTERNAL STYLE SHEET

Back 15

<link type=“text/css” rel=“stylesheet” href=“path/filename.css” />

Front 16

INPUT

Back 16

Text Fields, Buttons, Check boxes, Radio Buttons

One kind of form element is a type of input element called a button
<!-- <input type=“button” value=“buttonCaption”
onClick=“JavaScript statement(s)” /> -->
Specified caption will appear on button
When button is clicked, statement(s) in the onClick attribute will be executed

Front 17

FORM

Back 17

A form is an HTML element that contains form elements (and regular HTML as well)
<form name=“formName”>
…HTML elements, including form elements…
</form>
The only place that form elements should appear is within a form!

Front 18

TEXT AREAS

Back 18

Text areas allow output to a multi-line region
<textarea name=“elementName”
rows=“numRows” cols=“numCols”
wrap=“on”> contents

Front 19

defining functions

Back 19

defined in a script in the head, and can be called from within any script in the body to compute and return a result

function FunctionName(inputParameter){ …JavaScript statements… return result;

Front 20

Function Call

Back 20

1. inputParameter is set to value
2. The body of the function is executed
3. The expression result is evaluated
4. The result replaces the entire expression FunctionName(value)
If there is no inputParameter, then just call FunctionName()
If there is no return statement, then no result is returned

Front 21

input and output using text fields

Back 21

OUTPUT
document.formName.elementName.value= string;

INPUT
variable = document.formName.elementName.value;

Front 22

BUTTONS

Back 22

<input type=“button” value=“buttonCaption” onClick=“JavaScript statement(s)” />

Front 23

PROMPT

Back 23

<script type=“text/javascript”>

variableName = prompt(displayString);
variableName = prompt(displayString, defaultValue);

document.write(outputCode);

</script>

Front 24

commenting in javascript

Back 24

// … for a single-line comment  /* … */ for a multi-line comment

Front 25

ALERT STATEMENT

Back 25

Displays a dialog box (no user input)…
alert(displayString);
1. Displays a dialog box containing displayString and an OK button
2. Waits for the user to click OK