├── README.md ├── [1] Introduction & Setup └── Setup │ ├── custom.js │ └── index.html ├── [3] Objects ├── HTML DOM │ ├── custom.js │ └── index.html ├── Boolean │ ├── custom.js │ └── index.html ├── Number │ ├── custom.js │ └── index.html ├── Date │ ├── custom.js │ └── index.html ├── Math │ ├── custom.js │ └── index.html ├── Regular Expressions │ ├── custom.js │ └── index.html ├── String │ ├── custom.js │ └── index.html └── Arrays │ ├── index.html │ └── custom.js ├── [5] Advanced ├── AJAX │ ├── file.txt │ ├── index.html │ └── custom.js ├── Animation │ ├── custom.js │ └── index.html ├── Image Map │ ├── custom.js │ ├── planets.gif │ └── index.html ├── Multimedia │ ├── custom.js │ └── index.html ├── Validation │ ├── custom.js │ └── index.html ├── Variable Hoisting │ ├── custom.js │ └── index.html ├── Modules │ ├── src │ │ ├── index.js │ │ └── custom.js │ ├── index.html │ └── package.json ├── Browser Navigator │ ├── planets.gif │ ├── custom.js │ └── index.html ├── Anonymous Function │ ├── custom.js │ └── index.html ├── Arrow & Lambda Functions │ ├── custom.js │ └── index.html ├── Function Hoisting │ ├── custom.js │ └── index.html ├── Set Collection │ ├── custom.js │ └── index.html ├── JavaScript URI │ ├── custom.js │ └── index.html ├── Loop Labels │ ├── custom.js │ └── index.html ├── Template Literals │ ├── custom.js │ └── index.html ├── Function Constructor │ ├── custom.js │ └── index.html ├── Error Handling │ ├── index.html │ └── custom.js ├── Promises │ ├── index.html │ └── custom.js ├── Block Scope │ ├── index.html │ └── custom.js ├── Map Collection │ ├── index.html │ └── custom.js ├── Generator Functions │ ├── index.html │ └── custom.js └── Immediately Invoked Function Expressions │ ├── index.html │ └── custom.js ├── [2] Basics ├── Printing The Page │ ├── custom.js │ └── index.html ├── Cookies │ ├── custom.js │ └── index.html ├── Events │ ├── custom.js │ └── index.html ├── Dialog Box │ ├── custom.js │ └── index.html ├── Redirect Page │ ├── custom.js │ └── index.html ├── typeof Operator │ ├── custom.js │ └── index.html ├── Conditional Operator │ ├── custom.js │ └── index.html ├── void Operator │ ├── custom.js │ └── index.html ├── Comments │ ├── custom.js │ └── index.html ├── For Loop │ ├── custom.js │ └── index.html ├── noscript Tag │ ├── custom.js │ └── index.html ├── For In Loop │ ├── custom.js │ └── index.html ├── Strict Mode │ ├── custom.js │ └── index.html ├── Loops Advanced │ ├── custom.js │ └── index.html ├── Prompt Box │ ├── custom.js │ └── index.html ├── While Loop │ ├── custom.js │ └── index.html ├── Console Output │ ├── custom.js │ └── index.html ├── Functions │ ├── index.html │ └── custom.js ├── Variables │ ├── index.html │ └── custom.js ├── Do While Loop │ ├── index.html │ └── custom.js ├── Bitwise Operators │ ├── index.html │ └── custom.js ├── Conditional Statements │ ├── custom.js │ └── index.html ├── Logical Operators │ ├── index.html │ └── custom.js ├── Switch Statement │ ├── index.html │ └── custom.js ├── Arithmetic Operators │ ├── index.html │ └── custom.js ├── Assignment Operators │ ├── index.html │ └── custom.js └── Comparison Operators │ ├── index.html │ └── custom.js ├── [4] Classes ├── Simple Class │ ├── custom.js │ └── index.html ├── Functions │ ├── index.html │ └── custom.js ├── Variables │ ├── index.html │ └── custom.js ├── Super Keyword │ ├── index.html │ └── custom.js ├── Class Inheritance │ ├── index.html │ └── custom.js ├── Method Overriding │ ├── index.html │ └── custom.js ├── Static Functions │ ├── index.html │ └── custom.js └── instanceof Operator │ ├── index.html │ └── custom.js └── LICENSE /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Programming 2 | -------------------------------------------------------------------------------- /[1] Introduction & Setup/Setup/custom.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /[3] Objects/HTML DOM/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | -------------------------------------------------------------------------------- /[5] Advanced/AJAX/file.txt: -------------------------------------------------------------------------------- 1 | Hello Everybody, I'm Doctor Nick -------------------------------------------------------------------------------- /[5] Advanced/Animation/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | -------------------------------------------------------------------------------- /[5] Advanced/Image Map/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | -------------------------------------------------------------------------------- /[5] Advanced/Multimedia/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | -------------------------------------------------------------------------------- /[5] Advanced/Validation/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | -------------------------------------------------------------------------------- /[2] Basics/Printing The Page/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /[2] Basics/Cookies/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /[2] Basics/Events/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /[2] Basics/Dialog Box/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /[2] Basics/Redirect Page/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /[5] Advanced/Variable Hoisting/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | num = 10; 5 | console.log(num); 6 | var num; 7 | -------------------------------------------------------------------------------- /[5] Advanced/Modules/src/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | import { HelloWorld } from "./custom.js"; 4 | 5 | HelloWorld(); 6 | -------------------------------------------------------------------------------- /[5] Advanced/Image Map/planets.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/JavaScript-Programming/HEAD/[5] Advanced/Image Map/planets.gif -------------------------------------------------------------------------------- /[5] Advanced/Modules/src/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | export function HelloWorld() { 4 | console.log("Hello World"); 5 | } 6 | -------------------------------------------------------------------------------- /[5] Advanced/Browser Navigator/planets.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nirzaf/JavaScript-Programming/HEAD/[5] Advanced/Browser Navigator/planets.gif -------------------------------------------------------------------------------- /[2] Basics/typeof Operator/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = 10001; 4 | var var2 = "Hello World" 5 | 6 | console.log(typeof var1); 7 | console.log(typeof var2); -------------------------------------------------------------------------------- /[3] Objects/Boolean/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = false; 4 | var boolObj = new Boolean(false); 5 | 6 | console.log(var1); 7 | console.log(boolObj.valueOf()); -------------------------------------------------------------------------------- /[2] Basics/Conditional Operator/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var num1 = 100; 4 | var num2 = 100; 5 | 6 | var result = (num1 < num2) ? "yay" : "nay"; 7 | 8 | console.log(result); -------------------------------------------------------------------------------- /[2] Basics/void Operator/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | void function VoidFunc() 4 | { 5 | console.log("Hi"); 6 | } (); 7 | 8 | VoidFunc(); 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /[5] Advanced/Anonymous Function/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | var epicVar = function() 6 | { 7 | console.log("Hello World"); 8 | } 9 | 10 | epicVar(); 11 | 12 | 13 | -------------------------------------------------------------------------------- /[5] Advanced/Arrow & Lambda Functions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | var epicVar = () => 6 | { 7 | console.log("Hello World"); 8 | } 9 | 10 | epicVar(); 11 | 12 | 13 | -------------------------------------------------------------------------------- /[5] Advanced/Function Hoisting/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | EpicFunc(); 4 | 5 | function EpicFunc() 6 | { 7 | console.log("Hello World"); 8 | } 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[2] Basics/Comments/custom.js: -------------------------------------------------------------------------------- 1 | 2 | // Hello this is an epic variable 3 | //var i = 9; 4 | 5 | /* 6 | var i1 = 1; 7 | var i2 = 1; 8 | var i3 = 1; 9 | var i4 = 1; 10 | */ 11 | 12 | var i5 = 9; -------------------------------------------------------------------------------- /[2] Basics/For Loop/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | for (var i = 0; i <= 100; i += 2) 4 | { 5 | console.log("This is position: " + i); 6 | } 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /[2] Basics/noscript Tag/custom.js: -------------------------------------------------------------------------------- 1 | 2 | // Hello this is an epic variable 3 | //var i = 9; 4 | 5 | /* 6 | var i1 = 1; 7 | var i2 = 1; 8 | var i3 = 1; 9 | var i4 = 1; 10 | */ 11 | 12 | var i5 = 9; -------------------------------------------------------------------------------- /[3] Objects/Number/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var i = new Number(67.463098); 4 | 5 | console.log(i); 6 | console.log(i.toPrecision(3)); 7 | console.log(i.toString()); 8 | 9 | console.log(Number.MAX_VALUE); -------------------------------------------------------------------------------- /[5] Advanced/Browser Navigator/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | console.log(navigator.javaEnabled()); 4 | console.log(navigator.onLine); 5 | console.log(navigator.deviceMemory); 6 | console.log(navigator.vendor); -------------------------------------------------------------------------------- /[3] Objects/Date/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var dateObj = new Date(); 4 | 5 | console.log(dateObj); 6 | console.log(dateObj.getFullYear()); 7 | console.log(dateObj.toString()); 8 | console.log(dateObj.toTimeString()); -------------------------------------------------------------------------------- /[3] Objects/Math/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | console.log(Math.PI); 5 | 6 | console.log(Math.pow(12, 2)); 7 | 8 | console.log(Math.round(345.6)); 9 | 10 | console.log(Math.sqrt(144)); 11 | console.log(Math.sqrt(12)); -------------------------------------------------------------------------------- /[3] Objects/Regular Expressions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var re = /(\w+)\s(\w+)/; 4 | var string = "JKohn Smith"; 5 | 6 | console.log(string); 7 | 8 | var result = string.replace(re, '$2, $1'); 9 | 10 | console.log(result); -------------------------------------------------------------------------------- /[2] Basics/For In Loop/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var amazingObject = {frahaan: 1, b: 2, c: 3, d: 4}; 4 | 5 | for (var item in amazingObject) 6 | { 7 | console.log(item + " : " + amazingObject[item]); 8 | } 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /[2] Basics/Strict Mode/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Hello this is an epic variable 4 | //var i = 9; 5 | 6 | /* 7 | var i1 = 1; 8 | var i2 = 1; 9 | var i3 = 1; 10 | var i4 = 1; 11 | */ 12 | 13 | var helloWorld = 9; 14 | 15 | helloWorid = 8; -------------------------------------------------------------------------------- /[5] Advanced/Set Collection/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var st = new Set([1, 2, 3, 5, 5]); 4 | 5 | console.log(st); 6 | console.log(st.has(5)); 7 | console.log(st.has(9)); 8 | 9 | for (let item of st) 10 | { 11 | console.log(item); 12 | } -------------------------------------------------------------------------------- /[2] Basics/Loops Advanced/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | for (var i = 0; i <= 100; i += 2) 4 | { 5 | if (i === 50) 6 | { 7 | //break; 8 | continue; 9 | } 10 | 11 | console.log("This is position for I: " + i); 12 | } 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /[5] Advanced/JavaScript URI/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | var uri = "my test.asp?name=ståle&car=saab"; 5 | var result = encodeURI(uri); 6 | 7 | console.log(uri); 8 | console.log(result); 9 | 10 | var resultD = decodeURI(uri); 11 | 12 | console.log(resultD); -------------------------------------------------------------------------------- /[5] Advanced/Loop Labels/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | outsideTheLoop: 4 | for (var i = 0; i < 100; i++) 5 | { 6 | if (i === 80) 7 | { 8 | break outsideTheLoop; 9 | } 10 | 11 | console.log(i); 12 | } 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /[5] Advanced/Template Literals/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | var str = `Hello 5 | fsd 6 | f 7 | sdf 8 | s 9 | dfWorld`; 10 | 11 | var age = 26; 12 | 13 | var str2 = `My age is ${age * 7} and I am Batman`; 14 | 15 | console.log(str); 16 | console.log(str2); -------------------------------------------------------------------------------- /[2] Basics/Comments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | -------------------------------------------------------------------------------- /[5] Advanced/Function Constructor/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | 5 | var epicVar = () => 6 | { 7 | console.log("Hello World"); 8 | } 9 | 10 | 11 | var epicVar2 = new Function("x", "y", "console.log(x * y);"); 12 | 13 | 14 | 15 | epicVar(); 16 | epicVar2(5, 6); 17 | 18 | -------------------------------------------------------------------------------- /[2] Basics/Prompt Box/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Hello this is an epic variable 4 | //var i = 9; 5 | 6 | /* 7 | var i1 = 1; 8 | var i2 = 1; 9 | var i3 = 1; 10 | var i4 = 1; 11 | */ 12 | 13 | var awesome = prompt("Please enter your name", "Batman") 14 | 15 | console.log(awesome); -------------------------------------------------------------------------------- /[1] Introduction & Setup/Setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | -------------------------------------------------------------------------------- /[3] Objects/String/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = "Hello World"; 4 | var stringObj = new String("Hello World"); 5 | 6 | console.log(var1); 7 | console.log(stringObj); 8 | console.log(stringObj.length); 9 | console.log(stringObj.toUpperCase()); 10 | console.log(stringObj.valueOf()); -------------------------------------------------------------------------------- /[4] Classes/Simple Class/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Car 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | } 11 | } 12 | 13 | var carObj = new Car(56, 78); -------------------------------------------------------------------------------- /[4] Classes/Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[2] Basics/While Loop/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | for (var i = 1000; i <= 100; i += 2) 4 | { 5 | console.log("This is position for I: " + i); 6 | } 7 | 8 | var j = 0; 9 | 10 | while (j <= 100) 11 | { 12 | console.log("This is position for J: " + j); 13 | j += 2; 14 | } 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /[2] Basics/void Operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/Simple Class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/Super Keyword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[2] Basics/Console Output/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Hello this is an epic variable 4 | //var i = 9; 5 | 6 | /* 7 | var i1 = 1; 8 | var i2 = 1; 9 | var i3 = 1; 10 | var i4 = 1; 11 | */ 12 | 13 | var helloWorld = 9; 14 | 15 | console.log(helloWorld); 16 | console.log("Hello world"); 17 | console.log(5); -------------------------------------------------------------------------------- /[3] Objects/Date/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[3] Objects/Math/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[4] Classes/Class Inheritance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/Method Overriding/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/Static Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[4] Classes/instanceof Operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[5] Advanced/Error Handling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /[3] Objects/Arrays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[3] Objects/Boolean/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[3] Objects/Number/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[3] Objects/String/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[5] Advanced/AJAX/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/AJAX/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var xhttp = new XMLHttpRequest(); 4 | 5 | xhttp.onreadystatechange = function() 6 | { 7 | if (this.readyState == 4 && this.status == 200) 8 | { 9 | console.log(this.responseText); 10 | } 11 | }; 12 | 13 | xhttp.open("GET", "file.txt", true); 14 | xhttp.send(); 15 | -------------------------------------------------------------------------------- /[5] Advanced/Promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[3] Objects/Regular Expressions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[5] Advanced/Block Scope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/JavaScript URI/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Loop Labels/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Map Collection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Modules/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Parcel Sandbox 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /[5] Advanced/Set Collection/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[2] Basics/For Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[5] Advanced/Anonymous Function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Function Constructor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Function Hoisting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Generator Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Template Literals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Variable Hoisting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[2] Basics/Console Output/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Do While Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/For In Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Loops Advanced/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Prompt Box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Strict Mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/While Loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/noscript Tag/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[5] Advanced/Arrow & Lambda Functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Browser Navigator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /[2] Basics/Bitwise Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Conditional Statements/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var num1 = 314; 4 | var num2 = 314; 5 | 6 | if (num1 < num2) 7 | { 8 | console.log("Num1 is less than Num2"); 9 | } 10 | else if (num1 > num2) 11 | { 12 | console.log("Num1 is greater than Num2"); 13 | } 14 | else 15 | { 16 | console.log("Default fallback code"); 17 | } -------------------------------------------------------------------------------- /[2] Basics/Logical Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Switch Statement/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/typeof Operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[5] Advanced/Block Scope/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function EpicFunc() 4 | { 5 | var epicNum = 789; 6 | 7 | console.log(epicNum); 8 | 9 | { 10 | let epicNum = 800; 11 | console.log(epicNum); 12 | } 13 | 14 | console.log(epicNum); 15 | } 16 | 17 | EpicFunc(); 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /[2] Basics/Arithmetic Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Assignment Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Comparison Operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Conditional Operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Conditional Statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello World

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /[2] Basics/Bitwise Operators/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var num1 = 27; 4 | var num2 = 22; 5 | 6 | // AND operator & 7 | console.log(num1 & num2); 8 | 9 | // 27 in binary 10 | 11 | // 16 8 4 2 1 12 | // 1 1 0 1 1 13 | 14 | // 22 in binary 15 | 16 | // 16 8 4 2 1 17 | // 1 0 1 1 0 18 | 19 | // 1 1 0 1 1 20 | // 1 0 1 1 0 21 | // 1 0 0 1 0 -------------------------------------------------------------------------------- /[5] Advanced/Immediately Invoked Function Expressions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /[5] Advanced/Error Handling/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var num1 = 9; 4 | var num2 = 0; 5 | 6 | try 7 | { 8 | if (num2 === 0) 9 | { 10 | throw("You cannot divide by zero dammit"); 11 | } 12 | else 13 | { 14 | console.log(num1 / num2); 15 | } 16 | } 17 | catch (error) 18 | { 19 | console.log(error); 20 | } 21 | finally 22 | { 23 | console.log("This is code is immortal!!!"); 24 | } -------------------------------------------------------------------------------- /[5] Advanced/Modules/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parcel-sandbox", 3 | "version": "1.0.0", 4 | "description": "Simple Parcel Sandbox", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /[2] Basics/Variables/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Hello this is an epic variable 4 | //var i = 9; 5 | 6 | /* 7 | var i1 = 1; 8 | var i2 = 1; 9 | var i3 = 1; 10 | var i4 = 1; 11 | */ 12 | 13 | { 14 | var helloWorld = 9; 15 | } 16 | 17 | console.log(helloWorld); 18 | 19 | helloWorld = "Hello World"; 20 | 21 | console.log(helloWorld); 22 | 23 | { 24 | let hello = 5; 25 | } 26 | 27 | console.log(hello); -------------------------------------------------------------------------------- /[2] Basics/Logical Operators/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = false; 4 | var var2 = false; 5 | 6 | // AND operator && 7 | console.log(var1 && var2); 8 | 9 | // OR operator || 10 | console.log(var1 || var2); 11 | 12 | // NOT operator ! 13 | console.log(!var1); 14 | 15 | 16 | var num1 = 9; 17 | var num2 = 10; 18 | var num3 = 11; 19 | var num4 = 11; 20 | 21 | console.log((num1 < num2) && (num3 == num4)); -------------------------------------------------------------------------------- /[2] Basics/Do While Loop/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | for (var i = 1000; i <= 100; i += 2) 4 | { 5 | console.log("This is position for I: " + i); 6 | } 7 | 8 | var j = 1000; 9 | 10 | while (j <= 100) 11 | { 12 | console.log("This is position for J: " + j); 13 | j += 2; 14 | } 15 | 16 | var k = 1000; 17 | 18 | do 19 | { 20 | console.log("This is position for K: " + k); 21 | k += 2; 22 | } while (k <= 100) 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /[2] Basics/Events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 |

