Scribd
Upload
25 views

CSS_ESE[1]

Uploaded by

ritikadarade1512
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
25 views

CSS_ESE[1]

Uploaded by

ritikadarade1512
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/ 42

CSS ESE

Code:
<html>
<script>
let a = parseInt(prompt("Enter the value of A"));
let b = parseInt(prompt("Enter the value of B"));
document.write("A=",a,"<br>");
document.write("B=",b,"<br>");
document.write("Addition is ",a+b,"<br>");
document.write("Subtraction is ",a-b,"<br>");
document.write("Multiplication is ",a*b,"<br>");
document.write("Division is ",a/b,"<br>");
</script>
</html>
Output:
1. If Else
Code:
<html>
<script>
let a =10;
let b= 20;
if(a==10)
{
document.write("A is 10");
}
else
{
document.write("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:document.write("Sunday");
break;
case 2:document.write("Monday");
break;
case 3:document.write("Tuesday");
break;
case 4:document.write("Wednesday");
break;
case 5:document.write("Thursday");
break;
case 6:document.write("Friday");
break;
case 7:document.write("Saturday");
break;
default: document.write("Invalid Input");
break;
}
</script>
</html>

Output:
1. For Loop:
Code:
<html>
<script>
let n =10;
for(i=1;i<=n;i++){
document.write(i,"<br>");
}
</script>
</html>

Output:

2. While Loop:
Code:
<html>
<script>
let n =10;
let i =1;
while(i<=n){

document.write(i,"<br>");
i++;
}
</script>
</html>
Output:

3. Do While Loop:
Code:
<html>
<script>
let n =10;
let i =1;
do{

document.write(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;
document.write(a[i]+"<br>");
}

document.write(" find() returns element with condition: ",a.find((element => element >
7)) +"<br>");
document.write(" findIndex() returns index with condition: ",a.findIndex((element =>
element > 7)) +"<br>");
document.write("indexOf() returns first match index: ",a.indexOf(3) +"<br>");
document.write("lastIndexOf() returns last match index: ",a.lastIndexOf(3) +"<br>");
document.write("pop() removes and returns the last element: ",a.pop() +"<br>"+"<br>");
document.write("push() adds one or more elements at end : ",a.push(10, 11) +"<br>");
document.write("reverse() reverses the elements: ",a.reverse() +"<br>");
document.write("sort() sorted order array: ",a.sort((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");

document.write(a);
document.write("<br>");
document.write(b);
document.write("<br>");
document.write(c);
document.write("<br>");
document.write(d);
document.write("<br>");

document.write("To Upper Case :",a.toUpperCase(),"<br>");


document.write("To Lower Case :",a.toLowerCase(),"<br>");
document.write("Length of a String :",a.length,"<br>");
document.write("Concate of a String :",a.concat(b),"<br>");
document.write("(substring) Slicing of a String :",c.substring(2,13),"<br>");
document.write("(charCodeAt) Unicode Character at a particular index of a String
:",c.charCodeAt(6),"<br>");
document.write("Triming of a String :",c.trim(),"<br>");
document.write("Replacing of a String :",d.replace("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=document.getElementById('mouseArea');
mouseArea.addEventListener('mouseover',function(){
mouseArea.textContent="Mouse Over";
mouseArea.style.background='lightgreen';
});
mouseArea.addEventListener('mouseout',function(){
mouseArea.textContent="Hover or Click Me!";
mouseArea.style.backgroundColor='lightblue';
});
mouseArea.addEventListener('mousedown',function(){
mouseArea.textContent="MouseDown";
mouseArea.style.backgroundColor='yellow';
});
mouseArea.addEventListener('mouseup',function(){
mouseArea.textContent="MouseUp";
mouseArea.style.backgroundColor='red';
});
mouseArea.addEventListener('click',function(){
mouseArea.textContent="MouseClicked!";
mouseArea.style.backgroundColor='pink';
});
mouseArea.addEventListener('dblclick',function(){
mouseArea.textContent="Double Click";
mouseArea.style.backgroundColor='white';
});
mouseArea.addEventListener('contextmenu',function(event){
event.preventDefault();
mouseArea.textContent="RightClick!";
mouseArea.style.backgroundColor='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 = document.getElementById("fname");
fnameInput.value = fnameInput.value.toUpperCase();
}

// Other Event Functions


function onFocusFunc(input) {
input.style.background = "yellow";
}

function onBlurFunc() {
var fnameInput = document.getElementById("fname");
fnameInput.value = fnameInput.value.toUpperCase();
}

function onResetFunc() {
alert("The form has been reset.");
}

function confirmInput(event) {
event.preventDefault(); // Prevent form submission
var fname = document.getElementById("fname").value;
alert("Hello " + fname + "! You will now be redirected to My Page.");
// Optionally redirect here
// window.location.href = "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 ="submit.jpg" onclick="javascript:document.forms.myform.submit()"/>
<br><br>
</form>
</body>
</html>
Output:
2. Disabling Elements
Code:
<html>
<head>
<title>Intrinsic function</title>
<script>
function EnableFunction()
{
document.forms.myform.name.disabled=false
}
function DisableFunction()
{
document.forms.myform.name.disabled=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:
createcookie.html :
<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="cookie.js"></script>
</body>
</html>

cookie.js :
function writecookie()
{
with(document.myform)
{
document.cookie="Name="+person.value+ ";"
alert("Cookie is Written")
}
}
function readcookie()
{
var x;
if (document.cookie == " "){
x = " ";
}
else{
x=document.cookie;
document.write(x);
}
}
Output:
Code:
<html>
<head>
<script>
function createWindows()
{
for(i=0; i<5; i++)
{
var mywin = window.open("","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>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();

// Reset error messages


document.getElementById('userIdError').textContent = '';
document.getElementById('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 = document.getElementById('userId').value;
const password = document.getElementById('password').value;

// Validate User ID
if (!userIdRegex.test(userId)) {
document.getElementById('userIdError').textContent =
'User ID must be 4-12 characters, alphanumeric';
}

// Validate Password
if (!passwordRegex.test(password)) {
document.getElementById('passwordError').textContent =
'Password must be 8+ chars, include 1 uppercase and 1 number';
}

// Check if all validations passed


if (userIdRegex.test(userId) && passwordRegex.test(password)) {
alert('Login successful!');
}
});
</script>
</body>
</html>
Output:
1. Creating Rollover using Javascipt
Code:
<!DOCTYPE html >
<html >
<head>
<script language="Javascript">
MyBooks = new Array(
'https://m.media-
amazon.com/images/I/81G9qjejtvL._AC_UF1000,1000_QL80_.jpg',
'https://m.media-
amazon.com/images/I/71GozChpIwL._AC_UF1000,1000_QL80_.jpg',
'https://m.media-
amazon.com/images/I/51BFkBZNBvL._AC_UF1000,1000_QL80_.jpg'
);

function ShowCover(book) {
document.getElementById('DisplayBook').src = MyBooks[book];
}
</script>
</head>
<body>

<p align="center">
<img src="https://m.media-
amazon.com/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 = document.getElementById("status");
statusDropdown.options.length = 0; // Clear existing options
// Always show these options
statusDropdown.options[0] = new Option("Select status", "");
statusDropdown.options[1] = new Option("OPEN", "open");
statusDropdown.options[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
statusDropdown.options[3] = new Option("SHIPPED", "shipped");
break;
default:
// Reset to default
statusDropdown.options[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(this.value);">
<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>

window.status = "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="https://m.media-amazon.com/images/I/71GozChpIwL._AC_UF1000,1000_QL80_.jpg"

alt="www.java2s.com"

width="99"

height="76">

</body>

</html>

Output:
1. Creating Rotating banner ads
Code:
<html>
<head>
<script language="Javascript">MyBanners=new
Array('https://www.w3schools.com/w3images/fjords.jpg',
'https://www.w3schools.com/w3images/lights.jpg',
'https://www.w3schools.com/w3images/nature.jpg',
'https://www.w3schools.com/w3images/mountains.jpg')
banner=0
function ShowBanners()
(if (document.images)
{banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("Show Banners()", 5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="https://www.w3schools.com/w3images/fjords.jpg" width="900"
height="120" name="ChangeBanner"/>
</center>
</body>
</html>
Output:
2. Slideshow:
Code:
<html>
<head>
<script language="Javascript">
MySlides=new Array('https://www.w3schools.com/w3images/fjords.jpg',
'https://www.w3schools.com/w3images/lights.jpg',
'https://www.w3schools.com/w3images/mountains.jpg',
'https://www.w3schools.com/w3images/nature.jpg'
)
Slide=0
function ShowSlides (SlideNumber){
{Slide=Slide+SlideNumber
if(Slide >MySlides.length-1){
Side=0
}
if(Slide<0) {
Slide=MySlides.length-1
}
document.DisplaySlide.src=MySlides[Slide]
}
}
</script>
</head>
<body>
<P align="center"><img src="https://www.w3schools.com/w3images/fjords.jpg"
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:

You might also like