ICCT Wiki

User Tools

Site Tools

Trace: • lectures • lecture7
eg-259:lecture7

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:lecture7 [2012/02/20 17:07] – [Using Regular Expressions in JavaScript] eechriseg-259:lecture7 [2013/02/19 12:29] (current) – [Demo] eechris
Line 9: Line 9:
 ====== Text Processing with Regular Expressions ====== ====== Text Processing with Regular Expressions ======
  
-**Contact Hour 10**: To be discussed on Tuesday 21st February, 2012.+**Contact Hour 10**: To be discussed on Tuesday 19th February, 2013.
  
 **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]]. **Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].
Line 29: Line 29:
  
  
-===== Contents of this Lecture =====+===== Contents of this Session =====
  
 Text processing with //regular expressions// Text processing with //regular expressions//
Line 35: Line 35:
   * [[eg-259:lecture7#text_manipulation_in_javascript|Pattern Matching with Regular Expressions]]    * [[eg-259:lecture7#text_manipulation_in_javascript|Pattern Matching with Regular Expressions]] 
   * [[eg-259:lecture7#using_regular_expressions_in_javaScript|Using Regular Expressions in JavaScript]]   * [[eg-259:lecture7#using_regular_expressions_in_javaScript|Using Regular Expressions in JavaScript]]
-  * [[eg-259:lecture7#another_example|Another Example]]+  * [[eg-259:lecture7#form_validation|Form Validation]] 
 +  * [[eg-259:lecture7#html5_pattern_attribute|HTML5 Pattern Attribute]]
   * [[eg-259:lecture7#debugging_javascript|Debugging JavaScript]]   * [[eg-259:lecture7#debugging_javascript|Debugging JavaScript]]
  
Line 103: Line 104:
   * There's another slightly more powerful one, a [[http://www.cuneytyilmaz.com/prog/jrx/|clever piece]] of JavaScript ((See http://www.cuneytyilmaz.com/prog/jrx/ for original version.)) magic was developed by Cüneyt Yýlmaz    * There's another slightly more powerful one, a [[http://www.cuneytyilmaz.com/prog/jrx/|clever piece]] of JavaScript ((See http://www.cuneytyilmaz.com/prog/jrx/ for original version.)) magic was developed by Cüneyt Yýlmaz 
   * You can use either of these tools to play with regular expressions.   * You can use either of these tools to play with regular expressions.
 +  * Here's the [[http://localhost:4567/eg-259/examples/lecture7/cheat.html|set of examples]] that I will work through((We won't have time for them all, but you can look at them yourself later)).
  
 ---- ----
Line 232: Line 234:
 // $1 and $2 are both set to "rab"  // $1 and $2 are both set to "rab" 
 </code> </code>
 +
 +===== The split function =====
 +
 +''split(parameter)''
 +   * Example:
 +<code javascript>
 +var str = "grapes:apples:oranges"
 +var fruit = str.split(/:/) 
 +// fruit is set to ["grapes", "apples", "oranges"]
 +</code>
 +  * ''%%":"%%'' and ''/:/'' are equivalent 
  
  
Line 249: Line 262:
 </code> </code>
  
- +===== Form Validation =====
- +
-===== The split function ===== +
- +
-''split(parameter)'' +
-   * Example: +
-<code javascript> +
-var str = "grapes:apples:oranges" +
-var fruit = str.split(/:/)  +
-// fruit is set to ["grapes", "apples", "oranges"] +
-</code> +
-  * ''%%":"%%'' and ''/:/'' are equivalent  +
- +
- +
- +
-===== Another Example =====+
  
 Common use of JavaScript is to check validity of user inputs on forms Common use of JavaScript is to check validity of user inputs on forms
   * avoids a trip to server that would result in an error page    * avoids a trip to server that would result in an error page 
   * error handling is kept local    * error handling is kept local 
-  * usually triggered by //submission// button +  * usually triggered by //submission// button((form's ''onsubmit'' event))
   * error message generated locally by writing into document object.    * error message generated locally by writing into document object. 
-  * This example defines a function that could be used in a registration page to check that a phone number is valid (using US conventions!) HTML5 Markup: [[/eg-259/examples/lecture7/forms_check.html|forms_check.html]] Script: [[/eg-259/examples/lecture7/forms_check.js|forms_check.js]]+  * This example defines a function that could be used in a registration page to check that a phone number is valid (using US conventions!) HTML5 Markup: [[http://jsfiddle.net/cpjobling/rwcce/2/|fiddle with it]] [[http://localhost:4567/eg-259/examples/lecture7/forms_check.html|forms_check.html]] Script: [[http://localhost:4567/eg-259/examples/lecture7/forms_check.js|forms_check.js]]
  
 ---- ----
Line 282: Line 280:
 This function checks the validity of phone This function checks the validity of phone
 number input from a form number input from a form
---> +-->  
-<html lang="en">+<html class="no-js" lang="en">
   <head>   <head>
-    <meta charset="utf-8" />+    <meta charset="utf-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title> Phone number tester </title>     <title> Phone number tester </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>   </head>
   <body>   <body>
-     +    <div class="container"> 
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi"> +      <h1>Phone Number Tester</h1> 
-      <label for="phone_number">Phone number: </label> + 
-      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444" /> +      <p>An example of the use of Regular Expressions for form validation.  
-      <input type="submit" onclick="return validate();" name="Submit" value="Submit" /> +         View source to see the HTML code and use your browser's development tools to view the JavaScript.</p> 
-    </form> +      <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four  
-     +         digits. The regular expression for this is <code>/\d{3}-\d{4}/</code>. 
-    <!-- Best practice guidelines suggest that you load scripts first -->+      </p> 
 +      <p>The example uses the DOM 0 event model which will be discussed in the next session.</p> 
 +      <form id="phone" method="post" action="/cgi-bin/echo_form.cgi" onsubmit="validate();"> 
 +        <label for="phone_number">Phone number: </label> 
 +        <input id="phone_number" type="text" name="phone_number" placeholder="444-4444"  
 +               title="Please enter phone number using the pattern ddd-dddd."/> 
 +        <input type="submit" name="Submit" value="Submit" /> 
 +      </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> 
 +    <!-- The actual forms_check script -->
     <script src="forms_check.js"></script>     <script src="forms_check.js"></script>
   </body>   </body>
Line 310: Line 331:
  */  */
  
-function tst_phone_num(num) {+function test_phone_number(num) {
  
   // Use a simple pattern to check the number of digits and the dash   // Use a simple pattern to check the number of digits and the dash
Line 316: Line 337:
   var ok = num.search(/\d{3}-\d{4}/);   var ok = num.search(/\d{3}-\d{4}/);
  
-  if(ok == 0)+  if (ok === 0) {
     return true;     return true;
-  else+  } 
 +  else {
     return false;     return false;
 +  } 
 +  
 }// end of function tst_phone_num }// end of function tst_phone_num
  
 /* Actual form validation. Called onclick */ /* Actual form validation. Called onclick */
-var validate = function () {+var validate = function() {
   var phoneNumber = document.getElementById("phone_number");   var phoneNumber = document.getElementById("phone_number");
-  if(tst_phone_num(phoneNumber.value)) {+  if (test_phone_number(phoneNumber.value)) {
     return true;     return true;
   } else {   } else {
     alert("Phone number is invalid. Please use format ddd-dddd.");     alert("Phone number is invalid. Please use format ddd-dddd.");
 +    // prevent submission 
     return false;     return false;
-    // prevents submission 
   }   }
 }; };
Line 338: Line 361:
 Test code for ''tst_phone_num'' Test code for ''tst_phone_num''
 <code javascript> <code javascript>
-// Test tst_phone_num -- commented out in production +// Test test_phone_number 
-tests = ["444-5432", "444-r432", "44-1234"] +var test_phone_number_test = function() { 
-for( i = 0; i < tests.length; i++) { +  var tests = ["444-5432", "444-r432", "44-1234"]; 
-  var tst = tst_phone_num(tests[i]); +  for (i = 0; i < tests.length; i++) { 
-  if(tst) { +    var test = test_phone_number(tests[i]); 
-    console.log(tests[i] + " is a legal phone number <br />"); +    if (test) { 
-  } else { +      console.log(tests[i] + " is a legal phone number <br />"); 
-    console.error("Error in tst_phone_num: " + tests[i] + " is not a legal phone number <br />");+    } else { 
 +      console.error("Error in test_phone_number: " + tests[i] + " is not a legal phone number <br />"); 
 +    }
   }   }
-}+};
 </code> </code>
-===== Regular Expression Validator in HTML5 =====+===== HTML5 Pattern Attribute ===== 
 + 
 +A regular expression validator that is built-in to HTML5
  
   * New ''pattern'' attribute can be used on some modern browsers   * New ''pattern'' attribute can be used on some modern browsers
Line 356: Line 383:
   * E.g.    * E.g. 
 <code javascript> <code javascript>
-<input id="phone_number" type="text" name="phone_number" placeholder="444-4444" pattern="\d{3}-\d{4}" />+<input id="phone_number" type="text" name="phone_number"  
 +       placeholder="444-4444" pattern="\d{3}-\d{4}" />
 </code>  </code> 
 <html> <html>
Line 364: Line 392:
 ===== HTML5 Version of the Phone Number Validator ===== ===== HTML5 Version of the Phone Number Validator =====
  
-  * [[/eg-259/examples/lecture7/forms_check_html5.html|forms_check_html5.html]]+  * [[http://localhost:4567/eg-259/examples/lecture7/forms_check_html5.html|forms_check_html5.html]]
  
 ---- ----
Line 370: Line 398:
 <code html> <code html>
 <!DOCTYPE html> <!DOCTYPE html>
-<!-- forms_check_html5.html +<!-- forms_check.html 
-Uses the new HTML5 pattern attribute +A function tst_phone_num is defined and tested. 
-to validate phone number +This function checks the validity of phone 
---> +number input from a form 
-<html lang="en">+-->  
 +<html class="no-js" lang="en">
   <head>   <head>
-    <meta charset="utf-8" />+    <meta charset="utf-8"> 
 +    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title> Phone number tester (HTML5)</title>     <title> Phone number tester (HTML5)</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>   </head>
   <body>   <body>
-     +    <div class="container"> 
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi"> +      <h1>Phone Number Tester (HTML5)</h1> 
-      <label for="phone_number">Phone number: </label> +      <p>An example of the use of Regular Expressions for form validation. View source to see the code.</p> 
-      <input id="phone_number" type="text" name="phone_number"  +      <p>Phone numbers should match the pattern 3 digits followed by a dash followed by four digits. The regular expression for this is 
-             pattern="\d{3}-\d{4}" placeholder="444-4444" /> +        <code>/\d{3}-\d{4}/</code>. 
-      <!-- No need for onclick validator now --> +      </p> 
-      <input type="submit" name="Submit" value="Submit" /> +      <p>HTML5 provides a new form attribute <em>pattern</em> whose value is a regular expression (without the slashes). When supported, 
-    </form> +        this can be used instead of JavaScript for form validation.</p> 
-    +      <p>In production, you would normally need to provide a JavaScript fallback for browsers that don't yet support the <em>pattern</em> attribute.</p> 
 +      <!-- No need for onsubmit validator now --> 
 +      <form id="phone" method="post" action="http://www.cpjobling.me/cgi-bin/echo_form.cgi"> 
 +        <label for="phone_number">Phone number: </label> 
 +        <input id="phone_number" type="text" name="phone_number"  
 +               pattern="\d{3}-\d{4}" placeholder="444-4444"  
 +               title="Please enter phone number using the pattern ddd-dddd."/> 
 +        <input type="submit" name="Submit" value="Submit" /> 
 +      </form> 
 +    </div> <!-- end of 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>
     <!-- Look no scripts! -->     <!-- Look no scripts! -->
   </body>   </body>
Line 448: Line 500:
  
   * [[eg-259:lecture7#text_manipulation_in_javascript|Pattern Matching with Regular Expressions]]    * [[eg-259:lecture7#text_manipulation_in_javascript|Pattern Matching with Regular Expressions]] 
-  * [[eg-259:lecture7#another_example|Another Example]]+  * [[eg-259:lecture7#using_regular_expressions_in_javaScript|Using Regular Expressions in JavaScript]] 
 +  * [[eg-259:lecture7#form_validation|Form Validation]] 
 +  * [[eg-259:lecture7#html5_pattern_attribute|HTML5 Pattern Attribute]]
   * [[eg-259:lecture7#debugging_javascript|Debugging JavaScript]]   * [[eg-259:lecture7#debugging_javascript|Debugging JavaScript]]
  
eg-259/lecture7.1329757667.txt.gz · Last modified: 2012/02/20 17:07 by eechris