Scribd
Upload
62 views35 pages

Javasccript Background Theory

The document discusses JavaScript, including its features, importance, differences between client-side and server-side scripting, and common JavaScript programs. JavaScript allows for interactive and dynamic web content and is widely used for client-side scripting. It is an important and versatile programming language.

Uploaded by

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

Javasccript Background Theory

The document discusses JavaScript, including its features, importance, differences between client-side and server-side scripting, and common JavaScript programs. JavaScript allows for interactive and dynamic web content and is widely used for client-side scripting. It is an important and versatile programming language.

Uploaded by

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

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>
var num = parseFloat(prompt("Enter a number:"));
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 num1 = parseFloat(prompt("Enter the first number:"));
var num2 = parseFloat(prompt("Enter the second number:"));
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 num = parseInt(prompt("Enter a number:"));
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 num1 = parseFloat(prompt("Enter the first number:"));
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 num = parseFloat(prompt("Enter a number:"));
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 num = parseInt(prompt("Enter a number:"));
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 num1 = parseFloat(prompt("Enter the first number:"));
var num2 = parseFloat(prompt("Enter the second number:"));
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>

You might also like