CSS_ESE[1]

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){
i++;
}
</script>
</html>
Output:
3. Do While Loop:
Code:
<html>
<script>
let n =10;
let i =1;
do{
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(c);
document.write(d);
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>
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>
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>
Easy</b></a><br>
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:

CSS_ESE[1]

Uploaded by

Copyright:

Available Formats

CSS_ESE[1]

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS_ESE[1]

Uploaded by

Copyright:

Available Formats

CSS ESE

2. JavaScript Function with Arguments

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

<b><h3><p>Label and Text Box </p></h3></b>

<b><h3><p> Width Attribute </p></h3></b>

<b><h3><p> Dropdown List </p></h3></b>

<b><h3><p> Multiple Selection </p></h3></b>

<label for="files">Upload your Marksheet</label>

<label for="enr">Enter Aadhar Number:</label>

<b><h3><p> Read Only Attribute </p></h3></b>

<b><h3><p> Form-Final Submit Button </p></h3></b>

// Key Event Functions

// Other Event Functions

<input type="password" id="password" placeholder="Password">

// Reset error messages

// Validation Regex Patterns

// Get input values

// Check if all validations passed

2. Dynamically Changing menus

<h1>The Window Object</h1>

<h2>The status Property</h2>

<p>The status property is not supported in any browser.</p>

window.status = "Some text in the status bar.";

<p>Right click in the image.</p>

You might also like