Skip to content

Commit c483518

Browse files
Swap76Swap76
committed
Working on JavaScript Examples
1 parent 33a4d9d commit c483518

12 files changed

+131
-170
lines changed

‎docs/JavaScript_Advance/BOM_functions.js

+67-1
Original file line numberDiff line numberDiff line change
@@ -56,4 +56,70 @@ const {
5656
port,
5757
protocol,
5858
search
59-
} = window.location;
59+
} = window.location;
60+
61+
/* eslint-disable no-multiple-empty-lines */
62+
/* eslint-disable no-multi-spaces */
63+
/* eslint-disable no-trailing-spaces */
64+
65+
/**
66+
* History API
67+
* Interface manipulates browser history in the session borders
68+
*
69+
* Fields
70+
* @return {length} integer amount of elements in session history
71+
* @return {state} field stories state existed page
72+
*
73+
* Methods
74+
* @return {go} method loads a page from the session history with integer args
75+
* @return {back} method goes to the previous page in session history the same as history.go(-1)
76+
* @return {forfard} method goes to the next page in session history the same as history.go(1)
77+
*
78+
* @return {pushState} method pushes the given data onto the session history stack with the specified title and, if provided, URL
79+
* @return {replaceState} updates the most recent entry on the history stack to have the specified data, title, and, if provided, URL
80+
*/
81+
82+
window.history.back(); // goes to the previous page or do nothing if the existed page is first
83+
window.history.go(-1); // the same as above
84+
85+
window.history.forward(); // goes to the next page or do nothing if the existed page is last
86+
window.history.go(1); // the same as above
87+
88+
console.log(window.history.state); // null if not specified for existed page
89+
90+
const stateData = "stateData";
91+
const title = "title"; // ignored FireFox
92+
const url = window.location.href; // url which can be used manually later if needs
93+
window.history.pushState(stateData, title, url);
94+
95+
console.log(window.history.state === stateData); // true
96+
97+
window.history.replaceState(stateData, title, url); // to update existed state
98+
99+
100+
/**
101+
* Navigator API
102+
* provides the user-agent information
103+
* @return {userAgent} user agent string for the current browser
104+
* @return {language} language of the browser UI
105+
* @return {languages} list of languages known to the user
106+
*
107+
* Also contains a lot of user-agent information related to:
108+
* - media devices
109+
* - bluetooth
110+
* - usb
111+
* - geo location
112+
* - etc.
113+
*
114+
* the full list of data is https://developer.mozilla.org/en-US/docs/Web/API/Navigator
115+
*
116+
* @return {serviceWorker} provides access to registration, removal, upgrade, and communication with service worker
117+
*/
118+
119+
// usually is used custom function to define client browser type to specify which features can be used
120+
// mostly for IE
121+
const isIE = () => {
122+
const isIE11 = navigator.userAgent.indexOf(".NET CLR") > -1;
123+
const isIE11orLess = isIE11 || navigator.appVersion.indexOf("MSIE") !== -1;
124+
return isIE11orLess;
125+
};

‎docs/JavaScript_Advance/BOM_functions_1.js

-65
This file was deleted.

‎docs/JavaScript_Advance/DOM_manipulation.js

+60-10
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,53 @@
1+
// Top most tree nodes
2+
const html = document.documentElement; // The topmost document node.
3+
const body = document.body; // To access body of the page. It can be null. That means it doen't exist.
4+
const head = document.head; // To access head tag of the page.
5+
6+
// DOM navigation
7+
const parentNode = document.parentNode;
8+
const firstChild = document.firstChild;
9+
const lastChild = document.lastChild;
10+
const nextSibling = document.nextSibling;
11+
const previousSibling = document.previousSibling;
12+
13+
// Element-only navigation
14+
const parentElement = document.parentElement;
15+
const firstElementChild = document.firstElementChild;
16+
const lastElementChild = document.lastElementChild;
17+
const nextElementSibling = document.nextElementSibling;
18+
const previousElementSibling = document.previousElementSibling;
19+
20+
// DOM collections
21+
const childNode = document.body.childNodes;
22+
const tableBodies = table.tBodies;
23+
const tableRows = table.rows;
24+
const trCollection = tbody.rows;
25+
const trCells = tr.cells;
26+
27+
/*
28+
Example html template
29+
<html>
30+
<head>...</head>
31+
<body>
32+
<table id="table">
33+
<tr>
34+
<td>one</td>
35+
<td>two</td>
36+
</tr>
37+
<tr>
38+
<td>three</td>
39+
<td>four</td>
40+
</tr>
41+
</table>
42+
</body>
43+
<script>
44+
// Extract "two"
45+
let tableRows = table.rows;
46+
let trCells = tableRows[0].cells[1];
47+
</script>
48+
</html>
49+
*/
50+
151
// DOM manipulation methods for web developers
252

