1 / 25

In this session, you will learn about: Using Regular Expressions in JavaScript

Objectives. In this session, you will learn about: Using Regular Expressions in JavaScript. Using Regular Expressions in JavaScript. Regular expressions are expressions that enable you to match patterns in JavaScript. A regular expression can be define in two ways:

johnnier
Download Presentation

In this session, you will learn about: Using Regular Expressions in JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Objectives • In this session, you will learn about: • Using Regular Expressions in JavaScript

  2. Using Regular Expressions in JavaScript • Regular expressions are expressions that enable you to match patterns in JavaScript. • A regular expression can be definein two ways: • Assigning a regular expression to a variable • Using the RegExp object

  3. Using Regular Expressions in JavaScript (Contd.) • Assigning a regular expression to a variable: • The syntax for assigning a regular expression to a variable is: • var <var_name> = /<pattern>/ • In the preceding syntax: • <var_name> is the name of the variable that stores the regular expression. • <pattern> is the text string that needs to be matched.

  4. Using Regular Expressions in JavaScript (Contd.) • Modifiers: • are characters that indicate various options that can be used with a pattern to make the pattern more specific. • A global modifier ensures that all the occurrences of a pattern are matched in the specified text string. • Using modifiers in a regular expression is optional. • The following code uses modifiers: • var exjava = /java/gi; • In the preceding code: • g specifies the regular expression is global • i specifies the regular expression in not case sensitive.

  5. Using Regular Expressions in JavaScript (Contd.) • Using the RegExp object: • RegExp is a global object and is used to create an instance of an object with the help of the new keyword. • The following code creates a regular expression by using the RegExp object: • var reg = new RegExp(“java”); • The following code use the g modifier to make the regular expression global: • var reg = new RegExp("java”,“g”);

  6. Using Regular Expressions in JavaScript (Contd.) • The following table lists the some special characters used to define regular expressions.

  7. Using Regular Expressions in JavaScript (Contd.) • You can use methods of a string object or of a RegExp object to perform several task such as: • searching for the regular expression in a string • replacing the occurrences of regular expression in a string with a given string • splitting a string

  8. Using Regular Expressions in JavaScript (Contd.) • The following table lists the some methods to implement regular expression.

  9. Best Practices • Before submitting a form containing critical data, you can invoke the confirm() method of the window object to accept a confirmation from the user that the form should be submitted. If the user decides not to submit the form, the user can cancel the submission. The confirm() message box can also be used to display the information that the user entered into the form to verify that it is correct. • The code for invoking the confirm() method can be written in the onSubmit event handler of the form. The onSubmit event handler needs to return a boolean value. The submission of the form will depend on the return value of the event handler.

  10. Best Practices (Contd.) • The following example illustrates the use of the confirm() method while submitting a form: • <HTML> • <HEAD> • <SCRIPT LANGUAGE=JAVASCRIPT> • function verify() • { • var msg = "You have specified your name as " • msg += document.forms[0].fName.value + " " + • document.forms[0].lName.value; • msg += ". Do you want to submit the form?"; • var response = confirm(msg); • return (response); • }</SCRIPT>

  11. Best Practices (Contd.) • <BODY> • <FORM ACTION="welcome.htm" onSubmit="return verify()"> • First Name: <INPUT TYPE=TEXT NAME="fName" size=30><BR> • Last Name: <INPUT TYPE=TEXT NAME="lName" size=30><BR> • <INPUT TYPE=SUBMIT VALUE="Submit"> • </FORM> • </BODY> • </HTML>

  12. Tips and Tricks • Suppose, you have created a Web page, index.html that accepts the name of a user and opens another Web page, welcome.html. You want that the welcome.html page should display a welcome message containing the name of the user. To implement this, you need to transfer the information entered by the user on the index.html page to the welcome.html page. • To transfer information entered by the user on one Web page to another Web page, you can use query strings. A query string is the portion of the URL that contains data to be passed to other Web pages and applications. An example of a URL containing a query string is: • http://www.yourDomain.com/welcome.html?fName=Alice

  13. Tips and Tricks (Contd.) • In the preceding URL, the portion of the URL that appears after the question mark (?) is the query string. The query string in the preceding example specifies that the information entered in the fName field of the source page is Alice. • When the source page is submitted, the URL is used to open the welcome.html page and query string present in the URL is used to pass the information entered by the user to the target page.

  14. Tips and Tricks (Contd.) • The target page can retrieve the information in the query string by using the search property of the location object. The following code illustrates the use of query strings to transfer data from the index.html Web page to the welcome.html Web page: • index.html • <HTML> • <HEAD> • <SCRIPT> • function f1() • { • var username=prompt("Enter your name"); • location.href="welcome.html?" + username; • }</SCRIPT></HEAD>

  15. Tips and Tricks (Contd.) • <BODY onLoad="f1()"> • </BODY></HTML> • welcome.html • <HTML><HEAD> • <SCRIPT> • function getData() • { • var name=location.search.substring(1,location.search.length); • document.write ("Welcome " + name) • } • </script></head> • <body onLoad="getData()"> • </body></html>

  16. Tips and Tricks (Contd.) • When the index.html file is loaded in the browser, the user is prompted to enter his/her first name. This name is then passed to the welcome.html file by using a query string. The getData() function of the welcome.html file extracts the string after the question mark in a variable and then displays the Welcome message on the screen.

  17. FAQs • Can I add favorites to my Web browser using JavaScript? • Yes, you can add favorites to your Web browser using JavaScript. To do so, you need to invoke the Add Favorite dialog box by calling the window.external.AddFavorite() method. This method takes two parameters, the URL of the Web site and the bookmark text. The bookmark text is the text that appears for the Web site in the favorite list. Only Internet Explorer 4.0 and later versions support this method. • The following code illustrates how you can enable addition of favorites to a Web browser: • <HTML> • <HEAD> • <TITLE>Home Page</TITLE> • <SCRIPT> • function addToFavorites() {

  18. FAQs (Contd.) • url = document.forms[0].URL.value; • bookmark = document.forms[0].bookmark.value; • window.external.addFavorite(url, bookmark); • } • </SCRIPT> • </HEAD> • <BODY> • <FORM> • URL: <INPUT TYPE="text" name="URL"><BR> • Bookmark: <INPUT TYPE="text" name="bookmark"><BR> • <INPUT TYPE="button" VALUE="Add to Favorites" onClick="addToFavorites()"> • </FORM> • </BODY> • </HTML>

  19. FAQs (Contd.) • How do I create a select menu that links to different pages depending upon user selection? • To create a select menu that links to different pages depending upon user selection: • Set the value property of the options to store the names of HTML pages. • Trap the onChange event of the select object. • Get the index of the selected item. • Set the location property of the window object to the value of the selected item. • The following code creates a select menu that links to different Web pages: • <form><select • onChange="if(this.selectedIndex!=0) • self.location=this.options[this.selectedIndex].value">

  20. FAQs (Contd.) • <option value="" selected>Select a page • <option value="aboutus.htm">About Us • <option value="OurMission.htm">Our Mission • <option value="Products.htm">Products • <option value="Careers.htm">Careers • </select> • </form> • You can use both absolute URLs, such as http://www.mydomain.com/aboutus.html and the relative URLs, such as aboutus.html. • The following figure displays the output of the preceding code. • When you select any option from the drop-down menu, you are directed to a new page.

  21. Challenge • Child windows use the _____________ object to refer to the window from where they originated. • Answer: • parent

  22. Challenge (Contd.) • The _________ attribute of the form object is used to specify the name of the server-side file that contains the code that will process the data submitted by the form. • Answer: • action

  23. Challenge (Contd.) • __________ are used to store information on client-side. • Answer: • Cookies

  24. Challenge (Contd.) • The ____________ tag can be used to divide a window into several regions, each containing a distinct Web page. • Answer: • <FRAMESET>

  25. Challenge (Contd.) • The ________ property of the Image object can be used to specify the URL of the image that needs to be loaded in the Image object. • Answer: • src

More Related