Sunil Kumar - TheLearnify

Introduction to JSON and its Uses

Introduction to JSON

JSON (JavaScript Object Notation) एक Lightweight Data Interchange Format है, जो Developer के लिए पढ़ना और लिखना आसान है। यह Machine के लिए Parse और Generate करना भी आसान है। JSON का उपयोग मुख्य रूप से XML के विकल्प के रूप में Server और Web Application के बीच Data Transmit करने के लिए किया जाता है।

JSON Syntax:

JSON Data को JavaScript Object Literal के समान Key-Value Pair के रूप में दर्शाया जाता है। JSON का Syntax, Short होता है, जो इसे Human-Readable और Parse करने में आसान बनाता है। इसकी Primary build Key-Value Pair, Array और Object हैं।


{

“key1”: “value1”,

“key2”: “value2”,

“key3”: “value3”

}

Data Types in JSON

JSON विभिन्न Data Type का Support करता है, जिसमें Strings, Numbers, Objects, Arrays, Booleans और Null Include हैं।

Example:


{

“name”: “John Doe”,

“age”: 30,

“isStudent”: false,

“grades”: [85, 92, 78],

“address”: {

“city”: “New York”,

“zipCode”: “10001”

},

“isNull”: null

}

Objects

Curly Brace {} में Close, Object में Colon द्वारा अलग किए गए Key-Value Pair होते है।

Example:


{

“name”: “John Doe”,

“age”: 30,

“city”: “New York”

}

Arrays

Square Bracket [ ] में Close, Value का Ordered List होता है।

Example:


{

“fruits”: [“apple”, “orange”, “banana”]
}

Strings

Text Data, Double Quote में Enclosed होता है।

Example:


{

“message”: “Hello, World!”

}

Numbers

Integers या Floating-Point Value के रूप में दर्शाया गया है।

Example:


{

“temperature”: 25.5

}

Boolean:

यह True या False values को Represents करता है|

Example:


{

“isStudent”: true

}

Uses of JSON

JSON Web Development में एक महत्वपूर्ण Role निभाता है, और इनका Client और Server के बीच Data Exchange करने के लिए large Scale पर Use किया जाता है। यहां कुछ प्रमुख Key हैं, जहां पर JSON का आमतौर पर Use किया जाता है-

AJAX and API Communication

AJAX (Asynchronous JavaScript और XML) का use Server पर Asynchronous Request करते समय या API (Application Programming Interfaces) के साथ Interact करते समय तथा JSON Data Exchange के लिए एक Popular Format है।

Example:


// Creating an XMLHttpRequest object

var xhr = new XMLHttpRequest();
// Configuring it for a GET request to an API endpoint

xhr.open(‘GET’, ‘https://api.example.com/data’, true);
// Setting the request header to accept JSON

xhr.setRequestHeader(‘Content-Type’, ‘application/json’);
// Handling the response

xhr.onload = function () {

if (xhr.status >= 200 && xhr.status < 300) {

// Parsing JSON response

var jsonResponse = JSON.parse(xhr.responseText);

console.log(jsonResponse);

} else {

console.error(‘Request failed with status’, xhr.status);

}

};
// Sending the request

xhr.send();

Configuration Files

JSON का उपयोग आमतौर पर Web Application में Configuration Files के लिए किया जाता है। ये File Setting, Parameter या कोई अन्य Configuration Data Store कर सकती हैं।

Example:


{

“appName”: “MyWebApp”,

“apiEndpoint”: “https://api.example.com”,

“maxResults”: 10,

“theme”: “dark”

}

Data Storage and Serialization

Web Browser अक्सर Local Storage और Data Serialization के लिए JSON का use करते हैं। JSON के साथ Complex Data Structure को Store करना और Retrieve करना अधिक Manageable हो जाता है।

Example: Storing Data in Local Storage


// Storing data in local storage

var userData = {

“username”: “user123”,

“email”: “user@example.com”

};
localStorage.setItem(‘userData’, JSON.stringify(userData));
// Retrieving and parsing data from local storage

var storedData = JSON.parse(localStorage.getItem(‘userData’));

console.log(storedData);

JSON v/s XML

Data को Structuring करने के लिए JSON और XML दोनों Popular विकल्प हैं, लेकिन वे अपने Syntax, Readability और Uses में काफी Different हैं। JSON, एक Lightweight Data Interchange Format है, जिसने अपनी Simplicity और JavaScript के साथ Integration में आसानी करने के कारण प्रमुखता प्राप्त की है। तथा XML, अपनी Extensibility और Self-Descriptive Nature के साथ, Web Service और Configuration File सहित विभिन्न Domain में Popular रहा है।

Example:

एक Simple Web Application पर विचार करें| जहां User Information को Represent करने के लिए JSON का use किया जाता है।


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<title>User Information</title>

</head>

<body>
<script>

// User data in JSON format

const userData = {

“name”: “Alice Johnson”,

“age”: 25,

“city”: “San Francisco”,

“isStudent”: false

};
// Display user information on the webpage

document.write(`<h2>User Information</h2>

<p><strong>Name:</strong> ${userData.name}</p>

<p><strong>Age:</strong> ${userData.age}</p>

<p><strong>City:</strong> ${userData.city}</p>

<p><strong>Student:</strong> ${userData.isStudent ? ‘Yes’ : ‘No’}</p>`);

</script>
</body>

</html>

XML DTD and XML Schema, RSS FEED

XML DTD

XML DTD एक Formal Specification है, जो XML Document के Structure और Legal Element और Attribute को Define करता है। यह XML Document की Integrity को Validate करने के लिए एक Blueprint के रूप में कार्य करता है, यह सुनिश्चित करते हुए कि वे Rule के Predefined Set का पालन करते हैं।

Example:


<!– Sample XML Document –>

<!DOCTYPE bookstore [

<!ELEMENT bookstore (book+)>

<!ELEMENT book (title, author, price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT author (#PCDATA)>

<!ELEMENT price (#PCDATA)>

]>

<bookstore>

<book>

<title>Introduction to Web Technologies</title>

<author>John Doe</author>

<price>29.99</price>

</book>

<!– Additional books go here –>

</bookstore>

इस Example में, DTD एक Bookstore XML Document Structure को Define करता है। यह Specify करता है, कि एक Bookstore में एक या अधिक Book होनी चाहिए| और प्रत्येक Book का एक Titile, एक Author और एक Price होनी चाहिए। #PCDATA Parse किए गए Character Data को Indicate करता है, जो Specific Element के भीतर Text Content की Permission देता है।

Advantages of XML DTD

Simplicity: DTD Simple और समझने में आसान हैं, जो उन्हें Low Complex Document Structure के लिए Suitable बनाता है।
Compatibility: विभिन्न XML Application के साथ Compatibility सुनिश्चित करते हुए DTD को व्यापक रूप से बनाया गया है।

XML Schema

XML Schema, जिसे XSD (XML Schema Definition) के रूप में भी जाना जाता है, DTD का एक XML-Based Alternative है। यह XML Document Structure को Describe करने के लिए अधिक Pwerful और Flexible Way Provide करता है। XML Schema XML में ही लिखी जाती है, जो इसे DTD की तुलना में अधिक Expressive और Extensible बनाती है।

Example:


<xs:schema xmlns:xs=”http://www.w3.org/2001/XMLSchema”>

<xs:element name=”bookstore”>

<xs:complexType>

<xs:sequence>

<xs:element name=”book” type=”xs:complexType”>

<xs:sequence>

<xs:element name=”title” type=”xs:string”/>

<xs:element name=”author” type=”xs:string”/>

<xs:element name=”price” type=”xs:decimal”/>

</xs:sequence>

</xs:element>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

इस Example में, हम एक Complex Type के साथ एक Bookstore Element को Define करते हैं| यह Define करते हुए कि इसमें Book Element का एक Order Included है। प्रत्येक Book Element में Specific Data Type के साथ Title, Author और Price Element का एक Order होता है।

Introduction of RSS FEED

RSS (Really Simple Syndication) एक Web Feed Format है, जो User को Standardized Way से Online Content के Update को Access करने की Permission देता है। इसका use Blog, News Website और अन्य Online Publication की Subscription लेने के लिए व्यापक रूप से किया जाता है।

RSS Basic

RSS Feeds, XML-Based File हैं| जिनमें किसी Website पर Latest Update या Entries के बारे में Information होती है। उनमें आमतौर पर Title, Summaries और Full Content के Link Included होते हैं। RSS Users को किसी Website की Subscription लेने और New Content Publish होने पर Information Receive करने की Permission देता है।

Creation of RSS Feed

RSS Feeds बनाने के लिए RSS Specification के अनुसार XML Data की Structring करने की आवश्यकता है।

Example:


<?xml version=”1.0″ encoding=”UTF-8″ ?>

<rss version=”2.0″>

<channel>

<title>Example RSS Feed</title>

<link>http://www.example.com</link>

<description>Latest updates from Example Website</description>
<item>

<title>First Post</title>

<link>http://www.example.com/posts/first-post</link>

<description>This is the first post on Example Website.</description>

</item>
<!– Additional items go here –>
</channel>

</rss>

इस Example में, <channel> Element में Feed के बारे में Metadata Include है, और प्रत्येक <item> एक Individual Update या Entry को Represent करता है।

Implementation of RSS Feed in Web Page

RSS Feed को एक Web Page में Integrate करने के लिए, XML Data Receive और Parse करने के लिए JavaScript और AJAX का use कर सकते हैं।

Example:


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>RSS Feed Example</title>

</head>

<body>
<div id=”rss-feed”></div>
<script>

// Function to fetch and display RSS feed

function fetchRSSFeed() {

const feedUrl = ‘http://www.example.com/rss-feed.xml’;
// Use AJAX to fetch the RSS feed

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

// Parse XML response

const xmlDoc = xhr.responseXML;

const items = xmlDoc.getElementsByTagName(‘item’);
// Display each item in the RSS feed

for (let i = 0; i < items.length; i++) {

const title = items[i].getElementsByTagName(‘title’)[0].childNodes[0].nodeValue;

const link = items[i].getElementsByTagName(‘link’)[0].childNodes[0].nodeValue;

const description = items[i].getElementsByTagName(‘description’)[0].childNodes[0].nodeValue;
// Display the item in the web page

const feedContainer = document.getElementById(‘rss-feed’);

const itemElement = document.createElement(‘div’);

itemElement.innerHTML = `<h3>${title}</h3><p>${description}</p><a href=”${link}” target=”_blank”>Read more</a>`;

feedContainer.appendChild(itemElement);

}

}

};
xhr.open(‘GET’, feedUrl, true);

xhr.send();

}
// Call the function to fetch and display the RSS feed

fetchRSSFeed();

</script>
</body>

</html>

इस Example में, FetchRSSFeed Function RSS Feed Receive करने के लिए AJAX का use करता है, और फिर Defined HTML Container में प्रत्येक Item को Parse और Display करता है।

Introduction and use of XML, Difference between XML and HTML

Introduction of XML

XML का पूरा नाम Extensible Markup Language है| यह एक Versatile और Platform-Independent Markup Language है, जिसे Data को Store और Transport करने के लिए Design किया गया है। HTML (Hypertext Markup Language) के विपरीत, इसका उपयोग मुख्य रूप से Web Content को Structuring करने के लिए किया जाता है|

XML Data का Description करने पर ही Focus करता है। यह विभिन्न System के बीच Information को Exchange करने के लिए एक Standard Format के रूप में कार्य करता है, जो इसे Web Development और Data Interchange करने में एक Fundamental Technology बनाता है।

Key Features of XML

Extensibility: XML Users को अपने स्वयं के Tag, Attributes और Document Structure को Define करने की Permission देता है, जिससे यह Specific Application के Need के लिए अत्यधिक Adaptable हो जाता है।
Human-Readable and Machine-Readable: XML Human-Readable और Machine-Readable दोनों है, जिससे Developers के लिए Data को समझना और Process करना आसान हो जाता है।
Hierarchical Structure: XML में Data को एक Tree जैसी Structure में Hierarchically रूप से Organize किया जाता है, जिसमें Elements, Attributes और Text Content Include होती है। यह Structure विभिन्न Data Element के बीच Complex Relationships के Representation की सुविधा Provide करती है।
Platform-Independent: XML Platform-Independent है| जिसका अर्थ है, कि इसका use किसी भी Operating System और विभिन्न Programming Language के साथ किया जा सकता है।

Example:


<?xml version=”1.0″ encoding=”UTF-8″?>

<library>

<book>

<title>Introduction to XML</title>

<author>John Doe</author>

<publication_year>2020</publication_year>

</book>

<book>

<title>Data Structures and Algorithms</title>

<author>Jane Smith</author>

<publication_year>2021</publication_year>

</book>

</library>

इस Example में, <library> Root Element है, और प्रत्येक <book> Element <title>, <author>, और <publication_year> जैसे Nested Element के साथ एक Specific Book के बारे में Information को Represent करता है।

Difference Between XML and HTML

Purpose:

XML: Data का Description करने और विभिन्न System के बीच Structured Information को Exchange करने की सुविधा के लिए Design किया गया है।
HTML: मुख्य रूप से Web Content को Structuring करने के लिए use किया जाता है, जो Browser में Information की Presentation पर जोर देता है।

Tags and Elements:

XML: User अपने स्वयं के Tag और Document Structure को Define करते हैं, जिससे अधिक Flexible और Customized Approach की Permission मिलती है।
HTML: इसमें Content को Format करने और Display करने के लिए Specific Meaning वाले Tag का एक Predefined Set होता है।

Data Representation:

XML: यह Specify किए बिना कि Data कैसे Display किया जाना चाहिए, एक Hierarchical Structure में Data को Represent करने पर Focus करता है।
HTML: किसी Document के Structure को Define करता है| और इसमें ऐसे Tag Include होते हैं, जो Web Browser में Content की उपस्थिति निर्धारित करते हैं।

Use Cases:

XML: आमतौर पर Data Interchange, Configuration Files और अन्य Data Format (जैसे, RSS, SOAP) के लिए Base के रूप में use किया जाता है।
HTML: मुख्य रूप से Web Page बनाने और Internet पर Content Present करने के लिए use किया जाता है।

Validation:

XML: Data Integrity सुनिश्चित करने के लिए Document Type Definition (DTD) या XML Schema के विरुद्ध Validate किया जा सकता है।
HTML: Strict Validation पर कम जोर देने के साथ Content के Explanation और Representation के लिए Browser पर निर्भर करता है।

XML Elements

XML Document में ऐसे Element Include होते हैं, जो Document के Structure के Building Blocks होते हैं। एक Element में एक Start Tag, Content और एक End Tag होता है।

Example:


<person>

<name>John Doe</name>

<age>30</age>

</person>

इस Example में, <person>, <name>, और <age> XML Element हैं।

XML Attributes

Attributes किसी Element के बारे में Additional Information Provide करता हैं, और हमेशा Start Tag के भीतर स्थित होती हैं। इन्हे “Name=value” Pair के रूप में Define किया जाता है| और Single या Double Quotes में Enclose होता हैं।

Example:


<person gender=”male” nationality=”US”>

<name>John Doe</name>

<age>30</age>

</person>

निम्नलिखित Example में gender और nationality <person> Element के Attribute हैं।

Namespaces

XML Namespaces का use Element और Attribute Name को Uniquely रूप से योग्य बनाने का एक तरीका Provide करके Naming Conflict से बचने के लिए किया जाता है। xmlns Attribute का उपयोग करके एक Namespace Declare किया जाता है।

Example:


<library xmlns:books=”http://example.com/books”>

<books:book>

<books:title>Introduction to XML</books:title>

<books:author>John Smith</books:author>

</books:book>

</library>

यहां, xmlns:books Attribute Book के साथ Prefixed वाले Element के लिए एक Namespace को Define करती है:।

Syntax Rules

Proper Nesting: Element को Proper रूप से Nested किया जाना चाहिए| जिसका अर्थ है, कि वे Overlap नहीं हो सकते हैं या Improperly तरीके से व्यवस्थित नहीं हो सकते हैं।
Case Sensitivity: XML Case-Sensitive है, इसलिए <Person> और <person> को अलग-अलग Element माना जाता है।
Empty Elements: Empty Elements को Closing Angle Bracket से पहले Forward Slash का use करके Self-Closing होना चाहिए, जैसे <empty/>।
Quotation Marks: Attribute Value Single या Double Quotes में Close होने चाहिए।

Example:


<bookstore xmlns=”http://example.com/bookstore” xmlns:auth=”http://example.com/authors”>

<book genre=”fiction”>

<title>The Great Gatsby</title>

<auth:author>F. Scott Fitzgerald</auth:author>

</book>

<book genre=”non-fiction”>

<title>Thinking, Fast and Slow</title>

<auth:author>Daniel Kahneman</auth:author>

</book>

</bookstore>

Navigation Bar, Images, Pagination

Navigation Bar

Navigation Bar या Navbar, Structured और Intuitive User Interface बनाने के लिए एक महत्वपूर्ण Element है। Bootstrap एक Predefined Styles और Components के साथ इसके Implementation को सरल बनाता है।

Example:


<nav class=”navbar navbar-expand-lg navbar-light bg-light”>

<a class=”navbar-brand” href=”#”>Your Brand</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>

<span class=”navbar-toggler-icon”></span>

</button>

<div class=”collapse navbar-collapse” id=”navbarNav”>

<ul class=”navbar-nav”>

<li class=”nav-item active”>

<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>

</li>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>Features</a>

</li>

<li class=”nav-item”>

<a class=”nav-link” href=”#”>About</a>

</li>

<!– Add more items as needed –>

</ul>

</div>

</nav>

Explanation:

navbar: Navigation Bar के लिए Main Container होता है।
navbar-brand: Brand/Logo Section।
navbar-toggler: छोटी Screen पर Navigation Link को Toggle करने का Button होता है।
navbar-nav: Navigation Link के लिए Container होता है।
nav-item: Individual Navigation Item होता है।
nav-link: Navigation Link के लिए Styling होता है।

Images

Bootstrap Effortless Image Handling करने के लिए Utility Class और Components Provide करता है, जिससे सभी Device में एक Consistent और Responsive Design सुनिश्चित होता है।

Example:


<!– Responsive Image –>

<img src=”your-image.jpg” class=”img-fluid” alt=”Responsive Image”>
<!– Rounded Image –>

<img src=”your-image.jpg” class=”rounded” alt=”Rounded Image”>
<!– Circle Image –>

<img src=”your-image.jpg” class=”rounded-circle” alt=”Circle Image”>
<!– Thumbnail Image –>

<img src=”your-image.jpg” class=”img-thumbnail” alt=”Thumbnail Image”>

Explanation:

img-fluid: Image को उसके Container के भीतर Responsive बनाता है।
rounded: Image के Corner को Round करता है।
rounded-circle: एक Circular Image बनाता है।
img-thumbnail: Thumbnail Effect के लिए Image में Border और Padding जोड़ता है।

Pagination

Content को Manageable Section में Divide करने तथा बड़े Dataset के साथ काम करते समय User Experience को बेहतर बनाने के लिए Pagination महत्वपूर्ण भूमिका निभाता है।

Example:


<ul class=”pagination”>

<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>

<li class=”page-item”><a class=”page-link” href=”#”>2</a></li>

<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>

<li class=”page-item”>

<a class=”page-link” href=”#” aria-label=”Next”>

<span aria-hidden=”true”>&raquo;</span>

</a>

</li>

</ul>

Explanation:

pagination: Pagination के लिए Container होता है।
page-item: प्रत्येक Pagination Item को Represent करता है।
page-link: Pagination Link के लिए Styling Defined होता है।
aria-label: Accessibility Information Provide करता है।
« and »: Previous और Next Arrows के लिए Unicode Character है।

Jumbotron

Bootstrap में Jumbotron Component को बड़े, प्रमुख Heading के साथ Key Content प्रदर्शित करने के लिए Design किया गया है। यह Website पर Key Information या Call to Action को Highlighting करने के लिए Ideal Element होता है।

Example:


<div class=”jumbotron”>

<h1 class=”display-4″>Welcome to Our Website!</h1>

<p class=”lead”>Discover the latest trends and innovations in web development.</p>

<hr class=”my-4″>

<p>Subscribe to stay updated with our exciting content.</p>

<a class=”btn btn-primary btn-lg” href=”#” role=”button”>Subscribe</a>

</div>

Alerts

Bootstrap User को Alert, Notifications या Feedback Display करने का एक Flexible और आकर्षक तरीका Provide करता है। Alert विभिन्न Styles में आते हैं, जैसे Success, Info, Warning और Danger।

Example:


<div class=”alert alert-success” role=”alert”>

Success! Your changes have been saved.

</div>
<div class=”alert alert-warning” role=”alert”>

Warning! This action may have unintended consequences.

</div>
<div class=”alert alert-danger” role=”alert”>

Error! Something went wrong. Please try again.

</div>

Forms

Bootstrap Stylish और Responsive Forms Creation को सरल बनाता है, जिससे Developers के लिए User-Friendly Input Fields, Button और अन्य Form Elements बनाना आसान हो जाता है।

Example:


<form>

<div class=”form-group”>

<label for=”exampleFormControlInput1″>Email address</label>

<input type=”email” class=”form-control” id=”exampleFormControlInput1″ placeholder=”name@example.com”>

</div>

<div class=”form-group”>

<label for=”exampleFormControlSelect1″>Select a category</label>

<select class=”form-control” id=”exampleFormControlSelect1″>

<option>Web Development</option>

<option>Data Science</option>

<option>Design</option>

<option>Other</option>

</select>

</div>

<div class=”form-group”>

<label for=”exampleFormControlTextarea1″>Your Message</label>

<textarea class=”form-control” id=”exampleFormControlTextarea1″ rows=”3″></textarea>

</div>

<button type=”submit” class=”btn btn-primary”>Submit</button>

</form>

Progress Bars

Progress Bar किसी Ongoing Process या Task का Status को Indicate करने के लिए महत्वपूर्ण हैं। Bootstrap विभिन्न Styles और Animation के साथ Progress Bar को Include करने का एक आसान Way Provide करता है।

Example:


<div class=”progress”>

<div class=”progress-bar” role=”progressbar” style=”width: 25%;” aria-valuenow=”25″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>
<div class=”progress”>

<div class=”progress-bar bg-success” role=”progressbar” style=”width: 75%;” aria-valuenow=”75″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>
<div class=”progress”>

<div class=”progress-bar bg-danger progress-bar-striped progress-bar-animated” role=”progressbar” style=”width: 50%;” aria-valuenow=”50″ aria-valuemin=”0″ aria-valuemax=”100″></div>

</div>

Grid System

Bootstrap Grid System एक Flexible, Mobile-First Grid है, जो Viewport या Device का Size Increase करने पर 12 Column तक बढ़ जाता है। यह विभिन्न Screen Size में Content को Consistent Alignment और Distribution सुनिश्चित करता है, जिससे Web Applications Responsive और User-Friendly बन जाते हैं।

Example:


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>

<title>Bootstrap Grid Example</title>

</head>

<body>
<div class=”container”>

<div class=”row”>

<div class=”col-md-6″>

<!– Content for the first column –>

<p>This is the first column.</p>

</div>

<div class=”col-md-6″>

<!– Content for the second column –>

<p>This is the second column.</p>

</div>

</div>

</div>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</body>

</html>

Explanation:

इस Example में, Container Class एक Responsive Fixed-Width Container बनाता है, और row Class में Column होते हैं। col-md-6 Class को Indicate करता है, कि प्रत्येक Column को Medium-Size और Larger Screen पर Available 12 Column में से 6 को लेना चाहिए।

Color Management, Buttons, Table, Drop-down

Color Management

Color Management, Web Developement का एक महत्वपूर्ण Aspect है, जो Direct User Experience को प्रभावित करता है। Bootstrap, एक Popular Front-End Framework है, जोकि Attractive Design और Responsive User Interface Design करने के लिए Tools का एक Robust Set Provide करता है।

Web Developement में Color को आमतौर पर Hexadecimal Values, RGB (Red, Green, Blue) Values या Color Name का use करके Define किया जाता है। एक Harmonious Color Scheme Select करने से Website की Readability, Usability, और Overall Aesthetic में वृद्धि होती है।

Example – Implementing Color Palette in CSS


/* Define a color palette using variables */

:root {

–primary-color: #3498db;

–secondary-color: #2ecc71;

–accent-color: #e74c3c;

}
/* Apply colors to specific elements */

body {

background-color: var(–secondary-color);

color: var(–primary-color);

}
.header {

background-color: var(–primary-color);

color: white;

}
.button {

background-color: var(–accent-color);

color: white;

}

उपरोक्त Example में Primary, Secondary और Accent Colors के लिए CSS Variables का use करके एक Color Palette Define किया है। फिर इन Variables को Specific Element, जैसे Body, Header और Button पर Apply किया जाता है, जिससे एक Cohesive और Visually रूप से आकर्षक Design बनता है।

Bootstrap Buttons

Bootstrap Button Style का एक Versatile Set Provide करता है, जिसे आपके Application की आवश्यकताओं के अनुरूप आसानी से Customized किया जा सकता है।

Default Buttons


<button type=”button” class=”btn btn-default”>Default Button</button>

Primary Buttons


<button type=”button” class=”btn btn-primary”>Primary Button</button>

Success Buttons


<button type=”button” class=”btn btn-success”>Success Button</button>

Warning Buttons


<button type=”button” class=”btn btn-warning”>Warning Button</button>

Danger Buttons


<button type=”button” class=”btn btn-danger”>Danger Button</button>

Customizing Bootstrap Buttons

विभिन्न Class और Style को मिलाकर Bootstrap Button को और अधिक Customized किया जा सकता है। Example के लिए, btn-lg class जोड़ने से एक Larger Button बनता है, और btn-outline-secondary एक Button को Secondary Outline देता है|


<button type=”button” class=”btn btn-lg btn-outline-secondary”>Large Secondary Button</button>

Creating a Table in Bootstrap

Data को Organize करने और Present करने के लिए Table Fundamental Element हैं। Bootstrap Table को Design करने का एक Clean और Responsive Way Provide करता है। एक Basic Table बनाने के लिए इन Step को Follow करें|

Step 1: Include Bootstrap CSS and JS Files

सुनिश्चित करें कि आपने अपने HTML Document के <head> Section में Bootstrap CSS और JS File Include की हैं। जिसके लिए आप निम्नलिखित CDN Link का use कर सकते हैं|


<!– Bootstrap CSS –>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css”>
<!– Bootstrap JS and Popper.js –>

<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js”></script>

Step 2: Create the HTML Table

Basic Styling के लिए Table और table-striped class के साथ Table Class का use करें।

Example:


<table class=”table table-striped”>

<thead>

<tr>

<th scope=”col”>ID</th>

<th scope=”col”>Name</th>

<th scope=”col”>Age</th>

</tr>

</thead>

<tbody>

<tr>

<th scope=”row”>1</th>

<td>John Doe</td>

<td>25</td>

</tr>

<tr>

<th scope=”row”>2</th>

<td>Jane Smith</td>

<td>30</td>

</tr>

<!– Add more rows as needed –>

</tbody>

</table>

Step 3: Customize as Needed

Additional Class Add करके Table को Customize करें, जैसे Border के लिए table-border या Hover Effect के लिए table-hover।

Introduction of Dropdown

Bootstrap, एक Front-End Framework है, जो Web Development को सुव्यवस्थित करने के लिए Components का एक Versatile Set Provide करता है। ऐसा ही एक Essential Component है- Dropdown। Dropdown Interactive Element हैं, जो User को List से एक Option Select करने की Permission देते हैं।

Syntax:

Bootstrap में Dropdown बनाने के लिए Basic Syntax में Dropdwon Class के साथ <div> Element का use शामिल है। इसके अतिरिक्त, आपको Dropdown को Trigger करने के लिए dropdown-toggle Class के साथ एक Button या Anchor Tag की आवश्यकता होती है, और Dropdown Item को Implement करने के लिए dropdown-menu Class के साथ एक <div> की आवश्यकता होती है।

Example:


<div class=”dropdown”>

<button class=”btn btn-secondary dropdown-toggle” type=”button” id=”dropdownMenuButton” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>

Select an Option

</button>

<div class=”dropdown-menu” aria-labelledby=”dropdownMenuButton”>

<a class=”dropdown-item” href=”#”>Option 1</a>

<a class=”dropdown-item” href=”#”>Option 2</a>

<a class=”dropdown-item” href=”#”>Option 3</a>

</div>

</div>

Explanation:

dropdown Class को Bootstrap Dropdown के रूप में Define करने के लिए Main <div> पर Apply किया जाता है।
btn btn-secondary dropdown toggle class उस Button को Style करते हैं, जो Dropdown को Trigger करता है।
Dropdown Functionality को Implement करने के लिए data-toggle = “Dropdown” Attribute महत्वपूर्ण है।
dropdown -menu class का use Dropdown Item के Container को Style करने के लिए किया जाता है।
प्रत्येक Dropdown Item को Dropdown Item Class के साथ एक Anchor Tag द्वारा दर्शाया जाता है।

JQuery Event Methods, JQuery Effects, Header/Footer using JQuery

JQuery Event

jQuery Method के एक Set के माध्यम से Event Handling को सरल बनाता है, जो Developers को Click, Keypresses या Mouse Movement जैसी User Action पर Respond देने की Permission देता है। ये Method Event Handler को HTML Element से Attach करने के लिए एक Consistent और Cross-Browser-Compatible Way Provide करता हैं।

Common jQuery Event Methods

click() Method

किसी Function को HTML Element के Click Event में Attach करने के लिए click() Method का use किया जाता है।

Example:


$(document).ready(function(){

$(“#myButton”).click(function(){

alert(“Button clicked!”);

});

});

hover() Method

hover() Method, Mouseenter और Mouseleave दोनों Event को Handle करने का एक सुविधाजनक तरीका है।

Example:


$(document).ready(function(){

$(“#myElement”).hover(

function(){

$(this).css(“color”, “blue”);

},

function(){

$(this).css(“color”, “black”);

}

);

});

on() Method

on() Method एक Versatile Event Handler है, जिसका use एक या अधिक Event के लिए Multiple Event Handler Attach करने के लिए किया जाता है।

Example:


$(document).ready(function(){

$(“#myInput”).on({

focus: function(){

$(this).css(“background-color”, “#e0e0e0”);

},

blur: function(){

$(this).css(“background-color”, “white”);

}

});

});

keypress() Method

keypress() Method का use किसी Function को keypress Event में Attach करने के लिए किया जाता है| जोकि तब होता है, जब किसी Key को Press किया जाता है| और किसी Element पर छोड़ा जाता है।

Example:


$(document).ready(function(){

$(“#myInput”).keypress(function(){

console.log(“Key pressed!”);

});

});

