Javasccript Background Theory

Background Theory
JavaScript
Q1. What is JavaScript? Write different features and importance of

JavaScript.
JavaScript is a high-level, interpreted programming language that is
primarily known for its use in web development. It allows developers to
create dynamic and interactive content on websites. Originally
developed by Netscape, JavaScript is now standardized as ECMAScript.
It is a versatile language that supports both procedural and object-
oriented programming paradigms.
Features of JavaScript:
Interactivity: JavaScript enables the creation of interactive elements on
websites, providing a more engaging user experience.
Client-Side Scripting: It is mainly used for client-side scripting, running
in the user's browser, which reduces server load and improves website
performance.
Asynchronous Execution: JavaScript supports asynchronous
programming through features like callbacks and promises, allowing for
non-blocking operations.
Cross-platform Compatibility: JavaScript can run on various platforms
and browsers, providing flexibility for developers.
Object-Oriented: JavaScript is an object-oriented language, allowing the
creation and manipulation of objects.
Event-Driven: It operates on an event-driven paradigm, responding to
user actions such as clicks and keystrokes.
Importance of JavaScript:
Enhanced User Experience: JavaScript is crucial for creating dynamic
and interactive elements that enhance user engagement on websites.
Cross-browser Compatibility: It ensures that web applications work
consistently across different browsers.
Ajax and Asynchronous Operations: JavaScript enables the development
of asynchronous operations, leading to faster and more responsive web
applications.
Versatility: JavaScript is not limited to web browsers; it can be used in
server-side development (Node.js) and for building mobile applications
(React Native, Ionic).
Community Support: JavaScript has a vast and active community,
providing resources, libraries, and frameworks to simplify development.
Q2. Write difference between Client Side Scripting and Server Side
Scripting.
Client-Side Scripting:
Execution: Runs on the user's browser.
Responsibility: Deals with the user interface and client-side interactions.
Processing: The client's device processes the scripts.
Examples: JavaScript is a common client-side scripting language.
Server-Side Scripting:
Execution: Runs on the server.
Responsibility: Manages server operations, database interactions, and
business logic.
Processing: The server processes the scripts and sends the results to the
client.
Examples: PHP, Python (Django), Ruby (Ruby on Rails) are server-side
scripting languages.
Q3. What is <script> tag?

