<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polyfill Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> "Understanding Polyfills: Bringing Modern JavaScript Functionality to Older Browsers" </h1>
<br>
<div >
<p>Polyfill is a term used in web development to refer to code that provides modern functionality
on older browsers that do not support it natively. Here's an example of a polyfill for the
startsWith() method of strings, along with a simple UI to demonstrate its usage:</p>
</div>
<div>
<label for="inputString">Enter a string:</label>
<input type="text" id="inputString">
<button onclick="checkStartsWith()">Check if starts with "Hello"</button>
</div>
<div id="result"></div>
<div>
<p>In this example, when you type a string into the text field and click the button,
it checks whether the entered string starts with "Hello".
The startsWith() method is a relatively modern addition to JavaScript,
so older browsers might not support it. The polyfill provided above adds support for startsWith()
if the browser does not natively support it.
</p>
</div>
<script>
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.substr(position, searchString.length) === searchString;
};
}
function checkStartsWith() {
var inputString = document.getElementById("inputString").value;
var resultDiv = document.getElementById("result");
if (inputString.startsWith("Hello")) {
resultDiv.textContent = "String starts with 'Hello'.";
} else {
resultDiv.textContent = "String does not start with 'Hello'.";
}
}
</script>
</body>
</html>