Hello World

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /[2] Basics/Redirect Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 |

Sonar Systems

16 | 17 | 18 | -------------------------------------------------------------------------------- /[2] Basics/Printing The Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 |

Hello world

16 | 17 |
Print the page
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /[4] Classes/Variables/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Car 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | } 15 | 16 | var carObj = new Car(56, 78); 17 | var carObj2 = new Car(90, 0); 18 | 19 | console.log("(" + carObj.x + ", " + carObj.y + ")"); 20 | console.log("(" + carObj2.x + ", " + carObj2.y + ")"); -------------------------------------------------------------------------------- /[5] Advanced/Map Collection/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var mp = new Map(); 4 | mp.set("Key1", "Hello World"); 5 | mp.set("1", "Number 1"); 6 | 7 | console.log(mp); 8 | console.log(mp.get("Key1")); 9 | console.log(mp.get("1")); 10 | console.log(mp.has("1")); 11 | 12 | var mp2 = new Map( 13 | [ 14 | ["k1", "value1"], 15 | ["k2", "value2"], 16 | ["k3", "value3"] 17 | ]); 18 | 19 | console.log(mp2); 20 | 21 | for (let i of mp2.entries()) 22 | { 23 | console.log(`${i[0]} - ${i[1]}`); 24 | } -------------------------------------------------------------------------------- /[5] Advanced/Generator Functions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | function *Favourites() 5 | { 6 | var pizza = yield "What is your favourite pizza?"; 7 | var game = yield "What is your favourite game"; 8 | var movie = yield "What is your favourite movie"; 9 | 10 | console.log(pizza + " " + game + " " + movie); 11 | } 12 | 13 | var q = Favourites(); 14 | console.log(q.next()); 15 | console.log(q.next("Cheese")); 16 | console.log(q.next("Half-Life")); 17 | console.log(q.next("The Dark Knight")); -------------------------------------------------------------------------------- /[2] Basics/Comparison Operators/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = 9; 4 | var var2 = '9'; 5 | 6 | // Equal == 7 | console.log(var1 == var2); 8 | // Equal === 9 | console.log(var1 === var2); 10 | 11 | // Not Equal != 12 | console.log(var1 != var2); 13 | 14 | // Greater than > 15 | console.log(var1 > var2); 16 | 17 | // Less than < 18 | console.log(var1 < var2); 19 | 20 | // Greater than or equal to >= 21 | console.log(var1 >= var2); 22 | 23 | // Less than or equal to <= 24 | console.log(var1 <= var2); -------------------------------------------------------------------------------- /[5] Advanced/Immediately Invoked Function Expressions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | 4 | var EpicFunc = function() 5 | { 6 | var EpicLoop = function() 7 | { 8 | for (var i = 0; i < 10; i++) 9 | { 10 | console.log(i); 11 | } 12 | }(); 13 | 14 | console.log(i); 15 | } 16 | 17 | var EpicFunc2 = function() 18 | { 19 | (function() 20 | { 21 | for (var i = 0; i < 10; i++) 22 | { 23 | console.log(i); 24 | } 25 | })(); 26 | 27 | console.log(i); 28 | } 29 | 30 | //EpicFunc(); 31 | EpicFunc2(); -------------------------------------------------------------------------------- /[2] Basics/Cookies/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 | 19 | 20 |

