Scribd
Upload
90 views8 pages

Lab 04: Basics of Javascript: Sel-310 Web Engineering Lab

The document describes exercises completed in a JavaScript lab. It includes 4 tasks: 1) creating a table and calculating square and cube of a number, 2) finding the largest of 3 user-input numbers, 3) calculating sum and average of user-input marks, and 4) finding numbers divisible by 3 and 5 and calculating their sum. It also includes exercises to create a user information form and separate even and odd numbers input by the user.

Uploaded by

Amin fahim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
90 views8 pages

Lab 04: Basics of Javascript: Sel-310 Web Engineering Lab

The document describes exercises completed in a JavaScript lab. It includes 4 tasks: 1) creating a table and calculating square and cube of a number, 2) finding the largest of 3 user-input numbers, 3) calculating sum and average of user-input marks, and 4) finding numbers divisible by 3 and 5 and calculating their sum. It also includes exercises to create a user information form and separate even and odd numbers input by the user.

Uploaded by

Amin fahim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Muhammad Amin Ul Haq

02-134192-108
BSCS-6A

SEL-310 Web Engineering Lab


Semester BS CS - 06

Lab 04: Basics of JavaScript

Objective(s)

 To learn the basics of javaScript


 To able to write functions in javascript
 To implement screen output and keyboard input. (window and document objects)

Exercise 1:
Task 1:
A table of the numbers from 5 to 15 and their squares and cubes, using alert.
Code:
function performance(){
    
    let number = prompt("Enter a number between 5 and 15");

    if (number < 5 || number > 15){
    alert("Wrong input");
    performance();
}

else{
    for (let i = 1; i <= 12; i++){
        let product = number * i;
        document.write(`Table : ${i} * ${number} = ${product} <br>`)
        document.inner
    }

    let square = number * number;
    let cube = number * number * number;
    document.write(`Square of number is : ${square} <br>`);
    document.write(`Cube of number is : ${cube}<br>`);
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

}
}

performance();
Screenshot:

Task 2:
Input : three numbers, using prompt to get each Output: the largest of three input numbers.
Code:
let number1 = prompt("Enter a number.")
let number2 = prompt("Enter a number.")
let number3 = prompt("Enter a number.")
number1 = parseInt(number1)
number2 = parseInt(number2)
number3 = parseInt(number3)
if(number1 > number2 && number1 > number3){
    document.write(`${number1} is the greatest input`)
}
else if (number2 > number1 && number2 > number3){
    document.write(`${number2} is the greatest input`)
}
else if (number3 > number1 && number3 > number2){
    document.write(`${number3} is the greatest input`)
}
Screenshot:
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

Task 3:
Declare the array for storing the marks. Sum all the marks. Compute Average of all the
marks using alert.
Code:
let marks = [];
let sum = 0;
for (let i =1; i <= 5; i++){
    let numbers = prompt("Enter marks for subject # "+ i)
    numbers = parseInt(numbers);
    marks.push(numbers)
}

for(let i = 0; i < 5; i++){
    document.write(`Marks of Subject # ${i + 1} = ${marks[i]} <br>`)
    sum = sum + marks[i]
}

document.write(`Sum of all subject Marks : ${sum}<br>`)
let average = sum / marks.length;
document.write(`Average of all subject Marks : ${average}<br>`)

Screenshot:

Task 4:
Create the HTML file. Check the number divisible by 3 and number divisible by 5. Add all the
values which are divisible by 3 and 5.
Code:
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

let number = prompt("Enter a number : ");
number = parseInt(number);

let numbers = [];
let sum = 0;

for(let i = number; i > 0; i--){
    if(i % 3 == 0 || i % 5 == 0){
        numbers.push(i);
    }
}

for(i = 0; i < numbers.length; i++){
    document.write(`Number : ${numbers[i]} <br>`)
    sum = sum + numbers[i]
}

document.write(`sum of all numbers : ${sum} <br>`)
Screenshot:

Exercises 2:
Using html forms item create an “ entry form “that contains all the details of a person. Name,
Father’s Name, date.of .birth, age, nationality, sex, academic background, working experience,
professional skills, awards and achievements, References. Make sure that you do save all this
information in to an array. display the content using document.write().

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

   
    <h1 style="color: rgb(58, 168, 58);">
        Entry Form
    </h1>
    <h3 id="form">Input Array Elements</h3>
    <form class="" action="index.html" method="post">
        <p>Name: <input type="text" name="array[]" value="" /><br></p>
        <p>Father's Name: <input type="text" name="array[]" value=""
/><br></p>
        <p>Date of Birth: <input type="date" name="array[]" value=""
/><br></p>
        <p>Age: <input type="number" name="array[]" value="" /><br></p>
        <p>Nationality: <input type="text" name="array[]" value="" /><br></p>
        <p>Sex: <input type="text" name="array[]" id=""> <br></p>
        <p>Academic-Background: <input type="text" name="array[]" value=""
/><br></p>
        <p>Working Experience: <input type="number" name="array[]" value=""
/><br></p>
        <p>Professional Skills: <input type="text" name="array[]" value=""
/><br></p>
        <p>Awards: <input type="text" name="array[]" value="" /><br></p>
        <p>Achievements: <input type="text" name="array[]" value="" /><br></p>
        <p>References: <input type="text" name="array[]" value="" /><br></p>
        <button type="button" name="button" onclick="Submit()">
            Submit
        </button>
    </form>
    <br>
    <p id="value"></p>
    <script type="text/javascript">
        var k = "Input Data :";         function Submit() {
            var input = document.getElementsByName('array[]');
            for (var i = 0; i < input.length; i++) {                 var a =
input[i] ;                 k = k + a.value + " " ;
                            }
            document.getElementById("value").innerHTML = k;
            document.getElementById("output").innerHTML = "Output";
        }
    </script>
</body>
</html>
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

Exercise 3:
1. Start the program

2. Declare and read a variable n using window.prompt in body section within the script

3. Check from inital value zero to n using for loop for tracing even or odd number.

4. Check the even or odd using if condition within for loop

5. Print the even or odd number using document.write

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

</head>
<body>
    <p id="demo"></p>
    <script>
    var arr = [];             var even = [];
    var odd= [];                      // define our array
    for (var i = 0; i < 5; i++) {              // loop 5 times
      arr.push(prompt('Enter grade ' + (i+1))); // push the value into the
array
    }
    for (var i = 0; i < 5; i++) {              if  (arr[i]%2==0){            
even.push(arr[i]);
        }             else{
            odd.push(arr[i]);
        }
     
    }
       
    alert('Full array: ' + arr.join(', ')+'\nEven numbers: ' + even.join(', ')
+'\nOdd numbers: ' + odd.join(', '));
   
    </script>
</body>
</html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title> Js File:
var arr = []; var even = [];
var odd = []; // define our array
for (var i = 0; i < 5; i++) {
  // loop 5 times
  arr.push(prompt("Enter grade " + (i + 1))); // push the value into the array
} for (var i = 0; i < 5; i++) {   if (arr[i] % 2 == 0) {    
even.push(arr[i]);
  } else {
    odd.push(arr[i]);  }
}
    document.write(   "Full array: " +     arr.join(", ") +     "\nEven
numbers: " +     even.join(", ") +     "\nOdd numbers: " +     odd.join(", ")
    );
Muhammad Amin Ul Haq
02-134192-108
BSCS-6A

You might also like