Scribd
Upload
3 views13 pages

TUTORIAL SHEET - 7

The document contains two HTML tutorials created by Ayush Mishra, focusing on JavaScript string functions and regular expressions. The first part demonstrates various string functions such as length, toUpperCase, and slice, while the second part provides examples of regular expressions categorized by modifiers, patterns, metacharacters, and quantifiers. Each section includes code snippets, descriptions, and results for better understanding.

Uploaded by

nywptwyyxn
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
3 views13 pages

TUTORIAL SHEET - 7

The document contains two HTML tutorials created by Ayush Mishra, focusing on JavaScript string functions and regular expressions. The first part demonstrates various string functions such as length, toUpperCase, and slice, while the second part provides examples of regular expressions categorized by modifiers, patterns, metacharacters, and quantifiers. Each section includes code snippets, descriptions, and results for better understanding.

Uploaded by

nywptwyyxn
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/ 13

Question 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS String Functions - Ayush Mishra 22BCE2160</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1000px;
margin: 30px auto;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.tutorial-header {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: #000080;
color: white;
border-radius: 10px;
font-size: 1.2em;
}
.header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: #000080;
color: white;
border-radius: 10px;
}
.function-card {
background: white;
margin: 15px 0;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
h3 {
color: #2c3e50;
margin-top: 0;
}
.purpose {
color: #3498db;
font-weight: 500;

AYUSH MISHRA 22BCE2160 1


margin: 10px 0;
padding-left: 10px;
border-left: 3px solid #3498db;
}
code {
background: #f8f9fa;
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
margin: 5px 0;
font-family: 'Courier New', Courier, monospace;
}
.result {
color: #27ae60;
font-weight: bold;
margin: 8px 0;
}
.footer {
text-align: center;
margin-top: 40px;
padding: 15px;
background: #000080;
color: white;
border-radius: 10px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="tutorial-header">
Tutorial 7: Web Programming (Task 2)
</div>

<div class="header">
<h1>JavaScript String Functions Demo</h1>
<p>Created by Ayush Mishra (22BCE2160)</p>
</div>

<div class="container">
<div class="function-card">
<h3>1. length Property</h3>
<div class="purpose">Returns the number of characters in a string</
div>
<code>name.length</code>
<div class="result" id="length"></div>
</div>

<div class="function-card">
<h3>2. toUpperCase()</h3>

AYUSH MISHRA 22BCE2160 2


<div class="purpose">Converts all characters to uppercase</div>
<code>name.toUpperCase()</code>
<div class="result" id="upper"></div>
</div>

<div class="function-card">
<h3>3. toLowerCase()</h3>
<div class="purpose">Converts all characters to lowercase</div>
<code>name.toLowerCase()</code>
<div class="result" id="lower"></div>
</div>

<div class="function-card">
<h3>4. slice()</h3>
<div class="purpose">Extracts part of the string</div>
<code>name.slice(6, 12)</code>
<div class="result" id="slice"></div>
</div>

<div class="function-card">
<h3>5. replace()</h3>
<div class="purpose">Replaces a substring with another</div>
<code>name.replace("Mishra", "Kumar")</code>
<div class="result" id="replace"></div>
</div>

<div class="function-card">
<h3>6. trim()</h3>
<div class="purpose">Removes whitespace from both ends</div>
<code>" Ayush Mishra 22BCE2160 ".trim()</code>
<div class="result" id="trim"></div>
</div>

<div class="function-card">
<h3>7. charAt()</h3>
<div class="purpose">Returns character at specified position</div>
<code>name.charAt(0)</code>
<div class="result" id="charAt"></div>
</div>

<div class="function-card">
<h3>8. split()</h3>
<div class="purpose">Splits the string into an array</div>
<code>name.split(" ")</code>
<div class="result" id="split"></div>
</div>

<div class="function-card">
<h3>9. concat()</h3>

AYUSH MISHRA 22BCE2160 3


<div class="purpose">Joins two strings</div>
<code>name.concat(" - Developer")</code>
<div class="result" id="concat"></div>
</div>

<div class="function-card">
<h3>10. includes()</h3>
<div class="purpose">Checks if a string contains a substring</div>
<code>name.includes("Mishra")</code>
<div class="result" id="includes"></div>
</div>
</div>

<div class="footer">
Ayush Mishra 22BCE2160
</div>

<script>
const name = "Ayush Mishra 22BCE2160";

document.getElementById("length").textContent = `Result: ${name.length}


characters`;
document.getElementById("upper").textContent = `Result: "$
{name.toUpperCase()}"`;
document.getElementById("lower").textContent = `Result: "$
{name.toLowerCase()}"`;
document.getElementById("slice").textContent = `Result: "${name.slice(6,
12)}"`;
document.getElementById("replace").textContent = `Result: "$
{name.replace("Mishra", "Kumar")}"`;
document.getElementById("trim").textContent = `Result: "${" Ayush
Mishra 22BCE2160 ".trim()}"`;
document.getElementById("charAt").textContent = `Result: "$
{name.charAt(0)}"`;
document.getElementById("split").textContent = `Result: [${name.split("
").join(", ")}]`;
document.getElementById("concat").textContent = `Result: "$
{name.concat(" - Developer")}"`;
document.getElementById("includes").textContent = `Result: $
{name.includes("Mishra")}`;
</script>
</body>
</html>

AYUSH MISHRA 22BCE2160 4


OUTPUT

AYUSH MISHRA 22BCE2160 5


AYUSH MISHRA 22BCE2160 6
Question 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Expression Demonstrator</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.header {
background-color: #003366;
color: white;
padding: 15px;
text-align: center;
border-radius: 8px;
margin-bottom: 20px;
}

.footer {
background-color: #003366;
color: white;
padding: 15px;
text-align: center;
border-radius: 8px;
margin-top: 20px;
}

.section {
margin-bottom: 30px;
background-color: #f5f5f5;
padding: 15px;
border-radius: 8px;
}

h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}

AYUSH MISHRA 22BCE2160 7


th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}

th {
background-color: #3498db;
color: white;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

.match {
color: #27ae60;
font-weight: bold;
}

.no-match {
color: #e74c3c;
font-weight: bold;
}

.regex {
font-family: monospace;
color: #c0392b;
}

.test-string {
font-family: monospace;
color: #2980b9;
}
</style>
</head>
<body>
<div class="header">
<h1>Tutorial 7 : Web Programming</h1>
</div>

<div id="container"></div>

<div class="footer">
Ayush Mishra 22BCE2160
</div>

<script>
const examples = [
{
category: 'Modifiers',
examples: [
{

AYUSH MISHRA 22BCE2160 8


regex: '/hello/i',
testString: 'HELLO World',
description: 'Case-insensitive match using "i" modifier'
},
{
regex: '/^dog/m',
testString: 'cat\ndog',
description: 'Multiline match using "m" modifier'
},
{
regex: '/a/g',
testString: 'banana',
description: 'Global match using "g" modifier'
}
]
},
{
category: 'Patterns',
examples: [
{
regex: '/^\\d+$/',
testString: '12345',
description: 'Numeric string validation'
},
{
regex: '/^[A-Za-z]+$/',
testString: 'LettersOnly',
description: 'Alphabetic characters only'
},
{
regex: '/^\\w+@\\w+\\.\\w+$/',
testString: '[email protected]',
description: 'Simple email pattern'
}
]
},
{
category: 'Metacharacters',
examples: [
{
regex: '/\\d\\D/',
testString: '3d',
description: 'Digit followed by non-digit (\\d and \\D)'
},
{
regex: '/\\s\\S/',
testString: ' a',
description: 'Whitespace followed by non-whitespace'
},
{
regex: '/^\\w+/',
testString: 'word123',
description: 'Word character sequence (\\w)'

AYUSH MISHRA 22BCE2160 9


}
]
},
{
category: 'Quantifiers',
examples: [
{
regex: '/a*/',
testString: 'aaaa',
description: 'Zero or more occurrences (*)'
},
{
regex: '/a+/',
testString: 'aaaa',
description: 'One or more occurrences (+)'
},
{
regex: '/a?/',
testString: '',
description: 'Zero or one occurrence (?)'
},
{
regex: '/a{2,4}/',
testString: 'aaa',
description: 'Between 2 to 4 occurrences ({min,max})'
}
]
},
{
category: 'Custom Examples',
examples: [
{
regex: '/^[A-Z][a-z]+\\s[A-Z][a-z]+\\s\\d{2}[A-Z]{3}\\d{4}$/',
testString: 'Ayush Mishra 22BCE2160',
description: 'Validates a full name followed by a university roll number'
}
]
}
];

function parseRegExp(regexStr) {
const parts = regexStr.split('/');
return new RegExp(parts[1], parts[2] || '');
}

function createDemoSection(categoryData) {
const section = document.createElement('div');
section.className = 'section';

const heading = document.createElement('h2');


heading.textContent = categoryData.category;
section.appendChild(heading);

AYUSH MISHRA 22BCE2160 10


const table = document.createElement('table');
table.innerHTML = `
<tr>
<th>Regular Expression</th>
<th>Test String</th>
<th>Result</th>
<th>Description</th>
</tr>
`;

categoryData.examples.forEach(example => {
const row = document.createElement('tr');
const regex = parseRegExp(example.regex);
const result = regex.test(example.testString);

row.innerHTML = `
<td class="regex">${example.regex}</td>
<td class="test-string">${example.testString.replace(/\n/g, '\\n')}</td>
<td class="${result ? 'match' : 'no-match'}">${result ? 'Match' : 'No
Match'}</td>
<td>${example.description}</td>
`;

table.appendChild(row);
});

section.appendChild(table);
return section;
}

const container = document.getElementById('container');


examples.forEach(category => {
container.appendChild(createDemoSection(category));
});
</script>
</body>
</html>

AYUSH MISHRA 22BCE2160 11


AYUSH MISHRA 22BCE2160 12
AYUSH MISHRA 22BCE2160 13

You might also like