Set Cookie

21 | 22 |

Get Cookie

23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /[2] Basics/Dialog Box/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 17 | 18 | 19 | 20 | 21 | 22 |

Alert

23 |

Confirm

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /[3] Objects/HTML DOM/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 11 | 12 |
Hello World
13 | 14 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /[4] Classes/Functions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Car 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | EpicFun() 16 | { 17 | console.log("This is an epic function"); 18 | } 19 | } 20 | 21 | var carObj = new Car(56, 78); 22 | var carObj2 = new Car(90, 0); 23 | 24 | console.log("(" + carObj.x + ", " + carObj.y + ")"); 25 | console.log("(" + carObj2.x + ", " + carObj2.y + ")"); 26 | 27 | carObj.EpicFun(); 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /[2] Basics/Switch Statement/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var awesomeVar = 0; 4 | 5 | switch (awesomeVar) 6 | { 7 | case 0: 8 | console.log("This is 0"); 9 | break; 10 | 11 | case 1: 12 | console.log("This is 1"); 13 | break; 14 | 15 | case 2: 16 | console.log("This is 2"); 17 | break; 18 | 19 | case 3: 20 | console.log("This is 3"); 21 | break; 22 | 23 | case 4: 24 | console.log("This is 4"); 25 | break; 26 | 27 | case 5: 28 | console.log("This is 5"); 29 | break; 30 | 31 | default: 32 | console.log("This is the default value"); 33 | break; 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /[5] Advanced/Promises/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | function Divide(num1, num2) 4 | { 5 | var promise = new Promise(function(resolve, reject) 6 | { 7 | if (num2 !== 0) 8 | { 9 | resolve(num1 / num2); 10 | } 11 | else 12 | { 13 | reject("It didn't work"); 14 | } 15 | }); 16 | 17 | return promise; 18 | } 19 | 20 | Divide(5, 0) 21 | .then( 22 | function(result) { 23 | console.log(result); 24 | return Divide(6, 7); 25 | }, 26 | function(err) { 27 | console.log(err); 28 | }) 29 | .then( 30 | function(result) { 31 | console.log(result); 32 | }, 33 | function(err) { 34 | console.log(err); 35 | }); 36 | -------------------------------------------------------------------------------- /[2] Basics/Assignment Operators/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Assignment operator 4 | var var1 = 9; 5 | console.log(var1); 6 | 7 | // Add Assignment operator 8 | var var2 = 9; 9 | var2 += 6; 10 | console.log(var2); 11 | 12 | // Subtract Assignment operator 13 | var var3 = 9; 14 | var3 -= 6; 15 | console.log(var3); 16 | 17 | // Multiplication Assignment operator 18 | var var4 = 9; 19 | var4 *= 6; 20 | console.log(var4); 21 | 22 | // Division Assignment operator 23 | var var5 = 9; 24 | var5 /= 6; 25 | console.log(var5); 26 | 27 | // Modulus Assignment operator 28 | var var6 = 9; 29 | var6 %= 6; 30 | console.log(var6); 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /[2] Basics/Functions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Hello this is an epic variable 4 | //var i = 9; 5 | 6 | /* 7 | var i1 = 1; 8 | var i2 = 1; 9 | var i3 = 1; 10 | var i4 = 1; 11 | */ 12 | 13 | function AwesomeFunc() 14 | { 15 | console.log("Hello"); 16 | console.log("and"); 17 | console.log("Goodbye"); 18 | } 19 | 20 | function Sum(num1, num2) 21 | { 22 | var result = num1 + num2; 23 | 24 | console.log(result); 25 | } 26 | 27 | function SumReturn(num1, num2) 28 | { 29 | var result = num1 + num2; 30 | 31 | return result; 32 | } 33 | 34 | AwesomeFunc(); 35 | Sum(4, 7); 36 | console.log(SumReturn(5, 9)); 37 | 38 | var epicVar = SumReturn(2, 100); 39 | 40 | console.log(epicVar); 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /[4] Classes/Static Functions/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Car 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | EpicFun() 16 | { 17 | console.log("This is an epic function"); 18 | } 19 | 20 | static StaticFun() 21 | { 22 | console.log("This is epicly static."); 23 | } 24 | } 25 | 26 | var carObj = new Car(56, 78); 27 | var carObj2 = new Car(90, 0); 28 | 29 | console.log("(" + carObj.x + ", " + carObj.y + ")"); 30 | console.log("(" + carObj2.x + ", " + carObj2.y + ")"); 31 | 32 | carObj.EpicFun(); 33 | 34 | Car.StaticFun(); 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /[3] Objects/Arrays/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var var1 = 8; 4 | 5 | var arrName = [10, 20, 30, 40, 50, 60]; 6 | 7 | //console.log(arrName[0]); 8 | //console.log(arrName[1]); 9 | 10 | for (var i = 0; i < arrName.length; i++) 11 | { 12 | //console.log(arrName[i]); 13 | } 14 | 15 | var newArray = new Array(100); 16 | 17 | for (var i = 0; i < newArray.length; i++) 18 | { 19 | newArray[i] = i * i; 20 | } 21 | 22 | for (var i = 0; i < newArray.length; i++) 23 | { 24 | console.log(newArray[i]); 25 | } 26 | 27 | 28 | newArray.push("Hello World"); 29 | 30 | for (var i = 0; i < newArray.length; i++) 31 | { 32 | console.log(newArray[i]); 33 | } 34 | 35 | 36 | console.log(newArray.findIndex((x) => x == 9801)); 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /[2] Basics/Arithmetic Operators/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Addition operator 4 | console.log(4 + 8); 5 | 6 | // Subtraction operator 7 | console.log(4 - 8); 8 | 9 | // Multiplication operator 10 | console.log(4 * 8); 11 | 12 | // Division operator 13 | console.log(4 / 8); 14 | 15 | // Modulus operator 16 | console.log(7 % 3); 17 | 18 | var num = 10; 19 | 20 | console.log(num); 21 | 22 | // Increment operator 23 | num++; // num = num + 1 24 | 25 | console.log(num); 26 | 27 | var num2 = 10; 28 | 29 | console.log(num2); 30 | 31 | // Decrement operator 32 | num2--; // num2 = num2 - 1 33 | 34 | console.log(num2); 35 | 36 | 37 | var num3 = 10; 38 | 39 | console.log(num3); 40 | 41 | console.log(--num3); 42 | 43 | console.log(num3); 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /[4] Classes/instanceof Operator/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Car 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | EpicFun() 16 | { 17 | console.log("This is an epic function"); 18 | } 19 | 20 | static StaticFun() 21 | { 22 | console.log("This is epicly static."); 23 | } 24 | } 25 | 26 | class Bike 27 | { 28 | 29 | } 30 | 31 | var carObj = new Car(56, 78); 32 | var carObj2 = new Car(90, 0); 33 | 34 | var bikeObj = new Bike(); 35 | 36 | var isValid = carObj instanceof Car; 37 | var isValid2 = bikeObj instanceof Car; 38 | 39 | console.log(isValid); 40 | console.log(isValid2); 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /[4] Classes/Class Inheritance/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Vehicle 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | VehicleFunc() 16 | { 17 | console.log("This function is from the Vehicle class"); 18 | } 19 | } 20 | 21 | class Car extends Vehicle 22 | { 23 | EpicFun() 24 | { 25 | console.log("This is an epic function"); 26 | } 27 | 28 | static StaticFun() 29 | { 30 | console.log("This is epicly static."); 31 | } 32 | } 33 | 34 | class Bike extends Vehicle 35 | { 36 | 37 | } 38 | 39 | var carObj = new Car(56, 78); 40 | var carObj2 = new Car(90, 0); 41 | 42 | var bikeObj = new Bike(0, 0); 43 | 44 | bikeObj.VehicleFunc(); 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /[5] Advanced/Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 |
33 | 34 |
Click Me
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /[4] Classes/Method Overriding/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Vehicle 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | VehicleFunc() 16 | { 17 | console.log("This function is from the Vehicle class"); 18 | } 19 | } 20 | 21 | class Car extends Vehicle 22 | { 23 | EpicFun() 24 | { 25 | console.log("This is an epic function"); 26 | } 27 | 28 | static StaticFun() 29 | { 30 | console.log("This is epicly static."); 31 | } 32 | 33 | VehicleFunc() 34 | { 35 | console.log("This is the Car Class"); 36 | } 37 | } 38 | 39 | class Bike extends Vehicle 40 | { 41 | 42 | } 43 | 44 | var carObj = new Car(56, 78); 45 | var carObj2 = new Car(90, 0); 46 | 47 | var bikeObj = new Bike(0, 0); 48 | 49 | carObj.VehicleFunc(); 50 | bikeObj.VehicleFunc(); 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /[4] Classes/Super Keyword/custom.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | class Vehicle 4 | { 5 | constructor(x, y) 6 | { 7 | console.log("The x position is: " + x); 8 | console.log("The y position is: " + y); 9 | console.log("This is the constructor."); 10 | 11 | this.x = x; 12 | this.y = y; 13 | } 14 | 15 | VehicleFunc() 16 | { 17 | console.log("This function is from the Vehicle class"); 18 | } 19 | } 20 | 21 | class Car extends Vehicle 22 | { 23 | EpicFun() 24 | { 25 | console.log("This is an epic function"); 26 | } 27 | 28 | static StaticFun() 29 | { 30 | console.log("This is epicly static."); 31 | } 32 | 33 | VehicleFunc() 34 | { 35 | super.VehicleFunc(); 36 | console.log("This is the Car Class"); 37 | } 38 | } 39 | 40 | class Bike extends Vehicle 41 | { 42 | 43 | } 44 | 45 | var carObj = new Car(56, 78); 46 | var carObj2 = new Car(90, 0); 47 | 48 | var bikeObj = new Bike(0, 0); 49 | 50 | carObj.VehicleFunc(); 51 | //bikeObj.VehicleFunc(); 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /[5] Advanced/Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 |
24 | 25 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /[5] Advanced/Image Map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Planets 17 | 18 | 19 | Sun 25 | Mercury 30 | Venus 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /[5] Advanced/Multimedia/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 37 | 38 |
39 | 40 | 41 |
42 | 43 | 44 | 45 | --------------------------------------------------------------------------------