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

Recommended

Recommended

More Related Content

Similar to WEB DESIGN PRACTICLE bca

Similar to WEB DESIGN PRACTICLE bca (20)

More from YashKoli22

More from YashKoli22 (7)

Recently uploaded

Recently uploaded (20)

WEB DESIGN PRACTICLE bca