JQuery Effects (Hide/Show, Fade, Slide)

jQuery, एक Fast और Lightweight JavaScript Library है, जो Web Developers को DOM Munipulate और Events Handling की Complexities को सरल बनाने में सक्षम बनाती है। हम तीन आवश्यक jQuery Effects पर प्रकाश डालते हैं – जोकि Hide/Show, Fade और Slide Effects हैं।

Hide/Show Effect

jQuery में Hide/Show Effect आपको HTML Element की Visibility को सहजता से Toggle करने की Permission देता है। यह Effect विशेष रूप से तब use होता है, जब आप Dynamic और Interactive User Interface बनाना चाहते हैं।

Example:


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<title>Hide/Show Effect</title>

<script src=”https://code.jquery.com/jquery-3.6.4.min.js”></script>

<style>

.hidden-element {

display: none;

}

</style>

</head>

<body>
<button id=”toggleButton”>Toggle Element</button>

<div id=”targetElement” class=”hidden-element”>

This is a hidden element.

</div>
<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).toggle();

});

});

</script>
</body>

</html>

इस Example में, ID “toggleButton” वाला एक Button बनाया गया है, और ID “targetElement” वाला एक Hide Element शुरू में CSS का use करके Hide किया गया है। Button Click करने पर jQuery Script Targer Element की Visibility को Toggles कर देती है।

Fade Effect

jQuery में Fade Effect किसी Element की Opacity को आसानी से बदल देता है, जिससे एक Visually Appealing Transition बनता है।

Example:


<!– Similar HTML and script setup as the Hide/Show example –>
<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).fadeToggle();

});

});

</script>

इस Example में, Fade Effect Apply करने के लिए Toggle के बजाय fadeToggle Method का use किया जाता है। Button Click करने पर Target Element की Opacity सुचारू रूप से परिवर्तित हो जाएगी।

Slide Effect

jQuery में Slide Effect किसी Element के Height को Animates करता है, जिससे वह Sliding Motion के साथ Appear या Disappear हो जाता है।

Example:


<!– Similar HTML and script setup as the Hide/Show example –>
<script>

$(document).ready(function () {

$(“#toggleButton”).click(function () {

$(“#targetElement”).slideToggle();

});

});

</script>

यहां, Button Click करने पर Sliding Effect बनाने के लिए slideToggle Method का use किया जाता है। Target Element अपनी Current Visibility State के Base पर आसानी से Up या Down Slide करता है।

Insertion of header/footer in HTML Pages using JQuery

jQuery, HTML Document को Traverse करने और Munipulate करने के लिए एक Detailed Syntax Provide करता है, जो इसे Dynamic Content Insertion को Handle करने के लिए एक Ideal Choice बनाता है। यह Capability विशेष रूप से तब use होती है| जब Duplicate Code के बिना Multiple Pages में Header और Footer जैसे Common Element को Include करना चाहते हैं।

