web

Functions – Declaration and Calling with Parameters

by
with no comment
Contents hide
1 Introduction of Functions
1.1 Declaring Functions
1.2 Calling Functions with Parameters
2 Adding JavaScript to Web Documents
3 JavaScript Objects
4 Document Object Model (DOM)
5 HTML Events
5.1 Common HTML Events

Introduction of Functions

JavaScript, एक Versatile और Dynamic Scripting Language के रूप में Web Pages की Interactivity को बढ़ाने में महत्वपूर्ण Role निभाती है। इसकी Fundamental Feature में से एक Functions को Define करने और Invoke करने की क्षमता है, जिससे Developers को Code को Efficiently Organize करने की Permission मिलती है।

Declaring Functions

  • Basic Function Declaration

JavaScript में Function Keyword का use करके Function Declare किए जाते हैं।

Example:



function greet() {

console.log(“Hello, world!”);

}
  • Functions with Parameters

Function को अधिक Flexible और Reusable बनाने के लिए Parameters को Include किया जा सकता है। Parameter उन Value के लिए Placeholders के रूप में कार्य करते हैं, जिन्हें Function Call किए जाने पर Pass किया जाएगा।

Example:



function greetPerson(name) {

console.log(“Hello, ” + name + “!”);

}

Calling Functions with Parameters

  • Invoking Functions

एक बार जब कोई Function Declare हो जाता है, तो उसके नाम के बाद Parentheses का उपयोग करके इसे Apply किया जा सकता है। Parameter के साथ किसी Function को Call करते समय Parentheses के अंदर Arguments के रूप में Actual Value Provide किया जाता है|

Example:



greetPerson(“John”);
  • Multiple Parameters

Function Multiple Parameter को Accept कर सकते हैं, जिससे उनकी Versatility बढ़ जाती है। Arguments का Order मायने रखता है, और उन्हें Function Declaration में Parameter के Order के अनुरूप होना चाहिए।

Example:



function addNumbers(a, b) {

return a + b;

}


var sum = addNumbers(5, 3);

console.log(“Sum:”, sum); // Output: Sum: 8

Adding JavaScript to Web Documents

  • Inline Script

JavaScript Code को <script> Tag का use करके Direct HTML में Embedded किया जा सकता है। इसे Inline Script कहा जाता है।

Example:



<!DOCTYPE html>

<html>

<head>

<title>JavaScript Example</title>

</head>

<body>

<h1>Inline Script Example</h1>


<script>

function displayMessage() {

alert(“Welcome to our website!”);

}


// Call the function

displayMessage();

</script>

</body>

</html>

External Script

Better Code Organization और Maintainability के लिए JavaScript Code को (.js) Extension के साथ External File में रखा जा सकता है, और HTML Document से जोड़ा जा सकता है।

Example:

HTML File (index.html)



<!DOCTYPE html>

<html>

<head>

<title>External Script Example</title>

<script src=”script.js”></script>

</head>

<body>

<h1>External Script Example</h1>

</body>

</html>

JavaScript File (script.js)



function displayMessage() {

alert(“Welcome to our website!”);

}


// Call the function

displayMessage();

JavaScript Objects

JavaScript एक Object-Oriented Language है, और Object इसमें एक Fundamental Data Type हैं। एक Object Key-Value Pairs का एक Collection है| जहां प्रत्येक Key एक String है, और प्रत्येक Value अन्य Object सहित किसी भी Data Type का हो सकता है। JavaScript में Object Developers को अपने Code को Efficiently Organize और Structure करने में सक्षम बनाते हैं।

Syntax:



// Creating an object

let person = {

firstName: “John”,

lastName: “Doe”,

age: 25,

isStudent: false,

address: {

city: “New York”,

zipCode: “10001”

},

greet: function() {

console.log(“Hello, ” + this.firstName + “!”);

}

};


// Accessing object properties

console.log(person.firstName); // Output: John

console.log(person.address.city); // Output: New York


// Calling a method

person.greet(); // Output: Hello, John!

उपरोक्त Example में, person Different Properties वाली एक Object है, जिसमें एक Nested Object (address) और एक Method (greet) शामिल है। JavaScript में Dot (.) Notation का उपयोग करके Properties और Method को Access किया जाता है।

Document Object Model (DOM)

DOM, Web Document के लिए एक Programming Interface है। यह किसी Document के Structure को Object के Tree के रूप में दर्शाता है, जहाँ प्रत्येक Object Document के एक Part से Connected होती है| जैसे कि Elements, Attributes और Text Content । DOM Developers को Web Page की Structure, Style और Content में Dynamically रूप से Manipulate करने की Permission देता है।

Example:



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>DOM Manipulation Example</title>

</head>

<body>


<h1 id=”pageTitle”>Welcome to my Website!</h1>

<p id=”introText”>This is a sample paragraph.</p>


<script>

// Accessing and modifying DOM elements

let titleElement = document.getElementById(“pageTitle”);

titleElement.textContent = “Dynamic Website Title”;


let introElement = document.getElementById(“introText”);

introElement.innerHTML = “This paragraph has been dynamically modified using JavaScript.”;


// Creating a new element and appending it to the body


let newParagraph = document.createElement(“p”);

newParagraph.textContent = “This is a new paragraph added dynamically.”;

document.body.appendChild(newParagraph);

</script>


</body>

</html>

HTML Events

HTML Events, User Action या Browser Action हैं| जिन्हें JavaScript द्वारा पता लगाया जा सकता है। Common Events में Mouse Clicks, Keyboard Inputs, Form Submissions और Page Load शामिल हैं। Events Handle करने के लिए, HTML onclick, onmouseoverऔर onsubmit जैसी Attributes Provide करता है, जिन्हें HTML Element को Assgin किया जा सकता है।

Example: Handling a Button Click Event



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Event Handling Example</title>

<script>

function handleClick() {

alert(“Button Clicked!”);

}

</script>

</head>

<body>

<button onclick=”handleClick()”>Click me</button>

</body>

</html>

इस Example में, Button पर Click करने पर Execute होने वाले JavaScript Function (handleclick) को Specify करने के लिए onclick Attribute का use किया जाता है। यह Function एक Alert प्रदर्शित करता है।

Common HTML Events

ऐसे कई HTML Event हैं, जिनका use Responsive Web Application बनाने के लिए किया जा सकता है। आमतौर पर use की जाने वाली कुछ Events हैं-

  • onclick: किसी Element पर Click करने पर Trigger होता है।
  • onmouseover: जब Mouse Pointer को किसी Element पर ले जाया जाता है, तो Active हो जाता है।
  • onchange: Input Element का Value बदलने पर Active होता है।
  • onsubmit: Form Submit होने पर Apply किया जाता है।

Example: Calling JavaScript Functions on Events



<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>Event Listener Example</title>

<script>

function handleMouseOver() {

alert(“Mouse Over Event!”);

}


document.getElementById(“targetElement”).addEventListener(“mouseover”, handleMouseOver);

</script>

</head>

<body>

<div id=”targetElement”>Hover over me</div>

</body>

</html>
Post Views: 499
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *