Scribd
Upload
3 views

CSS test 1 QB SOLVED

The document provides an overview of JavaScript concepts, including features, comparison operators, data types, objects, methods, properties, and how to write and display JavaScript code. It also includes practical examples of JavaScript programs for various tasks such as checking prime numbers, calculating average marks, and handling user input. Additionally, it covers the use of functions, arrays, and variable scope in JavaScript.

Uploaded by

sahildawange37
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 views

CSS test 1 QB SOLVED

The document provides an overview of JavaScript concepts, including features, comparison operators, data types, objects, methods, properties, and how to write and display JavaScript code. It also includes practical examples of JavaScript programs for various tasks such as checking prime numbers, calculating average marks, and handling user input. Additionally, it covers the use of functions, arrays, and variable scope in JavaScript.

Uploaded by

sahildawange37
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/ 37

2 marks

chapter: 1

1. Enlist any four features of JavaScript.

---> • JavaScript is a object-based scripting language.

• Giving the user more control over the browser.

• It Handling dates and time.

• It Detecting the user's browser and OS

• It is light weighted.

• Client – Side Technology

2. List the comparison operators in JavaScript with description.

--> == equal to

!= not equal to

> greater than

< less than

>= greater than or equal to

=== equal value and equal type

!== not equal value or not equal type

3. List and explain data types in JavaScript.

-->It uses six types of values:

• Number: It is numeric value can be integer or float.

For Example : var a=20;

• String: It is a collection of characters. Enclosed within single or double quote.

For Example : car city=”Nashik”

• Boolean: It contains true and false values.

For Example : var b=true;

• Null: This value can be assigned by reserved word ‘null’. It means no value.

For Example : var i=null;

• Object: It is the entity that represents some value. Ex: Form is an object on which some

components can be placed and used.

For Example : var person = { firstname:"John", lastname:"Doe"};


4. State the use of Object, Method and Property in JavaScript

--> Object Name:

• Object is entity. In JavaScript document, window, forms, fields, buttons are some properly used

objects.

• Each object is identified by ID or name.

• Array of objects or Array of collections can also be created.

 Property:

• It is the value associated with each object.

• Each object has its own set of properties.

• For example, a form object has a title, a width, and a height—to mention a few properties

 Method:

• A method is a process performed by an object when it receives a message.

• For example, a Submit button on a form is an object. Its Submit label and the dimensions of the

button are properties of the button object.

• If you click the Submit button, the form is submitted to the server-side application. In other

words, clicking the Submit button causes the button to process a method.

5. How to write a JavaScript?

-->• JavaScript can be implemented using JavaScript statements that are placed within the <script>...

</script> HTML tags in a web page.

• You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it

is normally recommended that you should keep it within the <head> tags.

• The <script> tag alerts the browser program to start interpreting all the text between these tags as

a script.

• A simple syntax of your JavaScript will appear as follows.

<script ...>

JavaScript code

</script>

• The script tag takes two important attributes −

• Language − This aLribute specifies what scripNng language you are using.

• Type − This aLribute is what is now recommended to indicate the scripNng language in use

and its value should be set to "text/javascript".


• So your JavaScript segment will look like −

<script language = "javascript" type = "text/javascript">

JavaScript code

</script>

6. State the ways to displays the output in JavaScript.

-->1)console.log()

2)alert()

3)document.write()

4)innerHTML

7)Write a JavaScript to create person object with properties firstname, lastname, age, eye color,

delete eye color property and display remaining properties of person object.

--><html>

<body>

<script>

var person = {

firstname:"John",

lastname:"Doe",

age:50,

eyecolor:"blue"

};

delete person.eyecolor; //delete person eyecolor

document.write("After delete "+ person.firstname +" "+

person.lastname+" "

+person.age +" "+ person.eyecolor);

</script>

</body>

</html>

9) Describe property Getters & Setter.

In JavaScript, accessor properties are methods that get or set the value of an object. For that, we use

these two keywords:

get - to define a getter method to get the property value


set - to define a setter method to set the property value

The following example shows a getter defined on an object called person. The getter is called name,

and it returns the value of the name property on the object:

let person = {

name: 'John',

get name() {

return this.name;

};

For example, let's say we have an object called "user" with a property called "name". We can define

a setter method for the "name" property like this:

const user = {

name: '',

set name(value) {

this.name = value;

},

};

10. Write a JavaScript program to check whether entered number is prime or not.

--><head>

<title>Check a number is prime pr not using javascript</title>

<script type="text/javascript">

function prime()

var n,i,flag=true;

n=document.myform.n.value;

for(i=2;i<=n/2;i++)

if(n%i==0)

flag=false;

break;
}

if(flag==true)

alert(n+"is prime");

else

alert(n+"is not prime");

</script>

</head>

<body>

<form name="myform">

Enter the Number:<input type="text" name=n value=" ">

<br><br>

<input type="button" value="Check" onClick="prime()">

<br>

</form>

</body>

</html>

11) Write a JavaScript that accepts a number and displays addition of digits of that number in a

message box.

--><html>

<body>

<script>

var num = prompt(“Enter a 2 digit number:”); //accept number from user

var digits = num.split();

var firstdigit = Integer(digits[0]);

var seconddigit = Integer(digits[1]);


var addition = firstdigit+seconddigit;

alert(“The addition is “+addition); //display result in message box

</script>

</body>

</html>

12) Write and explain syntax of prompt( ) method in JavaScript.

-->•prompt() method is used to display a dialogue box to the user to prompt them to an input.

•It has two buttons “OK” and “CANCEL”, if the user click on the “OK” button then it will return the

inputed value , if the user clicks on the "CANCEL” button then it will return a null value

• Syntax: prompt(text)

Example:

<script>

var name = prompt ("Enter a name");

document. Write(name);

</script>

13) Give syntax of and explain the use of small “with” clause.

-->“with” clause is used to directly access the properties and method of an object.

Syntax:

with (object)

//object

Example:

<script>

var person ={ name:"Abc", age:18}

