Scribd
Upload
7 views

5th Unit CSS

The document explains regular expressions (regex) as patterns used for matching strings and validating data formats. It provides examples of regex for validating phone numbers, methods for checking digits in strings, and JavaScript programs for creating rollover effects and manipulating frames. Additionally, it covers properties of regex objects, the <frameset> tag, and the concept of rollovers in web design.

Uploaded by

ifzalsolkar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

5th Unit CSS

The document explains regular expressions (regex) as patterns used for matching strings and validating data formats. It provides examples of regex for validating phone numbers, methods for checking digits in strings, and JavaScript programs for creating rollover effects and manipulating frames. Additionally, it covers properties of regex objects, the <frameset> tag, and the concept of rollovers in web design.

Uploaded by

ifzalsolkar01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

1. Define the term - Regular expression.

A regular expression (regex) is a sequence of characters that forms a search pattern. It is mainly used
to match strings (text) in patterns or to validate the structure of data, such as email addresses, phone
numbers, or any other string format.

2. Construct regular expression for validating the phone number in following format only: (nnn)-
nnnn-nnnn OR nnn.nnnn.nnnn.

Here is the regular expression for validating the phone number in the given format:

^\(\d{3}\)-\d{4}-\d{4}$|^\d{3}\.\d{4}\.\d{4}$

Explanation:

• ^\(\d{3}\)-\d{4}-\d{4}$ matches the format (nnn)-nnnn-nnnn where n is a digit.

• ^\d{3}\.\d{4}\.\d{4}$ matches the format nnn.nnnn.nnnn.

• ^ and $ anchor the match to the beginning and end of the string, respectively.

• 3. Write a Java program that checks whether the string entered by the
user contains digits or not.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Check Digits</title>

</head>

<body>

<h2>Enter a string:</h2>

<input type="text" id="inputText">

<button onclick="checkDigits()">Check for Digits</button>

<p id="result"></p>

<script>
function checkDigits() {

var userInput = document.getElementById("inputText").value;

var result = /[0-9]/.test(userInput); // Checks if the string contains digits

if (result) {

document.getElementById("result").innerText = "The string contains digits.";

} else {

document.getElementById("result").innerText = "The string does not contain


digits.";

</script>

</body>

</html>

4. Explain any four commonly used methods in regular expression.


1. test(): Tests whether the regular expression matches a part of the
string. Returns true or false.
o Example: /abc/.test("abcdef") returns true.
2. exec(): Executes a search for a match in a string and returns an
array of matches or null if no match is found.
o Example: /abc/.exec("abcdef") returns ["abc"].
3. match(): Used on strings, it retrieves the matches for the regular
expression.
o Example: "abcdef".match(/abc/) returns ["abc"].
4. replace(): Used to replace matched text with new text in a string.
o Example: "abcdef".replace(/abc/, "xyz") returns "xyzdef".

5. Write a JavaScript program to create a rollover effect for three images.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Image Rollover</title>
</head>

<body>

<img id="image1" src="image1.jpg" alt="Image 1" onmouseover="changeImage(this,


'image1_hover.jpg')" onmouseout="resetImage(this, 'image1.jpg')" width="300">

<img id="image2" src="image2.jpg" alt="Image 2" onmouseover="changeImage(this,


'image2_hover.jpg')" onmouseout="resetImage(this, 'image2.jpg')" width="300">

<img id="image3" src="image3.jpg" alt="Image 3" onmouseover="changeImage(this,


'image3_hover.jpg')" onmouseout="resetImage(this, 'image3.jpg')" width="300">

<script>

function changeImage(img, newSrc) {

img.src = newSrc;

function resetImage(img, originalSrc) {

img.src = originalSrc;

</script>

</body>

</html>

Explanation:

• The onmouseover event changes the image source to the hover version, while the
onmouseout event resets it to the original image.

6. How will you specify the range of characters using a regular expression?

In regular expressions, ranges of characters are specified using square brackets []. For example:

• [a-z] matches any lowercase letter.

• [A-Z] matches any uppercase letter.

• [0-9] matches any digit.

• [a-zA-Z] matches any letter (either lowercase or uppercase).

•
7. Give the regular expression for matching digits and non-digits.

• Digits: \d or [0-9]

• Non-digits: \D or [^0-9]

8. Explain any four regular expression object properties.

1. lastIndex: Specifies the index at which to start the next match. It is used in exec() and test()
methods.

o Example: /abc/.lastIndex = 5;

2. global: A boolean value that indicates whether the g flag is set, meaning to search for all
matches in the string.

o Example: /abc/g.test("abc abc") returns true.

3. ignoreCase: A boolean value that indicates whether the i flag is set, meaning the search is
case-insensitive.

o Example: /abc/i.test("ABC") returns true.

4. multiline: A boolean value that indicates whether the m flag is set, meaning that ^ and $
match the start and end of a line, not just the start and end of the string.

9. What is a frame?

A frame is a section of a web page that can display its own content. It allows a web page to
be divided into multiple sections that can load different content independently. Frames were
commonly used in earlier web designs but are now deprecated in favor of modern techniques
like CSS grid and flexbox.

10. Explain the <frameset> tag along with the attributes used in it.

The <frameset> tag is used to define a set of frames within a web page. It replaces the <body> tag
when using frames. The common attributes are:

• cols: Defines the number and size of columns in a frameset.

• rows: Defines the number and size of rows in a frameset.

• frameborder: Specifies whether or not to display a border around the frames (0 = no border,
1 = with border).

• bordercolor: Specifies the color of the border.

Example:-

<frameset cols="50%, 50%">

<frame src="frame1.html">

<frame src="frame2.html">

</frameset>
11. Write a JavaScript to display frames without borders.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Frames without Borders</title>

</head>

<body>

<frameset cols="50%, 50%" frameborder="0">

<frame src="frame1.html" name="frame1">

<frame src="frame2.html" name="frame2">

</frameset>

</body>

</html>

12. Write a JavaScript to change the contents of one frame from another.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Change Frame Content</title>

</head>

<body>

<frameset cols="50%, 50%">

<frame src="frame1.html" name="frame1">


<frame src="frame2.html" name="frame2">

</frameset>

<script>

function changeContent() {

// Change the content of frame2 to a new page

window.frames['frame2'].document.location = 'newContent.html';

</script>

<button onclick="changeContent()">Change Frame 2 Content</button>

</body>

</html>

13. Write JavaScript to change the label of a button element present in frame2.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Change Button Label in Frame</title>

</head>

<body>

<frameset cols="50%, 50%">

<frame src="frame1.html" name="frame1">

<frame src="frame2.html" name="frame2">

</frameset>
<script>

function changeButtonLabel() {

// Change the button label inside frame2

window.frames['frame2'].document.getElementById('myButton').innerHTML = 'New Label';

</script>

<button onclick="changeButtonLabel()">Change Button Label in Frame 2</button>

</body>

</html>

14. What is rollover?

A rollover effect refers to a visual change in an element when the user moves the mouse over it,
such as changing the color or image of a button or link.

15. What are the methods used most commonly during the rollover?

• onmouseover: Triggered

You might also like