Document 7830891

Download Report

Transcript Document 7830891 

JavaScript
Making Web pages come alive
Objectives
• Be able to read JavaScript scripts
• Be able to write JavaScript scripts
To See Examples
• Open text editor
• Create HTML page
• Type in each example, save and view with
browser
Static vs. Dynamic
• Static
– page appears exactly as it was encoded,
nothing changes
– only HTML
• Dynamic
– page changes (possibly in response to users
actions)
– Can’t be only HTML
– Scripts
Scripts: server-side vs. client-side
• Server-side
– the first type possible on the Web
– action occurs at the server
• Client-side
– handles user interaction
– generally easier to implement
– may be prepared and implemented offline
– action occurs on the client side (browser)
– JavaScript is the most common example
DHTML
•
•
•
•
HTML-Document description-we did
JavaScript- Client-side interaction-will do
CSS- Style definition-beyond
Dynamic HTML = HTML + CSS + scripts
JavaScript
• Developed by Netscape to be simple,
cross-browser scripting language for Web
• Syntax based on ‘C’ - a good starting point
to learn other programming languages
• JavaScript is not Java
• <script type="text/javascript">
…</script> enclose a JavaScript script
Write()
• JavaScript’s output statement:
document.write (“Text”);
• Inside the <script> tag, we must output
HTML
document.write (“<p>Text<br/>text</p>”);
Hello World
<html>
<head><title>hello javascript</title></head>
<body>
<script >
document.writeln ("Hello, World!");
</script>
</body>
</html>
• Output?
What is the output?
<html>
<head><title>hello javascript</title></head>
<body>
<script >
document.write ("Hello,\n
World");
document.write ("Hello,<br/>2 the
&nbsp;&nbsp;&nbsp;World");
</script>
</body>
</html>
Why?
• Hello, WorldHello,
2 the World
the document.writeln() method preserves any
line breaks in the text string.
JavaScript
• Statements end with ;
– Can often get away with omitting
• Character strings enclosed in “ ” or ‘ ’
• Can include an external source file with
the src attribute :
<script src=“file_name.js”></script>
JavaScript Comments
• // Ignore rest of line
• /*
Ignore everything
enclosed
*/
• Don’t forget to end the comment
Objects
• JavaScript is an Object Oriented
Language.
• Objects are things—nouns
– They have attributes---adjectives
• We call the attributes properties
– They have actions---verbs
• We call the actions methods– use ()
Objects
• Use dot-notation to indicate that a
method or a property belongs to an
object.
• Car analogy
• document.write()
• document.bgColor
• Recall: methods have ()
Objects
• JavaScript objects include the HTML
elements, window, document
• lastModified is a property of the
document object.
JavaScript
• A variable stores a value.
– Declare a variable with the keyword var
• Assignment: variable = value;
• + adds numbers
• + concatenates strings of characters
e.g. “ab” + “cd” is “abcd”
• lastModified is a property of the
document object.
Example
<html>
<head><title>Last Modified</title></head>
<body>
<script>
var date;
date=document.lastModified;
document.writeln ("This page was last modified:“ + date);
</script>
</body>
</html>
• Will automatically update. Output?
Output
This page was last modified: 01/25/2005 12:40:18
• Note:
var date=document.lastModified;
could have been in one line
• See new window 2.html
Window
• The document object is contained within a
window object.
• window has methods:
– Alert ()
– Confirm ()
– Prompt ()
• window is assumed so
• alert () is equivalent to window.alert ()
Alert()
• Alert (“some string”) pops up a message
box containing its string.
• It is a method of the (assumed) window
object.
Alert()
<html>
<head><title>hello alert</title></head>
<body>
<script>
alert ("Hello, World!");
</script>
</body>
</html>
• Output: alert box. Run it to see.
Confirm
• Confirm uses if-else logic. true/false. Can I
assume?
• Declare a variable.
• Confirm returns a value which you assign
to a variable. O.K. button sends true.
Cancel sends false.
• Test the variable:
Confirm
• <script>
var x = confirm ("Are you sure you are
ok?");
if (x)
alert ("Good!");
else
alert ("Too bad");
</script>
Prompt()
Prompt() method returns the text
<script>
var y=prompt
("please enter your name");
document.writeln (“Hello, ” + y);
</script>
Prompt()
•
•
•
•
You assign the result to a variable.
You use the value.
Optional: Second parameter to Prompt()
Is the default value.
Equality
• == tests for equality
• A==B has the value true when A and B
are the same; false otherwise.
• != tests for inequality
Password
<head>
<script >
var guess; var password=“fool”;
guess=prompt(' enter password ');
if (password!=guess)
location=“forbidden.html”;
</script>
</head>
• Why fool? …
Because…
• Password is in source which may be
viewed .
• I must admit that I couldn’t view it!!
Events
• Usually, user actions generate events that
belong to objects.
• mouseover
• load
• click
Event Handlers
• Event handlers-respond to users actions
– onmouseover
– onmouseout
– onload
– onunload
• Event handlers are put inside
corresponding HTML tags.
• Not inside <script>…</script>
Case
onClick="alert ('You clicked the button!');"
• The underlined parts are HTML
• The quoted string is JavaScript
• onClick
– The Java naming convention is easier to read.
– This is fine in HTML, but an error if it occurs in
JavaScript. JavaScript is case sensitive.
HTML is not .
• Please note: Since we have a quoted
string inside another quoted string, we
need both single and double quotes.
Event Handlers
• Most HTML elements have the following event handlers:
– onClick -- the form element is clicked
– onDblClick -- the form element is clicked twice in close
succession
– onMouseDown -- the mouse button is pressed while over the form
element
– onMouseOver -- the mouse is moved over the form element
– onMouseOut -- the mouse is moved away from the form element
– onMouseUp -- the mouse button is released while over the form
element
– onMouseMove -- the mouse is moved
• In JavaScript, these should be spelled in all lowercase
Change Color
<html>
<head><title>Change the Background
Color</title></head>
<body >
<h3><a href="#"
onMouseover="document.bgColor=‘blue';"
onMouseout ="document.bgColor='white';">
Move your cursor over this link to change
background color to blue.</a></h3>
</body> </html>
OnMouseover
<a href="#" onMouseover="alert ('Ouch! I
asked you not to click this link!');">
Don't click this link!</a>
• What’s the first thing you’ll do? 
• Aside: I typed this twice. One worked. One
didn’t. I never figured out difference.
Status (skip)
• The window object has the property
status whose value is displayed in the
status bar.
• Change it only briefly cause need the
info.?
<a href=“#" onMouseover="status='Hi
there!'; return true;"
onMouseout="status=' '; return true;">
Place your mouse here!</a>
Push Button
• Object that has some effect when it is pushed:
e.g. doorbell
except traffic light
• User defined (as opposed to which?)
• Has no default behavior. (what was….)
• May have client side scripts associated with its
event attributes. When an event occurs (e.g., the
user presses the button, releases it, etc.), the
associated script is triggered.
Buttons are contained in forms
window
document
form
text
submit
reset
button
Button
• type="button"
This command declares the input to be a button.
• value="Click Me"
This will be the text people will see on the
button. Write whatever you want your visitors to
see.
• name="button1"
You can give the button a name so you can refer
to it.
Button event handler
<form>
<input type="button" value="See Some
Text" name="button2" onClick="alert
('Some Text');">
</form>
• Recall: window is the assumed object.
Color buttons
<form>
<input type="button" value="Change to
Yellow!" name="buttonY"
onClick="document.bgColor='yellow‘;">
<input type="button" value="Change to
White!" name="buttonW"
onClick="document.bgColor=‘white‘;">
</form>
open
• open( ) is a method of the window object.
• It opens a new window.
open(“URL”);
• You can use it inside an event handler.
• I had to use window.open(). I don’t know
why.
Open
<form>
<input type="button" name="button1"
value ="new" onClick
="window.open('forbidden.html');">
</form>
<a href="#" onClick
="window.open('forbidden.html');">
open sesame</a>
Full featured window
window.open('http://www.blah.com/blah',
‘title','width=400,height=200,toolbar=yes,
location=yes,directories=yes,status=yes,m
enubar=yes,scrollbars=yes,copyhistory=ye
s, resizable=yes') ;
Functions
• A function is a named piece of code that
performs a task. Has ()
• Functions are put in <head> so they are
loaded before the page displays.
• Are executed only when invoked.
• Body enclosed in{ } (called a block)
• May have parameters in () (values used
by the the function to do its task).
Functions
• Methods are similar to functions that
belong to an object.
• Functions are similar to methods that
belong to the script. Placed in head so
they are loaded before they are called.
• An event handler should be very short
– Many handlers call a function to do their job
(delegate).
Examples
• Function_wo_param
• Simple calculator.html
• Bgcolor_buttons_func.html
– On slide, too
• Mixed up
– On slide, too
<! -- bgcolor_buttons what will happen? -->
<html><head>
<script>
function yellow(){document.bgColor='yellow';}
function white(){document.bgColor='white';}
</script>
</head>
<body>
<form>
<input type="button" value="Change toYellow"
name="buttonY“ onClick=“yellow();">
<input type="button" value="Change to White"
name="buttonW“ onClick="white();">
</form>
</body></html>
<! -- mixed up. what will happen? -->
<html><head>
<script>
function yellow(){document.bgColor='yellow';}
function white(){document.bgColor='white';}
</script>
</head>
<body>
<form>
<input type="button" value="Change toYellow"
name="buttonY“ onClick="white()">
<input type="button" value="Change to White"
name="buttonW“ onClick="yellow()">
</form>
</body></html>
Script in Head
<head>
<title>welcome!</title>
<script >
alert (‘Welcome!');
</script>
</head>
• This will display the alert before the page starts
loading. It’ll disappear when page loads. A
function would be called from the body and
executed.
Debugging Your JavaScript
Programs
• Three types of errors:
– Load-time errors (occurs when the script is
loading)
– Run-time errors (occurs when the being
executed)
– Logical errors (free from syntax and structural
mistakes, but result in incorrect results)
Common Mistakes
• You need to debug your program: fix the
mistakes w/o adding new ones.
• Common mistakes include:
– Misspelling a variable name
– Mismatched parentheses or braces
– Mismatched quotes
– Missing quotes
– Using ( instead of [ or {
– Using = in place of ==
Tips for Writing Good JavaScript
Code
• Use good layout to make your code more
readable. Indent command blocks to
make them easier to read and to set them
off from other code
• Use descriptive variable names to indicate
the purpose of your variables
• Be careful how you use uppercase and
lowercase letters in your code, because
JavaScript commands and names are
case-sensitive
Tips for Writing Good JavaScript
Code
• Add comments to your code to document
the purpose of each script
• Initialize all variables at the top of your
script and insert comments describing the
purpose and nature of your variables
• Create customized functions that can be
reused in different scripts. Place your
customized functions in external files to
make them available to your entire Web
site
Summary
• Objects
– Properties
– Methods
•
•
•
•
Variables
Push buttons
Events and handlers-inside HTML tags
functions
Summary
• Given an HTML file containing a script,
you should be able to show the
corresponding web page.
• Given a web page, you should be able to
show the corresponding HTML file.