Scribd
Upload
20 views16 pages

2 Iaimp

UID 2-3 IMPORTANT MODULE

Uploaded by

Rockstar
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
20 views16 pages

2 Iaimp

UID 2-3 IMPORTANT MODULE

Uploaded by

Rockstar
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/ 16

1) a) What are the two ways of embedding Javascript in XHTML5 with examples.

Between the <head> Tags

 This is where you include JavaScript that is meant to be loaded before the page content. It's
typically used for code that sets up variables, functions, or event handlers that are needed as soon
as the page starts to load.
 JavaScript in the <head>: Useful for functions and variables needed as soon as possible. You
might use this approach to set up global variables or functions that should be available throughout
the page load.
 Example:

Between the <body> Tags:


 JavaScript placed within the <body> tag generally runs after the page content is loaded, which can
be useful for DOM manipulation or for scripts that interact with elements on the page.
 JavaScript in the <body>: Useful for scripts that interact with page elements or need to be
executed in response to user actions, like button clicks. This placement ensures that all the
elements the script might interact with are already loaded.
 Example:
b) Write a program in Javascript to accept a number using prompt and display its reverse using
alert.
<!DOCTYPE html>
<html>
<head>
<title>Reverse Number Example</title>
<script type="text/javascript">
function reverseNumber() {
// Prompt user for input
var number = prompt("Please enter a number:");

// Check if the input is valid and is a number


if (number !== null && !isNaN(number)) {
// Reverse the number by converting it to a string, reversing it, and converting back to a
number
var reversedNumber = number.toString().split('').reverse().join('');

// Display the reversed number


alert("The reverse of the number is: " + reversedNumber);
} else {
alert("Please enter a valid number.");
}
}

// Call the function when the page loads


window.onload = reverseNumber;
</script>
</head>
<body>
<h1>Reverse Number Example</h1>
<p>Check the alert box for the reversed number.</p>
</body>
</html>

2) What are the different methods of window object that create dialog boxes for user interaction
in Javascripts.

 JavaScript supports three important types of dialog boxes. These dialog boxes can be used to
raise and alert, or to get confirmation on any input or to have a kind of input from the users.

 Alert Dialog Box


An alert dialog box is mostly used to give a warning message to the users. For
example, if one input field requires to enter some text but the user does not
provide any input, then as a part of validation, you can use an alert box to give a
warning message.

 Confirmation Dialog Box


A confirmation dialog box is mostly used to take user's consent on any option. It
displays a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true.
If the user clicks on the Cancel button, then confirm() returns false. You can use
a confirmation dialog box as follows.
 Prompt Dialog Box
This dialog box is displayed using a method called prompt() which takes two
parameters: (i) a label which you want to display in the text box and (ii) a default
string to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button,
the window method prompt() will return the entered value from the text box. If
the user clicks the Cancel button, the window method prompt() returns null.

3) How do you create arrays in Javascript? Explain the various array methods with examples.

 JavaScript array is an object that represents a collection of similar type of elements.


There are 3 ways to construct array in JavaScript
By array literal
By creating instance of Array directly (using new keyword)
By using an Array constructor (using new keyword)

1) JavaScript array literal

The most common way to create an array is using array literals. This method is straightforward and
often used in practice.
The syntax of creating array using array literal is given below:

Ex: var fruits = ['apple', 'banana', 'cherry'];

2) JavaScript Array directly (new keyword)

3) JavaScript array constructor (new keyword)


Here, you need to create instance of array by passing arguments in constructor so that we don't
have to provide value explicitly.

4) Define JavaScript Array. Explain the two different ways to create arrays in JavaScript.
 A JavaScript array is a special type of object used to store multiple values in a single variable.
 Arrays in JavaScript are ordered collections of elements, which can be of any type, including
numbers, strings, objects, and even other arrays.
 They provide a way to group related data together and access it using an index.

5) a) Explain how user defined functions will be crated in JavaScript. Give example code.

