WEB DESIGN PRACTICLE bca

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){ 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">  </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> <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>

WEB DESIGN PRACTICLE bca

Recommended

More Related Content

Similar to WEB DESIGN PRACTICLE bca(20)

Recently uploaded(20)

WEB DESIGN PRACTICLE bca