JavaScript
AI-enhanced description
-------
(i) Frameset:
The `<frameset>` element was used in older versions of HTML to define a set of frames within a webpage. However, it is now deprecated in HTML5 and no longer recommended for use. Frames wereused to divide the browser window into multiple sections, where each section could load a separateHTML document. The frameset element defined the structure and layout of these frames.
Example:
```html
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frame src="menu.html">
<frame src="content.html">
</frameset>
</html>
```
In the example above, the `<frameset>` element is used to divide the browser window into twocolumns. The first column takes up 25% of the width and loads the "menu.html" file, while thesecond column occupies 75% of the width and loads the "content.html" file. This way, different HTMLdocuments can be loaded into separate frames within a single page.
(ii) Table:
The `<table>` element is used to create a tabular structure in HTML. It allows you to organize datainto rows and columns, making it easier to display and comprehend structured information. Tablesconsist of one or more `<tr>` (table row) elements, which contain `<td>` (table data/cell) or `<th>`(table header cell) elements.
```html <!DOCTYPE html>
<title>Table Example</title>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<td>John</td>
<td>25</td>
<td>USA</td>
<td>Lisa</td>
<td>30</td>
<td>Canada</td>
</table>
</body>
In the example above, a simple table is created with three columns: Name, Age, and Country. Eachrow of the table is defined using the `<tr>` element, and the cells within each row are specified usingthe `<td>` element. The first row is considered as the table header and is represented using the`<th>` element. (iii) Form:
The `<form>` element is used to create an interactive form on a web page. It allows users to inputand submit data, which can be processed or stored on the server. The form element acts as acontainer for various form elements such as input fields, checkboxes, radio buttons, dropdownmenus, etc.
<title>Form Example</title>
<label for="name">Name:</label>
<label for="email">Email:</label>
</form>
In the example above, a simple form is created with two input fields: Name and Email. The `<form>`element has two important attributes: `action` specifies the URL where the form data will besubmitted, and `method` specifies the HTTP method to be used (typically "post" or "get"). The formincludes two `<input>` elements, one
2.---------------- CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements. There arethree ways to apply CSS styles to HTML elements: inline, internal, and external CSS. Let's exploreeach of them with suitable examples:
1. Inline CSS:
Inline CSS involves applying styles directly to individual HTML elements using the `style` attribute.This method is useful for adding unique styles to specific elements.
<p style="color: red; font-size: 18px;">This is a red paragraph with larger font size.</p>
In the above example, the inline CSS styles `color: red;` and `font-size: 18px;` are directly added tothe `<p>` element using the `style` attribute. This results in the paragraph text being displayed in redcolor with a font size of 18 pixels.
2. Internal CSS:
Internal CSS involves defining styles within the `<style>` element placed in the `<head>` section ofan HTML document. The styles defined in internal CSS apply to the elements within that specificHTML file.
<style>
p{
color: blue;
font-size: 16px;
} </style>
In the example above, the styles for the `<p>` element are defined within the `<style>` element inthe `<head>` section. The styles set the color to blue and the font size to 16 pixels. As a result, theparagraph text is displayed in blue color with a font size of 16 pixels.
3. External CSS:
External CSS involves storing CSS styles in a separate file with a .css extension and linking it to anHTML document using the `<link>` element. This method allows for reusable styles across multipleHTML files.
color: green;
font-size: 20px;
In the example above, the CSS styles are defined in an external file named "styles.css". The `<link>`element in the HTML file establishes the connection between the HTML file and the external CSS file.The paragraph text is displayed in green color with a font size of 20 pixels, as specified in the externalCSS file.
Using inline, internal, and external CSS allows you to apply styles to HTML elements based on yourspecific needs, providing flexibility and maintainability in styling your web pages.
3.-----------------
JavaScript provides several control structures that allow you to control the flow of your code andmake decisions based on certain conditions. The main control structures in JavaScript are:
1. If...else:
The `if...else` statement allows you to execute different blocks of code based on a specificcondition. If the condition in the `if` statement evaluates to true, the code within the `if` block isexecuted. Otherwise, if the condition is false, the code within the `else` block is executed.
```javascript
if (num > 0) {
console.log("Number is positive.");
} else {
console.log("Number is non-positive.");
``` In the above example, if the value of `num` is greater than 0, the output will be "Number ispositive." Otherwise, if the value is 0 or negative, the output will be "Number is non-positive."
2. Switch:
The `switch` statement provides a way to perform different actions based on multiple possiblevalues of a single expression. It evaluates the expression and compares it to various cases, executingthe code within the corresponding case block.
switch (day) {
case "Monday":
break;
case "Tuesday":
case "Wednesday":
case "Thursday":
console.log("It's a weekday.");
case "Friday":
default:
``` In the above example, depending on the value of the `day` variable, the corresponding case block isexecuted. If `day` is "Tuesday," "Wednesday," or "Thursday," the output will be "It's a weekday."
3. For loop:
The `for` loop is used to repeatedly execute a block of code a specific number of times. It consistsof an initialization, a condition, and an increment/decrement expression, all within the parentheses.
console.log(i);
In the above example, the `for` loop prints the numbers 1 to 5 to the console.
4. While loop:
The `while` loop repeatedly executes a block of code as long as a specified condition remains true.The condition is checked before each iteration.
let count = 1;
console.log(count);
count++;
In the above example, the `while` loop prints the numbers 1 to 5 to the console. 5. Do...while loop:
The `do...while` loop is similar to the `while` loop, but the condition is checked after each iteration.This guarantees that the code within the loop is executed at least once.
let i = 1;
do {
i++;
In the above example, the `do...while` loop prints the numbers 1 to 5 to the console.
These control structures allow you to control the flow of execution in JavaScript and make decisionsbased on specific conditions, enabling you to write dynamic and interactive code.
4.a----------------
function sumOfDigits(number) {
let sum = 0;
} // Return the sum of digits
return sum;
// Example usage
console.log(sumOfDigits(123)); // Output: 6 (1 + 2 + 3 = 6)
4.b----------------
Certainly! Here's a recursive function in JavaScript to calculate the exponentiation of a number `m`raised to the power `n`:
function power(m, n) {
if (n === 0) {
return 1;
In the `power` function, we have two cases: the base case and the recursive case. - Base case: When the exponent `n` is 0, the function returns 1 since any number raised to the powerof 0 is 1.
- Recursive case: In the recursive case, we multiply the base number `m` by the result of `power(m,n-1)`, which reduces the exponent by 1 in each recursive call until we reach the base case.
The function calculates the exponentiation by recursively multiplying the base number `m` with itself`n` times, where `n` is decremented by 1 in each recursive call until `n` reaches 0.
The example usage demonstrates how to call the `power` function with different values of `m` and`n` to calculate the result of `m` raised to the power of `n`.
6.In JavaScript, form events refer to the events that occur when interacting with HTML `<form>`elements. These events allow you to handle and respond to various actions performed by the userwithin a form, such as submitting the form, changing input values, or focusing on input fields.
<form id="myForm">
</form> <script>
form.addEventListener('submit', function(event) {
// Perform validation
nameInput.focus();
emailInput.focus();
alert('Form submitted!');
form.reset();
});
</script>
``` In the example above, we have a simple form with two input fields (name and email) and a submitbutton. The JavaScript code adds an event listener to the form element for the `'submit'` event.When the user clicks the submit button or presses the Enter key, the event listener's callbackfunction is executed.
Inside the callback function, we prevent the default form submission using `event.preventDefault()`,as we want to handle the form submission manually. Then, we retrieve the values of the name andemail input fields.
We perform some basic validation by checking if the fields are empty. If either field is empty, an alertis displayed, and the corresponding input field is focused using the `focus()` method. If both fieldshave values, the form is considered valid, and an alert is shown indicating a successful submission.Finally, the `reset()` method is called to clear the form fields.
This example demonstrates the usage of the `'submit'` event and how to handle form validationbefore submitting the form using JavaScript.