In JavaScript, user-defined functions are created to encapsulate reusable code into a single block that
can be invoked whenever needed. Functions help in organizing code, reducing redundancy, and
improving readability. Here's a detailed explanation of how to create and use user-defined functions
in JavaScript.

Creating a User-Defined Function

A user-defined function in JavaScript is created using the function keyword followed by a name, a
set of parentheses (), and a block of code enclosed in curly braces {}.

Syntax:

There are two steps to work with function

1. Create a function

2. Call that function

Creating a function

function test(){
document.write(“I am Function”);

Calling a function (Invocation)

test()

b) Write a JavaScript that accepts a value ‘n’ as a input from the user and display the first ‘n’
Fibonacci numbers as output.

<!DOCTYPE html>
<html>
<head><title> LabProgram3 </title>
<script type="text/javascript">
function disp( )
{
var fib;
var n=document.getElementById('t1').value;
var a=0,b=1;
document.write("<h2>fibonacci Series<br/>");
document.write("================<br/>");
document.write(a+"<br/>"+b+"<br/></h2>");
for(var i=2;i<n;i++)
{
fib=a+b;
a=b;
b=fib;
document.write("<h2>"+fib+"<br/></h2>")
}
}
</script>
</head>
<body bgcolor="lightyellow">
<form id="f1">
<h2> Enter the limit to Generate fibonacci series:<input type="text"
id="t1"/></h2>
<center><h2><input type="button" onclick="disp()" value="Click here to
display fibonacci series"/> </h2></center>
</form>
</body>
</html>

6) What is Events & Events Handling? Explain the event handling in with an example.

In JavaScript, an event is an action that occurs on a web page, such as a mouse click, key press, or page
load. Event handling is the process of responding to these events with a specific action or set of
actions.
Event handling in JavaScript is a technique that allows you to run specific code in response to certain
actions or occurrences (events) within a web page. These events could be user interactions such as
clicks, key presses, or form submissions, or they could be system-generated events like loading the
page or resizing the window.
Event handling in JavaScript typically involves:

1. Event Listener: An event listener is a function that waits for an event to occur. It "listens" for the event
and then executes a specified action when the event happens.

2. Event Handler: An event handler is the function that is called when an event occurs. It contains the
code that will be executed in response to the event.

3. Event Object: The event object represents the event that occurred. It contains information about the
event, such as the type of event, the element that triggered the event, and any relevant data (e.g.,
mouse coordinates).
7) Demonstrate with Suitable examples onclick and onfocous events.
The onclick and onfocus events in JavaScript allow you to handle user interactions with HTML elements.
 onclick: This event is triggered when an element is clicked.
 onfocus: This event is triggered when an element gains focus (e.g., when a user clicks on an input
field or navigates to it using the keyboard).

Examples
Example 1: onclick Event
This example demonstrates how to use the onclick event to handle a button click. When the button is
clicked, a message is displayed.
<!DOCTYPE html>
<html>
<head>
<title>onclick Event Example</title>
<script type="text/javascript">
function showMessage() {
alert('Button was clicked!');
}
</script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>

Example 2: onfocus Event


This example demonstrates how to use the onfocus event to handle when an input field gains focus. When
the input field is focused, its border color changes to indicate it has been selected.
<!DOCTYPE html>
<html>
<head>
<title>onfocus Event Example</title>
<style>
.focused {
border: 2px solid blue;
}
</style>
<script type="text/javascript">
function highlightField(event) {
event.target.classList.add('focused');
}

function unhighlightField(event) {
event.target.classList.remove('focused');
}
</script>
</head>
<body>
<input type="text" placeholder="Focus on me" onfocus="highlightField(event)"
onblur="unhighlightField(event)">
</body>
</html>

8) Explain pattern matching in JavaScript with example.

Regular expression are used in a text search technique called pattern matching It is a pattern of characters
following special syntax to search text for matching pattern

It can find single character, words and complex pattern of characters Pattern matching and regular
expression are used for validation, replacing text,processing user input and parsing text

Construct regular expression for the pattern and use javascript method to find matching string in text

Eg:
literal- it is any character we use in search or match expression To find windows the ind is a literal string
metacharacter- it is special character not used as literals in search expression

