ICCT Wiki

User Tools

Site Tools

Trace:
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
Next revisionBoth sides next revision
eg-259:lecture7 [2012/02/20 17:07] – [Using Regular Expressions in JavaScript] eechriseg-259:lecture7 [2013/02/12 20:10] – [Form Validation] 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 [[/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 289: Line 287:
   </head>   </head>
   <body>   <body>
-     +    <h1>Phone Number Tester</h1> 
-    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi">+    : 
 +    <form id="phone" method="post" action="http://eng-hope.swan.ac.uk/cgi-bin/echo_form.cgi" 
 +          onsubmit="validate()">
       <label for="phone_number">Phone number: </label>       <label for="phone_number">Phone number: </label>
-      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444" /> +      <input id="phone_number" type="text" name="phone_number" placeholder="444-4444"  
-      <input type="submit" onclick="return validate();" name="Submit" value="Submit" />+              title="Please enter phone number using the pattern ddd-dddd."/> 
 +      <input type="submit" name="Submit" value="Submit" />
     </form>     </form>
          
-    <!-- Best practice guidelines suggest that you load scripts first -->+    <!-- Best practice guidelines suggest that you load scripts last -->
     <script src="forms_check.js"></script>     <script src="forms_check.js"></script>
   </body>   </body>
Line 349: Line 350:
 } }
 </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 359:
   * 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 368:
 ===== 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 374:
 <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 476:
  
   * [[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.txt · Last modified: 2013/02/19 12:29 by eechris