Scribd
Upload
19 views62 pages

Regxcss

Study with me

Uploaded by

janhavi1292006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
19 views62 pages

Regxcss

Study with me

Uploaded by

janhavi1292006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 62
Unit 5 Regular Expression, Rollover and Frames Marks: 14 (R-2, U-6, A-6) Course Outcome: Create interactive web pages using regular expressions for validations. Unit Outcome: 1) Compose relevant regular expression for the given character pattern search 2) Develop JavaScript to implement validations using the given regular expression, 3) Create frame based on the given problem 4) Create window object a per the given problem. 5) Develop JavaScript for creating rollover effect for the given situation. Topics and Sub-topics: 5.1 Regular Expression 5.1.1 What is Regular Expression: 5.1.2 Language of Regular Expression 5.1.3 Finding Non-Matching Character 5.1.4 Entering a Range of Character 5.1.5 Matching Digits and Non-digits 5.1.6 Matching Punctuation and Symbols 5.1.7 Matching Words 5.1.8 Replace Text using a Regular Expression 5.1.9 Returned the Match Character 5.1.10 Regular Expression Object Properties 5.2 Frames 5.2.1 Create a frame 5.2.2 Invisible borders of frame 5.2.3 Calling a child window 5.2.4 Changing a content and focus of a child window 5.2.5 Writing to a child window 5.2.6 Accessing elements of another child window. 53 Rollover 5.3.1Creating rollover 5.3.2 Text Rollover 5,3.3 multiple actions for rollover 5.3.4 more efficient rollover A regular expression is an object that describes a pattern of characters. The JavaScript RegExp class represents regular expressions, and both String and RegEx define methods that use reyuler expressions to perform BolWeiful patel iatebing and Search-and-replace functions on text A regular expression is very similar to a mathematical expression, except a regular expression tells the browser how to manipulate text rather than numbers by using special symbols as operators. A Regular Expression is a sequence of characters that constructs a search pattern. When you search for data in a text, you can use this search pattern to describe what you are looking for. [Reg]ular[Ex]pression$s A regular expression can be a single character or a more complicated pattern. It can be used for any type of text search and text replace operations. A Regex pattern consist of simple characters, such as /ab¢/, or a combination of simple and special characters, such as /ab*c/ or /example(d+).d*/. In JavaScript, a regular expression is an object that describes a pattern of characters. The JavaScript RegExp class represents regular expressions, and both String and RegExp define methods. It uses regular expressions to perform pattern-matching and search- and-replace functions on text. Syntax: A regular expression is defined with the RegExp () constructor as: var pattern = new RegExp(pattem, attributes); or simply var pattern = /pattern/attributes; Here, + Pattern — A string that specifies the pattern of the regular expression or another regular expression. + Attributes - An optional string containing attributes that specify global, case- insensitive, and multi-line matches Brackets Brackets ({)) have a special meaning when used in the context of regular expressions [Expression Description faba) Find any character between the brackets [sabe Find any character NOT between the brackets [0-91(A-Zifa-zifp-riiparl |[Find any character between the brackets (any digit) [A0-9) Find any character NOT between the brackets (any non-digit) xy) Find any of the alternatives specified The [abc] expression is used to find any character between the brackets The characters inside the brackets can be any characters or span of characters (abcde. - Any character between the brackets (A-Z] - Any character from uppercase A to uppercase Z {a-z] - Any character from lowercase a to lowercase z (A-z ]- Any character from uppercase A to lowercase z Syntax new RegExp("[abc)") or simply: Mabel Syntax with modifiers new RegExp("[abc]", "g") eee Habe | Code: Do a global search for the characters "i" and "s" in a string:

Click the button to do a global search for the characters

i" and" "ina string.

Output: Click the bution to do a global search for the characters "i" and "s" in a string. (ie) iisisis The [abc] expression is used to find any character NOT between the brackets, The characters inside the brackets can be any characters or span of characters: V [abcde.] - Any character between the brackets v_ [A-Z] - Any character from uppercase A to uppercase Z ¥_ [a-z] - Any character from lowercase a to lowercase z v_ [A-z]- Any character from uppercase A to lowercase z Sometimes a JavaScript application prohibits certain characters from appearing within text entered into a form, such as a hyphen (-); otherwise, the character might inhibit processing of the form by the CGI program running on the web server. + You can direct the browser to search for illegal character(s) by specifying the illegal character(s) within brackets and by placing the caret (4) as the first character in the bracket. + Let's see how this works in the following example: IV + In this case, the browser is asked to determine whether the text does not contain the hyphen. + The caret asks the browser to determine whether the following character(s) do not appear in the text. + To find the hyphen in text, you need to escape the hyphen with the backslash, like so \-. + Suppose you wrote the following regular expression and the browser didn't find the hyphen in the text. The browser responds with a false—this is because you are telling the browser to determine whether the hyphen appears in the text. If the hyphen appears, the browser would respond with a true. NV + However, by placing a caret in the regular expression, as shown next, the browser responds with a true if the hyphen is not found in the text. This is because you are telling the browser to determine whether the hyphen does not appear in the text. MV Syntax new RegExp("[“xyz]") or simply: Mxyzi/ Syntax with modifiers new RegExp("[Axyz]", “g") or simply: Noxyzi/a Example: Enter text:

Output: CS © Ale| C/Users/acer/Deskiop/nonmatching htm a Sri true C:/Users/acer/Desktop/nonmatching.htm| eae a wa] false Code: Do a global search for characters that are NOT “i® and "s" ina string:

Click the button to do a global search for characters that are NOT “i" and “s" ina string.

Output: Click the button to do a global search for characters that are NOT "i" an ina string. (yi Doo, you, know, f th, all, these,.? The [*0-9] expression is used to find any character that is NOT a digit. The digits inside the brackets can be any numbers or span of numbers from 0 to 9. Syntax new RegExp("[*0-9]") or simply: 180-9 Syntax with modifiers new RegExp("[*0-9]", "g") or simply: N‘0-9/9 Code: Do a global search for numbers that are NOT "1" and “s" ina string.

Click the button to do a global search for numbers that are NOT "1" and "s'in a string.

Output Click the buiton to do 2 global search for numbers that are NOT in astring (ak) 22.227 hi, i, Javacsipt The [0-9] expression is used to find any character between the brackets. The digits inside the brackets can be any numbers or span of numbers from 0 to 9. Note: can used for alphabets [a-z] and [A-Z] or {p-t] or [P-R] oF [pqr] or {PQR] Syntax new RegExp("[0-9)") or simply: N0-9/ Syntax with modifiers new RegExp("[0-9)", “g") or simply: A(0-91/9 Code: Do a global search for the number ina string

Click the button to do a global search for the number "1" and “s" in a string.

Output: Click the button to do a global search for the number "1" and "s" in a string [Twit] LLL new RegExp("(x/y)") or simply: Leys new RegExp("(xly)", "g") or simply: Joya Code: Do a global search to find any of the specified alternatives (0)5|7):

Click the button to do a global search for any of the specified alternatives (0|5|7).

Output: Click the button to do a global search for any of the specified altematives (0)5|7) Try it} 0,5,7.0.5,7 Quantifiers The frequency or position of bracketed character sequences and single characters can be denoted by a special character. Each special character has a specific connotation. The +, *, ?, and $ flags all follow a character sequence. [Sr.No. |[Expression & Description p+ —~ i It matches any string containing One OF More p's, Pp ogee 2 Quantifiers It matches any string containing Zero or more p's. lp? 3 It matches any string containing at most one p.(zero of one occurrences) lp(Ny > la It matches any string containing a sequence of N p's eet p(2.3) ne 5 It matches any string containing a sequence of two or three p's. Ipt2, 6 It matches any string containing a sequence of at least two p's. Ips I? It matches any string with p at the end of it Is Ap 10 It matches any string with p at the beginning of it Code: The n+ quantifier matches any string that contains at least one n.

Click the button to do a global search for at least one "o" in a string.

Output: Click the button to do a global search for an "I', followed by zero or more " [Tryit 000,9,0,00 Code: The n* quantifier matches any string that contains zero or more occurrences of n.

Click the button to do a global search for at least one "o" in a string.

a Output: Click the button to do a global search for an "I", followed by zero or more "o" characters. Lovo. L.Jo.11 Code: The n? quantifier matches any string that contains zero or one occurrences of n

Click the button to do a global search for a "1", followed by zero or one “O" characters.

var str 2 Output Click the button ta da a global search for a "1", followed by zero or one "0" characters. (iyit] 110.10 Code:The n(X,¥} quantifier matches any string that contains a sequence of X to Y n’s. X and Y must be a number.

Click the button to global search for a substring that contains a sequence of three to four digits.

_ Output Click the button to global search for a substring that contains a sequence of three te four digits. 100,1000,1000 B Metacharacters ‘A metacharacter is simply an alphabetical character preceded by a backslash that acts to give the combination a special meaning For instance, you can search for a large sum of money using the ‘\d’ metacharacter: H{{\d]+)000/, Here \d will search for any string of numerical character. The following table lists a set of metacharacters which can be used in PERL Style Regular Expressions. [sr.No||Character & Description - (dot) , la single character Ns 2 la whitespace character (space, tab, newline) \s 3 non-whitespace character \d l4 la digit (0-9) \o 5 la non-digit hw 6 la word character (a-z, A-Z, 0-9, _) hw 7 la non-word character Nb} ls a literal backspace (special case). [aeiou] lo matches a single character in the given set {o__|[t*aeiou) 4 matches a single character outside the given set (foo|bar|baz) i matches any of the alternatives specified + You can have the browser check to see whether the text has di by writing a regular expression. The regular expression must contain either \d or \D, depending on whether you want the browser to search the text for digits (\d) or nondigits (\D). + The \d symbol, tells the browser to determine whether the text contains digits. The browser returns a true if at least one digit appears in the text. + You'd use this regular expression to determine whether a first name has any digits, The \D symbol is used to tell the browser to search for any nondigit in the text. «The browser returns a true if a nondigit is found. This is the regular expression you would use to validate a telephone number, assuming the userwas asked to enter digits only. If the browser finds a nondigit, the telephone number is invalid and you can notify the user who entered the information into the form. Example: Program to check for any two-consecutive Enter text:

heck"> 15 Output e | Cytser/acer/Deshtop cits nt a Enter text: Al check | true SO File | G/Users/acer/Desktop/digits html laa, Enter text A\ check false Following table shows the test cases on the above program. Ad\d/ var exp=/\d\d/; A23 True AZ False var output=exp.test(input); 23 True 23A True 2 False A1B3 False aay var exp=/\d(4) ‘A1B2C3D4 False ‘A1B2C3D False | var output=exp.test(Input); [A1b2c3456 True Code: The \d metacharacter is used to find a digit from 0-9.

Click the button to do a global search for digits in a string.

Output: Click the button to do a global search for digits ina string [init] 1.0.0 Code: The \D metacharacter is used to find a non-digit character.

Click the button to do a global search for non-digit characters in a string.

Output: Click the button to do a global search for non-digit characters in a string. Try it] wv Code: The . metacharacter is used to find a single character, except newline or other line terminators.

Click the button to do a global search for "ht" in a string.

, Output: (Click the button to do a global search for "ht" na string + You can have the browser determine whether text contains or doesn't contain letters, punctuation, or symbols, such as the @ sign in an e-mail address, by using the \w and \W special symbols in a regular expression 18 + The \w special symbol tells the browser to determine whether the text contains a letter, number, or an underscore, and the \W special symbol reverses this request by telling the browser to determine whether the text contains a character other than a letter, number, or underscore. + You can use the following regular expression to determine whether the product name that was entered into the form on your web page contains a symbol: AW/ * Using \W is equivalent to using [a-zA-Z0-9} Example: .value; Enter text:

Output: SO File | C/Usersfacer/Desktop/symbols.himl 7 y Enter text, check false 19 File | C/Users/acer/Desktop/symbolshtm! jab Enter text aa true Code: The \w metacharacter is used to find a word character. Aword character isa character from a-z, A-Z, 0-9, including the _ (underscore) character.

Click the button to do a global search for word characters in a string.

Output: Click the button to do a global search for word characters in a string. {Ty Gixe1.0.0 Code: The \W metacharacter is used to find a non-word character. Aword characteris a character from a-z, A-Z, 0-9, including the _ (underscore) character. 20

Click the button to do a global search for non-word characters in a string.

Enter text:

heck"> Output: C © File | C/Users/acer/Desktop/matchingwards html ab Enter text check tue e C/Users/acer/Desktop/matchingwords.ntml ps Enter text: Al check | false Code: The \t metacharacter is used to find a tab character. \treturns the position where the tab character was found. If no match is found, it returns “1.

Click the button to return the position where the tab character was found in a string.

Output Click the button to retum the position where the tab character was found in a string. Tit Modifi Several jers/flag modifiers are available that can simplify the way you work with regexps, like case sensitivity, searching in multiple lines, etc. Sr.No. [Modifier & Description i I Perform case-insensitive matching. im 2 _ Specifies that if the string has newline or carriage return characters, the * and $| loperators will now match against a newline boundary, instead of a string] boundary ig B Performs a global match that is, find all matches rather than stopping after the| first match 23 Code: The g modifier is used to perform a global match (find all matches rather than stopping after the first match) Syntax: new RegExp("regexp", "g") or simply: Aregexp/g Example: 1)

Click the button to do a global search for "is" in a string.

Output: Click the button to do a global search for “is” in a string. [tit] isis Example 2):

Click the button to do a global search for the character-span [a-h in a string.

24

Output Click the button to doa global search for the character-span fa-h] in a string. [Tryit | hahee Code: The i modifier is used to perform case-insensitive matching Syntax new RegExp("regexp", “i’) or simply: Iregexpli Example:

Click the button to do a global, case-insensitive search for "is" in a string

Output: Click the button to doa global, case-insensitive search for "is" in a string. (Ts Isisis Code: The m modifier is used to perform a multiline match. The m modifier treat beginning (*) and end ($) characters to match the beginning or end of each line of a string (delimited by \n or \1) rather than just the beginning or end of the string. Syntax new RegExp("regexp", "m") or simply: /regexp/m Example:

Click the button to do a global, case beginning of each line in a string.

sensitive, multiline search for “is" at the

Output: Click the button to do a global, case-insensitive, multiline search for "is" at the beginning of each line ina string, Tit] Isisis RegExp Methods Here is a list of the methods associated with RegExp along with their description, Sr.No.|Method & Description lexec! Executes a search for a match in its string parameter. jtest/ [Tests for a match in its string parameter. ltoSourcet Returns an object literal representing the specified object; you can use this value! Ito create a new object. ltoString Returns a string representing the specified object. * you can also use a regular expression to replace portions of the text by using the replace) method. + The replace() method requires two parameters: a regular expression and the + replacement text. + Here's how the replace() method works, First, you create a regular expression that identifies the portion of the text that you want replaced. + Then you determine the replacement text. Pass both of these to the replace() 7 method, and the browser follows the direction given in the regular expression to locate the text, Ifthe text is found, the browser replaces it with the new text that you provided Syntax string.replace(searchvalue, newvalue) Example: , Enter text:

heck"> Output: C:/Users/acer/Desktop/replace htm! a2 Enter text 2 (check ] 12-03-2020 In the above example ":" symbol replace by “-" Code: 28

Click the button to replace "blue" with “red” in the paragraph below:

Mr Blue has a blue house and a blue car.

Output: Click the button to replace "blue" with "red! in the paragraph below ‘Mr Blue has a blue house and a blue car. (vi) Click the button to replace "blue’ with "red’ in the paragraph below Blue has a red house and a red car. [ty Sometimes your JavaScript application requires you to retrieve characters that match a regular expression rather than simply testing whether or not those characters exist in the text. You can have the browser return characters that match the pattern in your regular expression by calling the exec) method of the regular expression object. How to use the exec() method. First, create a regular expression that specifies the pattern that you want to match within the text. Characters that match this pattern will be returned to your JavaScript. Next, pass the exec() method the text for which 29 you want to search. The exec() method returns an array. The first array element contains the text that matches your regular expression. Syntax RegExpObject.exec( string ); Code JavaScript RegExp exec Method Output: Test | - returned value: script Test 2 - returned value : null |! Syntax RegExpObject testi string ); 30 Code JavaScript RegExp test Method Output: Test 1 - retumed value : true Test 2 - retumed value : false | Syntax string search(searchvalue) 31

Mr Blue has a blue house and a blue car.

Output Mr Blue has a blue house and a blue car. Try it | Try it] Here is a list of the properties associated with RegExp and their description. Sr.No. [Property & Description constructor , ‘Specifies the function that creates an object's prototype. Iglobal 2 Specifies if the "g” modifier is set. lignoreCase 3 Specifies if the “i* modifier is set. 4 llastIndex 32 [The index at which to start the next match, multiline s Specifies if the "m" modifier is set. source 6 [The text of the pattern. In the following sections, we will have a few examples to demonstrate the usage of RegExp properties Syntax RegExpObjectignoreCase Code: JavaScript RegExp ignoreCase Property Output noreCase property is not set noreCase property is set Syntax RegExpObject multiline Code JavaScript RegExp multiline Property Output: Test - multiline property is not set Test2 - multiline property is set HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns, To use frames on a page we use tag instead of tag. The tag defines, how to divide the window into frames, The rows attribute of tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by tag and it defines which HTML document shall open into the frame. Note - The tag deprecated in HTMLS. Do not use this element. 35, Example Following is the example to create three horizontal frames - Create a Frame “\webpage1 htm!" nam “\webpage2.htm!" name: 'webpage3.htm!” name= fopPage" /> “bottomPage" /> ‘bottomPage” /> Output: Wb Page 2) Example Let's put the above example as follows, here we replaced rows attribute by cols and changed their width. This will create all the three frames vertically — 36 Create a Frame Tag Attributes Following are the important attributes of tag - Sr.No Attribute & Description sre This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = "/html/top_frame.htm' will load an HTML file available in html directory. name 38 Example: This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into an another frame, in which case the second frame needs a name to identify itself as the target of the link. frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the tag if one is given, and this can take values either 1 (yes) or 0 (no). marginwidth This attribute allows you to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. For example, marginwidth = "10". marginheight This attribute allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example, marginheight = "10" noresize By default, you can resize any frame by clicking and dragging on the borders of a frame. The noresize attribute prevents a user from being able to resize the frame. scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or “auto”. For example, scrolling = "no" means it should not have scroll bars. Create a Frame 39 1" border="20" bordercolor="blue" ottomPage" /> Output: [Web Page . ~ [WebPage 3 ” .” a .? : ~ p .? - ~~ xP ” £ (WebPages .” hia ~ 3 .” . 41 Using frame in the frameset means creating child window inside the parent window. Here each frame represents a child window and frameset represents the parent window. You can refer to another child window by referencing the frameset, which is the parent window, and then by referencing the name of the child window, followed by whatever element within the web page of the child window that you want to access. Following example creates two child windows. First child window (name=topPage) consists of a button. And Second child window (name=bottomPage) consist of a button From second child window you call the method of the first child window using the reference of parent hence when you click on button of second child window then you can call Javascript function of first child window via reference of parent. Example: Sample.html Create a Frame ‘webpage2.html" name="bottomPage" frameborder="0" /> Webpaget.htm! Web Page 1 42 Webpage2.html Web Page 2

You can change the content of a child window from a JavaScript function by modifying the source web page for the child window. To do this, you must assign the new source to the child window's href attribute, In this example, you were able to get a reference to the parent frame's topPage element because they are both from the same domain. At that point, you have two options: if they're in the same domain, you reference it as illustrated previously, but you can also just change the frame src attribute in the frameset to point the frame to a new page. In the following example we'll need to modify both the WebPaget.html and WebPage2.htm| fi les. In addition, welll need to define a new web page called WebPage3htm|. Here is the new WebPage! html fi le. WebPage1 htm! appears in the bottom child window, and when the Web Page 1 button is clicked, the content of the top child window changes from WebPage2.html to WebPage3.html. You'll notice that the value of the button reflects the new content. 43 Sample.html Frame Webpage!.htm| web paget ‘webpage1” value="WebPage1” type=" utton" />
Webpage2.htm! stitle> 'WebPage2" value="Web Page2" type="button” /> 44 Webpage3.htm! ") window.topPage.documentwrriteln(’ Web Page 3') window.topPage.document.writeln(’') window.topPage.documentwrriteln('') window.topPage.document.writeln(’
') 45, window.topPage.documentawriteln('

') window.topPage.document.writeln( "') window.topPage.documentwrriteln(’

') window.topPage.document.writeln('
’) window.topPage.documentwrriteln('') window.topPage.document.writeln(’') window.topPage.document.close) ) You can access and change the value of elements of another child window by directly referencing the element from within your JavaScript. You must explicitly specify the full path to the element in the JavaScript statement that references the element, and it must be from the same domain as the web page; otherwise, a security violation occurs. Create a Frame jottomPage" /> stitle> cessed"; a7

Web Page 2

IFRAMES. You can define an inline frame with HTML tag

Click the button to get the URL of the iframe.

48 Output: A demonstration of how to access an IFRAME element (eb Page 1) ‘lick the button to get the URL ofthe stam, Tait Ble://C/Users/Admin’Desktop/CSS_LectUnst#6203_Reguler_eXpression Rollover_srames fame _prog'webpage? hteal Sle://C/Users/Admin/Desktop/CSS_LectUnit¥6205_Reguler_eXpression Rollover_drames'fiame_prog'webpagel heal Key Difference: Frame is a HTML tag that is used to divide the web page into various frames/windows. Used as tag, it specifies each frame within a frameset tag. Iframe as iframe_p.html The window.postMessage() method safely enables cross-origin_ communication between Window objects; e.g, between a page and a pop-up that it produced, or between a page and an iframe embedded within it, IFrame Test

Welcome

Hello There 50 Output Welcome Rollover means a webpage changes when the user moves his or her mouse over an object on the page. It is often used in advertising. There are two ways to create rollover, using plain HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation of rollovers using both methods. The keyword that is used to create rollover is the event. For example, we want to create a rollover text that appears in a text area. The text “What. is rollover?” appears when the user place his or her mouse over the text area and the rollover text changes to “Rollover means a webpage changes when the user moves his or her mouse over an object on the page” when the user moves his or her mouse away from the text area. The HTML script is shown in the following example: