CSS ESE
Code:
<html>
<script>
let a = parseInt(prompt("Enter the value of A"));
let b = parseInt(prompt("Enter the value of B"));
[Link]("A=",a,"<br>");
[Link]("B=",b,"<br>");
[Link]("Addition is ",a+b,"<br>");
[Link]("Subtraction is ",a-b,"<br>");
[Link]("Multiplication is ",a*b,"<br>");
[Link]("Division is ",a/b,"<br>");
</script>
</html>
Output:
1. If Else
Code:
<html>
<script>
let a =10;
let b= 20;
if(a==10)
{
[Link]("A is 10");
}
else
{
[Link]("A is not 10");
}
</script>
</html>
Output:
2. Switch Case:
Code:
<html>
<script>
let a = parseInt(prompt("Enter the day of week"));
switch(a)
{
case 1:[Link]("Sunday");
break;
case 2:[Link]("Monday");
break;
case 3:[Link]("Tuesday");
break;
case 4:[Link]("Wednesday");
break;
case 5:[Link]("Thursday");
break;
case 6:[Link]("Friday");
break;
case 7:[Link]("Saturday");
break;
default: [Link]("Invalid Input");
break;
}
</script>
</html>
Output:
1. For Loop:
Code:
<html>
<script>
let n =10;
for(i=1;i<=n;i++){
[Link](i,"<br>");
}
</script>
</html>
Output:
2. While Loop:
Code:
<html>
<script>
let n =10;
let i =1;
while(i<=n){
[Link](i,"<br>");
i++;
}
</script>
</html>
Output:
3. Do While Loop:
Code:
<html>
<script>
let n =10;
let i =1;
do{
[Link](i,"<br>");
i++;
}
while(i<=n)
</script>
</html>
Output:
Code:
<html>
<head>
<title>Array Demo</title>
</head>
<body>
<script>
var a=new Array(5);
for(i=1;i<10;i++){
a[i]=i;
[Link](a[i]+"<br>");
}
[Link](" find() returns element with condition: ",[Link]((element => element >
7)) +"<br>");
[Link](" findIndex() returns index with condition: ",[Link]((element =>
element > 7)) +"<br>");
[Link]("indexOf() returns first match index: ",[Link](3) +"<br>");
[Link]("lastIndexOf() returns last match index: ",[Link](3) +"<br>");
[Link]("pop() removes and returns the last element: ",[Link]() +"<br>"+"<br>");
[Link]("push() adds one or more elements at end : ",[Link](10, 11) +"<br>");
[Link]("reverse() reverses the elements: ",[Link]() +"<br>");
[Link]("sort() sorted order array: ",[Link]((a, b) => a - b) +"<br>");
</script>
</body>
</html>
Output:
1. JavaScript Function with no Arguments
Code:
<html>
<body>
<script>
function msg()
{
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
</body>
</html>
Output:
2. JavaScript Function with Arguments
Code:
<html>
<body>
<script>
function add(number1,number2)
{
alert(number1+number2);
}
</script>
<form>
<input type="button" value="Addition" onclick="add(4,8)"/>
</form>
</body>
</html>
Output:
Code:
<html>
<head></head>
<script>
var a = new String("Hello");
var b = new String("World");
var c = new String(" Agnel Polytechnic ");
var d = new String("Hello World");
[Link](a);
[Link]("<br>");
[Link](b);
[Link]("<br>");
[Link](c);
[Link]("<br>");
[Link](d);
[Link]("<br>");
[Link]("To Upper Case :",[Link](),"<br>");
[Link]("To Lower Case :",[Link](),"<br>");
[Link]("Length of a String :",[Link],"<br>");
[Link]("Concate of a String :",[Link](b),"<br>");
[Link]("(substring) Slicing of a String :",[Link](2,13),"<br>");
[Link]("(charCodeAt) Unicode Character at a particular index of a String
:",[Link](6),"<br>");
[Link]("Triming of a String :",[Link](),"<br>");
[Link]("Replacing of a String :",[Link]("World","Everyone"),"<br>");
</script>
</html>
Output:
Code:
<html><body>
<b><h2><p> FORM ELEMENTS </p></h2></b>
<form >
<b><h3><p>Label and Text Box </p></h3></b>
<label for="fname">Student Name:</label>
<input type="text" id="fname" name="fname" value=""><br>
<b><h3><p> Width Attribute </p></h3></b>
<label for="rno">Roll Number:</label>
<input type="rno" id="rno" name="rno" size="5"><br>
<b><h3><p>Radio Button</p></h3></b>
<label>Gender:</label>
<input type="radio" name="gender" value="male" > Male
<input type="radio" name="gender" value="female"> Female<br>
<b><h3><p> Dropdown List </p></h3></b>
<label>Branch:</label>
<select id="branch" name="Branch">
<option value="AN">AN</option>
<option value="TE">TE</option>
<option value="ME">ME</option>
<option value="CE">CE</option>
</select><br>
<b><h3><p>Check Boxes</p></h3></b>
<label>Subjects:</label>
<input type="checkbox" name="css" value="css"> CSS
<input type="checkbox" name="ccd" value="ccd"> CDD
<input type="checkbox" name="osy" value="osy"> OSY <br>
<b><h3><p> Multiple Selection </p></h3></b>
<label for="files">Upload your Marksheet</label>
<input type="file" id="files" name="files" multiple><br><br>
<label for="enr">Enter Aadhar Number:</label>
<input type="enr" id="enr" name="enr" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-
[0-9]{4}-[0-9]{4}">
<br>
<b><h3><p> Read Only Attribute </p></h3></b>
<label for="fname">District:</label> <input type="text" id="district" name="fname"
value="Thane" disabled><br>
<b><h3><p> Disable Attribute </p></h3></b>
<label for="cname">College:</label> <input type="text" id="cname" name="cname"
value="Agnel Polytechnic" readonly><br>
<b><h3><p> Form-Final Submit Button </p></h3></b>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Mouse Events:
Code:
<!DOCTYPE html>
<head>
<title>Mouse event Code</title>
<style>
#mouseArea{
width:300px;
height:200px;
background-color:lightblue;
border:2px solid blue;
margin-top:50 px;
text-align:center;
line-height:200px;
font-size:20px;
user-select:none;
}
</style>
</head>
<body onload="myfunc()">
<div id="mouseArea">Hover or Click Me!</div>
<script>
function myfunc(){
alert("Page is loaded");
}
const mouseArea=[Link]('mouseArea');
[Link]('mouseover',function(){
[Link]="Mouse Over";
[Link]='lightgreen';
});
[Link]('mouseout',function(){
[Link]="Hover or Click Me!";
[Link]='lightblue';
});
[Link]('mousedown',function(){
[Link]="MouseDown";
[Link]='yellow';
});
[Link]('mouseup',function(){
[Link]="MouseUp";
[Link]='red';
});
[Link]('click',function(){
[Link]="MouseClicked!";
[Link]='pink';
});
[Link]('dblclick',function(){
[Link]="Double Click";
[Link]='white';
});
[Link]('contextmenu',function(event){
[Link]();
[Link]="RightClick!";
[Link]='orange';
});
</script>
</body>
</html>
Output:
Load Events:
Code:
<html>
<head>
<script>
// Load Event Functions
function onLoadFunc() {
alert("Page is loaded");
}
function onUnloadFunc() {
alert("Page is unloading");
}
// Key Event Functions
function onKeyUpFunc() {
var fnameInput = [Link]("fname");
[Link] = [Link]();
}
// Other Event Functions
function onFocusFunc(input) {
[Link] = "yellow";
}
function onBlurFunc() {
var fnameInput = [Link]("fname");
[Link] = [Link]();
}
function onResetFunc() {
alert("The form has been reset.");
}
function confirmInput(event) {
[Link](); // Prevent form submission
var fname = [Link]("fname").value;
alert("Hello " + fname + "! You will now be redirected to My Page.");
// Optionally redirect here
// [Link] = "your_redirect_url";
}
</script>
</head>
<body onload="onLoadFunc()" onunload="onUnloadFunc()">
<h2>Hello</h2>
<form onreset="onResetFunc()" onsubmit="confirmInput(event)">
<label for="fname">Enter your name:</label>
<input id="fname" type="text" size="20" onfocus="onFocusFunc(this)"
onblur="onBlurFunc()" onkeyup="onKeyUpFunc()">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
1. Intrinsic Functions
Code:
<!DOCTYPE html>
<html>
<body>
<form name="myform">
Roll Number:<input type=”text” name=”roll”/>
<br> <br>
Name :<input type=”text” name=”name”/>
<br><br>
<img src ="[Link]" onclick="javascript:[Link]()"/>
<br><br>
</form>
</body>
</html>
Output:
2. Disabling Elements
Code:
<html>
<head>
<title>Intrinsic function</title>
<script>
function EnableFunction()
{
[Link]=false
}
function DisableFunction()
{
[Link]=true
}
</script>
</head>
<body>
<form name="myform">
Username:<input type="text" name="name"/>
<br> <br>
<button type="button" onclick="DisableFunction()"> Disable Name Field </button>
<br><br>
<button type="button" onclick="EnableFunction()"> Enable Name Field </button>
</form>
</body>
</html>
Output:
3. Read-Only Elements
Code:
<html>
<head>
<title>Read Only Function</title>
</head>
<body>
<form name="myform">
Username: <input type="text" value="CSS" name="name" readonly/>
</form>
read only
</body>
</html>
Output:
Creating and Reading a Cookie
Code:
[Link] :
<html>
<head>
<title>Read and Write cookies</title>
</head>
<body>
<form name="myform" action=" ">
Enter your Name: <input type="text" name="person" /><br>
<input name="Reset" value="Set cookie" type="button" onclick="writecookie()"/>
<input name="Reset" value="Get cookie" type="button" onclick="readcookie()"/>
</form>
<script src="[Link]"></script>
</body>
</html>
[Link] :
function writecookie()
{
with([Link])
{
[Link]="Name="+[Link]+ ";"
alert("Cookie is Written")
}
}
function readcookie()
{
var x;
if ([Link] == " "){
x = " ";
}
else{
x=[Link];
[Link](x);
}
}
Output:
Code:
<html>
<head>
<script>
function createWindows()
{
for(i=0; i<5; i++)
{
var mywin = [Link]("","win"+i,"width=100,height=100");
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Create Windows" onclick="createWindows()"/>
</form>
</body>
</html>
Output:
Code:
<!DOCTYPE html>
<html>
<body>
<form id="loginForm">
<input type="text" id="userId" placeholder="User ID">
<div id="userIdError"></div>
<input type="password" id="password" placeholder="Password">
<div id="passwordError"></div>
<button type="submit">Login</button>
</form>
<script>
[Link]('loginForm').addEventListener('submit', function(event) {
[Link]();
// Reset error messages
[Link]('userIdError').textContent = '';
[Link]('passwordError').textContent = '';
// Validation Regex Patterns
const userIdRegex = /^[a-zA-Z0-9_]{4,12}$/;
const passwordRegex = /^(?=.[A-Z])(?=.\d)[A-Za-z\d]{8,}$/;
// Get input values
const userId = [Link]('userId').value;
const password = [Link]('password').value;
// Validate User ID
if () {
[Link]('userIdError').textContent =
'User ID must be 4-12 characters, alphanumeric';
}
// Validate Password
if () {
[Link]('passwordError').textContent =
'Password must be 8+ chars, include 1 uppercase and 1 number';
}
// Check if all validations passed
if ([Link](userId) && [Link](password)) {
alert('Login successful!');
}
});
</script>
</body>
</html>
Output:
1. Creating Rollover using Javascipt
Code:
<!DOCTYPE html >
<html >
<head>
<script language="Javascript">
MyBooks = new Array(
'[Link]
[Link]/images/I/81G9qjejtvL._AC_UF1000,1000_QL80_.jpg',
'[Link]
[Link]/images/I/71GozChpIwL._AC_UF1000,1000_QL80_.jpg',
'[Link]
[Link]/images/I/51BFkBZNBvL._AC_UF1000,1000_QL80_.jpg'
);
function ShowCover(book) {
[Link]('DisplayBook').src = MyBooks[book];
}
</script>
</head>
<body>
<p align="center">
<img src="[Link]
[Link]/images/I/81G9qjejtvL._AC_UF1000,1000_QL80_.jpg"
id="DisplayBook" width="200"/>
</p>
<center>
<table border="0">
<tr>
<td align="center">
<a onmouseover="ShowCover(0)" href="#"><b>Visual Basic 2010 Made
Easy</b></a><br>
<a onmouseover="ShowCover(1)" href="#"><b>Visual Basic 2008 Made
Easy</b></a><br>
<a onmouseover="ShowCover(2)" href="#"><b>Visual Basic 6 Made
Easy</b></a><br>
</td>
</tr>
</table>
</center>
</body>
</html>
Output:
1. Menus:
Code:
<html>
<body>
<select>
<option value = "volvo">Volvo</option>
<option value = "saab">Saab</option>
<option value = "opel">Opel</option>
<option value = "audi">Audi</option>
</select>
</body>
</html>
Output:
2. Dynamically Changing menus
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Drop Down List</title>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex) {
const statusDropdown = [Link]("status");
[Link] = 0; // Clear existing options
// Always show these options
[Link][0] = new Option("Select status", "");
[Link][1] = new Option("OPEN", "open");
[Link][2] = new Option("DELIVERED", "delivered");
// Populate options based on the selected source
switch (listindex) {
case "manual":
// No additional options for manual
break;
case "online":
// Add SHIPPED option for online
[Link][3] = new Option("SHIPPED", "shipped");
break;
default:
// Reset to default
[Link][0] = new Option("Select status", "");
break;
}
return true;
}
</script>
</head>
<body>
<div class="category_div" id="category_div">
Source:
<select id="source" name="source"
onchange="dynamicdropdown([Link]);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">
Status:
<select name="status" id="status">
<option value="">Select status</option>
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</div>
</body>
</html>
Code:
1. Status Bar
Code:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The status Property</h2>
<p>The status property is not supported in any browser.</p>
<script>
[Link] = "Some text in the status bar.";
</script>
</body>
</html>
Output:
2. Protecting webpage
Code:
<html>
<head>
<script language="JavaScript">
function function2() {
alert("This image is copyrighted")
</script>
</head>
<body oncontextmenu="function2()">
<p>Right click in the image.</p>
<img oncontextmenu="function2()"
src="[Link]
alt="[Link]"
width="99"
height="76">
</body>
</html>
Output:
1. Creating Rotating banner ads
Code:
<html>
<head>
<script language="Javascript">MyBanners=new
Array('[Link]
'[Link]
'[Link]
'[Link]
banner=0
function ShowBanners()
(if ([Link])
{banner++
if (banner==[Link]) {
banner=0}
[Link]=MyBanners[banner]
setTimeout("Show Banners()", 5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="[Link] width="900"
height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Output:
2. Slideshow:
Code:
<html>
<head>
<script language="Javascript">
MySlides=new Array('[Link]
'[Link]
'[Link]
'[Link]
)
Slide=0
function ShowSlides (SlideNumber){
{Slide=Slide+SlideNumber
if(Slide >[Link]-1){
Side=0
}
if(Slide<0) {
Slide=[Link]-1
}
[Link]=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align="center"><img src="[Link]
name="DisplaySlide" width="900" height="120"/>
<p>
<center>
<table border=0>
<tr>
<td align=center>
<input type="button" value="Back" onclick="ShowSlides(-1)">
<input type="button" value="Forward" onclick="ShowSlides(1)">
</td>
</tr>
</table>
</center>
</body>
</html>
Output:
