CX 103: Introduction to Computers

Lecture 14
 
 

Announcements

Mathematics Seminar Tuesday at 3:15 PM

Janine Wittwer,

Williams College

"Wavelets and the FBI"
 
 

JavaScript II

Communicating with User

document.writeln("Hello, World");

alert("Wake Up!");

window.prompt("Enter your name", "in here");
 
 
 
 
 
 

The alert() method places dialog box in a small window on the user's screen. The string parameter given to this parameter is output within the box. The box stays on the screen until the user clicks on the OK button.

<HTML>

<! AlertBox.html ->

<HEAD>

<TITLE>Alert Box</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

alert("Wake Up!");

</SCRIPT>

</HEAD>

<BODY> </BODY>

</HTML>
 

AlertBox.html



The document.writeln() method outputs the string parameter in the main document displayed and it remains there.

The window.prompt() method displays a dialog box which can display information to a user. It contains a text field where the user can respond.

There are two parameters: the prompt string and the default value.

The user enters information in the text field and can click on CANCEL or OK buttons. The user's response is returned and can be assigned as the value of a variable.

<HTML>

<HEAD> <TITLE>Prompt </TITLE>

<! Prompt.html -->

<SCRIPT LANGUAGE = "JavaScript">

var phone; // establishes variable named phone

phone = window.prompt("Please Supply Your Telephone Number", "(###) ###-####:");

document.writeln(phone);

</SCRIPT> </HEAD>

<BODY> </BODY> </HTML>

prompt.html
 



JavaScript Reserved Words


 
break case continue delete do
else false for function if
in new null return switch
this true typeof var void
while with      

Keywords that are reserved but not used by JavaScript
 
catch class const debugger
default enum export extends
finally import super try
       


 
 

What does JavaScript possess?

reserved words

Operators: +, -, *,/, >. <

methods: predefined functions:

document.writeln

alert

trigonometry: sine, cosine, tangent

algebra: square root, power, logarithms

Methods have a name and a place for input: alert()

All methods require ()

The input is placed within ()

Input may be 0, 1 or many values

output is assigned to a variable

JavaScript understands such statements as

y = sin(x);

y = cos(x);

y = sqrt(x);

y = exp(x);

You can, at your peril, define these terms to mean something else.

You can also define alert(), window, document, prompt, etc. to have other meanings as well.


What Kinds of Information can JavaScript Process?


 
 

1)    Character Strings: sequences of characters

2)    Numbers: integers (17, -5, 0, 123678) and

                reals (17.5, 3.1415923, 105.0).

    integers are referred to as ints

    reals are referred to as floats

3)    Booleans: True or False


 
 

Variables

JavaScript allows you to extend its vocabulary.

A variable is a name for a location in the computer's (RAM) memory.

Variables may contain different values at various times during the execution of a program.

All variables must be declared before they can be used.

Variables should be explicitly initialized (given a value) before they are used in calculations.

Legal Variable Names: "Valid identifiers" Any sequence of letters, digits, underscores (_) and dollar signs($) that does not begin with a digit.

Valid

a_score A2 a2 Midd midd
R2D2 GeorgeW aString    

Invalid

3CPO a score Help%M var  
         


 
 

Initializing Variable

Input value from user via window.prompt

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

Assignment Statement

    age = 20;

    GeorgeW = "The President";

    x = 62;

    sum = x + age;
 
age
   20
     
GeorgeW
   The President
     
x
   62
     
sum
    

 


 
 

Operators

Arithmetic

+ add

- subtract

* multiply

/ divide

% mod 19 % 4 = 3

++ increment N++ N = N + 1

-- decrement N-- N = N - 1
 
 

Concatenate

+ Concatenate strings
 
 

Relational Operators

== equal to 3 + 4 == 5 + 2
!= not equal to 6 != 7
< less than 6 < 7
> greater than 7 > 6
<= less than or equal to 6<= 7
>= greater than or equal to 5 >= 3

 


 
 

Making Decisions

The flow of control through a computer program: order in which the statements are executed.

Default: Sequential: Do them in the order (top to bottom) in which they occur:

Statement1;

Statement2;

Statement3;

Statement4;
 
 

All the statements are executed exactly once.

We can not skip a statement.

We can not return to an earlier statement

We can not repeat a statement.



JavaScript has the capacity to let the computer make such decisions depending on the state of information it has on hand.

Conditional or Branching Commands

Looping Commands




Example: Algorithm "Do Well in CX 103"

(1) Do all the reading.

(2) Complete all the homework

(3) Study Hard

(4) Bribe Professor
 
 

Sequence:

Do all the reading;

Complete all the homework;

Study Hard;

Bribe Professor;
 

ATERNATIVE I

Do all the reading;

Complete all the homework;

If Grade on Exam 1 below B then Study Hard;

Bribe Professor;
 
 

ATERNATIVE II

Do all the reading;

Complete all the homework;

If Grade on Exam 1 below B then

    Study Hard;

    Bribe Professor;
 
 

Do all the reading;

Complete all the homework;

If Grade on Exam 1 below B then

{ Study Hard;

Bribe Professor; }


JavaScript IF


 
 

if (some boolean condition) statement
 

if (some boolean condition) {

statement_1;
statement_2;
statement_3;

                                     }



<HTML>

<! Simple_if.html ->

<HEAD>

<TITLE>Simple if </TITLE>

<SCRIPT LANGUAGE = "JavaScript">

var N, String;

N = window.prompt("Enter value of N", "");

document.writeln("<H2>");

String = ' document.writeln("Do all the reading"); ' + '<BR>' + ' if (N < 80) document.writeln("Study Hard") ;' + '<BR>' + ' document.writeln("Bribe the Professor"); ' + '<BR>' + 'document.writeln("Complete all the homework<"); ' + '<BR>' ;

document.writeln(String);

document.writeln("<H1>");
 
 

document.writeln("N is " + N);

document.writeln("<BR>");
 
 

document.writeln("Do all the reading<BR>");

if (N < 80) document.writeln("Study Hard<BR>");

document.writeln("Bribe the Professor<BR>");

document.writeln("Complete all the homework<BR>");

document.writeln("<P>" + " </P>");

document.writeln("<FONT COLOR = red><STRONG>" );

String = ' document.writeln("Do all the reading"); ' + '<BR>' + ' if (N < 80) { document.writeln("Study Hard") ;' + '<BR>' + ' document.writeln("Bribe the Professor"); }' + '<BR>' + 'document.writeln("Complete all the homework<"); ' + '<BR>' ;

document.write(String + "<BR>");

document.writeln("N is " + N);

document.writeln("<BR>");

document.writeln("Do all the reading<BR>");

if (N < 80) { document.writeln("Study Hard<BR>");

document.writeln("Bribe the Professor<BR>"); }

document.writeln("Complete all the homework<BR>");

</SCRIPT> </HEAD> <BODY> </BODY> </HTML>

Simple_If.html



<HTML>

<!- Homer Simpson March 16, 2001

HomerSimpson/Javascript5.html -->

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two numbers

from the user and identifies the larger one*/

var First, Second, Larger;

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

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

First = parseInt(First);

Second = parseInt(Second);

if (First > Second) Larger = First;

if (Second > First) Larger = Second;

document.writeln("<H1>Your two numbers are " + First + " and " + Second + "<BR>");

if (First == Second) document.writeln("The two numbers are equal");

if (First != Second) document.writeln(Larger + " is the larger one.");
 
 

</SCRIPT>

<BODY> </BODY>

</HTML>
Javascript5.html



<HTML>

<!- Homer Simpson March 16, 2001

HomerSimpson/Javascript6.html -->

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two real numbers

from the user and identifies the larger one*/

var First, Second, Larger;

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

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

First = parseFloat(First);

Second = parseFloat(Second);

if (First > Second) Larger = First;

if (Second > First) Larger = Second;

document.writeln("<H1>Your two numbers are " + First + " and " + Second + "<BR>");

if (First == Second) document.writeln("The two numbers are equal");

if (First != Second) document.writeln(Larger + " is the larger one.");
 
 

</SCRIPT>

<BODY> </BODY>

</HTML>

Javascript6.html







<HTML>

<!- Homer Simpson March 16, 2001

HomerSimpson/Javascript7.html -->

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two character strings

from the user and identifies the alphabetically later one*/

var First, Second, Larger;

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

Second = window.prompt("Enter Your Second Word" , " ");

if (First > Second) Larger = First;

if (Second > First) Larger = Second;

document.writeln("<H1>Your two words are " + First + " and " + Second + "<BR>");

if (First == Second) document.writeln("The two words are identical");

if (First != Second) document.writeln(Larger + " appears later in the dictionary." + "</H1>");
 
 

</SCRIPT>

<BODY> </BODY>

</HTML>
 

Javascript7.html
 




<HTML>

<!- Homer Simpson March 16, 2001

HomerSimpson/Javascript8.html -->

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two character strings

from the user and identifies the alphabetically later one.

We add color and emphasis */

var First, Second, Larger;

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

Second = window.prompt("Enter Your Second Word" , " ");

if (First > Second) Larger = First;

if (Second > First) Larger = Second;

document.writeln("<H1>Your two words are " + "<FONT COLOR = red><EM>" + First + "</EM></FONT>" + " and " + "<FONT COLOR = red><EM>" + Second + "</EM></FONT>" + "<BR>");

if (First == Second) document.writeln("The two words are identical");

if (First != Second) document.writeln("<FONT COLOR = green><STRONG>" + Larger + "</STRONG></FONT> " + " appears later in the dictionary." + "</H1>");
 
 

</SCRIPT>

<BODY> </BODY>

</HTML>

Javascript8.html





<HTML>

<!- Homer Simpson March 16, 2001

HomerSimpson/Javascript9.html -->

<HEAD>

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

<SCRIPT LANGUAGE = "JavaScript">

/* Programs gets two numbers

from the user and identifies the larger one.

We do this more efficiently */

var First, Second, Larger;

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

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

First = parseInt(First);

Second = parseInt(Second);

document.writeln("<H1>Your two numbers are " + First + " and " + Second + "<BR>");

if (First == Second)

document.writeln("The two numbers are equal");

else

{

Larger = First;

if (Second > First) Larger = Second;

document.writeln(Larger + " is the larger one.") ; }
 
 

</SCRIPT>

<BODY> </BODY>

</HTML>
Javascript9.html