Scribd
Carica
4 visualizzazioni79 pagine

Css 5

Kahi nahi

Caricato da

Krishna Thombare
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
4 visualizzazioni79 pagine

Css 5

Kahi nahi

Caricato da

Krishna Thombare
Copyright
© All Rights Reserved
Per noi i diritti sui contenuti sono una cosa seria. Se sospetti che questo contenuto sia tuo, rivendicalo qui.
Formati disponibili
Scarica in formato PDF o leggi online su Scribd
Unit 5 Regular Expression, Rollover and Frames (14 Marks) ‘Scanned with CamScannee Regular Expression Definition: Regular Expression is a special text string that defines the search pattern. It is a logical expression. For example — for counting specific characters in a string or to replace some substring by another substring we need to create a regular expression. We can create a regular expression pattern using forward slash /. For instance Regular expression is a powerful way for searching and replacing the characters in the string. ‘Scanned with CamScanner Regular Expression Cont.. Modifiers are used to perform case-insensitive and global searches Modifier Description g Perform a global match (find all matches rather than stopping after the first match) B Perform case-insensitive matching m Perform multiline matching ‘Scanned with CamScanner Regular Expression Cont.. Brackets are used to find a range of characters Expression |Description abc] Find any character between the brackets “abe Find any character NOT between the brackets Find any digit between the brackets Find any digit NOT between the brackets (any non-digit) 0-9" 0-9: ow Find any of the alternatives specified ‘Scanned with CamScanner The g modifier is used to perform a global match (find all matches rather than stopping after the first match). ‘Scanned with CamScanner The i modifier is used to perform case-insensitive matching. ‘Scanned with CamScanner 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 \r), rather than just the beginning or end of the string. function myFunction() th\nis it?\nis my"; var pat] = /Ais/m; var result = [Link](patt]); [Link](result); } ‘Scanned with CamScanner JavaScript program for Regular Expression ao ‘Scanned with CamScanner Regular Expression Cont.. + Entering a Range of Characters + For matching any digit we need not have to enter every digit right from 0 to 9, Similarly for matching letters we need not have to test with every single alphabet. We can achieve this by entering range of characters. + For example — to match a digit we must have a regular expression as [0-9]. * Thus placing the range within a square bracket helps us to evaluate a complete range of set of characters. * Suppose we enter [j-s] then that means match the characters j, k, 1, m, n, 0, p, q, rands. ‘Scanned with CamScanner JavaScript program to match the characters from A-E in given string. ‘Scanned with CamScanner Regular Expression Cont.. Matching Digits and Non Digits * Determining whether the string contains digits or non digits is a common task in any search pattern. + For instance — in the application of validating telephone number this is the most wanted task. * This can be simplified by JavaScript by writing the regular expression. If we write \d then that means search the text for digits and if we write \D then that means search the text for non-digits. ‘Scanned with CamScanner JavaScript program to Click the button to do a global search for digits in a string.(/d) ‘Scanned with CamScanner JavaScript program to Click the button to do a global search for NON digits in a string.(/D) ‘Scanned with CamScanner Regular Expression Cont.. Matching Punctuations and Symbols + The \w special symbol tells the browser to determine whether the text contains a letter, number, or an underscore. + The \W special symbol tells the browser to determine whether the text contains other than a letter, number, or an underscore. + Using \w is equivalent to using [a-zA-Z0-9_]. The last _ indicates space character. ‘Scanned with CamScanner JavaScript program to Click the button to do a global search for word characters in a string.(/w) ‘Scanned with CamScanner JavaScript program to Click the button to do a global search for non-word characters in a string.(/W) ‘Scanned with CamScanner Regular Expression Cont.. Matching Words + Any word in the text is defined as set of characters. A word is determined by a word boundary that is the space between two words. + ‘The boundary can be defined by Sing Special Symbol \b + For example - From the string ‘Boycott’ we can get a match for ‘cot’ by using regular expression ‘Scanned with CamScanner Regular Expression Cont.. Matching Words + Any word in the text is defined as set of characters. A word is determined by a word boundary that is the space between two words. + ‘The boundary can be defined by Sing Special Symbol \b + For example - From the string ‘Boycott’ we can get a match for ‘cot’ by using regular expression ‘Scanned with CamScanner JavaScript program to Click the button to do a global search for non-word characters in a string.(/W) Matching Words The \b metacharacter is used to find a match at the beginning or end of a word. Search for the pattern at the beginning of a word like this:\blo Search for the pattern at the end of a word like this : LO\b If no match is found, it returns null. ‘Scanned with CamScanner JavaScript program Search for the characters "LO" in the beginning of a word in the phrase "HELLO, LOOK AT YOU!" ‘Scanned with CamScanner JavaScript program Search for the characters "OK" in the end of a word in the phrase "HELLO, LOOK AT you!" ‘Scanned with CamScanner Regular Expression Cont.. Replacing a Text using Regular Expressions * Using replace function we can replace the desired pattern. * The first parameter in the replace function is the string which is to be replaced and * the second parameter is the replacing string. + For example- Consider following JavaScript in which the word ‘Country’ is replaced by ‘India’ ‘Scanned with CamScanner JavaScript program word ‘Country’ is replaced by ‘India’ str= "I Love my Country"; [Link](str);
‘Scanned with CamScanner Regular Expression Cont.. Returning a Matched Character :exec( ) * The exec() method searches string for text that matches with the regular expression. + If it finds a match, it returns an array of results, otherwise it returns null. If we want to search for particular pattern from a text then exec() method can be used as follows - [Link](text) This function returns an array of matched result. ‘Scanned with CamScannee JavaScript program to math characters from pattern to text using exec() method ‘Scanned with CamScanner JavaScript program to match characters from pattern to text using exec() method strl = "Tove my country”, str2 = "India has rich heritage and culture"; document. write(str1); [Link]("
" +str2); ' ‘Scanned with CamScanner Regular Expression Cont.. There are various regular expression object properties that help in matching particular word, character, last character, and index at which to start the next match and so on ‘Scanned with CamScannee Regular Expression Object properties Cont.. The words of regular expression are called special characters Regular Expression Object properties $1 (through $9) Parenthesized sub string matches $ Same as input $* Same as multiline $& Same as lastMatch $+ Same as lastPattern ‘Scanned with CamScannee Regular Expression Object properties Cont.. The words of regular expression are called special characters Regular Expression Object | properties Ey Same as leftContext ’ ‘Same as rightContext global Search globally (g modifier in use) ignoreCase Search case-insensitive (I modifies in use) input The string to search if no string is passed ‘Scanned with CamScannee Regular Expression Object properties Cont.. Regular Expression Object properties lastIndex ‘Specifies the index at which to start the next match lastMatch The last matched characters lastParen The last parenthesized sub string match leftContext The substring of the left of the most recent match multiline Whether strings are searched across multiple lines prototype Allows the additional properties to all objects rightContext The substring to the right of the most recent match source The regular expression pattern itself ‘Scanned with CamScanner JavaScript program to replace word with other using “S&” ‘Scanned with CamScanner JavaScript program to Accept seat no 4 digits and alphabets ,if invalid display msg. Pattern Matching using Regular Expression

For example : will allow us to divide the window into two columns (i.e. in two vertical frames). One frame occupying the size of 150 pixels and the other occupies the remaining portion of the window. Here * means any number of pixels. Similarly will divide the window into two rows (i.e. in two horizontal frames). The second part of horizontal frame will be of 120 pixels and upper horizontal frame will occupy remaining portion of the window. Similarly we can also specify the frameset in percentage form. For example Using frameset we can divide the rows and columns in any number of frames. For example This will create frames in the browser's window as follows — ‘Scanned with CamScanner Create a Frame Cont.. ee eee ‘Scanned with CamScanner Create a Frame In every layout frame we can load the desired html page by using For example : By this statement, we are loading the web page [Link] in the specific frame and the frame is named as Left_Vertical. ‘Scanned with CamScanner Attributes of the tag Attributes Description Specifies how many columns are contained in the frameset and the size of each column. ! Absolute values in pixels. ae For example, to create three vertical frames, use cols = "100, 500,100". A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%". This attribute works just like the cols attribute and takes rows the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". ‘Scanned with CamScannee Attributes of the tag Attributes Description This attribute specifies the width of the border of each border frame in pixels. For example, border = "5". A value of zero means no border This attribute specifies whether a three-dimensional frameborder border should be displayed between frames. This attribute takes value either 1 (yes) or 0 (no). For example frameborder = "0" specifies no border. This attribute specifies the amount of space between framespacing frames in a frameset. This can take any integer value. For example framespacing = "10" means there should be 10 pixels spacing between each frames ‘Scanned with CamScannee 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, stc = "/htmi/top_frame.htm" will load an HTML file available in html directory name This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. noresize By default, you can resize any frame by clicking and \dragging on the borders of a frame. The noresize ittribute prevents a user from being able to resize the irame. For example noresize= "noresize". ‘Scanned with CamScannee Attributes of the tag Attributes Description 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". ‘Scanned with CamScannee Attributes Attributes of the tag Description frameborder frame. The noresize attribute prevents a user from being able to resize the rame. For example noresize= "noresize’. et default, you can resize any frame by clicking and dragging on the borders of 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. longdese This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = "[Link]" ‘Scanned with CamScanner Create a main HTML document which will display three HTML document in three vertical frames HTML Frames ‘Scanned with CamScanner Create [Link], [Link] and [Link] files [Link] Frame 1 Frame?[Link] Frame 2 [Link] Frame 3 ‘Scanned with CamScanner The border of the frame can be invisible by setting the attribute “frameborder=0! and “border =0”. HTML Frames "30% ,70% "> eis « ~ eoos> = Parent window Child Child Child windowt — window2 window3 ‘Scanned with CamScanner step 1:Create parent window script in which two frames are define.- [Link] HTML Frames ‘Scanned with CamScanner step2: Write a [Link] file as right frame. [Link] Frames 1 Frame I
‘Scanned with CamScanner Step 3- The definition of MyFunction is present in the second frame. [Link] Frames 2 Frame 2 ‘Scanned with CamScanner Changing the Content and Focus of Child Window * You can change the content of a child window from a JavaScript function by modifying the source web page for the child window. * We can assign the new source to the child window's href attribute. Example Program : In the following example we are displaying two frames - Framel on the left hand side and Frame? to at the right hand side. When the user clicks the button present in the framel, the frame2 is removed and is replaced by Frame3. ‘Scanned with CamScanner Step 1: We will write the JavaScript for displaying two frames on the parent window — [Link] HTML Frames ‘Scanned with CamScanner Step 2- The framel contains one button components [Link] Frames 1 Frame 1
‘Scanned with CamScanner Step 3- The second frame contains a single button element [Link] Frames 2 Frame 2 > ‘Scanned with CamScanner ROLLOVER ‘Scanned with CamScanner Rollover Rollover Rollover means change in the appearance of the object when user moves his or her mouse over an object on the page. The rollover effect is mainly used in web page designing for advertising purpose. ‘Scanned with CamScanner Creating Rollover On many web pages, javascript rollovers are handled by adding an onmouseover and onmouseout event on images. (1) omnouseover is triggered when the mouse moves over an element (2) onmouseout is triggered when the mouse moves away from the element ‘Scanned with CamScanner Javascript program to create Rollover Creating Rollover ‘Scanned with CamScanner Program output resting foto. x AB ‘Scanned with CamScannee Text Rollover * Text rollover is a technique in which whenever user rollover the text, JavaScript allows to change the page element usually some graphics image. + Carefully placed rollovers can enhance a visitor's experience when browsing the web page. + Following example illustrates this idea. Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be displayed. For instance — if user over the text “Mango”; the image Mango should be displayed. ‘Scanned with CamScanner Rollover Textttle> <> Mangos/u>



Orangecu>



Banana ‘Scanned with CamScanner Program output nent EI ees [FEB R| ome > [EEN 00) tencyueste 0) [ee © feyjenespen 0) ¥ OO fencasesten > te | Mae oo the Som py Ore un i bun ‘Scanned with CamScanner Multiple Actions for Rollover + Suppose user is rolling the cursor over the text, then instead of simply changing the image we can display more window displaying some features or additional information about the item on which the mouse is rolling over. This process is referred as multiple actions for rollover. + Due to this effect visitor gets more information at a glance. + We can open additional window using the built in function Open(). This function is invoked using the object Window. + The open() method opens a new browser window, or a new tab. The close() window closes the window. ‘Scanned with CamScanner Multiple Actions for Rollover Cont: * The window. open() function can be written as follows [Link](“”, “Infowindow ”, height =20, width=20 ,left=20, top= 30) This function returns the object or instance of a window. We store this instance in a variable named MyWindow. + Then using [Link]() function we can write the information to this opened window. Thus it is possible to write additional information by opening and writing the contents to additional window. idea. + Following example illustrates this Example- Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be displayed. Along with the appropriate image display, additional window should pop up displaying the benefit of each fruit. For program see page no.26 ‘Scanned with CamScanner More Efficient Rollover + More Efficient Rollover For efficient use of rollover, the images can be stored in an array and required images are displayed when the web page is loaded. This makes the rollover action efficient because - the images are already collected and loaded in the array. The required image is displayed when user rollover particular text. Example: Write a JavaScript in which when user rolls over the name of fruit, the corresponding image should be displayed. For instance - if user rolls over the text "Mango"; the image of Mango should be displayed. Make use of array for storing the image files. For program refer 28 ‘Scanned with CamScanner

Potrebbero piacerti anche