R22 NODEJS LAB MANUAL(II-I)
JAVA SCRIPT BASIC PROGRAMS ON CLIENT SIDE VALIDATION
Regular expressions Basics:
^ - beginning symbol
$ - ending symbol
/ ………. / eg :- /^gmail$/
[a-z] [A-Z] [0-9]
n+ Matches any string that contains at least one n
n* Matches any string that contains zero or more occurrences of n
n? Matches any string that contains zero or one occurrences of n
n{X} Matches any string that contains a sequence of X n's
n{X,Y} Matches any string that contains a sequence of X to Y n's
n{X,} Matches any string that contains a sequence of at least X n's
n$ Matches any string with n at the end of it
^n Matches any string with n at the beginning of it.
?=n Matches any string that is followed by a specific string n
?!n Matches any string that is not followed by a specific string n
/yahoo/ means any number of characters followed by yahoo followed by any
number of
characters
/^yahoo$/ means exactly yahoo [ ^ means beginning , $ means at the ending ]
/^[a-z]*$/ means any number of small characters -- * means 0 or more
/^[a-z]{3}/ means any exactly 3 small characters followed by any characters
/^[a-z]{3}$/ means exactly any 3 small characters
/^[a-z]{3,5}$/ means any 3 to 5 small characters
/^[a-z]{3}\.$/ means exactly any 3 small characters followed by.
/^[a-z]{3}\.[a-z]$/ means exactly 3 small characters followed by. Followed by one
single
character
/^[^0-9]/ -- Means string should not begin with 0-9
1
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
1.Program to validate email
Conditions for valid email
1.Could be in caps or small
2.Should start with only characters [a|A]
3.May include numbers in email id after few characters
4.Valid domain names for email servers =.in, .uk, us, com, .co.in
i.e. ending domain name should have either [2-5] characters
program
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementById("myText").value;
var y=/^([a-z]|[A-Z]){1,25}[0-9]*\@([a-z]|[A-Z]){2,10}\.([a-z]|[A-Z]|.){3,5}$/;
if(x.match(y))
alert(" Valid email ");
else
alert("In valid email ");
</script>
</head>
<body>
<h3>EMAIL VALIDATION </h3>
ENTER EMAIL :
<input type="text" id="myText">
<button onClick="myFunction()">Try it</button>
<p id="demo"> </p>
</body>
</html>
2
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
2. PROGRAM ON SIMPLE CALCULATOR
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
</head>
<body>
<div class="calculator">
<h2>Simple Calculator</h2>
<input type="text" id="display" disabled>
<br>
<div class="buttons">
<button onclick="appendNumber(1)">1</button>
<button onclick="appendNumber(2)">2</button>
<button onclick="appendNumber(3)">3</button>
<button onclick="appendNumber(4)">4</button>
<button onclick="appendNumber(5)">5</button>
<button onclick="appendNumber(6)">6</button>
<button onclick="appendNumber(7)">7</button>
<button onclick="appendNumber(8)">8</button>
<button onclick="appendNumber(9)">9</button>
<button onclick="appendNumber(0)">0</button>
<button onclick="clearDisplay()">C</button>
</div>
<br>
<button onclick="setOperator('+')">+</button>
<button onclick="setOperator('-')">-</button>
<button onclick="setOperator('*')">*</button>
<button onclick="setOperator('/')">/</button>
<br>
3
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
<button onclick="calculate()">=</button>
<h3>Result: <span id="result">0</span></h3>
</div>
<script>
let currentInput = "";
let operator = "";
let firstNumber = "";
function appendNumber(num) {
currentInput += num;
document.getElementById("display").value = currentInput;
function setOperator(op) {
if (currentInput === "") return;
firstNumber = currentInput;
operator = op;
currentInput = "";
document.getElementById("display").value = "";
function calculate() {
if (firstNumber === "" || currentInput === "") return;
let num1 = parseFloat(firstNumber);
let num2 = parseFloat(currentInput);
let result = 0;
switch (operator) {
case '+': result = num1 + num2; break;
case '-': result = num1 - num2; break;
case '*': result = num1 * num2; break;
case '/': result = num2 !== 0 ? num1 / num2 : 'Cannot divide by zero'; break;
default: result = 'Error';
4
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
document.getElementById("result").innerText = result;
document.getElementById("display").value = result;
currentInput = "";
firstNumber = "";
operator = "";
function clearDisplay() {
currentInput = "";
firstNumber = "";
operator = "";
document.getElementById("display").value = "";
document.getElementById("result").innerText = "0";
</script>
</body>
</html>
5
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
3. PROGRAMS ON CREATING DYNAMIC HTML
1. Changing colours ( bg and foreground)
<html>
<head>
<title> Dynamic Colors
</title>
<script>
function setColor(where, newColor) {
if (where == "background" )
document.body.style.backgroundColor = newColor;
else
document.body.style.color = newColor;
}
</script>
</head>
<body>
<p style = " font-family: Times; font-style: italics;
font-size: 24pt;">
Demonstration on dynamic settings of the
foreground and background colors.
</p>
<form>
<p>
Background color:
<input type= "text" name="background" size ="10"
onchange = "setColor('background', this.value)" />
<br />
Foreground color:
<input type= "text" name="foreground" size ="10" onchange = "setColor('foreground',
this.value)" /> <br /> </p>
</form> </body></html>
6
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
2. Fonts and colour of fonts changing upon moving cursor
<html>
<head>
<title>
Dynamic fonts for links
</title>
<style type ="text/css">
.regText { font: Times; font-size:16pt;}
</style>
</head>
<body>
<p class ="regText">
Mouseover on below paragraph
<p style = "color: blue;"
onmouseover = "this.style.color = 'red';
this.style.font = 'italic 16pt Times';"
onmouseout = "this.style.color = 'blue';
this.style.font = 'normal 16pt Times';" >
This is working great ! </p>
Simple demonstration on font change.
</p>
</body>
</html>
7
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
3. Moving image based on x and y given coordinates
<html>
<head>
<title>
Moving elements
</title>
<script type = "text/javascript">
<!-
// The event handler function to move and element
function moveIt(movee, newTop, newLeft) {
dom = document.getElementById(movee).style;
dom.top = newTop + "px";
dom.left = newLeft + "px";
//-->
</script>
</head>
<body>
<form action ="">
<p>
x coordinate:<input type= "text" id ="leftCoord" size ="5" />
<br />
y coordinate: <input type= "text" id ="topCoord" size ="5" />
<br />
<input type= "button" value = "Move it" onclick =
"moveIt('div1',document.getElementById('topCoord').value,
document.getElementById('leftCoord').value)" />
</P>
</form>
<div id ="div1" style = "position: absolute; top: 115 px; left: 0;">
8
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
<img src= "computer.jpg" />
</div>
</body>
</html>
4. deleting elements upon clicking
<!DOCTYPE html>
<html>
<head>
<script>
function demo(x)
x.remove();
</script>
<style>
.myDiv1 {
border: 10px outset black;
background-color: grey;
text-align: center;
.myDiv2 {
border: 10px outset green;
background-color: lightgreen;
text-align: center;
.myDiv3 {
border: 10px outset red;
background-color: lightpink;
text-align: center;
9
DEPT.CSE, JNTUHUCER
R22 NODEJS LAB MANUAL(II-I)
</style>
</head>
<body>
<h1>Div element - Click on boxes to vanish - Using java script</h1>
<p id="p1"></p>
<div id="div1" class="myDiv1" onclick="demo(this)">
<h2>This is h2 element </h2>
<p>This is paragraph </p>
</div>
<br>
<div id="div2" class="myDiv2" onclick="demo(this)">
<h2>This is h2 element </h2>
<p>This is paragraph </p>
</div>
<br>
<div id="div3" class="myDiv3" onclick="demo(this)">
<h2>This is h2 element </h2>
<p>This is paragraph </p>
</div>
</body>
</html>
10
DEPT.CSE, JNTUHUCER