with(person){ docment.write(name);

docment.write(age);

</script>
4 marks

chapter: 1

1. Write a JavaScript program which computes average marks of the student and according to
average

marks determine the grade

--><html>

<head>

<title>Compute the average marks and grade</title>

</head>

<body>

<script>

var students = [['Summit', 80], ['Kalpesh', 77], ['Amit', 88],

['Tejas', 93],['Abhishek', 65]];

var Avgmarks = 0;

for (var i=0; i < students.length; i++)

Avgmarks += students[i][1];

var avg = (Avgmarks/students.length);

document.write("Average grade: " + (Avgmarks)/students.length);

document.write("<br>");

if (avg < 60)

document.write("Grade : E");

else if (avg < 70)

document.write("Grade : D");

else if (avg < 80)


{

document.write("Grade : C");

else if (avg < 90)

document.write("Grade : B");

else if (avg < 100)

document.write("Grade : A");

</script>

</body>

</html>

2. Differentiate BETWEEN For-loop and For-in loop.

-->• for loop is a method available for arrays in JavaScript. It allows you to iterate over each

element in an array and perform a specific action for each element.

for(var i=1; i<=5; i++)

document.write("<p>The number is " + i + "</p>");

for...in loop:

o for...in loop is used to iterate over the properties of an object in JavaScript.

o The for...in loop allows you to access each property of an object. It iterates over the

enumerable properties of an object, and for each property, the loop assigns the property

name to the specified variable.

// An object with some properties

var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// Loop through all the properties in the object

for(var prop in person) {


document.write("<p>" + prop + " = " + person[prop] + "</p>");

Difference :

a. First, the for...in can loop through both Arrays and Objects while the for...of can only loop

through Arrays, Map, Set, arguments object.

b. The second and the biggest difference between both of these statements are, by default,

the for...in iterates over property names and the for...of iterates over property values.

4. Explain getter and setter properties in JavaScript.

-->Property getters and setters

1. The accessor properties. They are essentially functions that work on getting and setting a value.

2. Accessor properNes are represented by ―geLer‖ and ―seLer‖methods. In an object literal they
are

denoted by get and set.

get –It is used to define a getter method to get the property value

set –It is used to define a setter method to set / change the property value

let obj =

get propName() {

// getter, the code executed on getting obj.propName

},

set propName(value) {

// setter, the code executed on setting obj.propName = value

};

3. An object property is a name, a value and a set of attributes. The

value may be replaced by one or two methods, known as setter and a getter.

Example of getter

const student

firstname: ‗abc‘,

get getname()
{

return this.firstname;

};

Example of setter

const student

firstname: ‗abc‘,

set changename(nm)

this.firstname=nm;

};

5. Write an HTML Script that displays the following webpage output:

first number:

second number:

add sub mul

The user enters two numbers in respective text boxes. Write a JavaScript such that when user clicks

"add", a message box displays sum of two entered numbers, if the user clicks on "sub”. Message

box displays subtraction of two numbers and on clicking “mul” the message box displays

multiplication of two numbers.

--> <html>

<head>

<script>

function add()

var num1, num2, r;

//to accept 2 values and stored in variable num1 and num2

num1 = parseInt(document.getElementById("firstnumber").value);

num2 = parseInt(document.getElementById("secondnumber").value);

r= num1 + num2;
alert(r);

function sub()

var num1, num2, r;

num1 = parseInt(document.getElementById("firstnumber").value);

num2 = parseInt(document.getElementById("secondnumber").value);

r = num1 - num2;

alert(r);

function mul()

var num1, num2, r;

num1 = parseInt(document.getElementById("firstnumber").value);

num2 = parseInt(document.getElementById("secondnumber").value);

r = num1 * num2;

alert(r);

</script>

</head>

<body>

<fieldset>

<p>First Number: <input id="firstnumber"></p>

<p>Second Number: <input id="secondnumber"></p>

//onClick() event to perform addition, subtraction and multiplication

<button onclick="add()">Add</button>

<button onclick="sub()">Sub</button>

<button onclick="mul()">Mul</button>

</fieldset>

</body>

</html>
20. Write a JavaScript program to check whether a number is positive, negative or zero using switch

case.

<html>

<body>

<script type="text/javascript">

var num=prompt("Enter number");

switch (Math.sign(num))

case 1:

alert("The number is Positive");

break;

case -1:

alert("The number is Negative");

break;

default:

alert("The number is Zero");

</script>

</body>

</html>

6. Write HTML script that displays textboxes for accepting username and password. Write proper

JavaScript such that when the user clicks on submit button

i) All textboxes must get disabled and change the color to ‘RED; and with respective labels

ii) Prompt the error message if the password is less than six characters

--><html>

<head>

<script>

function disableTxt()

document.getElementById("un").disabled = true;

document.getElementById('un').style.color = "red";
document.getElementById('aaa').style.color = "red";

document.getElementById("pass").disabled = true;

document.getElementById('pass').style.color = "red";

document.getElementById('bbb').style.color = "red";

function validateform()

var username=document.myform.username.value;

var password=document.myform.password.value;

if (username==null || username=="")

alert("Name can't be blank");

return false;

else if(password.length<6)

alert("Password must be at least 6 characters long.");

return false;

</script>

</head>

<body>

<form name="myform" method="post" action="" onsubmit="return

validateform()" >

<label id = "aaa">Username:</label>

<input type="text" id="un" name="username"/>

<label id = "bbb">Password:</label>

<input type="password" id="pass" name="password"/>

<br>

<br>
<button onclick="disableTxt()">Disable Text field</button>

</form>

</body>

</html>

chapter 2

2 marks

1)Write a JavaScript that initialize an array called flowers with the names of 3 flowers. The script then

display array elements.

-->then display array elements.

<html>

<head>

<title>Display Array Elements</title>

</head>

<body>

<script>

var flowers = new Array();

