Scribd
Upload
3 views13 pages

JavaScript

The document provides an overview of HTML elements such as `<frameset>`, `<table>`, and `<form>`, explaining their usage and providing examples. It also covers CSS styling methods (inline, internal, and external) and JavaScript control structures (if...else, switch, loops) with examples. Additionally, it includes JavaScript functions for summing digits and calculating exponentiation, as well as handling form events with validation.

Uploaded by

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

JavaScript

The document provides an overview of HTML elements such as `<frameset>`, `<table>`, and `<form>`, explaining their usage and providing examples. It also covers CSS styling methods (inline, internal, and external) and JavaScript control structures (if...else, switch, loops) with examples. Additionally, it includes JavaScript functions for summing digits and calculating exponentiation, as well as handling form events with validation.

Uploaded by

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

1.

-------

(i) Frameset:

The `<frameset>` element was used in older versions of HTML to define a set of frames within a web
page. However, it is now deprecated in HTML5 and no longer recommended for use. Frames were
used to divide the browser window into multiple sections, where each section could load a separate
HTML document. The frameset element defined the structure and layout of these frames.

Example:

```html

<!DOCTYPE html>

<html>

<head>

<title>Frameset Example</title>

</head>

<frameset cols="25%, 75%">

<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 two
columns. The first column takes up 25% of the width and loads the "menu.html" file, while the
second column occupies 75% of the width and loads the "content.html" file. This way, different HTML
documents 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 data
into rows and columns, making it easier to display and comprehend structured information. Tables
consist of one or more `<tr>` (table row) elements, which contain `<td>` (table data/cell) or `<th>`
(table header cell) elements.

Example:

```html
<!DOCTYPE html>

<html>

<head>

<title>Table Example</title>

</head>

<body>

<table>

<tr>

<th>Name</th>

<th>Age</th>

<th>Country</th>

</tr>

<tr>

<td>John</td>

<td>25</td>

<td>USA</td>

</tr>

<tr>

<td>Lisa</td>

<td>30</td>

<td>Canada</td>

</tr>

</table>

</body>

</html>

```

In the example above, a simple table is created with three columns: Name, Age, and Country. Each
row of the table is defined using the `<tr>` element, and the cells within each row are specified using
the `<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 input
and submit data, which can be processed or stored on the server. The form element acts as a
container for various form elements such as input fields, checkboxes, radio buttons, dropdown
menus, etc.

Example:

```html

<!DOCTYPE html>

<html>

<head>

<title>Form Example</title>

</head>

<body>

<form action="/submit-form" method="post">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

```

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 be
submitted, and `method` specifies the HTTP method to be used (typically "post" or "get"). The form
includes two `<input>` elements, one

2.----------------
CSS (Cascading Style Sheets) is used to control the visual presentation of HTML elements. There are
three ways to apply CSS styles to HTML elements: inline, internal, and external CSS. Let's explore
each 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.

Example:

```html

<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 to
the `<p>` element using the `style` attribute. This results in the paragraph text being displayed in red
color with a font size of 18 pixels.

2. Internal CSS:

Internal CSS involves defining styles within the `<style>` element placed in the `<head>` section of
an HTML document. The styles defined in internal CSS apply to the elements within that specific
HTML file.

Example:

```html

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Example</title>

<style>

p{

color: blue;

font-size: 16px;

}
</style>

</head>

<body>

<p>This is a blue paragraph with font size 16 pixels.</p>

</body>

</html>

```

In the example above, the styles for the `<p>` element are defined within the `<style>` element in
the `<head>` section. The styles set the color to blue and the font size to 16 pixels. As a result, the
paragraph 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 an
HTML document using the `<link>` element. This method allows for reusable styles across multiple
HTML files.

Example:

```html

<!-- styles.css -->

