Scribd
Upload
21 views

Lab Sheet 5 - Basic JavaScript Exercises & Canvas Drawing Application

The document provides code for two JavaScript exercises: 1) A program to calculate the Fibonacci series and square of a number series based on a user-input number. 2) A canvas drawing application that allows users to draw on a canvas by clicking and dragging their mouse, using HTML5 canvas and mouse events to trigger JavaScript drawing functions.

Uploaded by

susheeth24
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Lab Sheet 5 - Basic JavaScript Exercises & Canvas Drawing Application

The document provides code for two JavaScript exercises: 1) A program to calculate the Fibonacci series and square of a number series based on a user-input number. 2) A canvas drawing application that allows users to draw on a canvas by clicking and dragging their mouse, using HTML5 canvas and mouse events to trigger JavaScript drawing functions.

Uploaded by

susheeth24
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Course Code: CSE3150

Course Title: Front End Full Stack Development

P5-A Basic JavaScript Exercises


Problem Statement:
Ravi is trying to write a program in JavaScript to calculate the Fibonacci series of a given number and
the square of a given number series as the assignment is given by class teacher, help Ravi to develop
and demonstrate a HTML file that includes JavaScript script for the following problems:
a) Input: A number n obtained using prompt
Output: The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output: A table of numbers from 1 to n and their squares using alert
a) <html>
<head>
<title>Fibonacci Series</title>
</head>
<body>
<script type="text/javascript">
var fib1=0,fib2=1,fib=0;
var num=prompt("Enter a number : \n", "");
if(num != null && num > 0 )
{
document.write("<h1>The first "+num+" numbers in the fibonacci series </h1>");
if(num==1)
document.write("<h2> "+ fib1 + "</h2>");
else
{
document.write("<h2>" + fib1 + "</h2>");
document.write("<h2>" + fib2 + "</h2>");
}
for(i=3;i<=num; i++)
{
fib= fib1 + fib2;
document.write("<h2> " + fib + "</h2>");
fib1=fib2;
fib2=fib;
}
}
else
alert("Invalid Input");
</script>
</body>
</html>

b) <!DOCTYPE html>
<html>
<head>
<title>Number and its squares</title>
</head>
<body>
<script type="text/javascript">
var num = prompt("Enter a number : \n", "");
var msgstr;
if(num > 0 && num !=null){
msgstr="Number and its Squares are \n";
for(i=1;i <= num; i++)
{
msgstr = msgstr + i + " ^ 2 = " + i*i + "\n";
}
alert(msgstr);
}
else
alert("Invalid Input");
</script>
</body>
</html>
P5-B Creating a Canvas Drawing Application with HTML5 and
JavaScript
Problem Statement:
The problem statement: To create a canvas drawing application that allows users to draw on the canvas
by clicking and dragging the mouse. To achieve this, use HTML5 code that includes a canvas element
with an event attribute that listens for mousedown, mousemove, and mouseup events. These events
shoud trigger JavaScript functions that draw lines on the canvas based on the user's mouse movements.
The canvas element can be styled using CSS to have a black border. Use article, section, attributes to
enhance the web page.
Solution
<!DOCTYPE html>
<html>
<head>
<title>Canvas Example</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<header>
<h1>Canvas Example</h1>
<p>Draw on the canvas by clicking and dragging the mouse</p>
</header>
<article>
<h2>Canvas</h2>
<canvas id="myCanvas" width="400" height="400" onmousedown="startDrawing(event)"
onmousemove="drawLine(event)" onmouseup="stopDrawing(event)"></canvas>
</article>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
function startDrawing(event) {
isDrawing = true;
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x, y);
}
function drawLine(event) {
if (isDrawing) {
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
}
function stopDrawing(event) {
isDrawing = false;
}
</script>
</body> </html>

Output:

You might also like