SlideShare a Scribd company logo
1 of 31
 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){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 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()">
<h1>HTML DOM Events</h1>
<h2>Theonload Event</h2>
<script>
functionmyFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Onblur-
<html>
<body>
<h1>HTML DOM Events</h1>
<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>
functionmyFunction() {
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>
functionmyFunction() {
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">
<!--
functionmouseoverevent()
{
alert("This is JavaTpoint");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
Onmouseout-
<html>
<head>
<script>
<!--
functionsayHello(){
alert("Mouse Out")
}
//-->
</script>
</head>
<body>
<ponmouseout="sayHello()">This is demo text for mouseover event.</p>
</body>
</html>
Onkeypress-
<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<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>
functionmyFunction() {
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>
<div class="col-md-6 mb-4">
<div class="form-outline">
<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>
<div class="col-md-6 mb-4">
<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>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
id="maleGender"
value="option2" />
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions"
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">
<div class="form-outline">
<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">
<div class="form-outline">
<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>
<option value="3">Subject 2</option>
<option value="4">Subject 3</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>

More Related Content

Similar to YASH HTML CODES

Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validation
H K
 
Rajeev oops 2nd march
Rajeev oops 2nd marchRajeev oops 2nd march
Rajeev oops 2nd march
Rajeev Sharan
 

Similar to YASH HTML CODES (20)

Shangz R Brown Presentation
Shangz R Brown PresentationShangz R Brown Presentation
Shangz R Brown Presentation
 
JavaScript Operators
JavaScript OperatorsJavaScript Operators
JavaScript Operators
 
FSJavaScript.ppt
FSJavaScript.pptFSJavaScript.ppt
FSJavaScript.ppt
 
28,29. procedures subprocedure,type checking functions in VBScript
28,29. procedures  subprocedure,type checking functions in VBScript28,29. procedures  subprocedure,type checking functions in VBScript
28,29. procedures subprocedure,type checking functions in VBScript
 
Web 11 | AJAX + JSON + PHP
Web 11 | AJAX + JSON + PHPWeb 11 | AJAX + JSON + PHP
Web 11 | AJAX + JSON + PHP
 
Cnam azure 2014 mobile services
Cnam azure 2014   mobile servicesCnam azure 2014   mobile services
Cnam azure 2014 mobile services
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJS
 
JavaScript Refactoring
JavaScript RefactoringJavaScript Refactoring
JavaScript Refactoring
 
Web lab programs
Web lab programsWeb lab programs
Web lab programs
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
javascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdfjavascript-variablesanddatatypes-130218094831-phpapp01.pdf
javascript-variablesanddatatypes-130218094831-phpapp01.pdf
 
Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_Webdesing lab part-b__java_script_
Webdesing lab part-b__java_script_
 
Html basics 11 form validation
Html basics 11 form validationHtml basics 11 form validation
Html basics 11 form validation
 
Rajeev oops 2nd march
Rajeev oops 2nd marchRajeev oops 2nd march
Rajeev oops 2nd march
 
Lab final
Lab finalLab final
Lab final
 
Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013Angular js - 4developers 12 kwietnia 2013
Angular js - 4developers 12 kwietnia 2013
 
Java script
Java scriptJava script
Java script
 
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery app...
 
phptut2
phptut2phptut2
phptut2
 
phptut2
phptut2phptut2
phptut2
 

More from YashKoli22 (7)

Distrubutated control system elecal.pptx
Distrubutated control system elecal.pptxDistrubutated control system elecal.pptx
Distrubutated control system elecal.pptx
 
CPP-Unit 1.pptx
CPP-Unit 1.pptxCPP-Unit 1.pptx
CPP-Unit 1.pptx
 
YASH HTML CODE
YASH HTML CODE YASH HTML CODE
YASH HTML CODE
 
WEB DESIGN PRACTICLE bca
WEB DESIGN PRACTICLE bcaWEB DESIGN PRACTICLE bca
WEB DESIGN PRACTICLE bca
 
topology.pptx
topology.pptxtopology.pptx
topology.pptx
 
pptparking-160731172031 (1).pdf
pptparking-160731172031 (1).pdfpptparking-160731172031 (1).pdf
pptparking-160731172031 (1).pdf
 
yash [Autosaved].pptx
yash [Autosaved].pptxyash [Autosaved].pptx
yash [Autosaved].pptx
 

Recently uploaded

Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Christo Ananth
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Dr.Costas Sachpazis
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
ankushspencer015
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
 
result management system report for college project
result management system report for college projectresult management system report for college project
result management system report for college project
Tonystark477637
 

Recently uploaded (20)

Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
 
Extrusion Processes and Their Limitations
Extrusion Processes and Their LimitationsExtrusion Processes and Their Limitations
Extrusion Processes and Their Limitations
 
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINEMANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
MANUFACTURING PROCESS-II UNIT-2 LATHE MACHINE
 
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur EscortsCall Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
Call Girls in Nagpur Suman Call 7001035870 Meet With Nagpur Escorts
 
Introduction to Multiple Access Protocol.pptx
Introduction to Multiple Access Protocol.pptxIntroduction to Multiple Access Protocol.pptx
Introduction to Multiple Access Protocol.pptx
 
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park  6297143586 Call Hot Ind...Booking open Available Pune Call Girls Koregaon Park  6297143586 Call Hot Ind...
Booking open Available Pune Call Girls Koregaon Park 6297143586 Call Hot Ind...
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
 
Introduction and different types of Ethernet.pptx
Introduction and different types of Ethernet.pptxIntroduction and different types of Ethernet.pptx
Introduction and different types of Ethernet.pptx
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
 
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
The Most Attractive Pune Call Girls Budhwar Peth 8250192130 Will You Miss Thi...
 
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(PRIYA) Rajgurunagar Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANVI) Koregaon Park Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024Water Industry Process Automation & Control Monthly - April 2024
Water Industry Process Automation & Control Monthly - April 2024
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
 
Processing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptxProcessing & Properties of Floor and Wall Tiles.pptx
Processing & Properties of Floor and Wall Tiles.pptx
 
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
(ANJALI) Dange Chowk Call Girls Just Call 7001035870 [ Cash on Delivery ] Pun...
 
Porous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writingPorous Ceramics seminar and technical writing
Porous Ceramics seminar and technical writing
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur EscortsCall Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
Call Girls Service Nagpur Tanvi Call 7001035870 Meet With Nagpur Escorts
 
result management system report for college project
result management system report for college projectresult management system report for college project
result management system report for college project
 

YASH HTML CODES

  • 1.  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. 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>
  • 3. 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>
  • 4. IF...ELSE IF STATEMENT : <html> <body> <script> var a=20; if(a==10){ document.write("a is equal to 10"); } else if(a==15){ document.write("a is equal to 15"); } else if(a==20){ document.write("a is equal to 20"); } else{ document.write("a is not equal to 10, 15 or 20"); } </script> </body> </html>
  • 5. 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>
  • 6. 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>
  • 7. 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>
  • 8. JavaScript do while loop : <!DOCTYPE html> <html> <body> <script> vari=21; do{ document.write(i + "<br/>"); i++; }while(i<=25); </script> </body> </html>
  • 9. 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>
  • 10. String toLowerCase() : <html> <body> <script> varstr = "BCA"; document.writeln(str.toLowerCase()); </script> </body> </html>
  • 11. String toUpperCase() : <html> <body> <script> varstr = "bca"; document.writeln(str.toUpperCase()); </script> </body> </html>
  • 12. String indexOf() : <html> <body> <script> var web="Hello Friends"; document.write(web.lastIndexOf('F')); </script> </body> </html>
  • 13. String slice() : <html> <body> <script> varstr = "Maharashtra"; document.writeln(str.slice(2,10)); </script> </body> </html>
  • 14. 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>
  • 15. Onload- <html> <body onload="myFunction()"> <h1>HTML DOM Events</h1> <h2>Theonload Event</h2> <script> functionmyFunction() { alert("Page is loaded"); } </script> </body> </html>
  • 16. Onblur- <html> <body> <h1>HTML DOM Events</h1> <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> functionmyFunction() { let x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html>
  • 17. 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> functionmyFunction() { alert("The form was submitted"); } </script> </body> </html>
  • 18. 6.JavaScript code to demonstrate onkeypress, onmouseover, onmouseout : Onmouseover - <html> <head> <h1>Javascript Events </h1> </head> <body> <script language="Javascript" type="text/Javascript"> <!-- functionmouseoverevent() { alert("This is JavaTpoint"); } //--> </script> <p onmouseover="mouseoverevent()"> Keep cursor over me</p> </body> </html>
  • 20. Onkeypress- <!DOCTYPE html> <html> <body> <h1>HTML DOM Events</h1> <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> functionmyFunction() { alert("You pressed a key inside the input field"); } </script> </body> </html>
  • 21. 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); } }
  • 22. 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>
  • 23. 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"); }
  • 24. 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; } }
  • 25. 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; } }
  • 26. 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; } }
  • 27. 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> <div class="col-md-6 mb-4"> <div class="form-outline"> <input type="text" id="lastName" class="form-control form-control-lg" /> <label class="form-label" for="lastName">Last Name</label> </div>
  • 28. </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> <div class="col-md-6 mb-4"> <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> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
  • 29. <label class="form-check-label" for="maleGender">Male</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="inlineRadioOptions" 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"> <div class="form-outline"> <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"> <div class="form-outline"> <input type="tel" id="phoneNumber" class="form-control form-control-lg" />
  • 30. <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> <option value="3">Subject 2</option> <option value="4">Subject 3</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>