Upload
claire-phelps
View
276
Download
7
Embed Size (px)
Citation preview
CSE 3345 1
Regular Expressions
Regex Links
• MDN Regular Expressions
• Regexpal
CSE 3345 3
Regular Expressions
• Patterns used to match character combinations in strings.
• In JS, regular expressions can be used with the RegExp object and with the String object.
CSE 3345 4
Regex Use Cases
• Find and extract data from a document.
• Validate content supplied in a form before it is submitted.– Telephone numbers– SSN– Email addresses– Anything that follows a pattern
CSE 3345 5
Regex Syntax
• Regular expressions are an extremely powerful tool implemented in most languages; however…
• Regular expressions have their own syntax and usage of special characters.
• Difficult to remember if you use them infrequently.
CSE 3345 6
Regex Special Characters: ^
Regex: ^AMatches: “Aaaann Animal Named Alex”Doesn’t match: “an A”
Character Meaning
^ Matches the beginning of input
CSE 3345 7
Regex Special Characters: $
Regex: t$Matches: “Today I ate a tart”Doesn’t match: “tart is here”
Character Meaning
$ Matches the end of input
CSE 3345 8
Regex Special Characters: *
Regex: a*Matches: “aaaaaaaaaaaaaallred”Matches: “tart”Doesn’t match: “tom”
//Star and Question Mark Characters are useful for the patterns with some variation.
Regex: a*mMatches: “tom”*Novice users often overuse/misuse this character.*
Character Meaning
* Matches the preceding character 0 or more times.
CSE 3345 9
Regex Special Characters: +
Regex: 1+Matches: “911”Matches: “912”Doesn’t match: “8675309”
Character Meaning
+ Matches the preceding character 1 or more times.
CSE 3345 10
Regex Special Characters: ?
Regex: l?Matches: “lily”Matches: “llog”Doesn’t match: “Ron”
Character Meaning
? Matches the preceding character 0 or 1 more times.
CSE 3345 11
Regex Special Characters: .
Regex: .nMatches: “nay, an apple is on the tree”Doesn’t match: “nay, an apple is on the tree”
Character Meaning
. (The decimal point) matches any single character except the newline character.
CSE 3345 12
Regex Special Characters: |
Regex: red|blueMatches: “hand me that blue crayon”Matches: “hand me that red crayon”Doesn’t match: “hand me that black crayon”
Character Meaning
| Matches one pattern or the other
CSE 3345 13
Regex Syntax: {n}
Regex: a{2}Matches: “Caandy”Matches: “Caaandy”Doesn’t match: “Candy”
Syntax Meaning
{n} Where n is a positive number. Matches exactly n occurrences.
CSE 3345 14
Regex Syntax: {n,m}
Regex: a{1,3}Matches: “Candy”Matches: “Caaandy”Matches: “Caaaandy”Doesn’t match: “Cndy”
Syntax Meaning
{n,m} Where n and m are positive integers. Matches at least n and at most m occurrences of the preceding character. When either n or m is zero, it can be omitted.
CSE 3345 15
Regex Syntax: [xyz]
Regex: [a-d]Matches: “candy”Matches: “brisket”
Syntax Meaning
[xyz] Character set. Matches any one of the enclosed characters.
CSE 3345 16
Regex Syntax: [xyz]
Regex: [0-5]Matches: “0123456789”Matches: “543210”
Syntax Meaning
[xyz] Character set. Matches any one of the enclosed characters.
CSE 3345 17
Regex and JavascriptMethod Description
test A RegExp method that tests for a match in a string. It returns true or false.
match A String method that executes a search for a match in a string. It returns an array of information or null on a mismatch.
search A String method that tests for a match in a string. It returns the index of the match, or -1 if the search fails.
replace A String method that executes a search for a match in a string, and replaces the matched substring with a replacement substring.
split A String method that uses a regular expression or a fixed string to break a string into an array of substrings.
CSE 3345 18
Sample Regex
• To use a regex in javascript, surround the regex with forward slashes
• For example, I have the regex [a-z]. To use it in javascript I would do the following.
var regex = /[a-z]/; //matches any lower case character that is in the alphabet a-z.
var string = "tom";
string.match(regex); // ["t"]
CSE 3345 19
Advanced Regex FlagsRegular expression have four optional flags that allow for global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regex.
CSE 3345 20
Advanced Regex Flags Example
"tom".match(/T/); // null
//Using the i flag you can perform case insensitive searches.
"tom".match(/T/i); // ["t"/
CSE 3345 21
Regex Challenge
• Write a regular expression that will only accept a string that contains
• lower and upper case alphabet characters• Underscore characters• Must have an inclusive length between 8 and
32.
CSE 3345 22
XMLHttpRequest Reference Links
• MDN
• Jibbering.com
• OpenJS XMLHttpRequest Example
CSE 3345 23
AJAX Quickfacts
• Using the XMLHttpRequest API is what is known as AJAX.
• Asynchronous Javascript and XML.
• Used to send data back and forth from client to server without leaving a webpage.
CSE 3345 24
AJAX Quick facts
• AJAX is the combination of HTML, CSS, and Javascript.
• Makes sending HTTP request fast and easy.
• Wasn’t very popular until Microsoft’s Outlook Web Access (2000) and Google’s Google Maps(2005) and Gmail(2004).
CSE 3345 25
How AJAX Works
CSE 3345 26
Creating an XMLHttpRequest()
• Older browsers, IE5 and IE6, use a different method.
• Newer browsers do the following:
var request = new XMLHttpRequest();
CSE 3345 27
Initialize a request
• Use the open() method to initialize a request.
//open() interface
void open(DOMString method, DOMString url, optional boolean async, optional DOMString user, optional DOMString password);
CSE 3345 28
open() : Required Parameters
1. method - The HTTP method to use, such as "GET", "POST", "PUT", "DELETE", etc.
2. url - The URL to which to send the request.
CSE 3345 29
open() : Optional Parameters
3. async - An optional boolean parameter, defaulting to true, indicating whether or not to perform the operation asynchronously. If this value is false, the send()method does not return until the response is received.
4. user - The optional user name to use for authentication purposes; by default, this is an empty string.
5. password - The optional password to use for authentication purposes; by default, this is an empty string.
CSE 3345 30
open() examplevar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);
CSE 3345 31
Send the requestvar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);request.send();
CSE 3345 32
Handling a response message
• When the server receives the client request, it will perform any necessary actions and return back to the client a response message.
• In most cases, the only handling required is to check the response status code, and if everything is okay access the responseText.
CSE 3345 33
Handling a response messagevar request = new XMLHttpRequest();request.open("GET", "www.google.com", false);request.send();
if (request.status === 200) { //200 is an HTTP status code. console.log(request.responseText); //print resp txt to console}
CSE 3345 34
Response Messages attributes/methods
1. status – returns HTTP Status code
2. statusText – returns HTTP status text
3. getResponseHeader() – get specified header from response message.
4. getAllResponseHeaders() – get all headers from response message.
CSE 3345 35
Handling a response message
5. responseType – returns the format the response is in: "arraybuffer", "blob", "document", "json", and "text“.
6. response – returns of the response entity body.
7. responseText – returns the text of the response entity body.
8. responseXML – returns a DOM object of an xml document.
CSE 3345 36
Your Turn
• Using this fiddle as basis, make an XMLHttpRequest to http://lyle.smu.edu/~craley/3345/http/showResponse.php.
CSE 3345 37
Using Query Parameters
• If you recall, GET and POST requests can send a key-value name pair along with an HTTP request.
• This is useful for adding query parameters to your request.
CSE 3345 38
Query Parameters Example
A typical example would look like this:
name=Tim&lastname=Drake&age=17&alias=Robin
CSE 3345 39
GET Request
• When sending a GET request, you combine the url with query parameters separated by a question mark.
http://www.google.com?name=Tim&lastname=Drake&age=17&alias=Robin
CSE 3345 40
GET Request with Query Parms in JS
var url = 'http://www.google.com';var parms = 'name=Tim&lastname=Drake&age=17&alias=Robin';request.open('GET', url+"?"+parms, false);request.send();
CSE 3345 41
POST Request
• When sending a POST request, the HTTP Message includes the query parameters as apart of the message body.
• Additional information about the query parameters are sent as header info:– Content type– Content length– Etc
CSE 3345 42
POST Request with Query Parms in JS
var url = 'http://www.google.com';var parms = 'name=Tim&lastname=Drake&age=17&alias=Robin';request.open('POST', url, false);
//Send the proper header information along with the request.
//Depending on the data type (xml, json, etc) you would modify the content type header.request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");request.send(parms);
See jsFiddle
CSE 3345 43
Full XMLHttpRequest Example
• http://lyle.smu.edu/~craley/3345/http/httpRequest.html
CSE 3345 44
Synchronous Requests
• So far we’ve only seen synchronous requests.
• These requests pause code execution and wait until a response is given from the server before continuing.
• Depending on the request you could be paused for a long time.
• Not ideal for practical purposes.
CSE 3345 45
Asynchronous Requests
• These requests provide a callback function that is triggered when the server responds.
• Code execution isn’t paused.
• This is what you should be using in your code.
CSE 3345 46
Async XMLHttpRequest Examplevar url = "http://www.google.com";var request = new XMLHttpRequest();
request.onreadystatechange = function() {//readyState === 0 : UNSENT. Means open() hasn't been called//readyState === 1 : OPENED. Means send() hasn't been called//readyState === 2 : HEADERS_RECEIVED. Means send() has been called //and headers have been received//readyState === 3 : LOADING. Means downloading //readyState === 4 : DONE. The operation is complete
if (request.readyState === 4) { document.body.innerHTML = request.responseText; }}request.open('GET', url, true); request.send();
See jsFiddle
CSE 3345 47
XMLHttpRequest Bummer
• Unless you have been given permission, you cannot successfully make an HTTP Request to another server.– Cross Domain Request
• Work arounds for this are– Use a different scripting language (PHP, Python)– Use JSONP– If you have access to the different sever, you can get
Cross Domain Request permission.
CSE 3345 48
JSON Reference Links
• JSONLint – a JSON validator
• MDN
• JSON.org
CSE 3345 49
JSON Quick facts
• JSON – javascript object notation
• JSON is a collection of name value pairs
• Is a data-exchange format.
• Closely resembles Javascript syntax.
• Can parse JSON into a JS object.
CSE 3345 50
Hello World JSON Example
{ “fname" : “bruce" }
1. All JSON data starts and ends with a curly brace or square brace2. The curly brace is what encapsulates the data into an Object.3. After all, JSON stands for Javascript Object Notation.
Object
CSE 3345 51
Hello World JSON Example
{ “fname" : “bruce" }
name value
pair
CSE 3345 52
Hello World JSON Example
{ “fname" : “bruce" }
name value
pair
The name portion of the pair must ALWAYS be a String.
CSE 3345 53
Hello World JSON Example
{ “fname" : “bruce" }
valuename
pair
The value portion of the pair can be several different types.
CSE 3345 54
Value types
1. numbers2. booleans3. Strings4. null5. arrays (ordered sequences of values)
6. objects (string-value mappings) composed of these values (or of other arrays and objects).
CSE 3345 55
JSON Example
{ "age": 21, "name": "Sandra Dee", "alive": false}
• It is necessary to separate each pair with a comma. Your JSON will be invalid if you don’t.
CSE 3345 56
JSON Array Example{ "scores": [ 100, 89, 99, 75]}
• An array is an ordered collection of values.
• An array begins with a [ (left bracket) and ends with ] (right bracket).
• Values are separated by a , (comma).
CSE 3345 57
Object in JSON
• Just like typical Object-Oriented Programming, you can have objects inside of objects
{ “pizza” : {
“name” : “The Heart Attack”, “id” : 20121,“toppings” : [ “Pepperoni”, “Cheese”, “Chili” ],“price” : 19.99
}}
CSE 3345 58
JSON Example
{ "type": "document", "students": [ "tom", "sally", "joe" ], "class room": 112, "teach": "Hank McCoy“, “fulltime” : false}
CSE 3345 59
Dissect the JSON Data{ "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}
CSE 3345 60
Create a JSON Objectvar class = { "type": "document", "students": [ "tom", "sally", "joe" ], "class room": 112, "teach": "Hank McCoy"};
CSE 3345 61
Navigating a JSON Objectvar json = { "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}
JSON Objects are just Javascript Objects,therefore, its easy to access pairs inside the object.
To access a pair, use the pair’s name as an attribute of the object to access the value.
CSE 3345 62
Navigating a JSON Objectvar json = { "type": "document", "students": [ { "name": "tom", "age": 18 }, { "name": "sally", "age": 18 }, { "name": "joe", "age": 17 } ], "class room": 112, "teacher": "Hank McCoy", "fulltime": false}
json.type; // “document”json.students[0].name; // “tom”json.students[0].age; // 18json.students[1].name; // “sally”json.students.length; // 3json[“class room”]; // 112json.teacher; // “Hank McCoy”json.fulltime; // false
CSE 3345 63
JSON Methods
• JSON.stringify() to convert object to JSON string
• JSON.parse() to convert JSON string to JS Object.
CSE 3345 64
JS Object JSON JS Object//Create a javascript Objectvar foo = {};foo.bar = "something";foo.baz = 7;
//Converts JS Object into a JSON stringvar json = JSON.stringify(foo); //"{"bar":"something","baz": 7}“
//Converts JSON string back into JS Objectjson = JSON.parse(json);console.log(json.bar); // “something”console.log(json.baz); // 7
CSE 3345 65
Your turn
• Use AJAX to fetch the following JSON: http://lyle.smu.edu/~craley/3345/http/drink_genie/supplies.json
• Print out to the console the JSON data for all pairs whose name equals quantity.