Scribd Logo
Upload

Welcome to Scribd!

  • Lab Sheet 5 - Basic JavaScript Exercises & Canvas Drawing Application

    Uploaded by

    susheeth24
    9 views5 pages
    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.

    Original Description:

    Original Title

    Lab Sheet 5- Basic JavaScript Exercises & Canvas Drawing Application

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views5 pages

    Lab Sheet 5 - Basic JavaScript Exercises & Canvas Drawing Application

    Uploaded by

    susheeth24
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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