Posts

Showing posts with the label js

To implement the various components of HTML5 Canvas

Image
 Canvas Line   Source Code: <!DOCTYPE html> <html> <head>     <title>Canvas Line</title> </head> <body> <canvas id="Line" width="200" height="100" style="border:1px"> </canvas> <script type="text/javascript">     var c= document.getElementById('Line');     var ctx=c.getContext("2d");     ctx.beginPath();     ctx.moveTo(0,0);     ctx.lineTo(200,100);     ctx.stroke(); </script> </body> </html > Output: Canvas Circle Source Code: <!DOCTYPE html> <html> <head>     <title>Canvas Circle</title> </head> <body> <canvas id="Circle" width="200" height="100" style="border:1px"> </canvas> <script type="text/javascript">     var c= document.getElementById('Circle');     var ctx=c.g...

To create an html file to implement the concept of document object model using javascript.

Image
Document Object Model Source Code: <!DOCTYPE html> <html> <body> <p id="demo">Click the button to display the cookies associated with this document.</p> <button onclick="myFunction()">Try it</button> <hr>     <a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a>     <br>     <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a>     <br>     <a href="E:\documents\IM LAB\html\js2\js2.html">Next Practical-></a> <script> function myFunction() { document.getElementById("demo").innerHTML="Cookies associated with this document : " + document.cookie; } </script> </body> </html> Output: LaTeX Source: \documentclass[12pt]{article} \usepackage{graphicx} \usepacka...

To demonstrate the use of expression, array, math, string, date functions.

Image
Source Code: <!DOCTYPE html> <html> <head> <title>JS10</title> </head> <body> <p>Use of Expressions</p> <p id="demo1"></p> <p>Use of Array Length Function</p> <p id="demo2"></p> <p id="demo3"></p> <p>Sorted Array is</p> <p id="demo4"></p> <p>Sorted Array in reverse order</p> <p id="demo5"></p> <p>Following is String</p> <p id="demo6"></p> <p id="demo7"></p> <p id="demo8"></p> <p>The getDay() method returns the weekday as a number:</p> <p id="demo9"></p> <p>Date.parse(string) returns milliseconds.</p> <p>You can use the return value to conver...

To implement the concept of event handling and validating registration form.

Image
Source Code: <!DOCTYPE html> <html> <head> <title>JS9</title> </head> <body> <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> <hr> <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a> <br> <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a> <br> <a href="E:\documents\IM LAB\html\js8\js8.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="E:\documents\IM LAB\html\js10\js10.html">Next Practical-></a> <br...

To demonstrate string and math object’s predefined methods using javascript.

Image
Example of String!! Source Code: <!DOCTYPE html> <html> <head> <title>JS7</title> </head> <body> <p id="p1">Please locate where 'locate' occurs!.</p> <button onclick="stringindex()">Try it</button> <p id="pos"></p> <p id="lastpos"></p> <hr> <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a> <br> <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a> <br> <a href="E:\documents\IM LAB\html\js6\js6.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="E:\documents\IM LAB\html\js7\js7_1.html">Next Practical-></a> <br> <script...

To demonstrate the use of control statements and loops in javascript.

Image
Finding Armstrong Number Source Code: <!DOCTYPE html> <html> <head> <title>JS6</title> </head> <body> <hr> <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a> <br> <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a> <br> <a href="E:\documents\IM LAB\html\js5\js5.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="E:\documents\IM LAB\html\js7\js7.html">Next Practical-></a> <br> <script> var b,z,c=0; var a=prompt("Enter a number"); z=a; while(z>0) { b=z%10; c=c+(b*b*b); z=parseInt(z/10); } if(a==c) alert("given no is amstrong number"); ...

To create a user defined function in javascript to get array of values and sort them in ascending order

Image
Source Code: <!DOCTYPE html> <html> <head> <title>JS5</title> </head> <body> <p>Click the button!!</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <hr> <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a> <br> <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a> <br> <a href="E:\documents\IM LAB\html\js4\js4.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="E:\documents\IM LAB\html\js6\js6.html">Next Practical-></a> <br> <script> var fruits = ["Banana","Orange","Apple","Mango"]; document.getElementById("demo").innerHTML=frui...

To create an html file to implement concept of functions and arrays using javascript.

Image
Source Code: <!DOCTYPE html> <html> <head> <title>JS4</title> </head> <body> <button onclick="get_first()">Click to Get First Element</button> <p id="demo"></p> <hr>    <a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a>    <br>    <a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">Department Of Information Technology</a> <br> <a href="E:\documents\IM LAB\html\js3\js3.html"><-Last Practical</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="E:\documents\IM LAB\html\js5\js5.html">Next Practical-></a> <br> <script> function get_first()  { var cars=[ "Volvo", "BMW" ]; document.getElementById("demo").innerHTML=cars[0]; } </scrip...

To create an html file and to display the various arithmetic operations on variables using javascript.

Image
Source Code: <!DOCTYPE html> <html> <head> <title>js2</title> </head> <body>   <b>Below Calculations are performed using Javascript Arithmetic Operations</b> <center>   <script type="text/javascript"> var a = 33; var b = 10; var c = 56; var linebreak = "<br />"; document.write("a = " +a); document.write(linebreak); document.write("b = " +b); document.write(linebreak); document.write("a + b = "); result = a + b; document.write(result); document.write(linebreak); document.write("a - b = "); result = a - b; document.write(result); document.write(linebreak); document.write("a / b = "); result = a / b; document.write(result); document.write(linebreak); document.write("a % b = ...