eg-259:lecture7
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
eg-259:lecture7 [2012/02/17 12:25] – [Exercises] eechris | eg-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 | + | **Contact Hour 10**: To be discussed on Tuesday |
**Lecturer**: | **Lecturer**: | ||
Line 29: | Line 29: | ||
- | ===== Contents of this Lecture | + | ===== Contents of this Session |
Text processing with //regular expressions// | Text processing with //regular expressions// | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
Line 99: | Line 101: | ||
===== Demo ===== | ===== Demo ===== | ||
- | * This [[http:// | + | * We will be using a version of [[http:// |
- | * You can use it to play with regular expressions | + | * There' |
+ | * You can use either of these tools to play with regular expressions. | ||
+ | * Here's the [[http:// | ||
+ | ---- | ||
+ | |||
+ | 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' | ||
+ | |||
+ | 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 ===== | ||
- | |||
- | '' | ||
- | * returns -1 if it fails | ||
- | <code javascript> | ||
- | var str = " | ||
- | var position = str.search(/ | ||
- | /* position is now 6 */ | ||
- | </ | ||
Line 196: | Line 196: | ||
The '' | The '' | ||
+ | ===== 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 ===== | ||
+ | |||
+ | '' | ||
+ | * returns -1 if it fails | ||
+ | <code javascript> | ||
+ | var str = " | ||
+ | var position = str.search(/ | ||
+ | /* position is now 6 */ | ||
+ | </ | ||
Line 215: | Line 234: | ||
// $1 and $2 are both set to " | // $1 and $2 are both set to " | ||
</ | </ | ||
+ | |||
+ | ===== The split function ===== | ||
+ | |||
+ | '' | ||
+ | * Example: | ||
+ | <code javascript> | ||
+ | var str = " | ||
+ | var fruit = str.split(/:/ | ||
+ | // fruit is set to [" | ||
+ | </ | ||
+ | * '' | ||
Line 232: | Line 262: | ||
</ | </ | ||
- | + | ===== Form Validation | |
- | + | ||
- | ===== The split function ===== | + | |
- | + | ||
- | '' | + | |
- | * Example: | + | |
- | <code javascript> | + | |
- | var str = " | + | |
- | var fruit = str.split(/:/ | + | |
- | // fruit is set to [" | + | |
- | </ | + | |
- | * '' | + | |
- | + | ||
- | + | ||
- | + | ||
- | ===== 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 // | + | * usually triggered by // |
* 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: [[/ | + | * 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:// |
---- | ---- | ||
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=" | + | < |
< | < | ||
- | <meta charset=" | + | <meta charset=" |
+ | <meta http-equiv=" | ||
< | < | ||
+ | <meta name=" | ||
+ | |||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | <script src=" | ||
</ | </ | ||
< | < | ||
- | + | | |
- | <form id=" | + | < |
- | <label for=" | + | |
- | <input id=" | + | <p>An example of the use of Regular Expressions for form validation. |
- | <input type=" | + | View source to see the HTML code and use your browser' |
- | </ | + | < |
- | + | | |
- | < | + | </ |
+ | < | ||
+ | | ||
+ | <label for=" | ||
+ | <input id=" | ||
+ | | ||
+ | <input type=" | ||
+ | </ | ||
+ | | ||
+ | |||
+ | <script src="// | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | < | ||
<script src=" | <script src=" | ||
</ | </ | ||
Line 293: | Line 331: | ||
*/ | */ | ||
- | function | + | function |
// 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(/ | var ok = num.search(/ | ||
- | if(ok == 0) | + | if (ok === 0) { |
return true; | return true; | ||
- | 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(" | var phoneNumber = document.getElementById(" | ||
- | if(tst_phone_num(phoneNumber.value)) { | + | if (test_phone_number(phoneNumber.value)) { |
return true; | return true; | ||
} else { | } else { | ||
alert(" | alert(" | ||
+ | // prevent submission | ||
return false; | return false; | ||
- | // prevents submission | ||
} | } | ||
}; | }; | ||
Line 321: | Line 361: | ||
Test code for '' | Test code for '' | ||
<code javascript> | <code javascript> | ||
- | // Test tst_phone_num -- commented out in production | + | // Test test_phone_number |
- | tests = [" | + | var test_phone_number_test = function() { |
- | for( i = 0; i < tests.length; | + | var tests = [" |
- | var tst = tst_phone_num(tests[i]); | + | for (i = 0; i < tests.length; |
- | 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(" | + | } else { |
+ | console.error(" | ||
+ | } | ||
} | } | ||
- | } | + | }; |
</ | </ | ||
- | ===== Regular Expression Validator in HTML5 ===== | + | ===== HTML5 Pattern Attribute |
+ | |||
+ | A regular expression validator that is built-in to HTML5 | ||
* New '' | * New '' | ||
Line 339: | Line 383: | ||
* E.g. | * E.g. | ||
<code javascript> | <code javascript> | ||
- | <input id=" | + | <input id=" |
+ | placeholder=" | ||
</ | </ | ||
< | < | ||
Line 347: | Line 392: | ||
===== HTML5 Version of the Phone Number Validator ===== | ===== HTML5 Version of the Phone Number Validator ===== | ||
- | * [[/ | + | * [[http:// |
---- | ---- | ||
Line 353: | Line 398: | ||
<code html> | <code html> | ||
< | < | ||
- | < | + | < |
- | Uses the new HTML5 pattern attribute | + | A function tst_phone_num is defined and tested. |
- | to validate | + | This function checks the validity of phone |
- | --> | + | number |
- | <html lang=" | + | --> |
+ | < | ||
< | < | ||
- | <meta charset=" | + | <meta charset=" |
+ | <meta http-equiv=" | ||
< | < | ||
+ | <meta name=" | ||
+ | |||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | <link rel=" | ||
+ | |||
+ | <script src=" | ||
</ | </ | ||
< | < | ||
- | + | | |
- | <form id=" | + | < |
- | <label for=" | + | <p>An example of the use of Regular Expressions for form validation. View source to see the code.</ |
- | <input id=" | + | < |
- | | + | < |
- | < | + | </ |
- | <input type=" | + | < |
- | </ | + | this can be used instead of JavaScript for form validation.</ |
- | | + | <p>In production, you would normally need to provide a JavaScript fallback for browsers that don't yet support the < |
+ | <!-- No need for onsubmit validator now --> | ||
+ | | ||
+ | <label for=" | ||
+ | <input id=" | ||
+ | | ||
+ | title=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | | ||
+ | |||
+ | <script src="// | ||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
<!-- Look no scripts! --> | <!-- Look no scripts! --> | ||
</ | </ | ||
Line 431: | Line 500: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
Line 459: | Line 530: | ||
===== Exercises ===== | ===== Exercises ===== | ||
- | Write, test and debug (if necessary) HTML files that include JavaScript scripts for the following problems. When required to write functions, you must include a | + | |
+ | Write, test and debug (if necessary) HTML files that include JavaScript scripts for the following problems. When required to write functions, you must include a script to test the function with at least two different data sets. | ||
- //Input//: A text string, using '' | - //Input//: A text string, using '' | ||
- //Input//: A text string, using '' | - //Input//: A text string, using '' | ||
Line 495: | Line 568: | ||
[[eg-259: | [[eg-259: | ||
- |
eg-259/lecture7.txt · Last modified: 2013/02/19 12:29 by eechris