Introduction to Writing Programs: Using JavaScript

1
Introduction to Writing ProgramsUsing JavaScript

• CSE100 Computer Technology and its Impact on
  SocietyLaboratory Class 10Matt
  HuenerfauthNovember 2003

Some material from Joe Burns http//www.htmlgoodie
s.com/primers/jsp/ http//www.webteacher.com/javas
cript/
2
What is JavaScript?

• JavaScript is a simple programming language used
  often in web pages for dynamic content.
• It can make a web page whose contents arent set
  in stone when the original author designs the
  page.
• It can make web pages that have cool interactive
  features like buttons or menus or changing
  content.
• Only vaguely related to Java. Really its own
  separate thing.
• Netscape created open standard (a definition of
  this language that created a standard format for
  writing programs in JavaScript so anyone could
  build a web browser capable of running it).

3
JavaScript Example 1

• http//www.seas.upenn.edu/cse100/labs/10/
• Click on the link for example1.html
• You will look at a web page that contains a
  little program in Internet Explorer. It will do
  something interactive when you look at the page.
• What is JavaScript doing?

4
Lets look at the code (the program)

• On the View Menu, click Source.
• A notepad window will open up with the contents
  of the page.
• Lets save it before we do anything to it
• File Save
• Put it in My Computer Hard Disk C
• Give it the name example1.htm
• Now look at the program

5
The Code

• lthtmlgt
• ltbodygt
• ltSCRIPT LANGUAGE"javascript"gt
• lt!-- Begining of JavaScript -
• / This script is intended to take information
• from the user and place it upon the page /
• var user_name prompt ("Write your name in the
  box below","Write it here")
• document.write("Hello " user_name ". Welcome
  to my page!")
• // - End of JavaScript--gt
• lt/SCRIPTgt
• lt/bodygt

Tell the Browser that Java Script program begins.
Run it!
A Comment to remind us later what this does.
Starts and ends with / /
Variable Place to store information.
Creates little box to ask user to type in some
text.
strings together text to show.
Inserts some new text into the web page to be
displayed in Internet Explorer.
End of the JavaScriptProgram
6
Now Edit it

• Change the page (in notepad) to do a similar
  javascript function.
• Make it ask a different question, and give a
  different reply.
• You can store the information the person types in
  using a variable. Then you can use this variable
  and some text in quotes to string together a
  message to write to the webpage.
• Make sure you save your changes.
• Open the file in Internet Explorer to see it. My
  Computer Hard Disk C example1.htm

7
Example 2

• http//www.seas.upenn.edu/cse100/labs/10/
• Click on the link for example2.html
• The web page will open up in Internet Explorer.
• What does this page do?

8
Lets look at the code for example 2.

• On the View Menu, click Source.
• A notepad window will open up with the contents
  of the page.
• Lets save it before we do anything to it
• File Save
• Put it in My Computer Hard Disk C
• Give it the name example2.htm
• Now look at the program

9
The Example 2 Javascript Code

• ltHTMLgt
• ltHEADgt
• ltSCRIPT LANGUAGE"JavaScript"gt
• lt!-- Beginning of JavaScript
• / These functions change the color of the
  document background /
• function red()
• document.bgColor'red'
• function green()
• document.bgColor'green'
• // - End of JavaScript - --gt
• lt/SCRIPTgt
• lt/HEADgt

Tell the Browser that Java Script begins
Comment to remind us later what this does. Starts
and ends with / /
Define a function (a small pre-made ready-to-go
piece of a program that we dont want to run
immediately but we want to describe what to do
now and remember it) and give it the name red()
Later when we want to run this small pre-made
piece of the program, the code will look up the
definition of red() and will do what we write
here. It will set the Background Color to red.
What does this do?
End JavaScript
10
The Non-Javascript Part of the Page
This part of the page is not Javascript its
normal HTML like we saw before. But it will use
the functions we defined in the Javascript. This
particular HTML tag ltformgt starts a form (part of
a web page where you can fill out information.)

• ltBODYgt
• ltformgt
• ltinput type"button" name"Button1" value"RED"
  onclick"red()"gt
• ltinput type"button" name"Button2" value"GREEN"
  onclick"green()"gt
• lt/formgt
• lt/BODYgt
• lt/HTMLgt

Add a button named Button1 with RED written
on it, define what it does.
When we click it, run the red() function we made.
What does this do?
End form
11
Now Edit it

• Change the page (in notepad).
• Add another function to change the background
  color.
• You pick the color! ?
• Add another button to go with the function.

12
More Edits

• What if we wanted to bit a little evil
• What if we wanted to confuse the user or to trick
  them somehow?
• How about we confuse the user by switching the
  functions the colors go to.
• Now the buttons wont work as advertised.
• If we were computer hackers who wanted to trick
  them into giving us their SS or to buy something
  with their credit card, we could use similar
  tricks. Its easy!

13
Confusing the user

• Just switch around the value parts of the
  buttons. Replace the RED with GREEN etc.
• Now save the page and look at it.
• The buttons dont work as expected.

14
(No Transcript)
15
Lots and lots of functions

• What if we knew we were going to make lots of
  buttons Wouldnt it be nice if we had a single
  general purpose function that we could use so
  that we didnt need to copy, paste, and change
  the color() functions each time?
• We could call this function changecolor()
• Maybe we could just tell this function what color
  to make the background when we run it.
• So, we send the function a message when we run it
  that tells it what color we want.

16
A single color-changing function

• function changecolor(color)
• What do we put here?
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

17
Defining the function and the button.

• function changecolor(color)
• What do we put here?
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

18
Defining the function and the button.

• function changecolor(color)
• What do we put here?
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

19
Defining the function and the button.

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

20
Defining the function and the button.

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

21
When we run the function

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

The color is a variable!When we run the
functionand put red in parentheses, we run the
function withthe variable color giventhe value
red. So, this is just like if we wrote color
red
22
When we run the function

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

color red
23
When we run the function

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt

24
Defining the function and the button.

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor(green)"gt

25
Running the function

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor(green)"gt

26
Running the function

• function changecolor(color)
• document.bgColorcolor
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor('red')"gt
• ltinput type"button" name"Button1" value"Red"
  onclickchangecolor(green)"gt