Scribd
Upload
5 views

wt unit2

The document provides an overview of JavaScript concepts including operators, functions, and arrays, along with examples for each. It also covers the Document Object Model (DOM), explaining its structure and how JavaScript interacts with HTML elements. Additionally, it includes practical code examples for user input validation, dynamic content changes, and the advantages of using jQuery.

Uploaded by

surajjadhav3600
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

wt unit2

The document provides an overview of JavaScript concepts including operators, functions, and arrays, along with examples for each. It also covers the Document Object Model (DOM), explaining its structure and how JavaScript interacts with HTML elements. Additionally, it includes practical code examples for user input validation, dynamic content changes, and the advantages of using jQuery.

Uploaded by

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

Q1) Explain operators, functions and arrays in JavaScript with suitable examples.

Operators in JavaScript: Operators in JavaScript are symbols used to perform


operations on variables and values.
Here are some common types of operators:
• Arithmetic Operators: Used to perform arithmetic operations like addition,
subtraction, multiplication, division, etc.
Examples:
// Arithmetic Operators
let a = 10;
let b = 5;
console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2

Comparison Operators: Used to compare values and return a Boolean result.


Example:
let x = 10;
let y = 5;
console.log(x > y); // true
console.log(x === y); // false
console.log(x !== y); // true

Logical Operators: Used to perform logical operations like AND (&&), OR (||),
and NOT (!).
Example:
let a = true;
let b = false;
console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

Assignment Operators: Used to assign values to variables.


Example:
let x = 10;
x += 5; // Equivalent to: x = x + 5
console.log(x); // 15
2. Functions in JavaScript:
Functions in JavaScript are reusable blocks of code that perform a specific task.
They can accept inputs (parameters) and return outputs.
How to Use:
1. Create a function using function keyword.
2. Call the function to run it.

1 . Example: Function that shows a message


function sayHello() {
console.log("Hello, world!");
}
sayHello(); // Output: Hello, world!

Example 2: Function with Parameters


function greet(name) {
console.log("Hello, " + name + "!");
}
greet("Alice"); // Output: Hello, Alice!
greet("Bob"); // Output: Hello, Bob!

3)Arrays in JavaScript:
Arrays in JavaScript are used to store multiple values in a single variable. They
can hold values of
different data types.An array is like a box that holds multiple values in one
variable.
Ex:
let fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // apple
console.log(fruits.length); // 3
// Adding a new item
fruits.push("mango");
console.log(fruits); // ["apple", "banana", "orange", "mango"]
// Removing the last item
fruits.pop();
console.log(fruits); // ["apple", "banana", "orange"]
Q2) Write HTML+ JavaScript program code which makes use of Document
Object Model (DOM).
here's an example HTML and JavaScript program that demonstrates the use of
the Document Object Model (DOM). In this example, we'll create a simple web
page with a button that changes the text of a paragraph when clicked.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h2 id="myHeading">Welcome to my webpage!</h2>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
// Access the element using DOM
document.getElementById("myHeading").innerHTML = "You clicked the
button!";
}
</script>
</body>
</html>

Explanation:
 getElementById("myHeading") → Finds the <h2> element.
 .innerHTML → Changes the content inside the element.
 onclick="changeText()" → Runs the function when the button is clicked.

This example demonstrates how JavaScript interacts with the DOM to


dynamically change the content of a web page based on user actions. The DOM
allows JavaScript to access and manipulate HTML elements, making it possible
to create dynamic and interactive web pages.
Q 3) Explain Alert, Confirmation and Prompt box in Javascript. Also write
HTML+ JavaScript code to take one number as input from user and show its
factorial on alert box.
write HTML+ JavaScript code to take one number as input from user and show
its factorial on alert box.

<!DOCTYPE html>
<html>
<head>
<title>Factorial Finder</title>
</head>
<body>

<h3>Enter a number to find its factorial:</h3>


<input type="number" id="numberInput">
<button onclick="findFactorial()">Calculate</button>

<script>
function findFactorial() {
let num = document.getElementById("numberInput").value;
num = parseInt(num);
let factorial = 1;

if (num < 0) {
alert("Please enter a non-negative number.");
return;
}

for (let i = 1; i <= num; i++) {


factorial *= i;
}

alert("Factorial of " + num + " is " + factorial);


}
</script>

</body>
</html>
Q 4) Write html +javascript code to dynamically change the content of
paragraph by using getElementById() method and innerHTML property.

<!DOCTYPE html>
<html>
<head>
<title>Change Paragraph Content</title>
</head>
<body>

<p id="myPara">This is the original paragraph.</p>

<button onclick="changeContent()">Change Text</button>

<script>
function changeContent() {
// Use DOM to change paragraph content
document.getElementById("myPara").innerHTML = "The paragraph text has
been changed!";
}
</script>

