Embed Size (px)
Citation preview
CSC 112
Intro to ComputerProgramming in
JavaScript
Spring 2005
Internet and WWW
Internet and WWW are not the same – Internet includes email and other things
Internet is the computers and the means by which they physically connect to each other.
World Wide Web is the logical means of accessing the files on these computers, primarily as web pages.
Using the World Wide Web Browsers
Netscape Navigator Internet Explorer
Plug-ins Java
Macromedia Flash Acrobat Reader …
Search Engines Yahoo and many others
Internet Protocols
TCP/IP – Transmission Control Protocol / Internet Protocol
FTP – File Transfer Protocol http – Hypertext Transfer Protocol telnet – for remote login to other
computers, with local computer as dumb terminal
IP Addresses Example – 123.45.67.89 For specific computers on the Internet Information is passed between them in
packets A named address (next slide) is converted to
an IP address by a Domain Name Server (DNS)
Named AddressesURL’s – Uniform Resource Locators
http://www.music.sony.com/Music/index.html
http is the protocol
com is the domain – others are edu, org, gov, …
www. music.sony.com is the server computer
Music is the folder on the server computer
index.html is the file in the Music folder
Hypertext Markup Language
Describes with tags how web page should be formatted for display by browser
Container tags, thus <BODY> and </BODY> Non container tags, thus <BR> or <HR> Tags must be properly nested
Basic Skeleton of an HTML Page
<HTML><HEAD> <TITLE> … </TITLE></HEAD><BODY> …</BODY></HTML>
Tags for Lists For an unordered list <UL> <LI> <LI> … </UL>
For an ordered list <OL> <LI> <LI> …
</OL>
Attributes of HTML Tags
Describe how to accomplish a result Attributes may or may not have values, as in
<P ALIGN=left> …. </P> BODY attributes include colors for links and
for background FONT attributes include color and size
Hypertext Links <A HREF=“some URL“> anchor text </A>
(Absolute or relative URL’s)
<A HREF=“#fragment identifier”>
anchor text </A>
<A NAME=“a named anchor”> </A>
Images in Web Pages
Images appear when page is loaded, with
<IMG SRC=“URL for image file”>
Image files for web pages are of type
GIF or JPG
Image files are loaded via links, with
<A HREF=“URL for image file”> some text </A>
Programming The Client-Server Model Compiling versus Interpreting Embedding JavaScript code in a web page The Syntax or grammar of a P.L. (programming
language)– Variables – numbers and strings and booleans
– Operators – arithmetic and comparison
– Concatenating strings with the overloaded + operator
– Expressions – modifying precedence with parentheses
– Statements – the assignment operator, the terminal semicolon
Translating a Program to ML Assembler Language (AL)
High Level Languages (HLL’s)Interpreting – Translate and execute on the fly
Compiling – Translate source program to object program, then execute it, retaining translation for subsequent execution
JavaScript ObjectsThus, var foo = new Object()
Objects may contain primitives of type number, string, or boolean other objects ! methods, or functionsThus, function foobar (){ statement; statement;
… }
Creating Forms with HTML<FORM … > <INPUT TYPE=text …> <INPUT TYPE=button …> <INPUT TYPE=reset …> <INPUT TYPE=checkbox …> <INPUT TYPE=radio …> <SELECT …> <OPTION …> <OPTION …> … </SELECT> <TEXTAREA …> </TEXTAREA></FORM>
Processing Forms with JavaScript
Events, such as onclick and onchangeFunctions as event handlersLocal variables in functionsConverting strings to numbers with parseFloat()
Arrays, as with var numbers = new Array()The elements array, automatically, for all of
the items in the formselectedIndex for pull-down menus
Arrays The array is a special kind of object var foo = new Array ( );
where the items in foo are indexed by integer
values, thus
foo[1], foo[j], foo[2*k+3]… If the first index value is 0, it is a standard
array, as with elements[ ] and options[ ] A property of an array is its size, as with foo.length
Basic Tags for Tables
<TABLE> <TR> <TD> <TD> … <TR> <TD> <TD> …</TABLE>
Attributes of TableTags <TABLE> … </TABLE> ALIGN, BGCOLOR, BORDER, CELLPADDING,
CELLSPACING, HEIGHT, WIDTH
<TR> … </TR> ALIGN, VALIGN, BGCOLOR
<TD> … </TD> ALIGN, VALIGN, BGCOLOR, COLSPAN,
ROWSPAN
Control Structures Sequential Processing
do A, then B, then C, … Conditional Processing (branching or
selection)
if A is true, then do B, else do C Iterative Processing (looping or repetition)
while A is true, do B {and test A again}
Conditional ProcessingComparison operatorsBoolean variablesLogical operators for and, or, not
if (boolean condition) { statement; statement; … } else { statement; statement; … }
Iterative Processing Must have three components - Initialize the loop control variable (lcv)
– Test the lcv for termination– Update the lcv to next value
Thus, we have the for statement for (j = 0 ; j < 10 ; j += 1) {
statement; statement; }
We also have the while statement j = 0; while (j < 10) { statement; j += 1; }
Understanding Iteration Word Problems
To compute the number of days in the years 1950-2000
days = 0; for (years = 1950 ; years <= 2000 ; years++)
if (years % 4 == 0)
days += 366;
else
days += 365;
Tracing Iteration for (j = 1 ; j <= 3 ; j++)
for (k = 0 ; k < j ; k++)
document.write (j + “ ” + k + “<BR>”);
Functions Function definition (in the HTML head), thus
function foobar (a, b, c) { statement; statement; }
where a,b,c are formal parameters.
Function invocation or function call, thus foobar (5, j, “Hello”); where the values in parentheses are actual parameters; when foobar is called, a=5, b=j, and c=“Hello”
Cookies Name - Value pairs are just text strings! When server responds to client request, it
sends cookie to be stored on client. When browser sends request to server, it
retrieves cookie (if present) for server. The GOOD
for customizing user interface to serverfor implementing shopping carts
The BADwithout user knowledge or consentcontribute to junk mail and spamming
JS code to SetCookie(), GetCookie(), getCookieVal(), DeleteCookie()
Sources of Errors Typing errors Syntax errors – incorrect grammar syntax is how a message is given Logical errors – incorrect semantics semantics is the meaning Poor algorithms Bad input values – GIGO Incorrect specification of the problem
Computer Ethical Issues Privacy versus security Spamming Email usage Hacking Ownership and piracy
…
