CS125 Spring 2014 Interim JavaScript (a dialect of ECMAScript) JavaScript is an object-based scripting language. It works with the objects associated with a web page: the window, the document it contains, and the elements in the document (such as forms, images, hyperlinks, etc.) JavaScript was originally developed by Netscape under the name LiveScript, and, was renamed JavaScript after Netscape and Sun Microsystems started collaborating (JavaScript and Java are two completely different programming languages). Common uses of JavaScript: • To display a message box, status messages, the current date, etc. • To edit and validate form information • To create a new window with a specified size and screen position • To create image rollovers • To perform calculations So, each browser contains both a rendering engine and a JavaScript interpreter. 10-1
CS125 Spring 2014 Interim Coding JavaScript JavaScript statements can be coded on a web page in different ways: 1. As the value of an attribute within an HTML element 2. As a separate element within the web page using the <script> tag 3. In a separate file Since JavaScript is used to provide behaviors to a web page, it is a good idea to separate the behaviors from the structure and presentation of the page. However, it is very common to see JavaScript code within web pages. Example using the <script> element: <body> ... <script> When does this JavaScript code get window.alert("Welcome to Our Site"); executed? </script> ... </body> 10-2
CS125 Spring 2014 Interim DOM: The Document Object Model An object is a thing or entity: browser window, button, web page or “document” A property is a characteristic or attribute of an object: • document.bgcolor • document.lastModified • myimage.src A method is an action or command given to an object: • document.write() • myform.submit() The DOM , a part of which is shown on the right, defines every object and element on a web page in a hierarchical structure. 10-3
CS125 Spring 2014 Interim The write() method of the document object This method generates a text string that is inserted into the web page at the place where the script appears. <body> <h3>What comes next was generated by some JavaScript code</h3> <script> document.write( "<em>Hello!</em>" ); </script> <h3>What comes before was generated by some JavaScript code</h3> </body> So, how is that any different from: <body> <h3>What comes next was generated by some JavaScript code</h3> <em>Hello!</em> <h3>What comes before was generated by some JavaScript code</h3> </body> Well... 10-4
CS125 Spring 2014 Interim DHTML: A trivial example The JavaScript code: new Date() creates a new object called a Date object that represents the day and time when the object was created. So, when the result of this code is printed, that is, when it is given as an argument to the write() method, it will will yield a string representation of the current time: <body> <h3>What comes next was generated by some JavaScript code</h3> <script> document.write( new Date() ); </script> <h3>What comes before was generated by some JavaScript code</h3> </body> 10-5
CS125 Spring 2014 Interim Reacting to events So far, all of the code we have written gets executed when the page is loaded. But we can make our page react to user actions. JavaScript can be configured to perform actions when events occur. An event is generated by the browser after something interesting happens, such as the user’s clicking or moving the mouse. Other events are a “page load” and a “page unload.” For your page to react to an event, you must write an event handler , that is, a piece of code that gets executed only when the event it handles takes place. Event description Name of event handler mouse is clicked onclick mouse is moved over object onmouseover mouse is moved away from object onmouseout page is loaded onload page is unloaded onunload form is submitted onsubmit 10-6
CS125 Spring 2014 Interim Coding event handlers In HTML: • the event handler’s name is coded as an attribute of an HTML tag • the value of the attribute contains the JavaScript code in double quotes (as always for attribute values) Example: Display an alert box when the mouse is placed over a hyperlink. <a href="home.html" onmouseover="window.alert(’Click to go home’)">Home</a> Now, what is wrong with this JavaScript code? <a href="home.htm" onmouseover="document.write(’Click to go home’)">Home</a> 10-7
CS125 Spring 2014 Interim A few JavaScript constructs • Variable A placeholder for a value: var x = 99; • Prompt A pop-up window to get input from the user: or just x = window.prompt(’How old are you?’); x = prompt(’How old are you?’); • Arithmetic operators Addition, subtraction, multiplication, division, etc.: x = y * z; • Comparison operators Equality ( == ), less than, less than or equal, etc.: x == 99 // not a complete statement • IF statement A statement that gets executed only if some condition is true: if ( x==99 ) { ... } • Function A sequence of statements that is named and can be executed at any time simply by calling it: Function definition: function doSomething() { ... } Function call: if ( x==99 ) { doSomething(); } 10-8
CS125 Spring 2014 Interim JavaScript example: No functions <body> <h1>Rendered BEFORE the script</h1> <script> var unitCost = prompt(’How much is that?’); var howMany = prompt(’How many of them do you want?’); var total = unitCost * howMany; alert("Your total is $" + total ); var cash = 100; var change = cash - total; if (change > 0) { alert("Your change is $" + change); } if (change == 0) { alert("Thank you for your business!"); } if (change < 0) { alert("Sorry, you cannot afford it."); } </script> <h1>Rendered AFTER the script </h1> </body> </html> 10-9
CS125 Spring 2014 Interim JavaScript function example <head> ... <script> function checkout() { var unitCost = prompt(’How much is that?’); var howMany = prompt(’How many of them do you want?’); var total = unitCost * howMany; alert("Your total is $" + total ); var cash = 100; var change = cash - total; if (change > 0) { alert("Your change is $" + change); } if (change == 0) { alert("Thank you for your business!"); } if (change < 0) { alert("Sorry, you cannot afford it."); } } </script> </head> <body> <button type="button" onclick="checkout();">Ready to check out?</button> </body> </html> 10-10
CS125 Spring 2014 Interim JavaScript function example #2 <script> function compute() { var x = document.getElementById("x").value; document.getElementById("xsquared").value= x * x; } </script> </head> <body> <form action="#"> <table> <tr><td>x = </td> <td><input type="text" id="x"></td> </tr> <tr> <td colspan="2"><input type="button" value="Compute Square" onclick="compute();"> </td> </tr> <tr><td>x² = </td> <td><input type="text" id="xsquared"></td> </tr> </table> </form> </body> 10-11
CS125 Spring 2014 Interim JavaScript image rollover example <head> ... <style> #vase { display: block; margin: auto; width: 500px; } </style> </head> <body> <img id="vase" src="rubin_vase1.gif" alt="Rubin Vase" onmouseover="document.getElementById(’vase’).src = ’rubin_vase2.gif’;" onmouseout="document.getElementById(’vase’).src = ’rubin_vase1.gif’;" > </body> 10-12
CS125 Spring 2014 Interim JavaScript form validation example <head> <link rel="stylesheet" href="order.css"> <script> function validateForm() { if ( document.getElementById("phone").value == "" ) { alert("We cannot process your order without a phone number."); return false; } else { return true; } } </script> </head> <body> <form action="http://www.uwosh.edu/cgi-bin/mailto.cgi" method="post" onsubmit= "return validateForm();"> <input type="hidden" name="to" value="furcyd@uwosh.edu"> ... <table> <tr><td colspan="2" class="blue centered">Dave’s Pizza - Order Form</td></tr> <tr><td>Phone number:</td> <td><input name="phone" id="phone" type="text" size="15" maxlength="12"> </td> </tr> ... </body> 10-13
Recommend
More recommend