flowers[0] = 'Rose ';

flowers[1] = 'Mogra';

flowers[2] = 'Hibiscus';

for (var i = 0; i < flowers.length; i++)

document.write(flowers[i] + '<br>');

</script>

</body>

</html>

2) State the meaning of "Defining a function". Explain with the help of an example.

--> • A function is a block of code that takes some input to perform some certain computation.

• The main purpose of the function is to put commonly used or repeatedly used task in a function, so
instead of writing the code again and again we can call it instead.

• The function can be defined as followed:

Syntax:

function func_name(parameter1 ,parameter2,…,parametern)

//code

Example:

<script>

function add(num1,num2)

return num1 + num2;

add(1,2);

</script>

3)Explain scope of variable declared in function with example.

--> Explain scope of variable declared in function with example.

<html>

<body>

<form name="login">

Enter Username<input type="text" name="userid"><br>

Enter Password<input type="password" name="pswrd">

<input type="button" onclick="display()" value="Display">

</form>

<script language="javascript">

function display()

document.write("User ID "+ login.userid.value + "Password

:"+login.pswrd.value);

</script>
</body>

</html>

4)Write a program to accept the marks of 10 subjects from the user and store it in array. Sort them

and display

--><html>

<body>

<h2>Accept and Display the marks</h2>

<script>

a = new Array();

length=prompt("For how many subjects do you want to enter a

marks?");

alert("Enter Marks of Subjects")

for(i=0;i<length;i++)

a[i]=prompt("Enter marks of subject"+i);

document.write("<br/><br/>The entered subjects marks are<br\>");

for(i=0;i<length;i++)

document.write("Marks of subject"+i+"is :"+a[i]);

document.write("</br>");

document.write("<br/><br/>The array sorted subjects mareks

are<br\>");

a.sort();

document.write("<br/>The element in the array are<br\>");

for(i=0;i<length;i++)

document.write("Marks of subject"+i+"is :"+a[i]);

document.write("</br>"); }

</script>
</body>

5) Write a JavaScript that will replace following specified value with another value in the string

String=”I will fail” replace “fail” by “pass”.

--> <html>

<head>

<body>

<script>

var myStr = ‘I will fail’;

var newStr = myStr.replace(fail, "pass");

document.write(newStr);

</script>

</body>

</head>

</html>

6). Differentiate between shift() and push() methods of an Array object.

-->
7) . Difference between concat() and join() method of array with example.

-->

chapter: 2

4 marks

1) Differentiate between substring() and substr() method of a string class. Give Suitable example of

each.

-->

2)16. State the use of following methods:

i)

charCodeAt( ) ii) fromCharCode ( )

-->i) charCodeAt( )

ii) fromCharCode ( )

1. charCodeAt( ): This method is used to return a unicode of specified character.

Syntax: var code=letter.charCodeAt( );

Example: var ch=‘a‘;

document.write(ch.charCodeAt( ));

Output: 97

2. fromCharCode( ): This method is used to return a character for specified code.

Syntax: var character=String.fromCharCode(code);

Example: var character=String.fromCharCode(97);

Document.write(ch);

Output: a
3)Write a JavaScript to check whether a passed string is palindrome or not

