JavaScript

 17/5

## HTML, CSS

- These does not have event

- For event we use JavaScript


## JAVASCRIPT (JavaScript)

-  Javascript is an event programming

-  Used in head section

-  JavaScript is case sensitive

- inside body tag is dynamic script

syntax:- 

<html>

<head>

<script language="JavaScript">

</script>

</head>

</html>


## JavaScript Statement

1) Printing statement

document.write("message");


2) Alert statement

alert("message");


3) Input statement

prompt("message");


4) Confirmed statement

confirm("message");



## JavaScript Variable

Variable is a name of memory location where user can store different type of data value.

ex. a=10    number variable

a=10.5      decimal variable

a="Ram"     string variable

a=z         character variable



## Types of variable

1) Variant

    int a, float b, string c, char z

    (verify before storing the value) 

    used in c, c++


2) Non-variant variable

    variable depend on data value

    a=10

    a=20

    a=30

    a=ram

     JavaScript, linux(shell prgm), python


NOTE:-

- JavaScript uses non-variant

- Does not have datatypes



## How to create variable in JavaScript

var variable name; 



## How to use <html> inside the JavaScript

document.write("tag='value' ");


NOTE:- Always write any tag in " "


example:-

<html>

<head>


<script language="JavaScript"> 

var a;

var name;

document.write("Welcome to my first JavaScript program." + "<br>"); 

alert("Thank you!");

a=prompt("Enter any age ");

name=prompt("enter your name ");

confirm("Do you want to delete the file? ");

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

document.write("<font color='red'> Welcome </font>" + "<br><br>");

document.write("<font color='blue'> your name is: </font>" + name + "<br>");

</script>


</head>

</html>



## TASK:-

- Create a biodata using document.write and variable

- biodata.html

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<script language="JavaScript">


document.write("<center><font>  Biodata  </font></center>" + "<br><br> <hr>");

document.write("<b><h2>Introduction</h2></b>");

var name;

var add;

var mail;

name=prompt("Enter your full name ");

add=prompt("Enter your address ");

mail=prompt("Enter your Email ");

document.write("Name: "+ name + "<br>");

document.write("Address: "+ add + "<br>");

document.write("Email: "+ mail + "<br><br>");


document.write("<b><h2>Qualification</h2></b>");

var course;

course=prompt("Enter your Course ");

document.write("Course: "+ course + "<br>");

var college;

college=prompt("Enter your Institute");

document.write("Institute: "+ college + "<br>");

var pass;

pass=prompt("Enter year of passing");

document.write("Year of passing: "+ pass + "<br>");

var per;

per=prompt("Enter your CGPA or Percentage");

document.write("CGPA/Percentage: "+ per + "<br><br>");


document.write("<b><h2>Experience</h2></b>");

var office;

office=prompt("Enter company name");

document.write("Company Name: "+ office + "<br>");

var expe;

expe=prompt("How many years of experience? ");

document.write("Years of Experience: "+ expe +"<br><br>");


document.write("<b><h2>Contact</h2></b>");

var tel;

tel=prompt("Enter your phone number");

document.write("<i class='fa fa-phone' aria-hidden='true'></i> "+ tel +"<br>");

</script>

</head>

</html>


- bio.css
font{
color:powderblue;
font-size:40px;
}




18/5
## Variable Functionality

#Variable Calculation
<html><head>
<script>

var a1=10;
var b=6;
var total=a1+b;
document.write(total);

</script>
</head></html>

output:-  16

## Event Create
- Using function event is created.
- Event handling with help of 
   - onclick event
   - onmouseup event
   - onmousedown event
 
 - onmouseover and onmouseout in marqee tag 



## How to create function
syntax:-
function function_name( )
{
code;
}

NOTE:-
- While defining function we don't use semicolon( ; )

- Function calling uses semicolon (;)
ex. display();

- Inside the function whatever we write is called 'container statement'.



## Function parameter is inside the function bracket
syntax:-
function display(para1, para2)
{
code;
}

example:-
<html>
<head>
<script>
function display(a)
{
document.write("Welcome" + a);
}
</script>
</head>
<body>

<input type="button" value="click" onclick="display(10);">

</body>
</html>

output:- 
Welcome10


1) Formal parameter
2) Actual parameter


### Script inside the <body>

# How to use <html> using 'id' attribute
1) Assign the 'id' attribute in <html> 
2) Access all 'id' inside the JavaScript using "getElementById()"


NOTE:- Message between the < > is called inner html
ex. <p> here inner html is written </p> 

example1 to print the text:-
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML='Welcome to my program. Hello world!' "> click me </button>
<p id="demo">  </p>

</body>
</html>

output:-
click(button)
Welcome to my program. Hello world!


example2 performing operation:-
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=10>2"> click me </button>
<p id="demo">  </p>

</body>
</html>

output:-
click(button)
true



## TASK:-
- JavaScript function variable getElementById
create 3 programs

- var_prgm.html
<html>
<head>

<script>
var a=30;
var b=20;
var sum=a+b;
var sub=a-b;
var mul=a*b;
var div=a/b;
var mod=a%b;
document.write(sum + "<br>");
document.write(sub + "<br>");
document.write(mul + "<br>");
document.write(div + "<br>");
document.write(mod + "<br>");
</script>

</head>
</html>

output:-
50
10
600
1.5
10



- func_prgm.html
<html>
<head>

<script>
function fruit(x,y,z)
{
document.write("Here is the list of Fruits<br>"+x+"<br>"+y+"<br>"+z+"<br>");
}
</script>

</head>
<body>

<input type="button" value="Click" onclick="fruit('Mango','Grapes','Chiku');">

</body>
</html>

output:-
Here is the list of Fruits
Mango
Grapes
Chiku



- event_prgm.html
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()"> Click me </button>

<p id="demo">  </p>

</body>
</html>

output:-
Click me(button)
Tue May 18 2021 23:33:57 GMT+0530 (India Standard Time)




20/5
## JavaScript string handling
- used in " "


## String Function

1) length( )
document.write(name.length);
output:-
31


2) indexOf( )
document.write(name.indexOf("Singh"));
output:-
6


3) lastIndexOf( )
document.write(name.lastIndexOf("Singh"));
output:-
26


4) search( ) same as above 2 functions
document.write(name.search("Singh"));
output:-
6



example:-
<script language="JavaScript">
var name="Mohan Singh is a caste of Singh"
document.write(name);
document.write(name.length);
document.write(name.indexOf("Singh"));
document.write(name.lastIndexOf("Singh"));
document.write(name.search("Singh"));
</script>



## JavaScript number
## Number function

1) toFixed( )
0 - takes roundup value
document.write(x.toFixed(0));
output:-
10

document.write(x.toFixed(4));
output:-
9.6789


2) Number( ) 
return the number is true and false 
NaN - Not a Number
document.write(Number("10"));
output:-
10

document.write(Number("M"));
output:-
NaN



3) parseInt( )
document.write(parseInt("10.3456"));
output:-
10

document.write(parseInt("50 years"));
output:-
50


4) parseFloat( )
document.write(parseFloat("10.5 years"));
output:-
10.5


example:-
<script language="JavaScript">
var x=9.678943
document.write(x);
document.write(x.toFixed(4));
document.write(Number("10"));
document.write(Number("M"));
document.write(parseInt("10.3456"));
document.write(parseInt("50 years"));
document.write(parseFloat("10.5 years"));
</script>



TASK:-
Create a prgm 
- input age from the user side and check age is a number?
- input age from the user choice and check age is greater than 18 then print you can vote otherwise you cannot vote.
- input string value from the user choice and check the length of string


- input age from the user side and check age is a number?
<html>
<head>

<script language="JavaScript">
var age;
age=prompt("Enter your age");
document.write("Your age is: " + Number(age));
</script>

</head>
</html>
OUTPUT:-
Your age is: 67





- input age from the user choice and check age is greater than 18 then print you can vote otherwise you cannot vote.
<html>
<head>

<script language="JavaScript">
var age;
age=prompt("Enter your age");
document.write("Your age is: " + Number(age) +"<br><br>");
if (age>=18){
document.write("You can Vote.");
}+
else {
document.write("You cannot Vote. You are under 18.");
}
</script>

</head>
</html>
OUTPUT:-
Your age is: 15

You cannot Vote. You are under 18.





- input string value from the user choice and check the length of string.
<html>
<head>

<script language="JavaScript">
var x;
x=prompt("Enter any message");
document.write("The length of the string is: " + x.length);
</script>

</head>
</html>
OUTPUT:-
(msg entered is: hello world)
The length of the string is: 11



- Voting prgm:-
<html>
<head>

<script language="JavaScript">
var age;
age=prompt("Enter your age");
document.write("Your age is: " + Number(age) +"<br><br>");
if(isNaN(age))
{
alert("Please input a number.");
}
else
{
if(age>=18)
{
document.write("You can Vote.");
}
else 
{
document.write("You cannot Vote. You are under 18.");
}

}
</script>

</head>
</html>
output:-
Enter your age
iefgrk
Please input a number
Your age is: NaN






21/5

## JavaScript Array

 script inside <body>
syntax:-
<html>
<body>

using all html tags
<script></script>

</body>
</html>


Example:-
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
document.getElementById("demo").innerHTML=car;
</script>

</body>
</html>
output:-
Swift, Maruti, Tavera



## Access array element
Accessed by index
syntax:- [number]

<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
document.getElementById("demo").innerHTML=car[0];
</script>

</body>
</html>
output:-
Swift

NOTE:- html tag accept only one value at a time.



## Change the array element
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car[0]="Renault";
document.getElementById("demo").innerHTML=car;
</script>

</body>
</html>
output:-
Renault, Maruti, Tavera



## Return no. of element in array
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car[0]="Renault";
document.getElementById("demo").innerHTML=car.length;
</script>

</body>
</html>
output:- 3



## sort()
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car[0]="Renault";
document.getElementById("demo").innerHTML=car.sort();
</script>

</body>
</html>
output:-
Maruti,Renault,Tavera




## Adding element in array
push()

<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car.push("Renault");
document.getElementById("demo").innerHTML=car;
</script>

</body>
</html>
output:-
Swift,Maruti,Tavera,Renault



## How to check variable is an array or not.
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car.push("Renault");
document.getElementById("demo").innerHTML=Array.isArray(car);
</script>

</body>
</html>
output:- true




## join() in array
- Used as a separator
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car.push("Renault");
document.getElementById("demo").innerHTML=car.join(" * ");
</script>

</body>
</html>
output:-
Swift * Maruti * Tavera * Renault




## pop() in array
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
document.getElementById("demo").innerHTML=car.pop();
</script>

</body>
</html>
output:- Tavera




## shift() in array
- Remove the 1st element in array

<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
document.getElementById("demo").innerHTML=car.shift();
</script>

</body>
</html>
output:- Swift




## splice() in array
- Insert data element in specific position
<html>
<body>

<p id="demo"></p>

<script>
var car=["Swift","Maruti","Tavera"];
car.splice(2,0,"Renault","Indica");
document.getElementById("demo").innerHTML=car;
</script>

</body>
</html>
output:-
Swift,Maruti,Renault,Indica,Tavera

NOTE:-
2 is position
0 indicates to move forward
Here the new values will be added at the 2nd position



TASK:-
1) Create a single prgm using all concepts of array
2) Create any 2 prgm in array using python



1) Create a single prgm using all concepts of array
- arraypractical.html
<html>
<body>

<p id="paper"></p>
<script>
var item=["Toys","Fruits","Veggies","Grocery","Cars"]
/*1)to print the array*/
document.write(document.getElementById("paper").innerHTML=item + "<br><br>");


/*2)to access the array element*/
document.write(document.getElementById("paper").innerHTML=item[3] + "<br><br>");


/*3)to change the array element*/
item[1]="Books";
document.write(document.getElementById("paper").innerHTML=item + "<br><br>");


/*4)to return no. of element*/
document.write(document.getElementById("paper").innerHTML=item.length + "<br><br>");


/*5)to sort the array*/
document.write(document.getElementById("paper").innerHTML=item.sort() + "<br><br>");


/*6)to add element in array*/
item.push("Fruits");
document.write(document.getElementById("paper").innerHTML=item + "<br><br>");


/*7)to remove 1st element in array*/
document.write(document.getElementById("paper").innerHTML=item.shift() + "<br><br>");


/*8)to remove last element from array*/
document.write(document.getElementById("paper").innerHTML=item.pop() + "<br><br>");


/*9)to check variable is array or not*/
document.write(document.getElementById("paper").innerHTML=Array.isArray(item) + "<br><br>");


/*10)add element on/from specific position */
item.splice(3,0,"Electronic Gadgets","Clothes","Books");
document.write(document.getElementById("paper").innerHTML=item + "<br><br>");


/*11)to join the element in array*/
document.write(document.getElementById("paper").innerHTML=item.join(" ** ") + "<br><br>");

</script>

</body>
</html>
OUTPUT:-
Toys,Fruits,Veggies,Grocery,Cars

Grocery

Toys,Books,Veggies,Grocery,Cars

5

Books,Cars,Grocery,Toys,Veggies

Books,Cars,Grocery,Toys,Veggies,Fruits

Books

Fruits

true

Cars,Grocery,Toys,Electronic Gadgets,Clothes,Books,Veggies

Cars ** Grocery ** Toys ** Electronic Gadgets ** Clothes ** Books ** Veggies




2) Create any 2 prgm in array using python
- program1
item=[]
n = int(input("Enter the no. of Items "))
for i in range(0,n):
    print("Enter elements")
    ele=int(input())
    item.append(ele)
    
print("The elements are: ",item)

OUTPUT:-
Enter the no. of Items 4
Enter elements
6
Enter elements
8
Enter elements
1
Enter elements
9
The elements are:  [6, 8, 1, 9]



- program2
item=[1,6,9,5,8]
print(item)
#access array element
x=item[1]
print(x)

#modify array element
item[3]=7
print(item)

#find length
x=len(item)
print(x)

#adding array element
item.append(3)
print(item)

#remove element
item.pop(0)
print(item)

#remove array element with name
item.remove(9)
print(item)

#sort array element
item.sort()
print(item)

#reverse array element
item.reverse()
print(item)

#count array element
x=item.count(6)
print(x)

#copy array element
x=item.copy()
print(x)

#insert array element
item.insert(1,4)
print(item)

#clear array
item.clear()
print(item)

OUTPUT:-
[1, 6, 9, 5, 8]
6
[1, 6, 9, 7, 8]
5
[1, 6, 9, 7, 8, 3]
[6, 9, 7, 8, 3]
[6, 7, 8, 3]
[3, 6, 7, 8]
[8, 7, 6, 3]
1
[8, 7, 6, 3]
[8, 4, 7, 6, 3]
[]




22/5

## Condition statement 

- if...else
example:-
<html>
<head>

<script language="JavaScript">
var age;
age=prompt("Enter your age ");
if(age>18)
{
document.write("You can vote.");
}
else
{
document.write("You cannot vote.");
}
</script>

</head>
</html>



## JavaScript switch statement
switch statement is resolved complexity of program

NOTE:-  parseInt() or Number() this will not take the string as input

parseFloat() for decimal no. 

example:-
<html>
<head>

<script language="JavaScript">
var x;
x=prompt("Enter any number ");
switch(Number(x))
{
   case 1:
   document.write("Monday");
   break;

   case 2:
   document.write("Tuesday");
   break;

   case 3:
   document.write("Wednesday");
   break;

   case 4:
   document.write("Thursday");
   break;

   case 5:
   document.write("Friday");
   break;

   case 6:
   document.write("Saturday");
   break;
   
   default:
   document.write("Invalid Choice");

}
</script>

</head>
</html>




## Looping

1) for loop
<html>
<head>

<script language="JavaScript">
var i=1;
for(i=1;i<=10;i++)
  {
   document.write(i +"<br>");
  }
</script>

</head>
</html>
output:-
1
2
3
4
5
6
7
8
9
10



TASK:-
1) WAP for displaying the following output
a) input 2 no. from user choice 
b) input choice from the user choice
  - addition of two no.
  - multiplication of 2 no.
  - sub of 2 no.
  - invalid choice
- switch.html in JavaScript folder.
<html>
<head>
<script language="JavaScript">

/*var n1,n2,ope;
n1=prompt("Enter 1st number");
n2=prompt("Enter 2nd number");
ope=prompt("Enter your choice of operator (+, -, *)");
    switch(Number(ope))
    {
        case 1:
            var ans;
            ans=n1+n2;
            document.write("Addition of two no. is: " + ans);
            break;

        case 2:
            document.write("Subtraction of two no. is: " +n1+ n2+ (n1-n2));
            break;

        case 3:
            document.write("Multiplication of two no. is: " +n1+ n2+ (n1*n2));
            break;

        default:
            document.write("Error! operator is not correct");
    }
*/



var x,y,res,choose;

document.write("Enter 1 for Addition <br>");
document.write("Enter 2 for Subtraction <br>");
document.write("Enter 3 for Multiplication <br>");
document.write("Enter 4 for Division <br>");
choose=parseInt(prompt("Enter your choice: "));

if(choose>0 && choose<5)
{
x=parseInt(prompt("Enter 1st number: "));
y=parseInt(prompt("Enter 2nd number: "));
}
 
switch(choose)
{
   case 1:
      res=x+y;
      document.write("Addition of given no. is: " +res);
      break;

   case 2:
      res=x-y;
      document.write("Subtraction of given no. is: " +res);
      break;

   case 3:
      res=x*y;
      document.write("Multiplication of given no. is: " +res);
      break;

   case 4:
      res=x/y;
      document.write("Division of given no. is: " +res);
      break;

   default:
      document.write("Invalid Choice: " +choose);
}
  
</script>
</head>
</html>



2) Create a prgm
- 1 to 10 even no. using for loop
<html>
<head>

<script language="JavaScript">
var x=1;
for(x=0;x<=10;x+=2)
  {
   document.write(x+"<br>");
  }
</script>

</head>
</html>
OUTPUT:-
0
2
4
6
8
10


- 1 to 10 odd no.
<html>
<head>

<script language="JavaScript">
var x=1;
for(x=1;x<=10;x+=2)
  {
   document.write(x+"<br>");
  }
</script>

</head>
</html>
OUTPUT:- 
1
3
5
7
9


- reverse order no.
<html>
<head>

<script language="JavaScript">
var x=10;
for(x=10;x>=1;x--)
  {
   document.write(x+"<br>");
  }
</script>

</head>
</html>
OUTPUT:-
10
9
8
7
6
5
4
3
2
1

 
- sum of 1 to 10 no.
<html>
<head>

<script language="JavaScript">
var x,num=0;
for(x=1;x<=10;x++)
  {
   num=num+x;
   document.write(x+"<br>");
  }
document.write("<br>The sum is: " +num);
</script>

</head>
</html>
OUTPUT:-
1
2
3
4
5
6
7
8
9
10

The sum is: 55





24/5

## JavaScript form validation
1) Textbox Validation

NOTE:-
document.getElementById receive data from <body>
document.forms receive data from <form>


example:-
- jsform.html
<html>
<head>

<script language="JavaScript">
function validationf()
{
var x=document.forms["myform"]["fname"].value;
if(x=="")
{
alert("Please input name");
}
}
</script>
</head>
<body>

<form name="myform" onsubmit="return validationf()">
Name:<input type="text" name="fname" ><br>
<input type="submit" value="click">

</form>
</body>
</html>



## How to print data value in textbox
If return condition is true it refresh the browser

<html>
<head>
<script language="JavaScript">
function validationf()
{
var x=document.forms["myform"]["fname"].value='Mohan';
return false;
}
</script>
</head>
<body>

<form name="myform" onsubmit="return validationf()">
Name:<input type="text" name="fname" ><br>
<input type="submit" value="click">

</form>
</body>
</html>




##  Display textbox value
<html>
<head>
<script language="JavaScript">
function validationf()
{
var x=document.forms["myform"]["fname"].value;
alert(x);
return false;
}
</script>
</head>
<body>

<form name="myform" onsubmit="return validationf()">
Name:<input type="text" name="fname" ><br>
<input type="submit" value="click">

</form>
</body>
</html>





##  Display data in dropdown list
- jsform.html
<html>
<head>
<script language="JavaScript">
function validationf()
{
var x=document.forms["myform"]["cname"].value;
document.write(x);
return false; 
}
</script>
</head>
<body>

<form name="myform" onsubmit="return validationf()">
Name:<input type="text" name="fname" ><br>
<select name="cname">
<option>Nagpur</option>
<option>Delhi</option>
<option>Mumbai</option>
<option>Goa</option>
</select><br><br>
<input type="submit" value="click">

</form>
</body>
</html>



NOTE:-  Script is executed on same page


TASK:-
1) For form designing
Build a registration form
- Name
- Email
- Mobile
- City, State(dropdown)
- Subject
- Result (pass/fail dropdown)
Submit button

After submission print all value inside document.write with tags(colors, fonts etc.)
- jsreg.html
<html>
<head>

<link rel="stylesheet" href="jsreg.css">
<script language="JavaScript" >
function registerf()
{
var name=document.forms["regform"]["fname"].value;
var email=document.forms["regform"]["email"].value;
var phone=document.forms["regform"]["phone"].value;
var city=document.forms["regform"]["cname"].value;
var state=document.forms["regform"]["state"].value;
var subject=document.forms["regform"]["sub"].value;
var result=document.forms["regform"]["res"].value;
document.write(name+"<br><br>");
document.write(email+"<br><br>");
document.write(phone+"<br><br>");
document.write(city+"<br><br>");
document.write(state+"<br><br>");
document.write(subject+"<br><br>");
document.write(result);
return false;
}
</script>

</head>
<body style="background-color:#fece0c;">

<b><h1> Registration Form </h1></b>
<hr><br><br>
<form name="regform" onsubmit="return registerf()" method="post">
<p>Name: <input type="text" size="40" name="fname" placeholder="Enter your full name" required></p><br>
<p>Email:<input type="email" size="40" name="email" placeholder="email@gamil.com" required></p><br>
<p>Mobile:<input type="tel" size="40" name="phone" placeholder="Mobile no."></p><br>
<p>City:<select type="text" name="cname" >
<option>Select</option>
<option>Amravati</option>
<option>Bhandara</option>
<option>Chandrapur</option>
<option>Dhule</option>
<option>Faridabad</option>
<option>Gadchiroli</option>
<option>Haryana</option>
<option>Itarsi</option>
<option>Jodhpur</option>
<option>Kerala</option>
<option>Lucknow</option>
<option>Mumbai</option>
<option>Nagpur</option>
<option>Orrisa</option>
<option>Pandharpur</option>
<option>Raigad</option>
<option>Satara</option>
<option>Telangana</option>
<option>Yavatmal</option>
</select></p><br>

<p>State:<select type="text" name="state" >
<option>Select</option>
<option>Andhra Pradesh</option>
<option>Bengal</option>
<option>Chattisgarh</option>
<option>Delhi</option>
<option>Gujarat</option>
<option>Himachal Pradesh</option>
<option>Maharashtra</option>
<option>Madhya Pradesh</option>
<option>Punjab</option>
<option>Rajasthan</option>
<option>Uttar Pradesh</option>
</select></p><br>

<p>Subject:<input type="text" size="40" name="sub" placeholder="Subject/Course" required></p><br>
<p>Result:<select type="text" name="res">
<option>Select</option>
<option>Pass</option>
<option>Fail</option>
</select></p><br><br>

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

</body>
</html>


- jsreg.css
form{
background-color:#fff;
padding-top:30px;
padding-bottom:25px;
padding-left:60px;
margin:0 auto;
width:600px;
box-sizing:border-box;
border:30px solid powderblue;
float:center;
}

h1{
text-align:center;
text-transform:uppercase;
margin-top:30px;
margin-bottom:30px;
letter-spacing:2px;
color:blue;
}

p{
font-weight:bold;
text-transform:uppercase;
}

input[type="text"]{
padding:10px;
cursor:pointer;
}

input[type="email"]{
padding:10px;
cursor:pointer;
}

input[type="tel"]{
padding:10px;
cursor:pointer;
}

select[type="text"]{
padding:7px;
cursor:pointer;
}

input[type="submit"]{
padding:10px;
margin-left:80px;
letter-spacing:2px;
width:50%;
font-weight:bold;
border-radius:10px;
text-transform:uppercase;
cursor:pointer;
}



2) Input any no. inside the textbox and check input is no. or not
- inputisnum.html (have some error)
<html>
<head>

<script language="JavaScript">
function age()
{
var x=document.forms["demo"]["age"].value;
if(x.value=="")
{
alert("Please input the record.");
return false;
}

/*if(isNaN(x))
{
alert("Please enter the number");
return false;
}*/ 
}

</script>
</head>
<body>
<form name="demo" onsubmit="return age()">
Age:<input type="number" name="age" min="0" oninput="validity.valid||(value='');" ><br><br>
<input type="submit" value="Click" onclick="age()">

</form>
</body>
</html>





25/5
## How to execute only positive value

oninput="validity.valid||(value='');"


NOTE:- min and oninput are written together

- syntax for blank spaces to enter in reg form:-
document.formname.ctrlname.value == ""


example:-
<html>
<head>

<script language="JavaScript">
function validate()
{
var phno=/^\d{10}$/;                                        /* used for phone number validation*/
if(document.demo.age.value.match(phno))      /* match() matches the data*/
 {
   alert("Mobile no. is correct.");
   return true;
 }
else
 {
   alert("Mobile no. is not correct.");
   return false;
 }
}

</script>
</head>
<body>

<form name="demo" onsubmit="return validate()">
Mobile No. :<input type="text" name="age" ><br><br>
<input type="submit" value="Click">

</form>
</body>
</html>




TASK:-
email, phone validation 
- emailvalid.html
<html>
<head>
 
<script language="JavaScript">

function valid()
{
var nam=/^[A-Za-z ]+$/;
var phn=/^\d{10}$/;
var emailid=/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

if(document.myform.fname.value.match(nam) && document.myform.phone.value.match(phn) && document.myform.email.value.match(emailid))
{
alert("Your all data is correct.");
return false;
}
else
{
alert("Please check name, mobile and email.");
return false;
}
}

</script>

<style>
p{
text-transform:uppercase;
font-weight:bold;
text-align:center;
}

input[type="submit"]{
border-radius:10px;
letter-spacing:2px;
padding:10px;
width:10%;
margin-left:600px;
}

h1{
text-align:center;
letter-spacing:2px;
margin-top:20px;
}
</style>
</head>
<body>

<b><h1> Contact Details </h1></b>
<hr><br>

<form name="myform" onsubmit="return valid()">
<p>Name : <input type="text" name="fname" ></p><br>
<p>Mobile no. : <input type="tel" name="phone" ></p><br>
<p>Email: <input type="email" name="email" ></p><br><br>
<input type="submit" value="Click">
</form>

</body>
</html>






27/5
## Password Matching
- password.html
<html>
<head>

<script language="JavaScript">

function display()
{
var p1=document.form1.pass1.value;
var p2=document.form1.pass2.value;

if(p1==p2)
{
alert("Password is correct.");
return true;
}
else
{
alert("Password is incorrect. ");
return false;
}
}

</script>

<head>
<body>

<form name="form1" onsubmit="return display()">
Enter your Password: <input type="password" name="pass1"><br><br>
Retype Password: <input type="password" name="pass2"><br><br>
<input type="submit" value="Click">

</form>

</body>
</html>



TASK:-
Create any 2 prgms
- match.html
<html>
<head>

<script language="JavaScript">

function display()
{
var t1=document.myform.fname1.value;
var t2=document.myform.fname2.value;
var a1=document.myform.add1.value;
var a2=document.myform.add2.value;
var p1=document.myform.pin1.value;
var p2=document.myform.pin2.value;


if(t1==t2 && a1==a2 && p1==p2)
{
alert("Information is correct.");
return true;
}
else
{
alert("Incorrect information.");
return false;
}
}

</script>
</head>
<body>

<form name="myform" onsubmit="return display()">
Name: <input type="text" name="fname1"><br><br>
Confirm Name: <input type="text" name="fname2"><br><br>

__________________________________________________________<br><br>
Address: <input type="address" name="add1"><br><br>
Confirm Address: <input type="address" name="add2"><br><br>

__________________________________________________________<br><br>
Pincode: <input type="text" name="pin1"><br><br>
Confirm Pincode: <input type="text" name="pin2"><br><br>

<input type="submit" value="Click">
</form>

</body>
</html>




28/5
## JavaScript Calculation
example:-
<html>
<head>

<script language="JavaScript">
function addnum()
{
var num1=parseInt(document.getElementById("text1").value);
var num2=parseInt(document.getElementById("text2").value);
var res=num1+num2;
document.getElementById("text3").value=res;
}

</script>
</head>
<body>

<h1> Addition of two numbers </h1><br><br>
Enter 1st no.: <br>
<input type="textbox" id="text1"><br><br>
Enter 2nd no.: <br>
<input type="textbox" id="text2"><br><br>
<input type="button" value="submit" onclick="addnum()"><br><br><br>
Result is: <br>
<input type="textbox" id="text3"><br><br>


</body>
</html>




## Working of radio button
example:-
<html>
<head>

<script language="JavaScript">

function vali()
{
if(document.getElementById("cse").checked==true)
{
document.write("CSE is selected.");
}
else
{
document.write("CSE is not selected.");
}
}

</script>
</head>
<body>

<h1> Working of Radio Button </h1><br>
<input type="radio" id="cse" value="cse">CSE<br><br>
<input type="radio" id="etc" value="etc">ETC<br><br>
<input type="submit" value="Click" onclick="vali()">

</body>
</html>




## Create window in JavaScript
Window is part of browser
 
example:-
- textboxaddition.html
<html>
<head>

<script language="JavaScript">
function winopen()
{ 
  window.open('http://nrsolution4u.com',"","height=300,width=300");
}

</script>
</head>
<body>

<h1> Working of Radio Button </h1><br><br>
<input type="submit" value="Click" onclick="winopen()">

</body>
</html>



## TASK:-
1)Create a logic for addition of two no. 
   a) subtract button
   b) multiply button
   c) check whether textbox is blank or not
2) Create the test of 2nd radio button.
3)Create a registration page and open in window statement



## SOLUTIONS:-
1)Create a logic for addition of two no. 
   a) subtract button
   b) multiply button
   c) check whether textbox is blank or not
- arithop.html
<html>
<head>

<script language="JavaScript">
function add()
{
var n1=parseInt(document.getElementById("txt1").value);
var n2=parseInt(document.getElementById("txt2").value);
var add=n1+n2;
document.getElementById("txt3").value=add;
}

function sub()
{
var n1=parseInt(document.getElementById("txt1").value);
var n2=parseInt(document.getElementById("txt2").value);
var sub=n1-n2;
document.getElementById("txt4").value=sub;
}

function mul()
{
var n1=parseInt(document.getElementById("txt1").value);
var n2=parseInt(document.getElementById("txt2").value);
var mul=n1*n2;
document.getElementById("txt5").value=mul;
}
</script>

</head>
<body>

<h1 align="center"> Arithmetic Operations on Two Numbers.</h1><br>
<hr><br>
Enter 1st no. :
<input type="textbox" id="txt1" required>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Enter 2nd no. :
<input type="textbox" id="txt2" required><br><br><br>

Click on the following opertion to perform<br><br>
<input type="button" value="Addition" onclick="add()">&nbsp;&nbsp;
<input type="button" value="Subtraction" onclick="sub()">&nbsp;&nbsp;
<input type="button" value="Multiplication" onclick="mul()"><br><br><br><br>

Result of Addition :
<input type="textbox" id="txt3">&nbsp;&nbsp;
Result of Subtraction :
<input type="textbox" id="txt4">&nbsp;&nbsp;
Result of Multiplication :
<input type="textbox" id="txt5"><br><br><br><br>


</body>
</html>





2) Create the test of 2nd radio button.
-radiocheck.html





3)Create a registration page and open in window statement
- textboxaddition.html
(to show the registration page on diff. page like iframe window is used.)
<html>
<head>

<script language="JavaScript">

function winopen()
{ 
  window.open('jsreg.html',"","height=600,width=800");
}

</script>
</head>
<body>

<h1> Working of Radio Button </h1><br><br>
<input type="submit" value="Click" onclick="winopen()">

</body>
</html>


- jsreg.html (registration form)
<html>
<head>

<link rel="stylesheet" href="jsreg.css">
<script language="JavaScript" >
function registerf()
{
var name=document.forms["regform"]["fname"].value;
var email=document.forms["regform"]["email"].value;
var phone=document.forms["regform"]["phone"].value;
var city=document.forms["regform"]["cname"].value;
var state=document.forms["regform"]["state"].value;
var subject=document.forms["regform"]["sub"].value;
var result=document.forms["regform"]["res"].value;
document.write(name+"<br><br>");
document.write(email+"<br><br>");
document.write(phone+"<br><br>");
document.write(city+"<br><br>");
document.write(state+"<br><br>");
document.write(subject+"<br><br>");
document.write(result);
return false;
}
</script>
</head>
<body style="background-color:#fece0c;">

<b><h1> Registration Form </h1></b>
<hr><br><br>
<form name="regform" onsubmit="return registerf()" >
<p>Name: <input type="text" size="40" name="fname" placeholder="Enter your full name" required></p><br>
<p>Email:<input type="email" size="40" name="email" placeholder="email@gamil.com" required></p><br>
<p>Mobile:<input type="tel" size="40" name="phone" placeholder="Mobile no."></p><br>
<p>City:<select type="text" name="cname" >
<option>Select</option>
<option>Amravati</option>
<option>Bhandara</option>
<option>Chandrapur</option>
<option>Dhule</option>
<option>Faridabad</option>
<option>Gadchiroli</option>
<option>Haryana</option>
<option>Itarsi</option>
<option>Jodhpur</option>
<option>Kerala</option>
<option>Lucknow</option>
<option>Mumbai</option>
<option>Nagpur</option>
<option>Orrisa</option>
<option>Pandharpur</option>
<option>Raigad</option>
<option>Satara</option>
<option>Telangana</option>
<option>Yavatmal</option>
</select></p><br>

<p>State:<select type="text" name="state" >
<option>Select</option>
<option>Andhra Pradesh</option>
<option>Bengal</option>
<option>Chattisgarh</option>
<option>Delhi</option>
<option>Gujarat</option>
<option>Himachal Pradesh</option>
<option>Maharashtra</option>
<option>Madhya Pradesh</option>
<option>Punjab</option>
<option>Rajasthan</option>
<option>Uttar Pradesh</option>
</select></p><br>

<p>Subject:<input type="text" size="40" name="sub" placeholder="Subject/Course" required></p><br>
<p>Result:<select type="text" name="res">
<option>Select</option>
<option>Pass</option>
<option>Fail</option>
</select></p><br><br>

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

</body>
</html>




29/5
## Create the percentage prgm
- userinputpercent.html
<html>
<head>
<script language="JavaScript">

function per()
{
if(document.myform.percent.value>=60)
alert("First Division");
else 
if(document.myform.percent.value <=60 && document.myform.percent.value >50)
{
 alert("Second Division");
}
else 
if(document.myform.percent.value <=50 && document.myform.percent.value >40)
{
 alert("Third Division");
}
 else
  {
    alert("Fail");
  }
}

</script>
</head>
<body>
<form name="myform">
Enter Percentage: <br>
<input type="textbox" name="percent" required><br><br>
<input type="submit" value="Submit" onclick="per()">
</form>

</body>
</html>




31/5
##  Dropdown Ctrl Programming:
- Dropdown has onchange event.

example1:-
- dropdown.html
<html>
<head>

<script language="JavaScript">
function showdata()
{
var x1=document.getElementById("mylist");
document.getElementById("txt1").value=x1.options[x1.selectedIndex].text;
}
</script>
</head>
<body>

<select id="mylist" onchange="showdata()">
<option>Toys</option>
<option>Cars</option>
<option>City</option>
<option>Veggies</option>
<option>Fruits</option>
</select><br><br>

Your selected value is: <input type="textbox" id="txt1"><br><br>

</body>
</html>



example2:-
- dropdown.html
<html>
<head>
<script language="JavaScript">
function showdata()
{
var x1=document.getElementById("mylist");
document.getElementById("txt1").value=x1.options[x1.selectedIndex].text;

if(x1.options[x1.selectedIndex].text=="City")
{
 document.write("You have selected City. ");
}

if(x1.options[x1.selectedIndex].text=="Cars")
{
 document.write("You have selected Cars. ");
}
}
</script>
</head>
<body>

<select id="mylist" onchange="showdata()">
<option>Toys</option>
<option>Cars</option>
<option>City</option>
<option>Veggies</option>
<option>Fruits</option>
</select><br><br>

Your selected value is: <input type="textbox" id="txt1"><br><br>

</body>
</html>




## JavaScript Timer:-
- Set the specific execution time for particular function.
- Time is set in seconds only.

example:-
- timer.html
<html>
<head>

<script language="JavaScript">
function display()
{
document.write("Hello world!");
}
</script>
</head>
<body>

<h1> This is Timer function.</h1><br><br>
<button onclick="setTimeout(display, 5000)"> Click Me </button>

</body>
</html>




IMPORTANT
## JavaScript print command:-

example:-
- jsprint.html
<html> 
<body>

<input type="button" value="Print" onclick="window.print()">
</body>
</html>



TASK:-
Calculation of 2 nos. using dropdown list.
Options for dropdown
- Add
- Multiply
- Sub
and using all the today's topics 






1/6
## Assignments:-
1) WAP to input username and password and match 

username="admin"
password="admin123"

If match then open reg.html page in other window using - window.open()

- userpswd.html

<html>
<head>
<script language="JavaScript">
function display()
{
var u1=document.myform.uname1.value;
var u2=document.myform.uname2.value;
var p1=document.myform.pass1.value;
var p2=document.myform.pass2.value;

if(u1==u2 && p1==p2)
{
alert("Correct Information.");
window.open('jsreg.html');
return true;
}
else
{
alert("Incorrect Username and Password.");
return false;
}
}

</script>


</head>
<body>

<h2 align="center"> Login Credentials </h2>
<hr><br>
<form align="center" name="myform" onsubmit="return display()">
Username: <input type="textbox" name="uname1" required><br><br>
Confirm Username: <input type="textbox" name="uname2"><br><br><br><br>

Password: <input type="textbox" name="pass1" required><br><br>
Confirm Password: <input type="textbox" name="pass2"><br><br><br><br>

<input type="submit" value="Submit" onclick="display()">&nbsp;&nbsp;
</form>
</body>
</html>




2) WAP to input any number from the user and display the table of given number in the following format 
Enter number : 2
2*1=2
2*2=4
2*3=6
'
'
'
- userinputtable.html
<html>
<head>
<script language="JavaScript">
function display()
{
var i;
var num=document.getElementById("num1").value;

for(i=1;i<=10;++i)
{
 document.write(num + " * " +i + " = " +num * i +"<br>");
}
}
</script>
</head>
<body>

Table of given no. is: <input type="textbox" id="num1"  required><br><br>
<input type="submit" value="Click" onclick="display()">
<body>
</html>




2/6
## String Generation
- split() splits data after the given position

example1:-
- strgen.html
<html>
<head>
<script language="JavaScript">
function display()
{
var name="Welcome to the JavaScript.";
var t1=name.split(" ",3);
document.write(t1);
}
</script>
</head>
<body>
<input type="submit" value="Click" onclick="display()"><br><br>
</body>
</html>



example2:-
- strgen.html
<html>
<head>
<script language="JavaScript">
function display()
{
var name="Welcome to the JavaScript tutorial.";
var t1=name.split("t");
document.write(t1);
}
</script>
</head>
<body>
<input type="submit" value="Click" onclick="display()"><br><br>
</body>
</html>




## Trim()
- Removes the blank space.
- Does not read the spaces in the given sentence.

example:-
- strgen.html
<html>
<head>
<script language="JavaScript">
function display()
{
var name="          Welcome to the JavaScript tutorial.          ";
var h1=name.trim();
document.write(h1);
}
</script>
</head>
<body>
<input type="submit" value="Click" onclick="display()"><br><br>
</body>
</html>



IMPORTANT
### Redirection of page

example:-
- redirectionpage.html
<html>
<head>
<script language="JavaScript">
function show()
{
window.location="http://www.nrsolution4u.com";
}

setTimeout('show()',5000);
</script>
</head>
<body>
<p>
Page automatically redirect after the 5 seconds.
</p>
<input type="button" value="Click" onclick="show();">
</body>
</html>




## JavaScript eval()
- eval() is used to evaluate the expression.

example:-
- expression.html
<html>
<head>
<script language="JavaScript">
var a=10;
var b=20;
var c=30;
var exp;

exp=eval("a*b/c");
document.write(exp);

</script>
</head>
</html>



TASK:-
## Generate the sequence of  3 pages using auto-redirect method.
page1:- first.html ->  redirect to second.html ->  redirect to third.html
- seq_redirect_pg.html
<html>
<head>
<script language="JavaScript">
function redirect()
{
window.location="seq_page2.html";
}

setTimeout('redirect()',5000);
</script>
</head>
<body>
<h1>Welcome to Page One!</h1><hr><br>
<p> Page will automatically redirect after 5 seconds.</p><br>
OR <br><br>
<p> Click the below button.</p>
<input type="button" value="Click" onclick="redirect()">
</body>
</html>



- seq_page2.html
<html>
<head>
<script language="JavaScript">
function redirect1()
{
window.location="seq_page3.html";
}

setTimeout('redirect1()',5000);
</script>
</head>
<body>
<h1>Welcome to Page Two!</h1><hr><br>
<p>HELLO EVERYONE.</p>
<p> Page will automatically redirect after 5 seconds.</p>
<input type="button" value="Click" onclick="redirect1()">
</body>
</html>



- seq_page3.html
<html>
<body>
<h1>Welcome to Page Three!</h1><hr><br>
<h2>Hello Everybody.</h2>
<input type="button" value="Click" >
</body>
</html>




4/6
## JavaScript onload event
- direct activity on page 
example:-
- onloadex.html
<html>
<head>
<script language="JavaScript">
function show()
{
document.write("Hello Everyone! Thank you for visiting here.");
}
</script>
</head>
<body onload="show()">
</body>
</html>



## Reload method
- location.reload( ) refresh the browser. 

example:-
- onloadex.html
<html>
<head>
<script language="JavaScript">
function show()
{
location.reload();
}
</script>
</head>
<body>
<input type="button" value="Click" onclick="show();">
</body>
</html>




IMPORTANT
## JavaScript set object
- Used in grouping of data element
- Explanation:- set is an object. We can add values by using set.add("anything");
- By creating variable we have to pass the values.

example1:-
- S1.html
<html>
<body>
<script>
var set = new Set();
set.add("jQuery");
set.add("AngularJS");
set.add("Bootstrap");
set.add("Jaipur");
set.add("Chennai");
set.add("Delhi");

for(let elements of set)
{
document.write(elements +"<br>");
}
</script>
</body>
</html>



example2:-
- S1.html
<html>
<body>
<script>
var set1 = new Set();

set1.add("jQuery");
set1.add("AngularJS");
set1.add("Bootstrap");
set1.add("Jaipur");
set1.add("Chennai");
set1.add("Delhi");

for(let elements of set1)
{
document.write(elements +"<br>");
}

set1.clear();
document.write(set1.size +"<br>");

set1.delete("Jaipur");
document.write(set1.size +"<br>");

</script>
</body>
</html>



example3:-
- S1.html
<html>
<body>
<script>
var set1 = new Set();
var s1=set1.values();
var a=prompt("Enter string1");
var b=prompt("Enter string2");

set1.add(a);
set1.add(b);
set1.add("Bootstrap");
set1.add("Jaipur");
set1.add("Chennai");
set1.add("Delhi");

for(let elements of set1)
{
document.write(elements +"<br>");
}
document.write(set1.size +"<br>");


for(i=0;i<set1.size;i++)
{
document.write(s1.next().value +"<br>");
}
</script>
</body>
</html>



TASK:-
Convert set into user input
- SETPRGM.html
<html>
<body>
<script>
var item = new Set();
var a=prompt("Enter string1");
var b=prompt("Enter string2");
var c=prompt("Enter string3");
var d=prompt("Enter string4");
var e=prompt("Enter string5");

item.add(a);
item.add(b);
item.add(c);
item.add(d);
item.add(e);

for(let elements of item)
{
document.write(elements +"<br>");
}

</script>
</body>
</html>

OUTPUT:-
pink
blue
orange
yellow
black



9/6
IMPORTANT
## Display document current URL
example:-
- docurl.html
<html>
<body>
<p id="fname">  </p>
<script>
document.getElementById("fname").innerHTML=document.URL;
</script>
</body>
</html>



## How to find no. of linking in a webpage
example:-
- docurl.html
<html>
<body>

<a href="" name="a1">
<a href="" name="a2">
<a href="" name="a3">
<a href="" name="a4">
<a href="" name="a5">

<p id="fname">  </p>
<script>
document.getElementById("fname").innerHTML=document.anchors.length;
</script>
</body>
</html>




## How to find no. of images in a webpage
example:-
- docurl.html
<html>
<body>

<a href="" name="a1">
<a href="" name="a2">
<a href="" name="a3">
<a href="" name="a4">
<a href="" name="a5">

<img src="" name="i1">
<img src="" name="i2">
<img src="" name="i3">
<img src="" name="i4">
<p id="fname">  </p>
<script>
document.getElementById("fname").innerHTML=document.images.length;
</script>
</body>
</html>




## How to disable a button ctrl
example:-
- docurl.html
<html>
<head>
<script language="JavaScript">
function disable()
{
document.getElementById("demo").disabled=true;
}
</script>
</head>
<body>
<form>
<input type="button" value="Click" id="demo">
</form>
<input type="button" value="Disable" onclick="disable();">
</body>
</html>




## How to remove dropdown list item
example:-
- docurl.html
<html>
<head>
<script language="JavaScript">
function disable()
{
var x=document.getElementById("s1");
x.remove(x.selectedIndex);
}
</script>
</head>
<body>

<form>
<select id="s1">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
<option>Strawberry</option>
<option>Watermelon</option>
</select>

<input type="button" value="Click" onclick="disable();">
</form>
</body>
</html>




TASK:-
1. Implement JavaScript in marquee tag 
- marqueeJS.html
<html>
<head>
</head>
<body>
<h2>HTML Marquee Tag</h2>
<marquee behavior="alternate" scrolldelay="100">
<marquee width="300">
<h3 style="color:red; font-weight:bold; font-size:large;"> FLOATING TEXT </h3>
</marquee>
</marquee>
<h2> JavaScript </h2>
<p id="wordscroller" style="color:blue; font-weight:normal; font-size:x-large"></p>

<script language="JavaScript">
function show(pos)
{
var item="Fruits";
var output="";
var screen=document.getElementById("wordscroller");
for(var i=0;i<pos;i++)
{
output+=item.charAt(i);
}
output+=item.charAt(pos);
screen.innerHTML=output;
pos++;
if(pos!=item.length)
{
window.setTimeout(function () { scroll(pos); }, 300);
}
else
{
window.setTimeout(function () { scroll(0); }, 5000);
}
}
scroll(0);
</script>
</body>
</html>




2. Accept only uppercase letters in a textbox in JavaScript 
- uppercase.html
<html>
<head>
<script language="JavaScript">
function upperMe()
{
document.getElementById("output").value=document.getElementById("input").value.toUpperCase();
}
</script>
</head>
<body>

Enter your text: <input type="text" name="input" id="input" onchange="upperMe()"/><br><br>
Click here to see the change: <br>
<input type="button" value="Click Me"><br><br>
<input type="text" name="output" id="output" value="" />
</body>
</html>



3. Input marks of 5 subject using textbox and sum of all mark and calculate the percentage 
   if per > 60 then display First div 
   if per > 50 and < 60  display Second div 
   if per > 40 < 50  display Third div 
    otherwise Fail 
- result.html
<html>
<head>
<script type="text/javascript">
function submit_marks() {
var sub1 = parseInt(document.getElementById('s1').value);
var sub2 = parseInt(document.getElementById('s2').value);
var sub3 = parseInt(document.getElementById('s3').value);
var sub4 = parseInt(document.getElementById('s4').value);
var sub5 = parseInt(document.getElementById('s5').value);
var total = sub1+sub2+sub3+sub4+sub5;
var per  = total/5;
var res;
if (per>60) {
res = 'First Division';
} 

else if(per>50 && per<=60){
res = 'Second Division';
}

else if(per>40 && per<=50){
res = 'Third Division';
}

else{
res = "Fail";
}
document.getElementById("demo").innerHTML = "Total Marks : "+total+"<br>Percentage : "+per+"<br>Result : "+res;
// document.write("Your Total Marks : "+total);
// document.write("<br>Your Percentage : "+per);
// document.write("<br>Your Grade : "+grade);
}
</script>
</head>
<body style="text-align:center;">
<h1>Marksheet</h1>
<hr><br>
Enter 1st subject marks: <input type="text" id="s1"><br><br>
Enter 2nd subject marks: <input type="text" id="s2"><br><br>
Enter 3rd subject marks: <input type="text" id="s3"><br><br>
Enter 4th subject marks: <input type="text" id="s4"><br><br>
Enter 5th subject marks: <input type="text" id="s5"><br><br><br><br>
<input type="submit" onclick="submit_marks()"><br><br>

<div id="demo"></div>
</body>
</html>



4. Factorial number program in Python or JavaScript
JAVASCRIPT PRGM
- factorial.html
<html>
<head>
<script language="JavaScript">
function fact()
{
var i,num,f=1;
num=document.getElementById("num").value;
for(i=1;i<=num;i++)
{
f=f*i;
}
i=i-1;
document.getElementById("res").innerHTML="Factorial of the number " +i +" is: " +f;
}
</script>

</head>
<body style="text-align:center">
<h1> Factorial of Number </h1>
<hr><br>
Enter a number: <input id="num"><br><br>
<input type="button" value="Click" onclick="fact();">
<p id="res"></p>
</body>
</html>





Comments

Post a Comment

Popular posts from this blog

PyCharm Setup

Image
 25/6 Ø   Steps to setup PyCharm:-   ·          Download the PyCharm interpreter and check for the version which supports your system.  ·          I have downloaded PyCharm 2021.1.2 x 64 publisher JetBrains s.r.o. version 211.7442.45   ·          Install the PyCharm interpreter in your system.   ·          Create the shortcut on desktop.   ·          After installing the PyCharm open it, it will take some time to launch.   ·          In case if the interpreter is not working go to the settings and select the desired option which is compatible with your system.       Ø   New Project:-   ·          Then after this try creating a new pro...
Read more

HTML and CSS

Image
8/5 ## ADVANCED TOPICS:- ## Web page creation - Website is a collection of web page - Web page is collection of information - Information is collection of data - Data is a raw material ## Types of websites 1) Static website   only for information purpose 2) Dynamic website   where user can interact ## Website creating language 1) HTML  H-Hyper          reference of next page  T-Text              collection of words, symbols and characters  M-Markup       it is a library stores the definition of all tags  L-Language     mediator ## HTML syntax is called "tag" <html> </html> ## Types of tag 1) Open tag <> 2) Close tag <> </> ex. <p> <z> </z> ## HTML structure <html>  <head>   It is a optional section  </head>  <body>   Using called tag  </body> </html> ...
Read more