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 523a0e2

Browse files
Added web apis
1 parent b131401 commit 523a0e2

File tree

2 files changed

+203
-13
lines changed

2 files changed

+203
-13
lines changed

‎README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -99,19 +99,19 @@ This repository contains Vanilla JavaScript topics and their notes to learn from
9999
3. [JSON (JavaScript Object Notation):](./docs/json.md)
100100
- [Parsing and Manipulating](./docs/json.md#-parsing-and-manipulating)
101101

102-
4. Web APIs:
103-
- Fetch API
104-
- WebSockets
105-
- Local Storage
106-
-Session Storage
107-
- Geolocation API
108-
- Canvas API
109-
- Web Audio API
110-
- Clip board API
111-
-Web camera API
112-
-Microphone API
113-
-Handling Cookies
114-
-Other APIs
102+
4. [Web APIs:](./docs/web-apis.md)
103+
- [Fetch API](./docs/web-apis.md#-fetch-api)
104+
- [WebSockets](./docs/web-apis.md#-websockets)
105+
- [Local Storage](./docs/web-apis.md#-local-storage)
106+
- [Session Storage](./docs/web-apis.md#-session-storage)
107+
- [Geolocation API](./docs/web-apis.md#-geolocation-api)
108+
- [Canvas API](./docs/web-apis.md#-canvas-api)
109+
- [Web Audio API](./docs/web-apis.md#-web-audio-api)
110+
- [Clipboard API](./docs/web-apis.md#-clipboard-api)
111+
- [Web camera API](./docs/web-apis.md#-web-camera-api)
112+
- [Microphone API](./docs/web-apis.md#-microphone-api)
113+
- [Handling Cookies](./docs/web-apis.md#-handling-cookies)
114+
- [Other APIs](./docs/web-apis.md#-other-apis)
115115

116116
By following this roadmap and consistently practicing, you can develop a strong foundation in Vanilla JavaScript and build impressive web applications.
117117

‎docs/web-apis.md

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
## ⚑ Web APIs:
2+
Web APIs are a set of built-in JavaScript objects that can provide an access to the browser's environment and allow web applications to interact with hardware, network resources, and other parts of the system through the browser.
3+
4+
### ☴ Overview:
5+
1. [Fetch API](#-fetch-api)
6+
2. [WebSockets](#-websockets)
7+
3. [Local Storage](#-local-storage)
8+
4. [Session Storage](#-session-storage)
9+
5. [Geolocation API](#-geolocation-api)
10+
6. [Canvas API](#-canvas-api)
11+
7. [Web Audio API](#-web-audio-api)
12+
8. [Clipboard API](#-clipboard-api)
13+
9. [Web camera API](#-web-camera-api)
14+
10. [Microphone API](#-microphone-api)
15+
11. [Handling Cookies](#-handling-cookies)
16+
12. [Other APIs](#-other-apis)
17+
18+
### ✦ Fetch API:
19+
A modern API for making network requests for the data required in JavaScript.
20+
21+
*Syntax:*
22+
```javascript
23+
fetch(url, options)
24+
.then(response => response.json())
25+
.then(data => {
26+
// Handle the data
27+
})
28+
.catch(error => {
29+
// Handle errors
30+
});
31+
```
32+
33+
```javascript
34+
fetch('https://api.example.com/data')
35+
.then(response => response.json())
36+
.then(data => {
37+
console.log(data);
38+
});
39+
```
40+
41+
### ✦ WebSockets:
42+
A protocol for establishing persistent, full-duplex communication channels between a client and a server.
43+
44+
*Syntax:*
45+
```javascript
46+
const socket = new WebSocket('ws://example.com:8080');
47+
```
48+
49+
```javascript
50+
const socket = new WebSocket('ws://example.com:8080');
51+
52+
socket.onopen = () => {
53+
console.log('WebSocket connection opened');
54+
};
55+
56+
socket.onmessage = (event) => {
57+
console.log('Received message:', event.data);
58+
};
59+
60+
socket.onclose = () => {
61+
console.log('WebSocket connection closed');
62+
};
63+
```
64+
65+
### ✦ Local Storage:
66+
It allows to store data locally in the browser for a specific domain.
67+
68+
```javascript
69+
/* Setting local storage value for specific key */
70+
localStorage.setItem('key', 'value');
71+
/* Reading local storage for the key */
72+
let value = localStorage.getItem('key');
73+
/* Removing local storage value on the key */
74+
localStorage.removeItem('key');
75+
/* Clearing local storage on the current site */
76+
localStorage.clear();
77+
```
78+
79+
### ✦ Session Storage:
80+
It allows to store data locally in the browser for a single session.
81+
82+
```javascript
83+
/* Setting session storage */
84+
sessionStorage.setItem('cart', JSON.stringify(cart));
85+
/* Reading session storage */
86+
let cart = JSON.parse(sessionStorage.getItem('cart'));
87+
```
88+
89+
### ✦ Geolocation API:
90+
It provides access to the user's geographical location.
91+
92+
```javascript
93+
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
94+
```
95+
96+
```javascript
97+
navigator.geolocation.getCurrentPosition(
98+
(position) => {
99+
console.log(position.coords.latitude, position.coords.longitude);
100+
},
101+
(error) => {
102+
console.error('Error:', error);
103+
}
104+
);
105+
```
106+
107+
### ✦ Canvas API:
108+
It allows to create 2d graphics on an HTML canvas element.
109+
110+
```javascript
111+
let canvas = document.getElementById('myCanvas');
112+
let context = canvas.getContext('2d');
113+
context.fillStyle = 'red';
114+
context.fillRect(10, 10, 100, 100);
115+
```
116+
117+
See More on this [Canvas Reference](https://github.com/ag-sanjjeev/HTML-Notes/blob/master/tags/link-tag.md)
118+
119+
### ✦ Web Audio API:
120+
It provides an interface for creating, manipulating, and processing audio data.
121+
122+
*Syntax:*
123+
```javascript
124+
let audioContext = new AudioContext();
125+
```
126+
127+
```javascript
128+
audioContext.createOscillator().start();
129+
```
130+
131+
### ✦ Clipboard API:
132+
It provides access to the user's clipboard.
133+
134+
```javascript
135+
navigator.clipboard.writeText('Hello, world!');
136+
navigator.clipboard.readText().then(text => console.log(text));
137+
```
138+
139+
### ✦ Web camera API:
140+
It provides access to the user's webcam.
141+
142+
```javascript
143+
navigator.mediaDevices.getUserMedia({ video: true })
144+
.then(stream => {
145+
let video = document.getElementById('myVideo');
146+
video.srcObject = stream;
147+
})
148+
.catch(error => {
149+
console.error('Error:', error);
150+
});
151+
```
152+
153+
### ✦ Microphone API:
154+
It provides access to the user's microphone.
155+
156+
```javascript
157+
navigator.mediaDevices.getUserMedia({ audio: true })
158+
.then(stream => {
159+
let audioContext = new AudioContext();
160+
let source = audioContext.createMediaStreamSource(stream);
161+
// ... (process audio data)
162+
})
163+
.catch(error => {
164+
console.error('Error:', error);
165+
});
166+
```
167+
168+
### ✦ Handling Cookies:
169+
Cookies are small pieces of data stored on the user's computer by a web server as same as local storage.
170+
171+
```javascript
172+
/* Setting Cookies */
173+
document.cookie = 'name=Vel Murugan; expires=2024年12月31日 12:00:00 GMT';
174+
/* Reading Cookies */
175+
let cookies = document.cookie.split(';');
176+
```
177+
178+
### ✦ Other APIs:
179+
- *Battery Status API:* Provides information about the device's battery status.
180+
- *Vibration API:* Allows the device to vibrate.
181+
- *Device Orientation API:* Provides information about the device's orientation.
182+
- *Device Motion API:* Provides information about the device's acceleration and rotation.
183+
- *Pointer Lock API:* Allows the user to lock the pointer to an element
184+
185+
---
186+
[⇪ To Top](#-web-apis)
187+
188+
[❮ Previous Topic](./json.md)
189+
190+
[⌂ Goto Home Page](../README.md)

0 commit comments

Comments
(0)

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