p{

color: green;

font-size: 20px;

```

```html

<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

<link rel="stylesheet" href="styles.css">


</head>

<body>

<p>This is a green paragraph with font size 20 pixels.</p>

</body>

</html>

```

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 external
CSS file.

Using inline, internal, and external CSS allows you to apply styles to HTML elements based on your
specific 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 and
make 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 specific
condition. If the condition in the `if` statement evaluates to true, the code within the `if` block is
executed. Otherwise, if the condition is false, the code within the `else` block is executed.

Example:

```javascript

let num = 10;

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 is
positive." 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 possible
values of a single expression. It evaluates the expression and compares it to various cases, executing
the code within the corresponding case block.

Example:

```javascript

let day = "Tuesday";

switch (day) {

case "Monday":

console.log("It's the start of the week.");

break;

case "Tuesday":

case "Wednesday":

case "Thursday":

console.log("It's a weekday.");

break;

case "Friday":

console.log("It's almost the weekend.");

break;

default:

console.log("It's the weekend!");

break;

```
In the above example, depending on the value of the `day` variable, the corresponding case block is
executed. 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 consists
of an initialization, a condition, and an increment/decrement expression, all within the parentheses.

Example:

```javascript

for (let i = 1; i <= 5; i++) {

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.

Example:

```javascript

let count = 1;

while (count <= 5) {

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.

Example:

```javascript

let i = 1;

do {

console.log(i);

i++;

} while (i <= 5);

```

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 decisions
based on specific conditions, enabling you to write dynamic and interactive code.

4.a----------------

function sumOfDigits(number) {

// Convert the number to a string

let numStr = number.toString();

// Initialize a variable to store the sum

let sum = 0;

// Iterate over each digit in the string

for (let i = 0; i < numStr.length; i++) {

// Convert each digit back to a number and add it to the sum

sum += parseInt(numStr.charAt(i), 10);

}
// Return the sum of digits

return sum;

// Example usage

console.log(sumOfDigits(123)); // Output: 6 (1 + 2 + 3 = 6)

console.log(sumOfDigits(9875)); // Output: 29 (9 + 8 + 7 + 5 = 29)

console.log(sumOfDigits(456789)); // Output: 39 (4 + 5 + 6 + 7 + 8 + 9 = 39)

4.b----------------

Certainly! Here's a recursive function in JavaScript to calculate the exponentiation of a number `m`
raised to the power `n`:

```javascript

function power(m, n) {

// Base case: When n is 0, any number raised to the power of 0 is 1

if (n === 0) {

return 1;

// Recursive case: Multiply m by the result of power(m, n-1)

return m * power(m, n - 1);

// Example usage

console.log(power(2, 3)); // Output: 8

console.log(power(5, 4)); // Output: 625

console.log(power(10, 0)); // Output: 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 power
of 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 user
within a form, such as submitting the form, changing input values, or focusing on input fields.

Here's an example to illustrate form events in JavaScript:

```html

<!DOCTYPE html>

<html>

<head>

<title>Form Event Example</title>

</head>

<body>

<form id="myForm">

<label for="name">Name:</label>

<input type="text" id="name" name="name" required><br>

<label for="email">Email:</label>

<input type="email" id="email" name="email" required><br>

<input type="submit" value="Submit">

</form>
<script>

// Access the form element

const form = document.getElementById('myForm');

// Add an event listener for the 'submit' event

form.addEventListener('submit', function(event) {

event.preventDefault(); // Prevent form submission

// Retrieve input field values

const nameInput = document.getElementById('name');

const emailInput = document.getElementById('email');

// Perform validation

if (nameInput.value === '') {

alert('Please enter your name.');

nameInput.focus();

} else if (emailInput.value === '') {

alert('Please enter your email.');

emailInput.focus();

} else {

// Form is valid, proceed with submission

alert('Form submitted!');

form.reset();

});

</script>

</body>

</html>

```
In the example above, we have a simple form with two input fields (name and email) and a submit
button. 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 callback
function 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 and
email input fields.

We perform some basic validation by checking if the fields are empty. If either field is empty, an alert
is displayed, and the corresponding input field is focused using the `focus()` method. If both fields
have 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 validation
before submitting the form using JavaScript.

You might also like