-->function isPalindrome(str) {

str = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase();

return str === str.split('').reverse().join('');

console.log(isPalindrome("A man, a plan, a canal, Panama")); //

Output: true

console.log(isPalindrome("racecar")); // Output: true

console.log(isPalindrome("hello")); // Output: false

16. Write a JavaScript to check whether a passed string is palindrome or not

<html>

<body>

<h1>Palindrome</h1>

Enter String: <input type="text" id="txt" />

<input type="button" value="Check" onClick=checkPalindrome()/>

<p id="result"></p>

<script>

function checkPalindrome() {

var str = document.getElementById('txt').value;

const len = str.length;

var flag = 1;

for (var i = 0; i < len / 2; i++) {

if (str[i] !== str[len - 1 - i]) {

flag = 0;

if (flag == 1) {

document.getElementById("result").innerHTML = "It is a

palindrome";

else {
document.getElementById("result").innerHTML = "It is not a

palindrome";

</script>

</body>

</html>

4) Explain how to add and sort elements in array with suitable example.

-->Adding Elements to an Array:

In JavaScript, you can add elements to an array using various methods, such as push(), unshift(), or

direct assignment to a specific index.

Using push():

The push() method adds one or more elements to the end of an array and returns the new length of

the array.

Using unshift():

The unshift() method adds one or more elements to the beginning of an array and returns the new

length of the array.

Using splice():

This method can be used to add new items to an array, and removes elements from an array.

Syntax:

arr.splice(start_index,removed_elements,list_of_elemnts_to_be_added);

Parameter:

•The first parameter defines the position where new elements should be added (spliced in).

•The second parameter defines how many elements should be removed.

•The list_of_elemnts_to_be_added parameter define the new elements to be added(optional).

Using length property:

The length property provides an easy way to append a new element to an array.

Example

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

document.write(fruits+"<br>");
fruits[fruits.length] = "Kiwi";

document.write(fruits+"<br>");

fruits[fruits.length] = "Chikoo";

document.write(fruits);

</script>

Sorting Elements in an Array:

JavaScript provides the sort() method to sort the elements of an array in place and returns the

sorted array.

Example

let numbers = [5, 2, 8, 1, 4];

numbers.push(7);

console.log("Array before sorting:", numbers);

numbers.sort((a, b) => a - b);

console.log("Array after sorting:", numbers);

5) Develop JavaScript to convert the given character to Unicode and vice-versa

-->• JavaScript String charAt() Method

• The JavaScript string charAt() method is used to find out a char value present at the specified index

in a string.

• The index number starts from 0 and goes to n-1, where n is the length of the string. The index value

can't be a negative, greater than or equal to the length of the string.

• Syntax

• The charAt() method is represented by the following syntax:

String.charAt(index)

Example1

<html>

<body>

<title>JavaScript String charAt() Method</title>

<script>

var str="Sandip Polytechnic";

document.writeln(str.charAt(4));

</script>
</body>

</html>

• JavaScript String charCodeAt() Method

• The JavaScript string charCodeAt() method is used to find out the Unicode value of a character at

the specific index in a string.

• The index number starts from 0 and goes to n-1, where n is the length of the string.

• It returns NaN if the given index number is either a negative number or it is greater than or equal

to the length of the string.

• Syntax : string.charCodeAt(index)

• Parameter : index - It represent the position of a character.

• Return : A Unicode value

<html>

<head>

<title>JavaScript String charCodeAt() Method</title>

</head>

<body>

<script type = "text/javascript">

var str = new String( "Sandip Polytechnic" );

document.write("str.charCodeAt(0) is:" + str.charCodeAt(0));

document.write("<br />str.charCodeAt(1) is:" + str.charCodeAt(1));

document.write("<br />str.charCodeAt(2) is:" + str.charCodeAt(2));

document.write("<br />str.charCodeAt(3) is:" + str.charCodeAt(3));

document.write("<br />str.charCodeAt(4) is:" + str.charCodeAt(4));

document.write("<br />str.charCodeAt(5) is:" + str.charCodeAt(5));

</script>

</body>

</html>

6)Write an HTML script that accepts Amount, Rate of interest and Period from user. When user

submits the information a JavaScript function must calculate and display simple interest in a

message box. (Use formula S.I. = PNR/100)

--><html>
<body>

<script>

var P = parseInt(prompt(“Enter the principal amount:”));

var N = parseInt(prompt(“Enter the period:”));

var R = parseInt(prompt(“Enter the Rate of interest:”));

var SI =(P*N*R)/100;

alert(“Simple Interest is “+SI);

</script>

</body>

</html>

OR

<html>

<head>

<script>

function interest()

var P, N, R;

P= parseInt(document.getElementById("pr").value);

N = parseInt(document.getElementById("period").value);

R = parseInt(document.getElementById("ri").value);

var SI =(P*N*R)/100;

alert("Simple Interest is="+SI);

</script>

</head>

<body>

<p>Principal Amount:<input id="pr"></p>

<p>Period in Year: <input id="period"></p>

<p>Rate of Interst: <input id="ri"></p>

<button onclick="interest()"> Simple Interest</button>

</body>
</html>

7)Write HTML script that displays textboxes for accepting username and password. Write proper

JavaScript such that when the user clicks on submit button

i) All textboxes must get disabled and change the color to ‘RED; and with respective labels

ii) Prompt the error message if the password is less than six characters

--><html>

<head>

<script>

function disableTxt()

document.getElementById("un").disabled = true;

document.getElementById('un').style.color = "red";

document.getElementById('aaa').style.color = "red";

document.getElementById("pass").disabled = true;

document.getElementById('pass').style.color = "red";

document.getElementById('bbb').style.color = "red";

function validateform()

var username=document.myform.username.value;

var password=document.myform.password.value;

if (username==null || username==""){

alert("Name can't be blank");

return false;

}else if(password.length<6){

alert("Password must be at least 6 characters long.");

return false;

</script>

</head>
<body>

<form name="myform" method="post" action="" onsubmit="return

validateform()" >

<label id = "aaa">Username:</label>

<input type="text" id="un" name="username"/>

<label id = "bbb">

Password:

</label>

<input type="password" id="pass" name="password"/>

<br>

<br>

<button onclick="disableTxt()">Disable Text field</button>

</form>

</body>

</html>

chapter 3

2 marks

1) List the various form events.

--> Here are the various form events:

1. `submit`

2. `reset`

3. `focus`

4. `blur`

5. `change`

6. `input`

7. `keydown`

8. `keyup`

2) Enlist any four mouse events with their use.

-->Here are four mouse events in JavaScript and their uses:

onclickevent: This event occurs when a mouse button is clicked on or over a form element.
Example:

<input type="text" onclick=" function ()">

ondblclickevent: This event occurs when a mouse button is double clicked on or over a form element.

Example:

<input type="text" ondblclick=" function ()">

onmousedownevent: This event executes when a mouse button is clicked while cursor is over an
element.

Example:

<input type="text" onmousedown=" function ()">

onmouseupevent: This event executes when a mouse button is released while the cursor is over an

element.

Example:

<input type="text" onmouseup=" function ()">

onmouseoverevent: This event executes when mouse cursor moves onto an element.

Example:

<input type="text" onmouseover=" function ()"> onclickevent: This event occurs when a mouse
button is clicked on or over a form element.

Example:

<input type="text" onclick=" function ()">

ondblclickevent: This event occurs when a mouse button is double clicked on or over a form element.

Example:

<input type="text" ondblclick=" function ()">

onmousedownevent: This event executes when a mouse button is clicked while cursor is over an
element.

Example:

<input type="text" onmousedown=" function ()">

onmouseupevent: This event executes when a mouse button is released while the cursor is over an

element.

Example:

<input type="text" onmouseup=" function ()">

onmouseoverevent: This event executes when mouse cursor moves onto an element.

Example:
<input type="text" onmouseover=" function ()">

3) Write a form to make login and password

-->Write a form to make login and password

<html>

<head>

<title> Login Form Demo</title>

</head>

<body bgcolor="Red">

<Center>

<h2>Login Form</h2>

</center>

<form name="form1">

<table>

<tr>

<td><b>Name:</b></td>

<td><input type="text" name="username">

</tr>

<tr>

<td><b>Password:</b></td>

<td><input type="password" name="pwd"></td>

</tr>

<tr>

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

<td><input type="reset" name="reset" value="Reset"></td>

</tr>

</table>

</form>

</body>

</html>

4) Write a JavaScript code to demonstrate getElementbyId() method.

-->• The document.getElementById() method returns the element of specified id.


• We can use document.getElementById() method to get value of any field. But we need to

define id for the input field.

