CX 103: Introduction to Computers

Lecture 13
 
 

Announcements
 
 

Mathematics Seminar Tuesday at 3:15 PM

Janine Wittwer,

Williams College

"Wavelets and the FBI"

Let's put the data storage problem in perspective. Fingerprint images are digitized at a resolution of 500 pixels per inch with 256 levels of gray-scale information per pixel. A single fingerprint is about 700,000 pixels and needs about 0.6 MB to store. A pair of hands, then, requires about 6 MB of storage. So digitizing the FBI's current archive would result in about 200 terabytes of data. (Notice that at today's prices of about $900 per GB for hard-disk storage, the cost of storing these uncompressed images would be about 200 million dollars.)

Computer Programming with JavaScript

Why Programming?

Why JavaScript?
 
 
 
 
 
 

Why Programming?





I. Enhance our Web Pages

So far: Create a Web page that contains text and images which can link to other text and images on the same Web page or on another Web Page
 
 

But: There are other features of Web pages you may have seen:

Scrolling Messages on the Browser's Status Line

scroll.html

Messages in Alert Boxes

FirstJS.html

Images that change when you move mouse over them. See Middlebury's Home Page.

Images that change in one part of a Web page without changing the rest of the page

Animated images (see redbull.com)
 


Dynamic vs Static Web Pages


Web Pages that interact with the user:

    Validate Contents of a Form

    Make Calculations

    Client-Side vs. Server-Side Forms

JavaScript Programs will let you add such enhancements to Web Pages.

But Programing has other benefits:

• Unleash tremendous information processing power of the computer

• Understand more the organization and inherent limits of computer as well as its potentialities

• Understand problem solving and cognitive processes better

• Have FUN!
 
 

Why JavaScript?

Modern Programming Language

Javascript is the world’s most popular programming language, used on more platforms, and in more languages than any other programming language in history.

Allows Programming Instructions to be placed within HTML scripts.

Can input and process data from a user.
 
 


Some History

Java

Originally developed for use in consumer electronics.

Now: the standard for internet programming.

Incorporated into Netscape in 1995
 
 

JavaScript

Netscape recognized the need for a programming language that had many of the capabilities of Java, but was easier to use and was an interpreted programming language.

Later in 1995, Netscape joined up with Sun Microsystems to create

Javascript.

Javascript was created to be a simpler language than Java, aimed at those with less programming experience.

Javascript can be used to show text, play sounds, display images, or communicate with a plug-in in response to things such as a mouse click or entry to a web page.
 
 

Javascript was originally called Mocha It was later called Livescript, but when Netscape and Sun formed an alliance, it was again renamed, this time to Javacript.

Microsoft Version of JavaScript: JScript
 
 
 
 

Javascript’s syntax is loosely based on Java’s language.

The closest resemblance between the two is in their name.
 
 












Some Differences Between Java and JavaScript



 
 
  Java JavaScript
Purpose General Programming

Language

 Enhance Web Page

Capabilities
How it's executed Compiled Interpreted
Name of application applet script
Source Code Hidden Open
Relations with HTML applets are distinct from

HTML

 Code is integrated with and embedded in HTML
Securiity Big Priority Many Security Holes
What You Need Developer Kit Text Editor

 

Similarities:

Both Programming Languages (not like HTML)

Both are object based

Both can help enhance Web page

Both can run on client's machine (not like cgi)




.
 
 
 
 

What does a JavaScript Program look like:

    Sequence of statements.

    Each statement ends with a semicolon (;)

    Syntax is similar to English

    JavaScript is case-sensitive

FRED Fred fred fRed are all distinct
 
 
 


 

<HTML>

<HEAD>

<TITLE>A First Program in JavaScript</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

document.writeln("I can Write JavaScript!");

</SCRIPT>

</HEAD>

<BODY> </BODY>

</HTML>

JavaScript1.html


 


JavaScript Can Appear in HEAD or in Body

JavaScript can interact with HTML formatting commands

<HTML>

<!- Homer Simpson March 14, 2001

HomerSimpson/Javascript2.html -->

<HEAD>

<TITLE>A Second Program in JavaScript</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

document.writeln("<H1>I can Write JavaScript!</H1>");

document.writeln("<EM>JavaScript can appear in HEAD or in BODY</EM>");

</SCRIPT>

<BODY BGCOLOR = white>

<FONT SIZE = +3>

<P>

<SCRIPT LANGUAGE = "JavaScript">

document.writeln("3 + 6 is ");

document.writeln(3+6);

</SCRIPT>

</P>

</BODY>

</HTML>

JavaScript2.html
 
 

JavaScript Begins to Interact with the User






<HTML>

<!- Homer Simpson March 14, 2001

HomerSimpson/Javascript3.html -->

<HEAD>

<TITLE>A Third Program in JavaScript</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var FirstName, // user enters first name

SecondName; // user enters second name

FirstName = window.prompt("Enter Your First Name", "");

SecondName = window.prompt("Enter Your Last Name", "");

document.writeln("Hello " + FirstName + " " + SecondName);

document.writeln("<BR>");

document.writeln(FirstName + SecondName);

</SCRIPT>

<BODY> </BODY>

</HTML>

JavaScript3.html

Note: Use of + in document.writeln

What happens if user inputs numbers?

JavaScript treats user input as character string,
not a number.


Let's see how we can get JavaScript to

        Treat input as integers

        Do Arithmetic
 

The device is parseInt() method

We'll also show multiple line comment


<HTML>

<!- Homer Simpson March 14, 2001

HomerSimpson/Javascript4.html -->

<HEAD>

<TITLE>A Fourth Program in JavaScript</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two numbers

from the user and adds them */

var FirstName, // user enters first number

SecondName, // user enters second number

First,Second,sum, // the two integers and their sum

product; // their product

FirstName = window.prompt("Enter Your First Number", " ");

SecondName = window.prompt("Enter Your Last Number", " ");

First = parseInt(FirstName);

Second = parseInt(SecondName);

sum = First + Second;

product = First * Second;

document.writeln("<H1>");

document.writeln("The sum of " + First + " and " + Second + " is " + sum);

document.writeln("The product is " + product);

document.writeln("</H1>");

</SCRIPT>

<BODY> </BODY>

</HTML>

JavaScript4.html