WEB DESIGN PRACTICLE bca

 EMBED JAVASCRIPT INTO HTML
<html>
<head>
<title>Javascript: Good Morning All of u</title>
<script>
alert("Good morning All of u");
</script>
</head>
<body>
<p>This message only display a massage box.</p></body>
</html>

2. JAVASCRIPT CODE TO DEMONSTRATE CONDITIONAL STATEMENTS
IF STATEMENT :
<html>
<body>
<script>
var a=20;
if(a>10)
{
document.write("value of a is greater than 10");
}
</script>
</body>
</html>

IF…. ELSE STATEMENT :
<html>
<body>
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>
</body>
</html>

IF...ELSE IF STATEMENT :
<html>
<body>
<script>
var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
}
else if(a==20){
}
else{
document.write("a is not equal to 10, 15 or 20");
}
</script>
</body>
</html>

SWITCH STATEMENT :
<!DOCTYPE html>
<html>
<body>
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
</body></html>

3.JAVASCRIPT CODE TO DEMONSTRATE LOOPING
STATEMENTS:
JAVASCRIPTFOR LOOP :
<!DOCTYPE html>
<html>
<body>
<script>
for (i=1; i<=; i++) 5
{
document.write(i + "<br/>")
}
</script>
</body>
</html>

JAVASCRIPT WHILE LOOP :
while (condition)
{
code to be executed
}
<!DOCTYPE html>
<html>
<body>
<script>
vari=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
</body>
</html>

JavaScript do while loop :
<!DOCTYPE html>
<html>
<body>
<script>
vari=21;
do{
document.write(i + "<br/>");
i++;
}while(i<=25);
</script>
</body>
</html>

4.JavaScript code to demonstrate different string functions.
string replace :
<!DOCTYPE html>
<html>
<body>
<script>
varstr="Javatpoint";
document.writeln(str.replace("tpoint","Script"));
</script>
</body>
</html>

String toLowerCase() :
<html>
<body>
<script>
varstr = "BCA";
document.writeln(str.toLowerCase());
</script>
</body>
</html>

String toUpperCase() :
<html>
<body>
<script>
varstr = "bca";
document.writeln(str.toUpperCase());
</script>
</body>
</html>

String indexOf() :
<html>
<body>
<script>
var web="Hello Friends";
document.write(web.lastIndexOf('F'));
</script>
</body>
</html>

String slice() :
<html>
<body>
<script>
varstr = "Maharashtra";
document.writeln(str.slice(2,10));
</script>
</body>
</html>

5.JavaScript code to demonstrate onblur, onfocus, onload, onsubmit. :
Onfocus-
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The focus Event</h2>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function changes the background-
color.</p>
<script>
functionmyFunction(x) {
x.style.background = "yellow";
}
</script>
</body>
</html>

Onload-
<html>
<body onload="myFunction()">
<h2>Theonload Event</h2>
<script>
functionmyFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>

Onblur-
<html>
<body>
<h2>The blur Event</h2>
Enter your name: <input type="text" id="fname" onblur="myFunction()">
<p>When you leave the input field, a function is triggered which transforms
the input text to upper case.</p>
<script>
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>

Onsubmit-
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some
text.</p>
<form action="/action_page.php" onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
alert("The form was submitted");
}
</script>
</body>
</html>

6.JavaScript code to demonstrate onkeypress, onmouseover,
onmouseout :
Onmouseover -
<html>
<head>
<h1>Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">

</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>

Onmouseout-
<html>
<head>
<script>

</script>
</head>
<body>
<ponmouseout="sayHello()">This is demo text for mouseover event.</p>
</body>
</html>

Onkeypress-
<!DOCTYPE html>
<html>
<body>
<h2>Theonkeypress Event</h2>
<p>A function is triggered when the user is pressing a key in the input
field.</p>
<input type="text" onkeypress="myFunction()">
<script>
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>

7. Addition of two numbers :
public class Main {
public static void main(String[] args) {
int x = 5;
int y = 6;
int sum = x + y;
System.out.println(sum); }
}

8. demonstrate Date object :
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Dates</h1>
<h2>Using new Date()</h2>
<p id="demo"></p>
<script>
const d = new Date("2022-03-25");
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

9.demonstrate use of Dialog Boxes.
<html>
<head>
<script type="text/javascript">
function show() {
var con = confirm ("It is a Confirm dialog box");
if(con == true) {
document.write ("User Want to continue");
}

11.form validation – not null, number, string etc
not null :
function required()
{
var empt = document.forms["form1"]["text1"].value;
if (empt == "")
{
alert("Please input a Value");
return false;
}
else
{
alert('Code has accepted : you can try another');
return true;
}
}

Number :
function allnumeric(inputtxt)
{
var numbers = /^[0-9]+$/;
if(inputtxt.value.match(numbers))
{
alert('Your Registration number has accepted....');
document.form1.text1.focus();
return true;
}
else
{
alert('Please input numeric characters only');
document.form1.text1.focus();
return false;
}
}

String :
function lengthRange(inputtxt, minlength, maxlength)
{
var userInput = inputtxt.value;
if(userInput.length >= minlength && userInput.length <=
maxlength)
{
return true;
}
else
{
alert("Please input between " +minlength+ " and "
+maxlength+ " characters");
return false;
}
}

11.Simple registration form using Bootstrap :
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card shadow-2-strong card-registration" style="border-radius: 15px;">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2 pb-md-0 mb-md-5">Registration Form</h3>
<form>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="firstName" class="form-control form-control-lg" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<input type="text" id="lastName" class="form-control form-control-lg" />
<label class="form-label" for="lastName">Last Name</label>
</div>

</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 d-flex align-items-center">
<div class="form-outline datepicker w-100">
<input type="text" class="form-control form-control-lg" id="birthdayDate" />
<label for="birthdayDate" class="form-label">Birthday</label>
</div>
</div>
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="femaleGender"
value="option1" checked />
<label class="form-check-label" for="femaleGender">Female</label>
</div>
id="maleGender"
value="option2" />

<label class="form-check-label" for="maleGender">Male</label>
</div>
id="otherGender"
value="option3" />
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4 pb-2">
<input type="email" id="emailAddress" class="form-control form-control-lg" />
<label class="form-label" for="emailAddress">Email</label>
</div>
</div>
<div class="col-md-6 mb-4 pb-2">
<input type="tel" id="phoneNumber" class="form-control form-control-lg" />

<label class="form-label" for="phoneNumber">Phone Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<select class="select form-control-lg">
<option value="1" disabled>Choose option</option>
<option value="2">Subject 1</option>
</select>
<label class="form-label select-label">Choose option</label>
</div>
</div>
<div class="mt-4 pt-2">
<input class="btn btn-primary btn-lg" type="submit" value="Submit" />
</div>
</form>
</div>

</div>
</div>
</div>
</div>
</section>

WEB DESIGN PRACTICLE bca

Recomendados

Recomendados

Más contenido relacionado

Similar a WEB DESIGN PRACTICLE bca

Similar a WEB DESIGN PRACTICLE bca (20)

Más de YashKoli22

Más de YashKoli22 (7)

Último

Último (20)

WEB DESIGN PRACTICLE bca