ICCT Wiki

User Tools

Site Tools

Trace: • lectures
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/17 12:26] – [Exercises] 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//
  
   * [[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]]
  
Line 99: Line 101:
 ===== Demo ===== ===== Demo =====
  
-  * This [[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  +  * We will be using a version of [[http://regexpal.com/|RegexPal]] to illustrate regular expressions.  
-  * You can use it to play with regular expressions +  * 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. 
 +  * 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)).
  
 +----
 +
 +The tools illustrated are both based on the JavaScript regular expression engine which itself is based on the Perl Common Regular Expression library that is used in many modern scripting languages, programmer's editors and even the Apache web server.
 +
 +There is a version of RegexPal on the Blackboard site that you can download and which gives you access to the global search as a switchable option.
  
  
Line 124: Line 133:
  
  
-===== The search function ===== 
- 
-''search (pattern)'' returns the position in the object string of the pattern (position is relative to zero);    
-  * returns -1 if it fails  
-<code javascript> 
-    var str = "Gluckenheimer"; 
-    var position = str.search(/n/); 
-    /* position is now 6 */ 
-</code>  
  
  
Line 196: Line 196:
 The ''x'' modifier tells the matcher to ignore whitespace in the pattern (allows comments in patterns) The ''x'' modifier tells the matcher to ignore whitespace in the pattern (allows comments in patterns)
  
 +===== Using Regular Expressions in JavaScript =====
 +
 +In JavaScript we can use regular expressions to:
 +
 +  * Search for text patterns in a string
 +  * Replace patterns in a string
 +  * Split a string based on some defined delimiter pattern
 +  * Match patterns found in a string and do something with each match
 +
 +The most common use of these is in form validation.
 +===== The search function =====
 +
 +''search (pattern)'' returns the position in the object string of the pattern (position is relative to zero);   
 +  * returns -1 if it fails 
 +<code javascript>
 +    var str = "Gluckenheimer";
 +    var position = str.search(/n/);
 +    /* position is now 6 */
 +</code> 
  
  
Line 215: 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 232: 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 265: 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 293: 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 299: 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 321: 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 339: 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 347: 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 353: 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 431: 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]]
  
Line 497: Line 568:
  
 [[eg-259:lecture6|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture8|Next Lecture]] [[eg-259:lecture6|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture8|Next Lecture]]
- 
eg-259/lecture7.1329481602.txt.gz · Last modified: 2012/02/17 12:26 by eechris