</body>
</html>

Explanation:
 getElementById("myPara") finds the paragraph element.
 .innerHTML = "..." replaces the paragraph text.
 The function runs when the button is clicked.

Q 5) What is the Document Tree in DOM?


The Document Tree is a hierarchical structure (like a family tree) that shows
how all the elements (tags) in an HTML document are related.
It starts from the top (root) and branches out.
Each part of the HTML (like <html>, <body>, <div>, <p>, etc.) becomes a node
in the tree.
These nodes are connected as parents, children, and siblings.

Q 6) Write the JavaScript function for generating Fibonacci series.

function generateFibonacci(n) {
let fib = [0, 1]; // Starting two numbers
for (let i = 2; i < n; i++) {
fib[i] = fib[i - 1] + fib[i - 2];
}
return fib.slice(0, n); // Return first n terms
}
// Example usage:
let series = generateFibonacci(10);
console.log(series); // Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

Explanation:
 The first two Fibonacci numbers are 0 and 1.
 Each next number is the sum of the previous two.
 The function returns an array of the first n terms.

Q 7) What is Angular JS? Explain Angular JS directives for data binding with
example.
What is AngularJS?
AngularJS is a front-end JavaScript framework created by Google to make
dynamic web applications easier to build.
It extends HTML with additional features and functionalities, making it more
interactive, especially for data-driven apps.

What is Data Binding?


Data Binding is the connection between HTML UI (view) and JavaScript code
(model).
With data binding, you don’t need to manually update the HTML or read values
from it — AngularJS does it automatically.

AngularJS Directives for Data Binding


Directives are special attributes or tags in AngularJS. They are prefixed with ng-
Here are the most commonly used directives for data binding:
AngularJS Directives for Data Binding
o ng-model
o ng-bind
o {{ expression }}
o ng-init
o ng-change
o ng-disabled
o ng-show
o ng-hide
Q 8) Write the JavaScript code for name, email and mobile number validation
in registration form.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;

// Name validation
if (name === "") {
alert("Please enter your name.");
return false;
}

// Email validation (basic)


var emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!emailPattern.test(email)) {
alert("Please enter a valid email address.");
return false;
}

// Mobile number validation (10 digits)


var mobilePattern = /^[0-9]{10}$/;
if (!mobilePattern.test(mobile)) {
alert("Please enter a valid 10-digit mobile number.");
return false;
}

alert("Form submitted successfully!");


return true;
}
</script>
</head>
<body>

<h2>Registration Form</h2>

<form onsubmit="return validateForm()">


Name: <input type="text" id="name"><br><br>
Email: <input type="text" id="email"><br><br>
Mobile: <input type="text" id="mobile"><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

Q 9) Explain the concept of Document Object Model.


 DOM is a programming interface for HTML and XML documents.
 The browser creates the DOM when a web page loads.
 DOM represents the page as a tree structure of objects (nodes).
 Each HTML element is a node in the DOM (e.g., <p>, <div>, <h1>).
 JavaScript uses the DOM to access and manipulate web page content,
structure, and style.
Common DOM methods include:
 getElementById()
 getElementsByClassName()
 querySelector()
You can use the DOM to:
 Change text or HTML (innerHTML)
 Change CSS styles (style.color)
 Add or remove elements
 React to events (like clicks)
DOM updates the page in real-time, making websites dynamic and
interactive.
It is platform- and language-independent, but most often used with
JavaScript.
Example:
document.getElementById("demo").innerHTML = "Hello!";
Q 10) Explain the advantages of jQuery. Explain jQuery syntax with example.
Advantages of jQuery
1. Easy to Learn and Use
o Simple syntax, shorter code compared to JavaScript.
2. Cross-Browser Compatibility
o Works consistently across all major browsers.
3. Less Code, More Work
o You can achieve more with less code using built-in functions.
4. AJAX Support
o Easily send and receive data without reloading the page.
5. Effects and Animations
o Built-in methods for creating animations (like fade, slide, etc.).
6. DOM Manipulation
o Quickly access and modify HTML elements and attributes.
7. Event Handling
o Simplifies attaching events (like click, hover, etc.) to elements.
8. Plug-in Support
o Thousands of free jQuery plugins available to add more functionality.

1. Hide an element
$("#demo").hide();
o Hides the element with ID demo.
2. Show an element
$(".box").show();
o Shows all elements with class box.
3. Click event
$("button").click(function() {
alert("Button clicked!");
});
o Displays an alert when any <button> is clicked.
4. Change text content
$("#title").text("Hello jQuery!");
o Changes the text of the element with ID title.
5. Change CSS style
$("p").css("color", "green");
o Sets the text color of all <p> elements to green.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy