Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 9517874

Browse files
JavaScript Libraries 🍾✨
1 parent dd6e4a0 commit 9517874

File tree

3 files changed

+191
-0
lines changed

3 files changed

+191
-0
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Hello World!</title>
9+
<link rel="stylesheet" href="./style.css" />
10+
11+
</head>
12+
13+
<body>
14+
15+
<div id="content">
16+
17+
<p>Baa, baa black sheep</p>
18+
<p class="second-para">Have you any wool</p>
19+
<p>Yes sir, yes sir</p>
20+
<p>Three bags full.</p>
21+
22+
<p>Grab Me!</p>
23+
24+
</div>
25+
26+
<!-- CDN Link for jQuery library 3.x version -->
27+
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
28+
<!-- My Own Script -->
29+
<script src="./script.js"></script>
30+
31+
</body>
32+
33+
</html>
Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
document.write("<br /> <br/>" + "JavaScript Libraries!" + "<br /><br />");
2+
3+
/*
4+
5+
JavaScript Libraries
6+
7+
JavaScript libraries are collections of pre-written JavaScript code that make it
8+
easier to develop web applications by providing reusable functions and components.
9+
They are designed to handle common tasks, streamline complex operations, and enhance
10+
functionality without requiring developers to write everything from scratch.
11+
12+
Here are some popular JavaScript libraries and their purposes:
13+
14+
1. jQuery
15+
Purpose: Simplifies DOM manipulation, event handling, animations, and Ajax interactions.
16+
Example:
17+
// jQuery example for hiding an element
18+
$(document).ready(function() {
19+
$("#myElement").hide();
20+
});
21+
22+
2. Lodash
23+
Purpose: Provides utility functions for common programming tasks such as manipulating arrays, objects, and strings.
24+
Example:
25+
// Lodash example for cloning an object
26+
let object = { 'a': 1 };
27+
let clonedObject = _.clone(object);
28+
console.log(clonedObject); // { 'a': 1 }
29+
30+
3. D3.js
31+
Purpose: Enables data visualization by allowing you to bind data to a Document Object Model (DOM) and apply data-driven transformations to the document.
32+
Example:
33+
// D3 example for creating a simple bar chart
34+
d3.select("body")
35+
.selectAll("div")
36+
.data([4, 8, 15, 16, 23, 42])
37+
.enter().append("div")
38+
.style("width", function(d) { return d * 10 + "px"; })
39+
.text(function(d) { return d; });
40+
41+
4. Moment.js
42+
Purpose: Simplifies the parsing, validation, manipulation, and display of dates and times.
43+
Example:
44+
// Moment.js example for formatting a date
45+
let now = moment();
46+
console.log(now.format('MMMM Do YYYY, h:mm:ss a')); // June 3rd 2024, 2:30:12 pm
47+
48+
5. Axios
49+
Purpose: Provides a promise-based HTTP client for making XMLHttpRequests from the browser and Node.js.
50+
Example:
51+
// Axios example for making a GET request
52+
axios.get('https://api.example.com/data')
53+
.then(function(response) {
54+
console.log(response.data);
55+
})
56+
.catch(function(error) {
57+
console.log(error);
58+
});
59+
60+
6. Chart.js
61+
Purpose: Creates responsive, interactive, and animated charts using the HTML5 canvas element.
62+
Example:
63+
// Chart.js example for creating a bar chart
64+
var ctx = document.getElementById('myChart').getContext('2d');
65+
var myChart = new Chart(ctx, {
66+
type: 'bar',
67+
data: {
68+
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
69+
datasets: [{
70+
label: '# of Votes',
71+
data: [12, 19, 3, 5, 2, 3],
72+
backgroundColor: [
73+
'rgba(255, 99, 132, 0.2)',
74+
'rgba(54, 162, 235, 0.2)',
75+
'rgba(255, 206, 86, 0.2)',
76+
'rgba(75, 192, 192, 0.2)',
77+
'rgba(153, 102, 255, 0.2)',
78+
'rgba(255, 159, 64, 0.2)'
79+
],
80+
borderColor: [
81+
'rgba(255, 99, 132, 1)',
82+
'rgba(54, 162, 235, 1)',
83+
'rgba(255, 206, 86, 1)',
84+
'rgba(75, 192, 192, 1)',
85+
'rgba(153, 102, 255, 1)',
86+
'rgba(255, 159, 64, 1)'
87+
],
88+
borderWidth: 1
89+
}]
90+
},
91+
options: {
92+
scales: {
93+
y: {
94+
beginAtZero: true
95+
}
96+
}
97+
}
98+
});
99+
100+
101+
102+
103+
Benefits of Using JavaScript Libraries:
104+
105+
1. Time-Saving: Libraries provide pre-built functions and components, reducing the amount
106+
of code you need to write from scratch.
107+
108+
2. Cross-Browser Compatibility: Many libraries handle browser inconsistencies, ensuring
109+
that your code works across different web browsers.
110+
111+
3. Community Support: Popular libraries have large communities, extensive documentation,
112+
and many tutorials, making it easier to find help and resources.
113+
114+
4. Performance Optimization: Libraries are often optimized for performance, which can
115+
improve the efficiency of your web applications.
116+
117+
5. Enhanced Functionality: Libraries can add advanced features and functionality to your
118+
web projects without requiring deep expertise in those areas.
119+
120+
*/
121+
122+
123+
// Here we use jQuery library - we use CDN link for connect jQuery for this project file. look at HTML file
124+
125+
126+
// Getting fifth paragrph inside the content div
127+
128+
// - Pure JS way
129+
let myPara = document.getElementById("content").getElementsByTagName("p")[4];
130+
console.log(myPara);
131+
132+
// - Jquery way
133+
let myPara2 = $("#content p:last-child"); //jQuery use CSS for taking element
134+
console.log(myPara2);
135+
136+
137+
// Methods
138+
139+
// - Pure JS way
140+
let fourthPara = document.getElementById("content").getElementsByTagName("p")[3];
141+
fourthPara.className = "fourth-para"; // Addding a class name to forth paragraph using pure JS way
142+
143+
// - jQuery Way
144+
myPara2.addClass("fifth-para"); // Adding a class name to last para using jQuery
145+
146+
let secondPara = $("#content p:nth-child(2)");
147+
secondPara.removeClass("second-para"); // removinf a class name of second paragraph using jQuery
148+
149+
// - More methods in jQuery
150+
myPara2.fadeOut(); // Hide Paragraph with fading out effect
151+
myPara2.fadeIn(); // Visible Pragraph with fading In effect
152+
myPara2.css({position: "relative", color: "#ffd000"}); // Adding css elements to paragraph tag
153+
myPara2.animate({left: "150px"}); // Animate paragraph 150px to left
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
body{
2+
background-color: #282c34;
3+
font-family: calibri;
4+
color: #bfb8ab;
5+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /