JavaScript Making Web pages come alive
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
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 characterse.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,menubar=yes,scrollbars=yes,copyhistory=yes, 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.
Related Documents
