eg-259:lecture7
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-259:lecture7 [2012/02/17 12:25] – [Exercises] eechris | eg-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 | + | **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 [[/ | ||
+ | ---- | ||
+ | |||
+ | 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 272: | Line 287: | ||
</ | </ | ||
< | < | ||
- | + | | |
- | <form id=" | + | : |
+ | <form id=" | ||
+ | onsubmit=" | ||
<label for=" | <label for=" | ||
- | <input id=" | + | <input id=" |
- | <input type=" | + | title=" |
+ | <input type=" | ||
</ | </ | ||
| | ||
- | <!-- Best practice guidelines suggest that you load scripts | + | <!-- Best practice guidelines suggest that you load scripts |
<script src=" | <script src=" | ||
</ | </ | ||
Line 332: | Line 350: | ||
} | } | ||
</ | </ | ||
- | ===== Regular Expression Validator in HTML5 ===== | + | ===== HTML5 Pattern Attribute |
+ | |||
+ | A regular expression validator that is built-in to HTML5 | ||
* New '' | * New '' | ||
Line 339: | Line 359: | ||
* E.g. | * E.g. | ||
<code javascript> | <code javascript> | ||
- | <input id=" | + | <input id=" |
+ | placeholder=" | ||
</ | </ | ||
< | < | ||
Line 347: | Line 368: | ||
===== HTML5 Version of the Phone Number Validator ===== | ===== HTML5 Version of the Phone Number Validator ===== | ||
- | * [[/ | + | * [[http:// |
---- | ---- | ||
Line 353: | Line 374: | ||
<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 476: | ||
* [[eg-259: | * [[eg-259: | ||
- | * [[eg-259: | + | * [[eg-259: |
+ | * [[eg-259: | ||
+ | * [[eg-259: | ||
* [[eg-259: | * [[eg-259: | ||
Line 459: | Line 506: | ||
===== 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 544: | ||
[[eg-259: | [[eg-259: | ||
- |
eg-259/lecture7.txt · Last modified: 2013/02/19 12:29 by eechris