CSC 112 Intro to Computer Programming in JavaScript Spring 2005

Preview:

DESCRIPTION

CSC 112 Intro to Computer Programming 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. - PowerPoint PPT Presentation

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 protocolcom is the domain – others are edu, org, gov, …www. music.sony.com is the server computerMusic is the folder on the server computerindex.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 flyCompiling – 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 integervalues, 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 …

Recommended