<script type="text/javascript">

function getcube()

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

alert(number*number*number);

</script>

<form>

Enter No:<input type="text" id="number" name="number"/><br/>

<input type="button" value="cube" onclick="getcube()"/>

</form>

chapter- 3

4 marks

1). Write a JavaScript to create rollover effect that involves text and images. When the user places his

or her mouse pointer over a book title, the corresponding book images appears .

--><html>

<head>

<title>

rollovers</title>

</head>

<body>

<table border="1" width="100%">

<tbody>

<tr valign="top">

<td width="50%">

<a><img height="500" src="motivation.png" width="900"

name="clr"></a></td>
<td><a onmouseover="document.clr.src='blue.png' ">

<b><u>Motivational book</u></b></a>

<br>

<a onmouseover="document.clr.src=education.png' ">

<b><u>Educational book</u></b></a>

<br>

</td>

</tr>

</tbody>

</table>

</body>

</html>

2). Write a HTML script which displays 2 radio buttons to the users for fruits and vegetables and 1

option list. When user select fruits radio button list should present only fruits to the user & when

user select vegetables radio button option list should present only vegetables names to the user.

--><html>

<head>

<title>HTML Form</title>

<script language="javascript" type="text/javascript">

function updateList(ElementValue)

with(document.forms.myform)

if(ElementValue == 1)

optionList[0].text="Mango";

optionList[0].value=1;

optionList[1].text="Banana";

optionList[1].value=2;

optionList[2].text="Apple";

optionList[2].value=3;
}

if(ElementValue == 2)

optionList[0].text="Potato";

optionList[0].value=1;

optionList[1].text="Cabbage";

optionList[1].value=2;

optionList[2].text="Onion";

optionList[2].value=3;

</script>

</head>

<body>

<form name="myform" action="" method="post">

<p>

<select name="optionList" size="2">

<option value=1>Mango

<option value=2>Banana

<option value=3>Apple

</select>

<br>

<input type="radio" name="grp1" value=1 checked="true"

onclick="updateList(this.value)">Fruits

<input type="radio" name="grp1" value=2

onclick="updateList(this.value)">Vegetables

<br>

<input name="Reset" value="Reset" type="reset">

</p>

</form>
</body>

</html>

3) Insert an image into a wepage. Write a script which displays the message when the mouse is over

the image. The coordinates of the mouse should be displayed if click attempted on the image

--><html>

<head>

<script type="text/javascipt">

function my_fun1()

points.innerText="Now the mouse is moving";

function my_fun2()

points.innerText="("+event.offsetX+","+event.offsetY+")";

</script>

</head>

<body onmousemove="my_fun1()" onmousedown="my_fun2()">

<center>

<span id="points">(0,0)</span>

<img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"

style="position:absolute;top:50;left:90">

</center>

</body>

</html>

• onmouseover and onmouseout

• These two event types will help you create nice effects with images or

even with text as well. The onmouseover event triggers when you bring

your mouse over any element and the onmouseout triggers when you move

your mouse out from that element. Try the following example.

<html>
<head>

<script type = "text/javascript">

function over() {

document.write ("Mouse Over");

function out() {

document.write ("Mouse Out");

</script>

</head>

<body>

<p>Bring your mouse inside the division to see the result:</p>

<div onmouseover = "over()" onmouseout = "out()">

<h2> This is inside the division </h2>

</div>

</body>

</html>

4). Explain following form control / elements with example Button, Text, TextArea, Select, Checkbox,

Form.

-->Button is created by using following code:

<form method = "GET" action = ""><input type = "button" name =

"MyButton" value = "Click" onclick = "msg()"><form>

There are several types of button, which are specified by the type

attribute:

1. Button which corresponds to the graphic component.

2. Submit, which is associated to the form and which starts the loading of the file assigned to the

action attribute.

3. Image button in which an image loaded from a file.

A Button object also represents an HTML <button> element which is specified as follows:

<button name = "btn" value = "MyButton" onclick = "msg()">

Example:
<html>

<body>

<h2>Show a Push Button</h2>

<p>The button below activates a JavaScript when it is clicked. </p>

<form>

<input type="button" value="Click me" onclick="msg()">

</form>

<script>

function msg()

alert("Hello world!");

</script>

</body>

</html>

Text:

Input "text" is an object to enter a single line of text whose content

will be part of form data.

In html a text is created by following code:

<input type="text" name="textname" id="textid" value="

assign_value" />

Example:

<script type="text/javascript">

function changeText()

var userInput = document.getElementById('userInput').value;

document.getElementById('vp').innerHTML = userInput;

</script>

<input type='text' id='userInput' value='Enter Text Here' />

<p>Welcome <b id='vp'>JavaScript</b></p>


<input type='button' onclick='changeText()' value='Change Text'/>

</script>

TextArea:

The Textarea object represents an HTML <textarea> element.

The <textarea> tag indicates a form field where the user can enter a large amount of text.

You can access a <textarea> element by using getElementById()

Example:

<html>

<body>

<textarea cols="30" rows="5" wrap="hard" readonly="yes"

disabled="yes">

As you can see many times word wrapping is often the desired look

for your textareas. Since it makes everything nice and easy to read

and preserves line breaks.

</textarea>

</body>

</html>

Checkbox:

<input> elements of type checkbox are rendered by default as boxes that are checked (ticked)

when activated. A checkbox allows you to select single values for submission in a form (or not).

Syntax for creating checkbox is:

<input type="checkbox" id="myCheck" onclick="myFunction()">

A checkbox can have only two states:

1. Checked

2. Unchecked

Example:

<html>

<body>

<div>

<br>

<input type="checkbox" name="program" id="it" value="IT">


<label for="it">Information Tech</label><br>

<input type="checkbox" name="program" id="co" value="CO"

checked>

<label for="co">Computer Engg</label><br>

<input type="checkbox" name="program" id="ej" value="EJ">

<label for="ej">Electronics</label><br>

<button onclick="validate();">Validate</button>

</div>

<div id="status">

</div>

<script>

function validate()

var elements = document.getElementsByName("program");

var statusText = " ";

for (var index=0;index <elements.length;index++)

statusText = statusText +

elements[index].value+"="+elements[index].checked+"<br>";

document.getElementById("status").innerHTML = statusText;

</script>

</body>

</html>

Select:

Form SELECT elements (<select>) within your form can be accessed and manipulated in JavaScript

via the corresponding Select object.

To access a SELECT element in JavaScript, use the syntax:

document.myform.selectname //where myform and selectname are names of your form/element.

document.myform.elements[i] //where i is the position of the select element within form


document.getElementById("selectid") //where "selectid" is the ID of the SELECT element on the

page.

Example:

<html>

<body>

<select id="programs" size="5">

<option>Computer Engineering</option>

<option>Information Technology</option>

<option>Chemical Engineering</option>

<option>Electronics &TeleComm.</option>

</select>

<p>Click the button to disable the third option (index 2) in the

dropdown list.</p>

<button onclick="myFunction()">Disable Option</button>

<script>

function myFunction()

var x = document.getElementById("programs").options[2].disabled

= true;

document.getElementById("programs").options[2].style.color =

"red";

</script>

</body>

</html>

Form:

A form is a section of an HTML document that contains elements such as radio buttons, text boxes

and option lists. HTML form elements are also known as controls.

Elements are used as an efficient way for a user to enter information into a form. Typical form

control objects also called "widgets"

includes the following:


• Text box for entering a line of text.

• Push button for selecting an action.

• Radio buttons for making one selection among a group of options.

• Check boxes for selecting or deselecting a single, independent option.

The <form> element can contain one or more of the following form

elements:

· <input> · <textarea> · <button> · <select> · <option> · <fieldset> ·

<label>

· <legend>

Syntax:

<form name = "myform" id = "myform" action = "page.html"

onSubmit = "test()"> -----objects---- </form>

You might also like