ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:lecture9

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:lecture9 [2013/02/20 14:46] – [Handling Events from Textbox and Password Elements] eechriseg-259:lecture9 [2013/02/26 08:33] (current) – [Previous Example] eechris
Line 58: Line 58:
   * What purpose does the //navigator// object have?    * What purpose does the //navigator// object have? 
  
 +===== Previous Example =====
  
 +Used HTML event attributes
 +  * [[http://localhost:4567/eg-259/examples/lecture8/radio_click.html|radio_click.html]]
 +  * [[http://jsfiddle.net/cpjobling/9HVQk/4/|jsFiddle]] (http://jsfiddle.net/cpjobling/9HVQk/4/)
  
 ===== Handling Events from Button Elements (more) ===== ===== Handling Events from Button Elements (more) =====
Line 405: Line 409:
 ---- ----
  
-  * Code: +  * Code HTML: 
-<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture9/pswd_chk.html javascript|pswd_chk.html>+<code html> 
 +<!DOCTYPE html> 
 +<!-- pswd_chk.html 
 +     An example of input password checking, using the onsubmit event 
 +--> 
 +<html class="no-js" lang="en"> 
 +  <head> 
 +    <meta charset="utf-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 +    <title>Illustrate password checking</title> 
 +    <meta name="viewport" content="width=device-width"> 
 + 
 +    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 +    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 
 +    <link rel="stylesheet" href="css/main.css"> 
 + 
 +    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
 +  </head> 
 +  <body> 
 +    <div class="container"> 
 +      <h1> Illustrate password checking </h1> 
 +      <h2> Choose a Password </h2> 
 +      <form id = "myForm"  method="post" action = "/cgi-bin/echo_params.cgi"> 
 +        <p> 
 +          <label for="initial">Your password: </label> 
 +          <input type="password"  name="password" id="password" /> 
 +          <label for="second">Verify password: </label> 
 +          <input type="password"  name="password_confirmation" id="password_confirmation" /> 
 +        </p> 
 +        <p> 
 +          <input class="btn" type = "reset"  name = "reset" /> 
 +          <input class="btn btn-primary" type = "submit"  name = "submit" /> 
 +        </p> 
 +      </form> 
 + 
 +    </div> <!-- /container --> 
 + 
 +    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 +    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> 
 + 
 +    <script src="js/vendor/bootstrap.min.js"></script> 
 +    <script src="js/plugins.js"></script> 
 +    <!-- Any external JS loaded here --> 
 +    <script src="pswd_chk.js"></script> 
 +  </body> 
 +</html> 
 +</code> 
 +  * Code JavaScript: 
 +<code javascript> 
 +// The event handler for password checking 
 +  
 +var chkPasswords = function () { 
 +  var password = document.getElementById("password"); 
 +  var confirmation = document.getElementById("password_confirmation"); 
 +  if (password.value === "") { 
 +    alert("You did not enter a password \n" + "Please enter one now"); 
 +    password.focus(); 
 +    return false; 
 +  } 
 +  if (password.value !== confirmation.value) { 
 +    alert("The two passwords you enterd are not the same \n" + "Please re-enter both now"); 
 +    password.focus(); 
 +    password.select(); 
 +    return false; 
 +  } else { 
 +    return true; 
 +  } 
 +}; 
 + 
 +// Set submit button onsubmit property to the event handler 
 + 
 +document.getElementById("password_confirmation").onblur = chkPasswords; 
 +document.getElementById("myForm").onsubmit = chkPasswords; 
 +</code>
   * Result:    * Result: 
 {{eg-259:l9-pswd_check.png|Password Check}} {{eg-259:l9-pswd_check.png|Password Check}}
    
- 
  
  
Line 421: Line 497:
     * The event handler will be triggered by the change event of the text boxes for      * The event handler will be triggered by the change event of the text boxes for 
     * If an error is found in either, an alert message is produced and both focus and select are called on the text box element      * If an error is found in either, an alert message is produced and both focus and select are called on the text box element 
-  * Here is the result: [[/eg-259/examples/lecture9/validator.html|validator.html]]+  * Here is the result: [[http://localhost:4567/eg-259/examples/lecture9/validator.html|validator.html]]
  
 ---- ----
-  * Code: +  * Code HTML: 
-<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture9/validator.html javascript|validator.html>+<code html> 
 +<!DOCTYPE html> 
 +<!-- validator.html 
 +An example of input validation using the change and submit 
 +events 
 +--> 
 +<html class="no-js" lang="en"> 
 +  <head> 
 +    <meta charset="utf-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 +    <title>Illustrate form input validation</title> 
 +    <meta name="viewport" content="width=device-width"> 
 + 
 +    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 +    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 
 +    <link rel="stylesheet" href="css/main.css"> 
 + 
 +    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
 +  </head> 
 +  <body> 
 +    <div class="container"> 
 +      <h1>Illustrate form input validation</h1> 
 +      <h2>Customer Information</h2> 
 +      <form method="post" action = "/cgi-bin/echo_params.cgi"> 
 +        <Label for="custName">Name</Label> 
 +        <div class="control-group"> 
 +          <input class="span4" type = "text"  id = "custName" name="custName"  
 +                 placeholder="Last name, First name, Middle initial"> 
 +          <span class="help-block">Please enter your name as 'Last name, First name, Middle initial'.</span> 
 +        </div> 
 +        <div class="control-group"> 
 +          <label for="phone">Phone number</label> 
 +          <input class="span4" type = "text"  id = "phone" name="phone"  
 +               placeholder="123-456-7890"> 
 +          <span class="help-block">Please enter your telephone number matching pattern '123-456-7890'.</span> 
 +        </div> 
 +        <p> 
 +          <input class="btn" type = "reset"  id = "reset" /> 
 +          <input class="btn btn-primary" type = "submit"  id = "submit" /> 
 +        </p> 
 +    </form> 
 + 
 +    </div> <!-- /container --> 
 + 
 +    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 +    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script> 
 + 
 +    <script src="js/vendor/bootstrap.min.js"></script> 
 +    <script src="js/plugins.js"></script> 
 +    <!-- Any external JS loaded here --> 
 +    <script src="validator.js"></script> 
 +  </body> 
 +</html> 
 +</code> 
 +  * Code JavsScript: 
 +<code javascript> 
 +// The event handler function for the name text box 
 + 
 +var chkName = function() { 
 +  var myName = document.getElementById("custName"); 
 + 
 +  // Test the format of the input name 
 +  //  Allow the spaces after the commas to be optional 
 +  //  Allow the period after the initial to be optional 
 + 
 +  var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/); 
 + 
 +  if (pos != 0) { 
 +    alert("The name you entered (" + myName.value + ") is not in the correct form. \n" +  
 +          "The correct form is: " + "Last name, First name, Middle initial \n" +  
 +          "Please go back and fix your name"); 
 +    myName.focus(); 
 +    myName.select(); 
 +    return false; 
 +  } else 
 +    return true; 
 +}; 
 + 
 +// The event handler function for the phone number text box 
 + 
 +var chkPhone = function() { 
 +  var myPhone = document.getElementById("phone"); 
 + 
 +  // Test the format of the input phone number 
 + 
 +  var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/); 
 + 
 +  if (pos != 0) { 
 +    alert("The phone number you entered (" + myPhone.value + ") is not in the correct form. \n" +  
 +          "The correct form is: ddd-ddd-dddd \n" +  
 +          "Please go back and fix your phone number"); 
 +    myPhone.focus(); 
 +    myPhone.select(); 
 +    return false; 
 +  } else 
 +    return true; 
 +}; 
 + 
 +var validate_form = function() { 
 +  return (chkName() && chkPhone()); 
 +}; 
 + 
 + 
 +// Set form element object properties to their 
 +// corresponding event handler functions 
 + 
 +document.getElementById("custName").onchange = chkName; 
 +document.getElementById("phone").onchange = chkPhone; 
 +document.getElementById("submit").onclick = validate_form; 
 +</code>
    * Result:    * Result:
 {{eg-259:l9-validator.png|Validator in Action}} {{eg-259:l9-validator.png|Validator in Action}}
    
- 
 ===== The DOM 2 Event Model ===== ===== The DOM 2 Event Model =====
  
Line 497: Line 681:
 ===== DOM 2 Example ===== ===== DOM 2 Example =====
  
-  * A revision of //validator//, using the DOM 2 event model: [[/eg-259/examples/lecture9/validator2.html|validator2.html]]+  * A revision of //validator//, using the DOM 2 event model: [[http://localhost:4567/eg-259/examples/lecture9/validator2.html|validator2.html]]. 
 +  * Note that this doesn't quite do the right thing as the submit button can be pressed and invalid data can be sent to the server. 
 +  * A solution for this is left as an exercise.
  
 ---- ----
-  * Code: +  * Code HTML is almost the same as for previous example. Only JavaScript definition of the event registration and the event handlers changes when updating to DOM 2 events. 
-<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture9/validator2.html javascript|validator2.html>+<code javascript> 
 + // validator2.js 
 + //     An example of input validation using the change and submit  
 + //     events, using the DOM 2 event model 
 + 
 + //     Note: This document does not work with IE6 
 + 
 +var chkName = function(event) { 
 + 
 +  // Get the target node of the event 
 +  var myName = event.currentTarget; 
 + 
 +  // Test the format of the input name 
 +  //  Allow the spaces after the commas to be optional 
 +  //  Allow the period after the initial to be optional 
 + 
 +  var pos = myName.value.search(/^[A-Z][a-z]+, ?[A-Z][a-z]+, ?[A-Z]\.?$/); 
 + 
 +  if (pos != 0) { 
 +    alert("The name you entered (" + myName.value + ") is not in the correct form. \n" +  
 +          "The correct form is: " + "Last name, First name, Middle initial \n" +  
 +          "Please go back and fix your name"); 
 +    myName.focus(); 
 +    myName.select(); 
 +  } 
 +}; 
 + 
 +// The event handler function for the phone number text box 
 + 
 +var chkPhone = function(event) { 
 +   
 +  var myPhone = event.currentTarget; 
 + 
 +  // Test the format of the input phone number 
 + 
 +  var pos = myPhone.value.search(/^\d{3}-\d{3}-\d{4}$/); 
 + 
 +  if (pos != 0) { 
 +    alert("The phone number you entered (" + myPhone.value + ") is not in the correct form. \n" +  
 +          "The correct form is: ddd-ddd-dddd \n" +  
 +          "Please go back and fix your phone number"); 
 +    myPhone.focus(); 
 +    myPhone.select(); 
 +  } 
 +}; 
 + 
 + 
 +// Set form element object properties to their 
 +// corresponding event handler functions 
 + 
 +// Get the DOM addresses of the elements and register  
 +//    the event handlers 
 + 
 +var customerNode = document.getElementById("custName"); 
 +var phoneNode = document.getElementById("phone"); 
 + 
 +customerNode.addEventListener("change", chkName, false); 
 +phoneNode.addEventListener("change", chkPhone, false); 
 + 
 +// Challenge ... how would you check both name and telephone number on submit? 
 +</code>
  
 <note> <note>
 DOM 0 and DOM 2 event handling can be mixed in a document DOM 0 and DOM 2 event handling can be mixed in a document
 </note> </note>
- 
  
  
Line 522: Line 767:
     * The ''appName'' property has the browser’s name      * The ''appName'' property has the browser’s name 
     * The ''appVersion'' property has the version number      * The ''appVersion'' property has the version number 
-  * Example: [[/eg-259/examples/lecture9/navigate.html|navigate.html]]+  * Example: [[http://localhost:4567/eg-259/examples/lecture9/navigate.html|navigate.html]]
  
 ---- ----
Line 533: Line 778:
  
   * Code:    * Code: 
-<source http://eng-hope.swan.ac.uk/eg-259/examples/lecture9/navigate.html javascript|navigate.html>+<code html> 
 +<!DOCTYPE html> 
 +<!-- navigate.html 
 +An example of using the navigator object 
 +--> 
 +<html lang="en"> 
 +  <head> 
 +    <meta charset="utf-8" /> 
 +    <title> Using navigator </title> 
 +    <script> 
 +      // The event handler function to display the browser name 
 +      //  and its version number 
 + 
 +      function navProperties() { 
 +        alert("The browser is: " + navigator.appName + "\n" +  
 +              "The version number is: " + navigator.appVersion + "\n"); 
 +      } 
 +    </script> 
 +  </head> 
 +  <body onload = "navProperties()"></body> 
 +</html> 
 +</code>
  
 ===== Summary of This Lecture ===== ===== Summary of This Lecture =====
eg-259/lecture9.1361371585.txt.gz · Last modified: 2013/02/20 14:46 by eechris