In this session, you will learn about: 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: Assigning a regular expression to a variable Using the RegExp object

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. 3

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. 4

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”); 5

Using Regular Expressions in JavaScript (Contd.) The following table lists the some special characters used to define regular expressions. Special Character Function \b Is used to denote a word boundary. \B Is used to denote any other word other than the word provided as the word boundary. \d Is used to denote the occurrence of a single digit between [0-9]. \s Is used to denote a single white space character such as space or tab. \S Is used to denote a single non-white space. [..] Is used to match any character specified within the block brackets. * Is used to denote zero or more occurrences of the preceding character in the string. 6

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 7

Using Regular Expressions in JavaScript (Contd.) The following table lists the some methods to implement regular expression. Method Description RegExp.exec (string) Searches the regular expression in the string passed as parameter and returns the text of the found value. If no match is found, it returns null. RegExp.test (string) Searches the regular expression in the string passed as parameter and returns true if found, false if not found. String.match (RegExp) Matches the string with the regular expression. If the regular expression specifies a g modifier, the method returns an array containing the matches. In the absence of g modifier, it returns just the first match. If no match is found, it returns null. String.search (RegExp) Matches the regular expression with the string and returns the index of the first character where a match is found. If no match is found, it returns -1. String.replace (RegExp,string) Replaces matches with the given string and returns the edited string. String.split (RegExp) Splits the given string into substrings and returns an array containing the substrings. The splitting is done wherever a match is found. 8

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. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG)

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> Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 10

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> Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 11

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 Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG)

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. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 13

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> Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 14

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> Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 15

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. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) 16

Can I add favorites to my Web browser using JavaScript? 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() { Explain with example of ListBox and DropDownList control given SG in Auto Postback Discuss when we set EnableViewState Property to true Explain the difference between postback on self page and postback on crosspage

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> Explain with example of ListBox and DropDownList control given SG in Auto Postback Discuss when we set EnableViewState Property to true Explain the difference between postback on self page and postback on crosspage 18

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"> Explain with example of ListBox and DropDownList control given SG in Auto Postback Discuss when we set EnableViewState Property to true Explain the difference between postback on self page and postback on crosspage

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. Explain with example of ListBox and DropDownList control given SG in Auto Postback Discuss when we set EnableViewState Property to true Explain the difference between postback on self page and postback on crosspage 20

Challenge Child windows use the _____________ object to refer to the window from where they originated. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) Answer: parent

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. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) Answer: action

__________ are used to store information on client-side. Challenge (Contd.) __________ are used to store information on client-side. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) Answer: Cookies

Challenge (Contd.) The ____________ tag can be used to divide a window into several regions, each containing a distinct Web page. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) Answer: <FRAMESET>

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. Show the demo by performing each step to set Web server control properties Explain by example how to manipulate Web server control (refer SG) Answer: src