353
/**
@@ -9,18 +59,18 @@
959
*/
1060

1161

12-
// Query selector
13-
14-
/**
15-
* Syntax:
16-
*
17-
*/
62+
// Query selector
63+
64+
/**
65+
* Syntax:
66+
*
67+
*/
1868
var elementName = document.querySelector(selectorType);
1969

20-
/**
21-
* Query selector gets the first element that matches one or more CSS selectors.
22-
* If no match is found, it returns null.
23-
*/
70+
/**
71+
* Query selector gets the first element that matches one or more CSS selectors.
72+
* If no match is found, it returns null.
73+
*/
2474

2575
/**
2676
* Example:

‎docs/JavaScript_Advance/ajax.js

-10
This file was deleted.

‎docs/JavaScript_Advance/arrow_function.js

-4
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,13 @@ let a = () => {
44

55
};
66

7-
87
let multiply = (num) => num * num
98

109
//arrow functions also works without curly braces {} and can directly write expression after the arrows
1110
// this is known as concise body as opposed to a block body (with {});
1211
//cannot be used with if statements, or an error will appear since it only takes one expression;
1312
//ternary operators can be used with arrow functions as a more concise way to write if statements
1413

15-
16-
1714
let info = {
1815
firstName: "Swapnil",
1916
lastName: "Shinde",
@@ -23,7 +20,6 @@ let info = {
2320
}
2421
//not having this. binding means it also cannot be called with new and used as a constructor
2522

26-
2723
console.log(info.getFullName());
2824
// Output My name is undefined undefined that's why we don't use this with arrow function
2925

‎docs/JavaScript_Advance/closures.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
/*
2-
32
A closure is the combination of a function bundled together (enclosed)
43
with references to its surrounding state (the lexical environment).
54
In other words, a closure gives you access to an outer function’s scope from an inner function.
65
In JavaScript, closures are created every time a function is created, at function creation time.
7-
86
*/
97

108
function modifyString (sampleString) {

‎docs/JavaScript_Advance/dom_manipulation_html.js

-49
This file was deleted.

‎docs/JavaScript_Advance/function_as_object.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
/*
2-
32
Functions are special type of objects that has key-value pairs along with some code which gets executed
4-
53
*/
64

75
function returnName (name) {

‎docs/JavaScript_Advance/hoisting.js

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
/*
2-
32
Hoisting: Before executing any code, the javscript engine sets up memory for variables and functions.
43
variables are assigned undefined by the engine.
54
*/
@@ -19,7 +18,6 @@ x = 5; // Assign 5 to x
1918
elem = document.getElementById("demo"); // Find an element
2019
elem.innerHTML = x; // Display x in the element
2120

22-
// ________________________________________________________
2321
/* Conclusion :Example 1 gives the same result as Example 2
2422
so, Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope
2523
(to the top of the current script or the current function)

‎docs/JavaScript_Advance/while_loop.js

-23
This file was deleted.

‎docs/JavaScript_Advance/do_while_loop.js ‎docs/JavaScript_Basics/do_while_loop.js

File renamed without changes.

‎scripts/build-sidebar.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,16 @@ async function buildSidebar (watchEventType) {
3333
if (watchEventType == "change") { return; }
3434

3535
console.log("Building _sidebar.md");
36-
const content = `- [Home](README.md) \n\n` + await buildSection("JavaScript_Basics") + "\n\n\n" + await buildSection("JavaScript_Advance") + "\n\n" + await buildSection("Exercise") + "\n\n" + await buildSection("Reference");
36+
const content = `- [Home](README.md) \n\n` + await buildSection("JavaScript_Basics_Info") + "\n\n\n" + await buildSection("JavaScript_Advance_Info")+ "\n\n\n" + await buildSection("JavaScript_Basics") + "\n\n\n" + await buildSection("JavaScript_Advance") + "\n\n" + await buildSection("Exercise_Questions") + "\n\n" + await buildSection("Reference");
3737

3838
fs.writeFileSync(`${documentationFolder}/_sidebar.md`, content);
3939
}
4040

41+
fs.watch(`${documentationFolder}/JavaScript_Basics_Info`, buildSidebar);
42+
fs.watch(`${documentationFolder}/JavaScript_Advance_Info`, buildSidebar);
4143
fs.watch(`${documentationFolder}/JavaScript_Basics`, buildSidebar);
4244
fs.watch(`${documentationFolder}/JavaScript_Advance`, buildSidebar);
43-
fs.watch(`${documentationFolder}/Exercise`, buildSidebar);
45+
fs.watch(`${documentationFolder}/Exercise_Questions`, buildSidebar);
4446
fs.watch(`${documentationFolder}/Reference`, buildSidebar);
4547

4648

0 commit comments

Comments
 (0)