eg ^- ^win find “Microsoft Windows” it looks only in the beginning of target string so it will not find win
but “Mozilla Browser” it will find ^Moz
Basic Syntax of Regular Expressions
 Literal Characters: Matches the exact characters. For example, /hello/ matches "hello".
 Metacharacters: Special characters that control the search pattern.
o .: Matches any single character except newline.
o ^: Matches the start of a string.
o $: Matches the end of a string.
o *: Matches 0 or more occurrences of the preceding element.
9) Develop and demonstrate, a XHTML document that collects the USN(the valid format is
: A digit from 1 to 4 followed by two upper-case characters followed by two digits
followed by three uppercase characters followed by two digits; (no embedded spaces are
allowed) from the user. Use JavaScript that validate the content of the document. Suitable
messages should be display in the alert if errors are detected in the input data.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>USN Validation</title>
<script type="text/javascript">

function validateUSN() {

var usn = document.getElementById("usn").value;

var usnPattern = /^[1-4][A-Z]{2}[0-9]{2}[A-Z]{3}[0-9]{2}$/;

if (!usnPattern.test(usn)) {

alert("Invalid USN format. Please ensure the format is: Digit (1-4) + Two uppercase letters +
Two digits +

Three uppercase letters + Two digits.");

return false;

alert("USN is valid.");

return true;

</script>

</head>

<body>

<h1>USN Validation Form</h1>

<form id="usnForm" onsubmit="return validateUSN();">

<label for="usn">Enter USN:</label>

<input type="text" id="usn" name="usn" />

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

</form>

</body>

</html>

(10M)
Module – 3
10) What is Bootstrap? Explain the Bootstrap file structure with a neat diagram. And give an example
for basic HTML template by using Bootstrap.

 Bootstrap is a popular front-end framework designed to streamline web development. It provides


a collection of CSS and JavaScript components that facilitate responsive design, allowing
developers to create mobile-first websites quickly and efficiently.

 Bootstrap includes a grid system, pre-defined styles for typography, forms, buttons, navigation,
and various UI components that help maintain consistency across web applications.

 A typical Bootstrap project includes several key directories and files. Here’s a basic structure.

11) What is Bootstrap? What are the features of Bootstrap? Create a webpage using Bootstrap.
Features of Bootstrap

Bootstrap offers a wide range of features that enhance web development. Some key features include:

1. Responsive Grid System: A flexible grid layout that adjusts to various screen sizes.
2. Predefined Components: Ready-to-use components such as buttons, modals, dropdowns, and navigation
bars.
3. Customizable Themes: Options to customize Bootstrap’s appearance using Sass variables or by overriding
CSS.
4. JavaScript Plugins: Built-in plugins for interactive elements like carousels, tooltips, and popovers.
5. Utility Classes: Classes for spacing, colors, text alignment, and more, allowing for quick styling.
6. Cross-Browser Compatibility: Ensures consistent display across different web browsers.
7. Mobile-First Approach: Designed with a mobile-first philosophy, ensuring optimal viewing on smaller
devices.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body class="bg-light text-dark">
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
</div>
</body>
</html>

12) Explain the following HTML concepts with Bootstrap CSS

i) Tables ii) Images iii) Progress bars (10M)

13) Explain with an example, the Bootstrap elements of Button and Button Group. (10M)
14) What is the responsive web design? Develop a Bootstrap program to add zebra-stripes to a table.
(10M)
15) Discuss the various forms of accessing XHTML elements in JavaScript with an example.

16) List and explain Form & Custom form classes available in Bootstrap CSS. Explain with an example.
(10M)
17) Explain the form validations in Bootstrap. Develop a Bootstrap program to create a staked form with
2 input fields, 1 checkbox and submit button. (10M)
18) Explain the following Bootstrap elements
i) Utilities ii) Classes iii) alerts. (10M)
19) a) Explain in detail Grid System in Bootstrap. (5M)
b) Explain Bootstrap containers.

*** ALL THE BEST ***

You might also like