The <script> tag is used in HTML to embed or reference external
JavaScript code within an HTML document. It can be placed in the
<head> or <body> section of an HTML document.
Q4. Write about alert (), confirm () and prompt () message boxes.
alert(): Displays a dialog box with a specified message and an OK
button. It is often used for simple informational pop-ups.
confirm(): Displays a dialog box with a specified message and OK and
Cancel buttons. It returns true if the user clicks OK and false if the user
clicks Cancel.
prompt(): Displays a dialog box with a message, an input field for the
user to enter text, and OK and Cancel buttons. It returns the entered text
if the user clicks OK and null if the user clicks Cancel.
Q5.What are different types of JavaScript operators? Explain
JavaScript operators can be categorized into several types:
Arithmetic Operators:
+ (Addition)
- (Subtraction)
* (Multiplication)
/ (Division)
% (Modulus)
Comparison Operators:
== (Equal to)
=== (Strict equal to)
!= (Not equal to)
!== (Strict not equal to)
> (Greater than)
< (Less than)
>= (Greater than or equal to)
<= (Less than or equal to)
Logical Operators:
&& (Logical AND)
|| (Logical OR)
! (Logical NOT)
Assignment Operators:
= (Assignment)
+= (Add and assign)
`-= (Subtract and assign)
*= (Multiply and assign)
/= (Divide and assign)
%= (Modulus and assign)
Unary Operators:
++ (Increment)
-- (Decrement)
typeof (Typeof)
! (Logical NOT)
Q6. Write the use of var, const and let in JavaSript.

var: Declares a variable globally or locally to a function, regardless of
block scope. It is function-scoped.
const: Declares a constant variable with block scope. The variable
cannot be reassigned after initialization.
let: Declares a variable with block scope. It is useful when the variable
needs to be reassigned.
Q7. What is the use of document.write () and console.log () function?

document.write(): Writes content to the document. It is often used for
testing and debugging but is not recommended for use in production due
to its impact on the document structure and performance.
Q8. What are different types of JavaScript? Explain.

JavaScript is a single programming language, but it can be categorized
based on its environment:
Client-Side JavaScript:
Runs in the user's web browser.
Used to enhance the interactivity and responsiveness of web pages.
Commonly used for tasks like form validation, DOM manipulation, and
handling user events.
Server-Side JavaScript:
Uses JavaScript on the server to handle server-side operations.
Common in environments like Node.js, where JavaScript is used to build
scalable and high-performance server applications.
Embedded JavaScript (EJS):

Used in web development frameworks like Node.js with templating
engines such as EJS.
Allows embedding JavaScript code within HTML templates on the
server side.
Mobile JavaScript:
Used in frameworks like React Native and Ionic to build mobile
applications.
Enables the development of cross-platform mobile apps using
JavaScript.
Game Development with JavaScript:

Libraries like Phaser.js and frameworks like Three.js enable game
development using JavaScript.
JavaScript is used for both 2D and 3D game development.
JAVASCRIPT Programme
1. To display “Welcome to JavaScript” using alert box.
<!DOCTYPE html>
<html lang="en">
<head> <title>Welcome to JavaScript</title>
<script>
alert("Welcome to JavaScript");
</script>
</head>
<body></body>
</html>
2. To display your first name and last name using alert box.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Display Name</title>
<script>
var firstName = "Mohammad";
var lastName = "Zayed Alam";
alert("Name: " + firstName + " " + lastName);
</script>
</head>
<body></body>
</html>
3. To display your first name and last name using document.write()
function
<!DOCTYPE html>
<html lang="en">
<head> <title>Display Name</title>
<script>
var firstName = "John";
var lastName = "Doe";
document.write("Name: " + firstName + " " + lastName);
</script>
</head>
<body></body>
</html>
4. To display sum, product, difference and division of two numbers

using document.write()
<!DOCTYPE html>
<html lang="en">
<head> <title>Display Name</title>
<script>
var num1 = 10;
var num2 = 5;
document.write("Sum: " + (num1 + num2) + "<br>");
document.write("Product: " + (num1 * num2) + "<br>");
document.write("Difference: " + (num1 - num2) + "<br>");
document.write("Division: " + (num1 / num2) + "<br>");
</script>
</head><body></body>
</html>
5. To input first name and last name using prompt box and display
the full name.
<!DOCTYPE html>
<html lang="en">
<head><title>Display Name</title>
<script>
var firstName = prompt("Enter your first name:");
var lastName = prompt("Enter your last name:");
alert("Full Name: " + firstName + " " + lastName);
</script>
</head>
<body>
</body>
</html>
6. To input two numbers and display the sum and product of

numbers.
<!DOCTYPE html>
<html lang="en">
<head><title>Sum and Product</title>
<script>
var num1 = parseFloat(prompt("Enter the first number:"));
var num2 = parseFloat(prompt("Enter the second number:"));
document.write("Sum: " + (num1 + num2) + "<br>");
document.write("Product: " + (num1 * num2) + "<br>");
</script>
</head>
<body></body>
</html>
7. To input a number and print the square and cube of a number

<!DOCTYPE html>
<html lang="en">
<head> <title>Square and Cube</title>
<script>
var num = parseFloat(prompt("Enter a number:"));
document.write("Square: " + (num * num) + "<br>");
document.write("Cube: " + (num * num * num) + "<br>");
</script>
</head>
<body></body>
</html>
8. To print the area and perimeter of rectangle.
<!DOCTYPE html>
<html lang="en">
<head><title>Rectangle Properties</title>
<script>
var length = parseFloat(prompt("Enter the length of the
rectangle:"));
var width = parseFloat(prompt("Enter the width of the
rectangle:"));
var area = length * width;
var perimeter = 2 * (length + width);
document.write("Area: " + area + "<br>");
document.write("Perimeter: " + perimeter + "<br>");
</script>
</head>
<body></body>
</html>
9. To print whether input number is odd or even

<!DOCTYPE html>
<html lang="en">
<head> <title>Odd or Even</title>
<script>
var num = parseInt(prompt("Enter a number:"));
if (num % 2 === 0) {
document.write("Even number");
} else {
document.write("Odd number");
}
</script>
</head>
<body></body>
</html>
10. To print whether input number is negative positive or zero

<!DOCTYPE html>
<html lang="en">
<head> <title>Number Sign</title>
<script>
if (num > 0) {
document.write("Positive number");
} else if (num < 0) {
document.write("Negative number");
} else {
document.write("Zero");
}
</script>
</head>
<body></body>
</html>
11. To print smallest among three input numbers

<!DOCTYPE html>
<html lang="en">
<head> <title>Smallest Among Three Numbers</title>
<script>
var num3 = parseFloat(prompt("Enter the third number:"));
function findSmallest(num1, num2, num3) {
if (num1 <= num2 && num1 <= num3) {
return num1;
} else if (num2 <= num1 && num2 <= num3) {
return num2;
} else {
return num3;
}}
document.write("Smallest Number: " + findSmallest(num1,
num2, num3) + "<br>");
</script> </head>
<body></body>\</html>
12. To print the sum of numbers from 1 to 10.

<!DOCTYPE html>
<html lang="en">
<head> <title>Sum of Numbers 1 to 10</title>
<script>
function sumOfNumbers() {
var sum = 0;
for (var i = 1; i <= 10; i++) {
sum += i;
}
return sum;
}
document.write("Sum of Numbers 1 to 10: " + sumOfNumbers() +
"<br>");
</script>
</head>
<body></body>
</html>
13. To print the sum of number from 1 to n.

<!DOCTYPE html>
<html lang="en">
<head> <title>Simple Sum Calculation</title>
<script>
function calculateSum() {
var n = parseInt(prompt("Enter a number (n):"));
var sum = 0;
for (var i = 1; i <= n; i++) {
sum += i;
}
alert("The sum of numbers from 1 to " + n + " is: " + sum);
}
</script>
</head>
<body>
<button onclick="calculateSum()">Calculate Sum</button>
</body>
</html>
14. To print the factorial of a number

<!DOCTYPE html>
<html lang="en">
<head> <title>Factorial Calculation</title>
<script>
function calculateFactorial() {
var factorial = 1;
for (var i = 1; i <= num; i++) {
factorial *= i;
}
alert("The factorial of " + num + " is: " + factorial);
}
</script>
</head>
<body>
<button onclick="calculateFactorial()">Calculate
Factorial</button>
</body></html>
15. To print the multiplication table of an input number

JavaScript functions
<!DOCTYPE html>
<html lang="en">
<head><title>Multiplication Table</title>
<script>
function displayMultiplicationTable() {
var num = parseInt(prompt("Enter a number for the
multiplication table:"));
var table = "Multiplication Table for " + num + "\n";
for (var i = 1; i <= 10; i++) {
table += num + " * " + i + " = " + (num * i) + "\n";
}
alert(table);
}
</script>
</head>
<body>
<button onclick="displayMultiplicationTable()">Display
Multiplication Table</button>
</body>
</html>
16. To input two

numbers and display the
sum and product of
numbers.
<!DOCTYPE html>
<html lang="en">
<head> <title>Sum and Product Calculation</title>
<script>
function calculateSumAndProduct() {
var num2 = parseFloat(prompt("Enter the second
number:"));
var sum = num1 + num2;
var product = num1 * num2;
alert("Sum: " + sum + "\nProduct: " + product);
}
</script>
</head>
<body>
<button onclick="calculateSumAndProduct()">Calculate Sum
and Product</button>
</body>
</html>
17. To input a number and print the square and cube of a number
<!DOCTYPE html>
<html lang="en">
<head> <title>Square and Cube Calculation</title>
<script>
function calculateSquareAndCube() {
var square = num * num;
var cube = num * num * num;
alert("Square: " + square + "\nCube: " + cube);
}
</script>
</head>
<body>
<button onclick="calculateSquareAndCube()">Calculate Square
and Cube</button>
</body>
</html>
18. To print whether input number is odd or even

<!DOCTYPE html>
<html lang="en">
<head><title>Odd or Even Check</title>
<script>
function checkOddOrEven() {
var result = (num % 2 === 0) ? "Even number" : "Odd
number";
alert(result);
}
</script>
</head>
<body>
<button onclick="checkOddOrEven()">Check Odd or
Even</button>
</body>
</html>
19. To print smallest among three input numbers

<!DOCTYPE html>
<html lang="en">
<head><title>Smallest Among Three Numbers</title>
<script>
function findSmallest() {
var num3 = parseFloat(prompt("Enter the third number:"));
var smallest = num1;
if (num2 < smallest) {
smallest = num2;
}
if (num3 < smallest) {
smallest = num3;
}
alert("The smallest number is: " + smallest);
}
</script>
</head>
<body> <button onclick="findSmallest()">Find Smallest
Number</button> </body>
</html>
20. To print the
multiplication table of
an input number
<!DOCTYPE html>
<html lang="en">
<head><title>Multiplication Table</title>
<script>
function multiplicationTable() {
var num = parseInt(prompt("Enter a number for the
multiplication table:"));
var table = "Multiplication Table for " + num + "\n";
for (var i = 1; i <= 10; i++) {
table += num + " * " + i + " = " + (num * i) + "\n";
}
alert(table);
}
</script>
</head>
<body>
<button onclick="multiplicationTable()">Generate
Multiplication Table</button>
</body>
</html>
JavaScript
Arrays, objects,
classes
21. To show
how to use Array () object in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head><title>Array Example</title>
<script>
var fruits = new Array("Apple", "Banana", "Orange");
alert("Fruits: " + fruits.join(", "));
</script>
</head>
<body></body>
</html>
22. To show the function of Object in JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Object Example</title>
<script>
var person = {
firstName: "Mohammad Zayed",
lastName: "Alam",
age: 18
};
alert("Person Info: " + person.firstName + " " +
person.lastName + ", Age: " + person.age);
</script>
</head>
<body>
</body>
</html>
23. Displaying the sum of two input numbers in text box using
document.getElementById in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head> <title>Sum Display</title>
<script>
function displaySum() {
var num1 = parseFloat(document.getElementById("num1").value)
|| 0;
var num2 = parseFloat(document.getElementById("num2").value)
|| 0;
var sum = num1 + num2;
alert("Sum: " + sum);
}
</script>
</head>
<body>
<label for="num1">Number 1:</label>
<input type="text" id="num1" /><br>
<label for="num2">Number 2:</label>
<input type="text" id="num2" /><br>
<button onclick="displaySum()">Calculate Sum</button>
</body>
</html>
24. Input first
name and last
name of a
student using a
text box and displaying full name using document.getElementById
in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head> <title>Student Name Display</title>
<script>
function displayFullName() {
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var fullName = firstName + " " + lastName;
alert("Full Name: " + fullName);
}
</script>
</head>
<body>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" /><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" /><br>
<button onclick="displayFullName()">Display Full
Name</button>
</body>
</html>
25. To
show the
use of
JavaScript class and object
<!DOCTYPE html>
<html lang="en">
<head><title>Class and Object Example</title>
<script>
class Person {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
getInfo() {
return this.firstName + " " + this.lastName + ", Age: " + this.age;
}
}
var person = new Person("Zayed", "Ahmad", 18);
alert("Person Info: " + person.getInfo());
</script>
</head>
<body>
</body>
</html>
26. To show the use of different jQuery functions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Example</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
$("#result").text("Hello, jQuery!");
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
27. Input a number and print its square and cube using
document.getElementById in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head><title>Square and Cube Display</title>
<script>
function displaySquareAndCube() {
var
num=parseFloat(document.getElementById("userInput").value) ||
0;
var square = num * num;
var cube = num * num * num;
alert("Square: " + square + "\nCube: " + cube);
}
</script>
</head>
<body>
<label for="userInput">Enter a number:</label>
<input type="text" id="userInput" /><br>
<button onclick="displaySquareAndCube()">Calculate Square and
Cube</button><br>
</body>
</html>
28. Write a JavaScript code to validate a “login form”.
Example of code and output of the program
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
first number:<input type="text" id="fn"><br><br>
second number:<input type="text" id="sn"><br><br>
<button type="button" onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
let x = +(document.getElementById("fn").value);
let y = +(document.getElementById("sn").value);
document.getElementById("demo").innerHTML = x+y;
}
</
script>
</body>
</html>

Javasccript Background Theory

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javasccript Background Theory

Uploaded by

Copyright:

Available Formats

Background Theory

Q1. What is JavaScript? Write different features and importance of

Q3. What is <script> tag?

Q6. Write the use of var, const and let in JavaSript.

Q7. What is the use of document.write () and console.log () function?

Q8. What are different types of JavaScript? Explain.

Embedded JavaScript (EJS):

Game Development with JavaScript:

4. To display sum, product, difference and division of two numbers

6. To input two numbers and display the sum and product of

7. To input a number and print the square and cube of a number

9. To print whether input number is odd or even

10. To print whether input number is negative positive or zero

11. To print smallest among three input numbers

12. To print the sum of numbers from 1 to 10.

13. To print the sum of number from 1 to n.

14. To print the factorial of a number

15. To print the multiplication table of an input number

16. To input two

18. To print whether input number is odd or even

19. To print smallest among three input numbers

22. To show the function of Object in JavaScript.

You might also like