Implementation

आइए एक Simple Scenario पर विचार करें| जहां आपके पास Header और Footer के लिए Container के रूप में काम करने के लिए Defined <div> Element वाली एक HTML File है। हम इस Container में Header और Footer Content को Dynamically रूप से Load करने के लिए jQuery का use करेंगे।

HTML Structure


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<title>Dynamic Header/Footer Insertion</title>

<!– Include jQuery –>

<script src=”https://code.jquery.com/jquery-3.6.4.min.js”></script>

</head>

<body>

<div id=”page-container”>

<!– Header will be inserted here –>

<div id=”header-container”></div>
<!– Main content goes here –>
<!– Footer will be inserted here –>

<div id=”footer-container”></div>

</div>
<!– Additional scripts and content –>

</body>

</html>

jQuery Script


<script>

// jQuery document ready function

$(document).ready(function() {

// Load header content

$(“#header-container”).load(“header.html”);
// Load footer content

$(“#footer-container”).load(“footer.html”);

});

</script>

इस Example में, jQuery में Load Funtion का use निर्दिष्ट HTML File के Content को Respective Container (#header-container और #footer-container) में लाने और Inject करने के लिए किया जाता है। सुनिश्चित करें कि Header और Footer HTML File के Path सही हैं।

Benefits

Code Reusability: Header और Footer Content को अलग-अलग HTML File में Store किया जाता है, जो Multiple Page पर Code Reusability को बढ़ावा देता है।
Maintenance: Header या Footer में Modifications एक साथ सभी Page पर प्रतिबिंबित होते हैं, जिससे Maintenance सुव्यवस्थित हो जाता है।

Concept of JQuery, Adding JQuery to Web Page, JQuery Selectors

Introduction of Jquery

Web Development में jQuery एक Powerful और Lightweight JavaScript Library के रूप में Use की जाती है, जो HTML Document को Handle करने, Animation बनाने, Event Handling और Asynchronous Request करने की Process को Simple बनाती है।

jQuery एक Fast, Small और Feature-Rich, JavaScript Library है। यह DOM Manipulation, Event Handling और Animation जैसे Complex Task को Simple बनाता है, जिससे Web Development अधिक Efficient और Less Error-Prone हो जाता है।

Why we use jQuery

Cross-browser Compatibility: jQuery, Cross Browser Compatibility Ensure करते हुए Browser के बीच Abstracts को दूर करता है।
Simplified Syntax: jQuery सामान्य Task के लिए Detailed Syntax Provide करता है, जिससे आवश्यक Code की मात्रा कम हो जाती है।
AJAX Support: jQuery, User Experience को बढ़ाते हुए Asynchronous Request करने की Process को Simple बनाता है।

Adding jQuery to Your Web Page

Downloading jQuery

Official jQuery Website पर जाएँ और jQuery का Latest Version Download करें। आप अपनी Development आवश्यकताओं के आधार पर Compressed और Uncompressed Version के बीच चयन कर सकते हैं।

Hosting jQuery

आप Direct Content Delivery Network (CDN) से jQuery Include कर सकते हैं। Example के लिए आप Google CDN से jQuery को Include करने के लिए अपने HTML में निम्नलिखित Script Tag जोड़ सकते हैं-

Example:


<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js”></script>

Local Integration

यदि आपने jQuery को Locally रूप से Download किया है, तो इसे निम्नलिखित Script Tag का use करके अपनी HTML File में Include कर सकते है| सुनिश्चित करें कि Path आपकी jQuery File के सही Location को Indicate करता है।

Example:


<script src=”path/to/jquery.min.js”></script>

jQuery in Action

एक बार jQuery Integrated हो जाने पर आप इसके Features का Advantage उठाना शुरू कर सकते हैं।

Example: To Fade the HTML Element


<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

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

<title>jQuery Example</title>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js”></script>

<script>

// jQuery code

$(document).ready(function(){

// Fade out the element with ID “myElement” over 2 seconds

$(“#myElement”).fadeOut(2000);

});

</script>

</head>

<body>
<div id=”myElement”>

<p>This is a sample element.</p>

</div>
</body>

</html>

jQuery Selectors

jQuery Selectors ऐसे Pattern हैं, जिनका उपयोग HTML Element को Select और उनमें Manipulation करने के लिए किया जाता है। ये CSS Selector के समान Principles को Follow करते हैं, जिससे CSS से Familiar Developer के लिए jQuery में Transition करना आसान हो जाता है।

Basic Syntax

jQuery Selector CSS Selector के Familiar Syntax को Follow करते हैं, जिससे Web Styling से Familiar Developers के लिए उन्हें समझना आसान हो जाता है।

Example:


$(selector).action();

यहां, Selector Target किए जाने वाले HTML Element को Specify करता है, और action() Execute किए जाने वाले Operation को दर्शाता है।

Types of Selectors

Element Selector

HTML Element को उनके Tag Name के Base पर Target कर सकते है।

Example:


$(“p”).hide(); // Hides all <p> elements

ID Selector

ID Selector एक Specific ID वाले Element को Select करता है।

Example:


$(“#myElement”).fadeIn(); // Fades in the element with ID “myElement”

Class Selector

Class Selector एक Specific Class वाले Element को Target करता है।

Example:


$(“.myElement”).fadeIn();

Attribute Selector

Attribute Selector, Element को Select उनकी Attribute के Base पर करता है।

Example:


$(“myElement.attribute”).fadeIn();

Advanced Selectors

Descendant Selector

Descendant Selector उन सभी Element को Select करता है, जो किसी दिए गए Element के Descendants हैं।

Example:


$(“div p”).css(“color”, “red”); // Sets the text color of all <p> elements inside <div> elements

Child Selector

Child Selector किसी दिए गए Element के सभी Direct Children को Select करता है।

Example:


$(“ul > li”).addClass(“highlight”); // Adds a class to all <li> elements that are direct children of <ul>

:first and :last Selectors

यह Selector, Selection में क्रमशः First और Last Element को Target करता है।

Example:


$(“tr:first”).css(“background-color”, “yellow”); // Sets the background color of the first <tr> element

Filtering and Traversing:

Filtering

:even and :odd Selectors:

यह Filtering Selector किसी Collection में Even या Odd Element को Select करता है।

Example:


$(“li:even”).addClass(“even”); // Adds a class to all even <li> elements

Traversing

.find() Method:

यह Traversing Selector किसी Selected Element के भीतर Descendant Element Find करता है।

Example:


$(“div”).find(“p”).css(“font-weight”, “bold”); // Sets the font weight of all <p> elements inside <div>

Functions – Declaration and Calling with Parameters

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>

Operators and Control Flow Statement

Introduction to Operators

JavaScript, एक Versatile और Dynamic Programming Language के रूप में Data के Manipulation और विभिन्न Task का Execution करने की सुविधा के लिए Operator की एक Wide Array को Utilize करती है। JavaScript में Operator को विभिन्न Type में Categorized किया जा सकता है, जिनमें से प्रत्येक Language के Syntax में एक Specific Object को Fulfill करता है।

Type of Operators

Arithmetic Operators

Arithmetic Operators, Basic Mathematical Operation करते हैं। इसमें Addition (+), Subtraction (-), Multiplication (*), Division (/), और Modulus Operator (%) शामिल हैं, जो Division का Remainder Return करता है।

Example:


let a = 10;

let b = 3;
console.log(a + b);   // Output: 13

console.log(a – b);   // Output: 7

console.log(a * b);  // Output: 30

console.log(a / b);   // Output: 3.3333333333333335

console.log(a % b); // Output: 1

Comparison Operators

Comparison Operators का Use Value को Compare करने और Boolean Result Return करने के लिए किया जाता है। इनमें Equality (==), Strict Equality (===), Inequality (!=), Strict Inequality (!==), Greater Than (>), Less Than (<), Greater Than or Equal To (>=), और Less Than or Equal To (<=) से अधिक या इसके बराबर शामिल हैं।

Example:


let x = 5;

let y = “5”;
console.log(x == y);     // Output: true

console.log(x === y);  // Output: false

console.log(x != y);     // Output: false

console.log(x !== y);  // Output: true

console.log(x > y);     // Output: false

console.log(x < y);     // Output: false

console.log(x >= y);   // Output: true

console.log(x <= y);  // Output: true

Logical Operators

Logical Operators का Use Boolean Values को Combine या Manipulate करने के लिए किया जाता है। Logical AND (&&), Logical OR (||), और Logical NOT (!) Operator का use Complex Decision लेने के किया जाता हैं।

Example:


let p = true;

let q = false;
console.log(p && q);    // Output: false

console.log(p || q);     // Output: true

console.log(!p);            // Output: false

Assignment Operators

Assignment Operators का Use Variable को Value Assign करने के लिए किया जाता है। Simple Assignment (=) को +=, -=, *=, और /= जैसे Compound Assignment Operators द्वारा Augmented किया जाता है।

Example:


let num = 5;
num += 3;                     // Equivalent to num = num + 3

console.log(num);       // Output: 8
num *= 2;                    // Equivalent to num = num * 2

console.log(num);      // Output: 16

Unary Operators

Unary Operators एक ही Operand पर काम करते हैं। Unary Plus (+) और Unary Minus (-) किसी Number के Sign को बदलते हैं, जबकि Increment (++) और Decrement (–) Operator किसी Variable को 1 से बढ़ाते या घटाते हैं।

Example:


let counter = 10;
console.log(+counter);         // Output: 10

console.log(-counter);          // Output: -10
counter++;

console.log(counter);            // Output: 11
counter–;

console.log(counter);            // Output: 10

Control Flow Statements

Control Flow Statement, Web Development में Fundamental Structure हैं| जो उस Sequence को निर्धारित करते हैं, जिसमें किसी Program के भीतर Instruction को Execute किया जाता है। ये Statement, Developer को कुछ Condition के आधार पर Execution के Flow को Control करने की अनुमति देते हैं, जिससे Web Application अधिक Dynamic और Responsive बन जाते हैं।

Conditional Statement Developer को Defined Condition के आधार पर Code के कुछ Block को Execute करने की अनुमति देते हैं। सबसे Most Common Conditional Statement हैं –

if Statement

if Statement, Conditional Statement का सबसे Basic Type है। यह एक Condition को Evaluate करता है, और यदि Condition True है, तो Code के एक Block को Execute करता है। अथवा यह Code के Block को Skip कर देता है, और Next Statement पर चला जाता है।

Syntax:


if (condition) {

// Code block to be executed if Condition is true

}

Example:


var age = 25;

if (age >= 18) {

console.log(“You are eligible to vote”);

}

if-else Statement

if-else Statement का use JavaScript में Decision लेने के लिए किया जाता है। if Condition True है, तो यह आपको Code के एक Block को Execute करने की Permission देता है|और यदि Condition False है, तो दूसरे Block को Execute करने की Permission देता है।

Syntax:


if (condition) {

// Code block to be executed if Condition is true

} else {

// Code block to be executed if Condition is false

}

Example:


let x = 10;
if (x > 5) {

console.log(“x is greater than 5”);

} else {

console.log(“x is not greater than 5”);

}

इस Example में, यदि x का Value 5 से अधिक है, तो Code का पहला Block Execute किया जाएगा; अन्यथा, दूसरा Block Execute किया जाएगा।

Switch Statement

Switch Statement का उपयोग विभिन्न Condition के आधार पर विभिन्न Action करने के लिए किया जाता है। यह if-else statement की Long Chain का एक अधिक Efficient Alternative है।

Syntax:


switch (expression) {

case value1:

// Code block to be executed if expression matches value1

break;

case value2:

// Code block to be executed if expression matches value2

break;

default:

// Code block to be executed if expression doesn’t match any case

}

Looping Statements

Looping Statement का use Code के एक Block को बार-बार Execute करने के लिए किया जाता है, जब तक कि एक Specified Condition True होती है। Common Looping Statement में शामिल हैं-

for Loop

for Loop का उपयोग किसी Array जैसे Element के Sequence पर पुनरावृत्ति करने के लिए किया जाता है। इसमें एक Initialization Statement, एक Condition और एक Increment/Decrement Statement शामिल होता है।

Syntax:


for (initialization; condition; increment/decrement) {

// Code block to be executed

}
Example:


for (let i = 0; i < 5; i++) {

console.log(i);

}

यह Loop Value को 0 से 4 तक Print करेगा। Initialization Let (i=0) Starting Point Set करता है, Condition (i<5) निर्धारित करती है, कि Loop कब रुकना चाहिए| और (i++) प्रत्येक पुनरावृत्ति के बाद (i) का Value बढ़ाता है।

while Loop

एक while Loop Code के एक Block को Repeat करता है, जब Specified Condition True होती है। इसमें केवल एक Conditon होता है| और Loop तब तक जारी रहता है, जब तक वह Condition True है।

Syntax:


while (condition) {

// Code block to be executed

}

Example:


let i = 0;
while (i < 5) {

console.log(i);

i++;

}

यह Loop Functionally रूप से उपरोक्त Loop Example के बराबर है। यह 0 से 4 तक Value Print करता है ,जबकि Condition (i <5) True है।

do-while Loop

do-while Loop, while Loop के समान है, लेकिन Code के Block Execute होने के बाद Condtion की Check की जाती है। यह सुनिश्चित करता है, कि Block कम से कम एक बार Execute हो।

Syntax:


do {

// Code block to be executed

} while (condition);

Example:


let i = 0;
do {

console.log(i);

i++;

} while (i < 5);

Introduction of Javascript, Variables, Data types

Introduction of Javascript

JavaScript, जिसे JS के नाम से भी जाना जाता है| यह एक Versatile Programming Language है, जो Modern Web Development में महत्वपूर्ण Role निभाती है। शुरुआत में Web Page की Interactivity को बढ़ाने के लिए Developed, JavaScript एक Full-Fledged Programming Language के रूप में विकसित हुई है|जो Dynamic और Responsive Web Applications को Strong बनाने में सक्षम है।

Key Features of JavaScript

Client-Side Scripting: JavaScript मुख्य रूप से Client-side पर Code को Execute करने की क्षमता के लिए जाना जाता है| जिसका अर्थ है, कि यह User के Web Browser में चलता है। यह Developers को केवल Server-Side Processing पर निर्भर हुए बिना Dynamic और Interactive User Interface बनाने की Permission देता है।
Asynchronous Programming: JavaScript, Asynchronous Programming का Support करता है, जो Main Thread को Block किए बिना एक साथ कई Task के Execution को सक्षम बनाता है। यह Responsive Web Application के निर्माण के लिए महत्वपूर्ण है, जो User Interface को Freeze किए बिना Complex Operation को Handle कर सकते हैं।
Cross-Browser Compatibility: JavaScript की एक Strengths विभिन्न Web Browser के साथ इसकी Compatibility है। Developers ऐसे Code लिख सकते हैं, जो विभिन्न Browser पर लगातार काम करते हैं| जिससे User को उनके चुने हुए Platform की परवाह किए बिना एक Seamless Experience मिलता है।

Use Cases of JavaScript

DOM Manipulation: JavaScript का use आमतौर पर Document Object Model (DOM) में Manipulate करने के लिए किया जाता है, जिससे Developers को Web Page के Content और Structure को Dynamic रूप से Update करने की Permission मिलती है। Interactive और Engaging User Interface बनाने के लिए यह क्षमता आवश्यक है।
Event Handling: JavaScript Click, Keyboard Input और Form Submission जैसे User Interaction को Handle करने की सुविधा Provide करता है। यह Developers को User की Action पर Respond देने और अधिक Interactive Browsing Experience बनाने में सक्षम बनाता है।
AJAX (Asynchronous JavaScript and XML): AJAX के साथ, JavaScript Web Browser और Server के बीच Data का Asynchronous Exchange को सक्षम बनाता है। यह Web Page को Full Page Reload किए बिना Content को Dynamic रूप से Update करने की Permission देता है, जिससे Web Application की Speed और Responsiveness बढ़ती है।
Front-End Frameworks: JavaScript कई Front-End Framework और Libraries, जैसे React, Angular और Vue.js के लिए आधार के रूप में कार्य करता है। ये Frameworks Complex User Interfaces के Development को सरल बनाते हैं और Code Maintainability को बढ़ाते हैं।

What are Variables

JavaScript में Variable एक Named Container है, जिसका use Data के Values को Store करने के लिए किया जाता है। ये Values Simple Integer और Strings से लेकर अधिक Complex Object और Functions तक हो सकते हैं। Variable Developers को Program के Execution के दौरान Dynamically रूप से Data को Manage और Manipulate करने में Enable बनाते हैं|

Declaring Variables

JavaScript में Variable Declate करने के लिए, Developers var, Let, या const Keywords का use करते हैं। इनमें से प्रत्येक Keywords की Specific Characteristic और Scopes हैं|

var

Historically रूप से Meaning Declared के लिए use किया जाता है| var में Function-Level Scope होता है| जिसका अर्थ है, कि var के साथ Declare Variable पूरे Function में Accessible होते हैं, जिसमें वे Declare किए जाते हैं। हालाँकि, वे Block-scoped नहीं हैं| जिससे Variable Hoisting और Unintended Redeclaration के साथ Potential Issue पैदा हो सकती हैं।

Example:


function exampleFunction() {

var x = 10;

console.log(x); // Output: 10

}

exampleFunction();

console.log(x); // Throws ReferenceError: x is not defined

Let

ECMAScript 6 (ES6) में Presented, Let block-level scoping Provide करता है| जिसका अर्थ है, कि Let के साथ Declared Variables उस Block तक ही सीमित हैं, जिसमें वे Define हैं। यह Unintended variable hoisting और Redeclaration Error से बचने में मदद करता है।

Example:


function exampleFunction() {

let y = 20;

console.log(y); // Output: 20

}

exampleFunction();

console.log(y); // Throws ReferenceError: y is not defined

const

ES6 में भी Presented, const का use Constant Declare करने के लिए किया जाता है, जिनके Value को एक बार Initialize करने के बाद Reassigned नहीं किया जा सकता है। Let के समान, const में भी Block-level scoping होती है।

Example


const PI = 3.14;

console.log(PI); // Output: 3.14

PI = 3.14159; // Throws TypeError: Assignment to constant variable

Initializing Variables

JavaScript में Variables को Declaration के दौरान या बाद में Program में Values के साथ Initialize किया जा सकता है। यदि किसी Variable को Initialization के बिना Declare किया जाता है, तो यह Default रूप से Undefined Value, Hold करता है।

Example


let message; // Variable declared without initialization

console.log(message); // Output: undefined
message = “Hello, World!”; // Variable initialized with a string value

console.log(message); // Output: Hello, World!

Data Type

JavaScript में, Variable को Define करने और उनके साथ Work करने के लिए Data Type महत्वपूर्ण हैं। विभिन्न Data Type को समझने से Developers को Efficient और Bug-Free Code Wrie करने में मदद मिलती है। JavaScript में Data Type की दो मुख्य Types हैं- Primitive and Non-primitive (Object) Types।

Primitive Data Types

Number

Number Type, Integer और Floating-Point Number दोनों को Represent करता है।

Example:


let integerNumber = 42;

let floatingPointNumber = 3.14;

String

String Type का use Textual Data के लिए किया जाता है। इसे Single या Double Quote में Implement किया जा सकता है।

Example:


let greeting = ‘Hello, World!’;

let company = “TechCo”;

Boolean

Boolean Type के दो Value हैं – True और False । इसका Use आमतौर पर Logical Operation करने के लिए किया जाता है।

Example:


let isJavaScriptFun = true;

let isLearningHard = false;

Undefined

Undefined Type एक ऐसे Variable को Represent करता है| जिसे Declare किया गया है, लेकिन कोई Value Assigned नहीं किया गया है।

Null

Null Type किसी Object Value की Intentional Absence को दर्शाता है।

Symbol

ECMAScript 6 में, Symbol Type का उपयोग Unique Identifier के लिए किया जाता है।

Object Data Type

Object

Object Type एक Complex Data Type है, जो key-value pair के Implementation की Permission देता है।

Example:


let person = {

name: ‘John Doe’,

age: 30,

isDeveloper: true

};

Array

Arrays एक Type का Object है, जिसका उपयोग एक ही Variable में कई Value को Store करने के लिए किया जाता है।

Example:


let fruits = [‘apple’, ‘orange’, ‘banana’];

Function

Function Object हैं, और उन्हें Variable को Assigned जा सकता है। Function का प्रयोग Calculation/Logic Implementation तथा Console पर Result को Print करने के लिए प्रयोग किया जाता है|

Example:


function addNumbers(a, b) {

return a + b;

}

TheLearnify

Introduction to JSON

Data Types in JSON

Objects

Arrays

Strings

Numbers

Uses of JSON

AJAX and API Communication

Configuration Files

Data Storage and Serialization

JSON v/s XML

XML DTD

XML Schema

Introduction of RSS FEED

RSS Basic

Creation of RSS Feed

Implementation of RSS Feed in Web Page

Introduction of XML

Key Features of XML

Difference Between XML and HTML

Purpose:

Tags and Elements:

Data Representation:

Use Cases:

Validation:

XML Elements

XML Attributes

Namespaces

Syntax Rules

Navigation Bar

Images

Pagination

Jumbotron

Alerts

Forms

Progress Bars

Grid System

Color Management

Bootstrap Buttons

Default Buttons

Primary Buttons

Success Buttons

Warning Buttons

Danger Buttons

Customizing Bootstrap Buttons

Creating a Table in Bootstrap

Introduction of Dropdown

JQuery Event

click() Method

hover() Method

on() Method

keypress() Method

JQuery Effects (Hide/Show, Fade, Slide)

Hide/Show Effect

Fade Effect

Slide Effect

Insertion of header/footer in HTML Pages using JQuery

Implementation

Introduction of Jquery

Why we use jQuery

Adding jQuery to Your Web Page

Downloading jQuery

Hosting jQuery

Local Integration

jQuery Selectors

Element Selector

ID Selector

Class Selector

Attribute Selector

Descendant Selector

Child Selector

:first and :last Selectors

Filtering and Traversing:

:even and :odd Selectors:

.find() Method:

Introduction of Functions

Declaring Functions

Calling Functions with Parameters

Adding JavaScript to Web Documents