1 / 56

JavaScript

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

smisty
Download Presentation

JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Making Web pages come alive

  2. Objectives • Be able to read JavaScript scripts • Be able to write JavaScript scripts

  3. To See Examples • Open text editor • Create HTML page • Type in each example, save and view with browser

  4. 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

  5. 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

  6. DHTML • HTML-Document description-we did • JavaScript- Client-side interaction-will do • CSS- Style definition-beyond • Dynamic HTML = HTML + CSS + scripts

  7. 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

  8. Write() • JavaScript’s output statement: document.write (“Text”); • Inside the <script> tag, we must output HTML document.write (“<p>Text<br/>text</p>”);

  9. Hello World <html> <head><title>hello javascript</title></head> <body> <script > document.writeln ("Hello, World!"); </script> </body> </html> • Output?

  10. 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>

  11. Why? • Hello, WorldHello,2 the    World the document.writeln() method preserves any line breaks in the text string.

  12. 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>

  13. JavaScript Comments • // Ignore rest of line • /* Ignore everything enclosed */ • Don’t forget to end the comment

  14. 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 ()

  15. 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 ()

  16. Objects • JavaScript objects include the HTML elements, window, document • lastModified is a property of the document object.

  17. 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.

  18. 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?

  19. 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

  20. 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 ()

  21. Alert() • Alert (“some string”) pops up a message box containing its string. • It is a method of the (assumed) window object.

  22. Alert() <html> <head><title>hello alert</title></head> <body> <script> alert ("Hello, World!"); </script> </body> </html> • Output: alert box. Run it to see.

  23. 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:

  24. Confirm • <script> var x = confirm ("Are you sure you are ok?"); if (x) alert ("Good!"); else alert ("Too bad");</script>

  25. Prompt() Prompt() method returns the text <script> var y=prompt ("please enter your name");document.writeln (“Hello, ” + y); </script>

  26. Prompt() • You assign the result to a variable. • You use the value. • Optional: Second parameter to Prompt() • Is the default value.

  27. Equality • == tests for equality • A==B has the value true when A and B are the same; false otherwise. • != tests for inequality

  28. Password <head> <script > var guess; var password=“fool”; guess=prompt(' enter password '); if (password!=guess) location=“forbidden.html”; </script> </head> • Why fool? …

  29. Because… • Password is in source which may be viewed . • I must admit that I couldn’t view it!!

  30. Events • Usually, user actions generate events that belong to objects. • mouseover • load • click

  31. Event Handlers • Event handlers-respond to users actions • onmouseover • onmouseout • onload • onunload • Event handlers are put inside corresponding HTML tags. • Not inside <script>…</script>

  32. 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.

  33. 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

  34. 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>

  35. 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.

  36. 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>

  37. 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.

  38. Buttons are contained in forms

  39. 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.

  40. Button event handler <form> <input type="button" value="See Some Text" name="button2" onClick="alert ('Some Text');"> </form> • Recall: window is the assumed object.

  41. 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>

  42. 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.

  43. 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>

  44. 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') ;

  45. 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).

  46. 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).

  47. Examples • Function_wo_param • Simple calculator.html • Bgcolor_buttons_func.html • On slide, too • Mixed up • On slide, too

  48. <! -- 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>

  49. <! -- 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>

  50. 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.

More Related